From 53c88ce45acf1bb5cedfdea9e47d7d85beee4df7 Mon Sep 17 00:00:00 2001
From: Daniel <10026790+dnlggr@users.noreply.github.com>
Date: Fri, 10 Jun 2022 09:38:09 +0200
Subject: [PATCH] ui: tab dividers (#321)

* ui: tab dividers

* fix: hide dividers on mobile
---
 src/components/Navbar.jsx | 3 +++
 src/index.css             | 9 ++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index f61367c6..aa00da0f 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -51,6 +51,7 @@ const CenterNav = ({ makerRunning, cjRunning, onClick }) => {
           {t('navbar.tab_receive')}
         </NavLink>
       </rb.Nav.Item>
+      <div className="d-none d-md-flex align-items-center center-nav-link-divider">»</div>
       <rb.Nav.Item className="d-flex align-items-stretch">
         <NavLink
           to={routes.jam}
@@ -65,6 +66,7 @@ const CenterNav = ({ makerRunning, cjRunning, onClick }) => {
           </div>
         </NavLink>
       </rb.Nav.Item>
+      <div className="d-none d-md-flex align-items-center center-nav-link-divider">/</div>
       <rb.Nav.Item className="d-flex align-items-stretch">
         <NavLink
           to={routes.earn}
@@ -79,6 +81,7 @@ const CenterNav = ({ makerRunning, cjRunning, onClick }) => {
           </div>
         </NavLink>
       </rb.Nav.Item>
+      <div className="d-none d-md-flex align-items-center center-nav-link-divider">»</div>
       <rb.Nav.Item className="d-flex align-items-stretch">
         <NavLink
           to={routes.send}
diff --git a/src/index.css b/src/index.css
index a0c93fd5..5253d3f7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -301,15 +301,18 @@ main {
 
 @media only screen and (min-width: 768px) {
   .center-nav-link {
-    min-width: 80px;
-    padding: 8px 0 !important;
+    padding: 8px 1.5rem !important;
   }
 
   .center-nav-link.active {
-    padding: 8px 0 6px 0 !important;
+    padding: 8px 1.5rem 6px 1.5rem !important;
     border-bottom: 2px solid black;
   }
 
+  .center-nav-link-divider {
+    color: #bbbbbb;
+  }
+
   .leading-nav-link {
     padding: 8px !important;
   }