From 1fc14107c831ed81685758144e115dc3d9c16a05 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Wed, 20 May 2020 21:10:56 -0700
Subject: [PATCH] fix: tweak nav indicator so it's a bit more prominent (#1788)

---
 src/routes/_components/NavItem.html | 20 ++++++++++++++++----
 src/scss/themes/_base.scss          |  2 ++
 src/scss/variables.scss             |  6 ++++--
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/routes/_components/NavItem.html b/src/routes/_components/NavItem.html
index 55fa3374..93f6e9ee 100644
--- a/src/routes/_components/NavItem.html
+++ b/src/routes/_components/NavItem.html
@@ -12,7 +12,9 @@
     />
     <span class="nav-link-label">{label}</span>
   </div>
-  <div class="nav-indicator" ref:indicator></div>
+  <div class="nav-indicator-wrapper">
+    <div class="nav-indicator" ref:indicator></div>
+  </div>
 </a>
 <style>
   .main-nav-link {
@@ -40,10 +42,16 @@
     background: var(--nav-a-selected-bg-hover);
   }
 
-  .nav-indicator {
+  .nav-indicator-wrapper {
     width: 100%;
     height: var(--nav-indicator-height);
     background: var(--nav-a-border);
+    display: flex;
+  }
+
+  .nav-indicator {
+    flex: 1;
+    background: var(--nav-a-border);
     transform-origin: left;
   }
 
@@ -56,12 +64,16 @@
     background: var(--nav-a-border-hover);
   }
 
+  .main-nav-link.selected .nav-indicator-wrapper {
+    background: var(--nav-a-border-hover);
+  }
+
   .main-nav-link.selected .nav-indicator {
-    background: var(--nav-a-selected-border);
+    background: var(--nav-indicator-bg);
   }
 
   .main-nav-link.selected:hover .nav-indicator {
-    background: var(--nav-a-selected-border-hover);
+    background: var(--nav-indicator-bg-hover);
   }
 
   .main-nav-link:hover {
diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
index d1bc4f95..428deeeb 100644
--- a/src/scss/themes/_base.scss
+++ b/src/scss/themes/_base.scss
@@ -34,6 +34,8 @@
   --nav-a-selected-active-bg: #{lighten($main-theme-color, 17%)};
   --nav-svg-fill: #{$secondary-text-color};
   --nav-text-color: #{$secondary-text-color};
+  --nav-indicator-bg: #{rgba($secondary-text-color, 0.8)};
+  --nav-indicator-bg-hover: #{rgba($secondary-text-color, 0.85)};
 
   --nav-a-selected-border-hover: #{$secondary-text-color};
   --nav-a-selected-bg-hover: #{lighten($main-theme-color, 15%)};
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index c29f778b..c465f297 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -19,8 +19,8 @@
   //
 
   --nav-font-size: 1rem;
-  --nav-indicator-height: 1px;
-  --nav-border-bottom: 1px;
+  --nav-indicator-height: 2px;
+  --nav-border-bottom: 0px;
   --nav-icon-pad-v: 15px;
   --nav-icon-pad-h: 20px;
   --nav-icon-size: 20px;
@@ -45,6 +45,8 @@
     --nav-icon-pad-v: 20px;
     --nav-icon-pad-h: 10px;
     --nav-icon-size: 25px;
+    --nav-indicator-height: 4px;
+    --nav-border-bottom: 0px;
   }
 
   @media (max-width: 767px) {