From 8e07bbb7a0baa387b3987e410f6dadf7b4bf4203 Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Wed, 16 Oct 2019 01:26:19 +0300
Subject: [PATCH] fix: adjust nav focus (#37318)

* fix: adjust nav focus

* fix: clean up
---
 .../Header/components/universalNav.css        | 23 ++++++++++++++++++-
 .../components/search/searchBar/searchbar.css |  3 +--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Header/components/universalNav.css b/client/src/components/Header/components/universalNav.css
index d9cd7913da..ea24788b97 100644
--- a/client/src/components/Header/components/universalNav.css
+++ b/client/src/components/Header/components/universalNav.css
@@ -83,6 +83,7 @@
   color: var(--gray-00);
   opacity: 1;
   white-space: nowrap;
+  height: 38px;
 }
 
 .nav-list li:hover {
@@ -92,7 +93,12 @@
 .nav-list li a:hover {
   color: var(--theme-color);
   text-decoration: none;
-  background: var(--gray-00);
+  background: white;
+}
+
+.nav-list li a:focus {
+  background: var(--theme-color);
+  color: white;
 }
 
 .universal-nav-right {
@@ -116,6 +122,12 @@
   height: auto;
 }
 
+.toggle-button-nav:hover {
+  background-color: var(--theme-color);
+  color: var(--gray-00);
+  border: 1px solid var(--gray-00);
+}
+
 @media (max-width: 265px) {
   .nav-list li a {
     width: 50vw;
@@ -158,19 +170,28 @@
   .expand-nav {
     min-height: calc(3 * var(--header-height));
   }
+
   .reverse-toggle-color {
     background-color: var(--gray-00);
     color: var(--theme-color);
   }
+
+  .reverse-toggle-color:hover {
+    background-color: var(--gray-00);
+    color: var(--theme-color);
+  }
+
   .universal-nav-left form {
     display: none;
   }
+
   .fcc_searchBar .ais-SearchBox-form {
     display: flex;
     position: absolute;
     top: var(--header-height);
     left: 15px;
   }
+
   #universal-nav-logo {
     display: flex;
     position: absolute;
diff --git a/client/src/components/search/searchBar/searchbar.css b/client/src/components/search/searchBar/searchbar.css
index 41fde9aa09..091d928d13 100644
--- a/client/src/components/search/searchBar/searchbar.css
+++ b/client/src/components/search/searchBar/searchbar.css
@@ -18,8 +18,8 @@
   padding: 1px 10px 1px 30px;
   font-size: 18px;
   display: inline-block;
-  width: calc(100vw - 10px);
   margin-top: 6px;
+  height: 26px;
 }
 
 .fcc_searchBar .ais-SearchBox-input,
@@ -125,7 +125,6 @@ and arrow keys */
 @media (min-width: 800px) {
   .ais-SearchBox-input {
     width: 100%;
-    margin-top: 6px;
     max-width: 500px;
   }
   .fcc_searchBar {