Add CSS for Nodes and Lines

stylesheets/_modal.scss

@@ -328,5 +328,52 @@
       margin-top: 0;
       line-height: 1.25em;
     }
+
+    .onionPath {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      margin: 2em auto;
+
+      .dotContainer {
+        display: flex;
+        align-items: center;
+        width: 100%;
+
+        .nodeText {
+          margin-bottom: 0 !important;
+          margin-top: 0;
+          margin-left: 2em;
+        }
+
+        .dot {
+          height: 15px;
+          width: 15px;
+          background-color: $color-loki-green;
+          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;
+    }
+
+    // .dot:after {
+    //   position: absolute;
+    //   left: 0;
+    //   top: 0;
+    //   content: '';
+    //   border-left: 2px solid black;
+    //   margin-left: 5px;
+    //   height: 100%;
+    // }
   }
-}
+}

ts/components/OnionStatusDialog.tsx

@@ -14,7 +14,7 @@ import { DefaultTheme } from 'styled-components';
 import { MAX_USERNAME_LENGTH } from './session/registration/RegistrationTabs';
 import { SessionSpinner } from './session/SessionSpinner';
 import electron from 'electron';
-const {shell} = electron;
+const { shell } = electron;
 interface State {
   profileName: string;
   setProfileName: string;
@@ -47,6 +47,41 @@ export const OnionStatusDialog = (props: Props) => {
       <div className="spacer-sm" />
       <p>{window.i18n('onionPathIndicatorDescription')}</p>
 
+      <div className='onionPath'>
+        <div className='dotContainer'>
+          <div className='dot'></div>
+          <div className='nodeText'>You</div>
+        </div>
+
+        <div className='line'></div>
+        
+        <div className='dotContainer'>
+          <div className='dot'></div>
+          <div className='nodeText'>Entry Node<br/>Malaysia</div>
+        </div>
+
+        <div className='line'></div>
+        
+        <div className='dotContainer'>
+          <div className='dot'></div>
+          <div className='nodeText'>START</div>
+        </div>
+
+        <div className='line'></div>
+        
+        <div className='dotContainer'>
+          <div className='dot'></div>
+          <div className='nodeText'>START</div>
+        </div>
+
+        <div className='line'></div>
+
+        <div className='dotContainer'>
+          <div className='dot'></div>
+          <div className='nodeText'>START</div>
+        </div>
+      </div>
+
       <SessionButton
         text={window.i18n('learnMore')}
         buttonType={SessionButtonType.BrandOutline}