Merge pull request #1735 from Bilb/vertical-line-onion

Vertical 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 {
@@ -1203,6 +1204,7 @@ input {
   flex-direction: column;
   margin: $session-margin-sm;
   align-items: flex-start;
+  position: relative;
 
   .onion__node {
     display: flex;
@@ -1210,14 +1212,41 @@ input {
     align-items: center;
     margin: $session-margin-xs;
 
-    * {
-      margin: $session-margin-sm;
+    &:nth-child(2) {
+      margin-top: 0;
+    }
+
+    &:nth-last-child(2) {
+      margin-bottom: 0;
     }
 
     .session-icon-button {
       margin: $session-margin-sm !important;
     }
   }
+
+  .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 {
+    background: $onionPathLineColor;
+    position: absolute;
+    height: calc(100% - 2 * 15px);
+    margin: 15px calc(100% / 2 - 1px);
+
+    width: 1px;
+    // 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,7 +8,6 @@ import Electron from 'electron';
 const { shell } = Electron;
 
 import { useDispatch, useSelector } from 'react-redux';
-import { StateType } from '../state/reducer';
 import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from './session/icon';
 
 import { SessionWrapperModal } from './session/SessionWrapperModal';
@@ -27,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;
@@ -56,53 +56,57 @@ const OnionPathModalInner = () => {
     <>
       <p className="onion__description">{window.i18n('onionPathIndicatorDescription')}</p>
       <div className="onion__node-list">
-        {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}
+    />
   );
 };
 
@@ -114,15 +118,17 @@ export const ModalStatusLight = (props: StatusLightType) => {
   const theme = useSelector(getTheme);
 
   return (
-    <SessionIcon
-      borderRadius={50}
-      iconColor={color}
-      glowDuration={glowDuration}
-      glowStartDelay={glowStartDelay}
-      iconType={SessionIconType.Circle}
-      iconSize={SessionIconSize.Small}
-      theme={theme}
-    />
+    <div className="onion__growing-icon">
+      <SessionIcon
+        borderRadius={50}
+        iconColor={color}
+        glowDuration={glowDuration}
+        glowStartDelay={glowStartDelay}
+        iconType={SessionIconType.Circle}
+        iconSize={SessionIconSize.Tiny}
+        theme={theme}
+      />
+    </div>
   );
 };
 
@@ -154,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]: {