Settings: Adjusted styles for nested checkbox list (#5433)

src/components/ui/Checkbox.scss

@@ -86,7 +86,11 @@
   }
 
   .Checkbox-main {
-    flex: 1;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    align-items: center;
+    flex-grow: 1;
 
     &::before,
     &::after {
@@ -124,14 +128,18 @@
     }
 
     .right-icon {
+      grid-column: 2;
+      grid-row: span 2;
       margin-left: auto;
       margin-right: 0.5rem;
       color: var(--color-text-secondary);
       font-size: 1.25rem;
+      align-self: center;
     }
 
     .subLabel {
-      display: block;
+      grid-column: 1;
+      grid-row: 2;
       font-size: 0.875rem;
       line-height: 1rem;
       color: var(--color-text-secondary);

src/components/ui/Checkbox.tsx

@@ -155,9 +155,9 @@ const Checkbox: FC<OwnProps> = ({
             {leftElement}
             {typeof label === 'string' ? renderText(label) : label}
             {labelText && <span className="ml-1">{renderText(labelText)}</span>}
-            {rightIcon && <i className={`icon icon-${rightIcon} right-icon`} />}
           </span>
           {subLabel && <span className="subLabel" dir="auto">{renderText(subLabel)}</span>}
+          {rightIcon && <Icon name={rightIcon} className="right-icon" />}
         </div>
         {nestedCheckbox && (
           <span className="nestedButton" dir="auto">