Updated position of check, arrow in ListItem

• Updated:
- position of check, arrow in ListItem

app/javascript/gabsocial/components/list_item.js

@@ -85,6 +85,13 @@ class ListItem extends React.PureComponent {
       maxW100PC42PX: !hideArrow || showActive,
     })
 
+    const arrowClasses = CX({
+      mlAuto: !showActive,
+      ml10: showActive,
+      cSecondary: 1,
+      flexShrink1: 1,
+    })
+
     return (
       <Button
         to={to}
@@ -126,21 +133,21 @@ class ListItem extends React.PureComponent {
           }
         </div>
 
-        {
-          !hideArrow &&
-          <Icon
-            id={!!actionIcon ? actionIcon : 'angle-right'}
-            size='10px'
-            className={[_s.mlAuto, _s.cSecondary, _s.flexShrink1].join(' ')}
-          />
-        }
-
         {
           !!showActive &&
           <input
             type='radio'
             checked={isActive}
-            className={[_s.mlAuto, _s.flexShrink1].join(' ')}
+            className={[_s.mlAuto, _s.flexShrink1, _s.mt0].join(' ')}
+          />
+        }
+
+        {
+          !hideArrow &&
+          <Icon
+            id={!!actionIcon ? actionIcon : 'angle-right'}
+            size='10px'
+            className={arrowClasses}
           />
         }
       </Button>

app/javascript/styles/global.css

@@ -831,6 +831,7 @@ pre {
 .mt10 { margin-top: 10px; }
 .mt5 { margin-top: 5px; }
 .mt2 { margin-top: 2px; }
+.mt0 { margin-top: 0; }
 .mtAuto { margin-top: auto; }
 .mtNeg5PX { margin-top: -5px; }
 .mtNeg26PX { margin-top: -26px; }