vertical line wip.

stylesheets/_session.scss

@@ -1211,25 +1211,34 @@ input {
     align-items: center;
     margin: $session-margin-xs;
 
-    * {
+    &__country {
       margin: $session-margin-sm;
     }
 
+    &__growing-icon {
+      position: relative;
+      width: 20px;
+      height: 20px svg {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
     .session-icon-button {
       margin: $session-margin-sm !important;
     }
   }
 
-    .onion__vertical-line {
+  .onion__vertical-line {
-      border-left: 2px solid rgba($color: #585858, $alpha: 1.0);
+    border-left: 2px solid $onionPathLineColor;
-      height: 185px;
+    height: 182px;
-      position: absolute;
+    position: absolute;
-      left: 22px;
+    left: 11px;
-
+    top: 22px;
-      // node item padding (i.e. one destination) + icon padding + half sessionIcon.small height
+    z-index: -1;
-      top: 23.35px;
+  }
-      z-index: -1;
-    }
 }
 
 .session-nickname-wrapper {

stylesheets/themes.scss

@@ -11,6 +11,8 @@ $borderLightTheme: #f1f1f1; // search for references on ts TODO: make this expos
 $borderDarkTheme: rgba($white, 0.06);
 $inputBackgroundColor: #8e8e93;
 
+$onionPathLineColor: rgba(#7a7a7a, 0.6);
+
 $borderAvatarColor: unquote(
   '#00000059'
 ); // search for references on ts TODO: make this exposed on ts

ts/components/OnionStatusPathDialog.tsx

@@ -8,8 +8,12 @@ import Electron from 'electron';
 const { shell } = Electron;
 
 import { useDispatch, useSelector } from 'react-redux';
-import { StateType } from '../state/reducer';
+import {
-import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from './session/icon';
+  SessionIcon,
+  SessionIconButton,
+  SessionIconSize,
+  SessionIconType,
+} from './session/icon';
 
 import { SessionWrapperModal } from './session/SessionWrapperModal';
 
@@ -56,7 +60,7 @@ const OnionPathModalInner = () => {
     <>
       <p className="onion__description">{window.i18n('onionPathIndicatorDescription')}</p>
       <div className="onion__node-list">
-              <div className="onion__vertical-line" />
+        <div className="onion__vertical-line" />
         {nodes.map((snode: Snode | any, index: number) => {
           return (
             <>
@@ -102,7 +106,7 @@ export const OnionNodeStatusLight = (props: OnionNodeStatusLightType): JSX.Eleme
       />
       {labelText ? (
         <>
-          <div className="onion-node__country">{labelText}</div>
+          <div className="onion__node__country">{labelText}</div>
         </>
       ) : null}
     </div>
@@ -117,15 +121,17 @@ export const ModalStatusLight = (props: StatusLightType) => {
   const theme = useSelector(getTheme);
 
   return (
-    <SessionIcon
+    <div className="onion__growing-icon">
-      borderRadius={50}
+      <SessionIcon
-      iconColor={color}
+        borderRadius={50}
-      glowDuration={glowDuration}
+        iconColor={color}
-      glowStartDelay={glowStartDelay}
+        glowDuration={glowDuration}
-      iconType={SessionIconType.Circle}
+        glowStartDelay={glowStartDelay}
-      iconSize={SessionIconSize.Small}
+        iconType={SessionIconType.Circle}
-      theme={theme}
+        iconSize={SessionIconSize.Small}
-    />
+        theme={theme}
+      />
+    </div>
   );
 };