From dc8c3138d5c6bd91a060c22370977cb02dfe4e8d Mon Sep 17 00:00:00 2001
From: Lucas Phang <lucasphang98@gmail.com>
Date: Thu, 13 May 2021 18:04:04 +1000
Subject: [PATCH] Remove lines from dialog

---
 stylesheets/_modal.scss             | 47 +++++++++++++++++++++++------
 ts/components/OnionStatusDialog.tsx | 38 ++++++++++++++---------
 2 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss
index 18c0ae640..ced43ad30 100644
--- a/stylesheets/_modal.scss
+++ b/stylesheets/_modal.scss
@@ -323,10 +323,11 @@
     display: flex;
     align-items: center;
     flex-direction: column;
-    p {
+    line-height: 1.5em;
+
+    .onionDescriptionContainer {
       text-align: center;
       margin-top: 0;
-      line-height: 1.25em;
     }
 
     .onionPath {
@@ -335,6 +336,23 @@
       flex-direction: column;
       margin: 2em auto;
 
+      .dotContainer:not(:last-child) {
+        padding-bottom: 2em;
+
+        // .dot:after {
+        //   z-index: 1;
+        //   content: '';
+        //   position: relative;
+        //   top: 15px;
+        //   bottom: 0;
+        //   left: 7px;
+        //   @include themify($themes) {
+        //     border-left: 1px solid themed('textColor');
+        //   }
+        //   height: 2em;
+        // }
+      }
+
       .dotContainer {
         display: flex;
         align-items: center;
@@ -344,6 +362,7 @@
           margin-bottom: 0 !important;
           margin-top: 0;
           margin-left: 2em;
+          text-align: left;
         }
 
         .dot {
@@ -353,19 +372,27 @@
           border-radius: 50%;
           display: inline-block;
         }
+
+
       }
     }
 
-    .line {
-      height: 2em;
-      @include themify($themes) {
-        border-left: 1px solid themed('textColor');
-      }
-      display: flex;
-      align-self: flex-start;
-      margin-left: 7px;
+    .lineContainer {
+      height: 50px
+
     }
 
+    // .line {
+    //   height: 100%;
+    //   @include themify($themes) {
+    //     border-left: 1px solid themed('textColor');
+    //   }
+    //   display: relative;
+    //   // align-self: flex-start;
+    //   margin-left: 7px;
+    //   // z-index: -1;
+    // }
+
     // .dot:after {
     //   position: absolute;
     //   left: 0;
diff --git a/ts/components/OnionStatusDialog.tsx b/ts/components/OnionStatusDialog.tsx
index 7410e21ad..43104001c 100644
--- a/ts/components/OnionStatusDialog.tsx
+++ b/ts/components/OnionStatusDialog.tsx
@@ -45,40 +45,50 @@ export const OnionStatusDialog = (props: Props) => {
       onClose={onClose}
     >
       <div className="spacer-sm" />
-      <p>{window.i18n('onionPathIndicatorDescription')}</p>
-
+      <div className='onionDescriptionContainer'>
+        <p>{window.i18n('onionPathIndicatorDescription')}</p>
+      </div>
+      {/* <div className='lineContainer'>
+        <div className='line'></div>
+      </div> */}
+      {/* TODO: Figure out how to add a line */}
       <div className='onionPath'>
+
+
         <div className='dotContainer'>
           <div className='dot'></div>
-          <div className='nodeText'>You</div>
+          <p className='nodeText'><b>You</b></p>
         </div>
 
-        <div className='line'></div>
-        
+
         <div className='dotContainer'>
           <div className='dot'></div>
-          <div className='nodeText'>Entry Node<br/>Malaysia</div>
+          <p className='nodeText'><b>Entry Node</b><br />Malaysia</p>
         </div>
 
-        <div className='line'></div>
-        
+        {/* <div className='line'></div> */}
+
         <div className='dotContainer'>
           <div className='dot'></div>
-          <div className='nodeText'>START</div>
+          <p className='nodeText'><b>Service Node</b><br />
+            United States
+          </p>
         </div>
 
-        <div className='line'></div>
-        
+        {/* <div className='line'></div> */}
+
         <div className='dotContainer'>
           <div className='dot'></div>
-          <div className='nodeText'>START</div>
+          <p className='nodeText'><b>Service Node</b><br />
+            Australia
+          </p>
         </div>
 
-        <div className='line'></div>
+        {/* <div className='line'></div> */}
 
         <div className='dotContainer'>
           <div className='dot'></div>
-          <div className='nodeText'>START</div>
+          <p className='nodeText'><b>Destination</b></p>
         </div>
       </div>