From fe474425ba85b5ba3a792025fe4e1d6ef4c88675 Mon Sep 17 00:00:00 2001
From: Warrick Corfe-Tan <warrickct@gmail.com>
Date: Mon, 28 Jun 2021 11:30:22 +1000
Subject: [PATCH] wip vertical line.

---
 stylesheets/_session.scss               | 12 ++++++++++++
 ts/components/OnionStatusPathDialog.tsx | 17 ++++++++++-------
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 4fbf56b6e..a4cc3aca1 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -1203,6 +1203,7 @@ input {
   flex-direction: column;
   margin: $session-margin-sm;
   align-items: flex-start;
+  position: relative;
 
   .onion__node {
     display: flex;
@@ -1218,6 +1219,17 @@ input {
       margin: $session-margin-sm !important;
     }
   }
+
+    .onion__vertical-line {
+      border-left: 2px solid rgba($color: #585858, $alpha: 1.0);
+      height: 185px;
+      position: absolute;
+      left: 22px;
+
+      // node item padding (i.e. one destination) + icon padding + half sessionIcon.small height
+      top: 23.35px;
+      z-index: -1;
+    }
 }
 
 .session-nickname-wrapper {
diff --git a/ts/components/OnionStatusPathDialog.tsx b/ts/components/OnionStatusPathDialog.tsx
index 93fb7f0f5..2da17bf5c 100644
--- a/ts/components/OnionStatusPathDialog.tsx
+++ b/ts/components/OnionStatusPathDialog.tsx
@@ -56,15 +56,18 @@ 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}
-            />
+            <>
+              <OnionNodeStatusLight
+                glowDuration={glowDuration}
+                glowStartDelay={index}
+                label={snode.label}
+                snode={snode}
+                key={index}
+              />
+            </>
           );
         })}
       </div>