fix line on onion path modal

stylesheets/_session.scss

@@ -470,6 +470,7 @@ label {
     }
     &__close > div {
       float: left;
+      padding: $session-margin-xs;
       margin: 0px;
     }
     &__icons > div {
@@ -1211,19 +1212,12 @@ input {
     align-items: center;
     margin: $session-margin-xs;
 
-    &__country {
-      margin: $session-margin-sm;
+    &:nth-child(2) {
+      margin-top: 0;
     }
 
-    &__growing-icon {
-      position: relative;
-      width: 20px;
-      height: 20px svg {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-      }
+    &:nth-last-child(2) {
+      margin-bottom: 0;
     }
 
     .session-icon-button {
@@ -1231,13 +1225,27 @@ input {
     }
   }
 
+  .onion__node-list-lights {
+    position: relative;
+  }
+  .onion__node__country {
+    margin: $session-margin-sm;
+  }
+
+  .onion__growing-icon {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+  }
+
   .onion__vertical-line {
-    border-left: 2px solid $onionPathLineColor;
-    height: 182px;
+    background: $onionPathLineColor;
     position: absolute;
-    left: 11px;
-    top: 22px;
-    z-index: -1;
+    height: calc(100% - 2 * 15px);
+    margin: 15px calc(100% / 2 - 1px);
+
+    width: 1px;
+    // z-index: -1;
   }
 }
 

ts/components/OnionStatusPathDialog.tsx

@@ -8,12 +8,7 @@ import Electron from 'electron';
 const { shell } = Electron;
 
 import { useDispatch, useSelector } from 'react-redux';
-import {
-  SessionIcon,
-  SessionIconButton,
-  SessionIconSize,
-  SessionIconType,
-} from './session/icon';
+import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from './session/icon';
 
 import { SessionWrapperModal } from './session/SessionWrapperModal';
 
@@ -31,6 +26,7 @@ import {
 // tslint:disable-next-line: no-submodule-imports
 import useNetworkState from 'react-use/lib/useNetworkState';
 import { SessionSpinner } from './session/SessionSpinner';
+import { Flex } from './basic/Flex';
 
 export type StatusLightType = {
   glowStartDelay: number;
@@ -60,56 +56,57 @@ const OnionPathModalInner = () => {
     <>
       <p className="onion__description">{window.i18n('onionPathIndicatorDescription')}</p>
       <div className="onion__node-list">
-        <div className="onion__vertical-line" />
-        {nodes.map((snode: Snode | any, index: number) => {
-          return (
-            <>
-              <OnionNodeStatusLight
-                glowDuration={glowDuration}
-                glowStartDelay={index}
-                label={snode.label}
-                snode={snode}
-                key={index}
-              />
-            </>
-          );
-        })}
+        <Flex container={true}>
+          <div className="onion__node-list-lights">
+            <div className="onion__vertical-line" />
+
+            <Flex container={true} flexDirection="column" alignItems="center" height="100%">
+              {nodes.map((_snode: Snode | any, index: number) => {
+                return (
+                  <OnionNodeStatusLight
+                    glowDuration={glowDuration}
+                    glowStartDelay={index}
+                    key={index}
+                  />
+                );
+              })}
+            </Flex>
+          </div>
+          <Flex container={true} flexDirection="column" alignItems="flex-start">
+            {nodes.map((snode: Snode | any, index: number) => {
+              let labelText = snode.label
+                ? snode.label
+                : countryLookup.byIso(ip2country(snode.ip))?.country;
+              if (!labelText) {
+                labelText = window.i18n('unknownCountry');
+              }
+              return labelText ? <div className="onion__node__country">{labelText}</div> : null;
+            })}
+          </Flex>
+        </Flex>
       </div>
     </>
   );
 };
 
 export type OnionNodeStatusLightType = {
-  snode: Snode;
-  label?: string;
   glowStartDelay: number;
   glowDuration: number;
 };
 
 /**
- * Component containing a coloured status light and an adjacent country label.
+ * Component containing a coloured status light.
  */
 export const OnionNodeStatusLight = (props: OnionNodeStatusLightType): JSX.Element => {
-  const { snode, label, glowStartDelay, glowDuration } = props;
+  const { glowStartDelay, glowDuration } = props;
   const theme = useTheme();
 
-  let labelText = label ? label : countryLookup.byIso(ip2country(snode.ip))?.country;
-  if (!labelText) {
-    labelText = window.i18n('unknownCountry');
-  }
   return (
-    <div className="onion__node">
-      <ModalStatusLight
-        glowDuration={glowDuration}
-        glowStartDelay={glowStartDelay}
-        color={theme.colors.accent}
-      />
-      {labelText ? (
-        <>
-          <div className="onion__node__country">{labelText}</div>
-        </>
-      ) : null}
-    </div>
+    <ModalStatusLight
+      glowDuration={glowDuration}
+      glowStartDelay={glowStartDelay}
+      color={theme.colors.accent}
+    />
   );
 };
 
@@ -128,7 +125,7 @@ export const ModalStatusLight = (props: StatusLightType) => {
         glowDuration={glowDuration}
         glowStartDelay={glowStartDelay}
         iconType={SessionIconType.Circle}
-        iconSize={SessionIconSize.Small}
+        iconSize={SessionIconSize.Tiny}
         theme={theme}
       />
     </div>
@@ -163,7 +160,7 @@ export const ActionPanelOnionStatusLight = (props: {
 
   return (
     <SessionIconButton
-      iconSize={SessionIconSize.Medium}
+      iconSize={SessionIconSize.Small}
       iconType={SessionIconType.Circle}
       iconColor={iconColor}
       onClick={handleClick}

ts/components/session/icon/Icons.tsx

@@ -102,8 +102,12 @@ export const icons = {
     ratio: 1,
   },
   [SessionIconType.Circle]: {
-    path: 'M 100, 100m -75, 0a 75,75 0 1,0 150,0a 75,75 0 1,0 -150,0',
-    viewBox: '0 0 200 200',
+    path: '\
+    M 0, 50\
+    a 50,50 0 1,1 100,0\
+    a 50,50 0 1,1 -100,0\
+  ',
+    viewBox: '0 0 100 100',
     ratio: 1,
   },
   [SessionIconType.CircleCheck]: {