From 22f8012956185c5177997cb95e490a2d64404d90 Mon Sep 17 00:00:00 2001
From: Anton Mushnin <anton.mushnin@gmail.com>
Date: Mon, 21 Nov 2022 10:15:26 +0300
Subject: [PATCH] styling menus

---
 frontend/src/components/AppNavbar.js        |  9 ++++++---
 frontend/src/components/LandingBarMobile.js |  2 ++
 frontend/src/components/LandingNavbar.js    | 17 ++++++++++-------
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/AppNavbar.js b/frontend/src/components/AppNavbar.js
index 44a68bea..85716b20 100644
--- a/frontend/src/components/AppNavbar.js
+++ b/frontend/src/components/AppNavbar.js
@@ -145,7 +145,10 @@ const AppNavbar = () => {
                           as={Button}
                           rightIcon={<ChevronDownIcon />}
                           color="white"
-                          _expanded={{ color: "white" }}
+                          fontWeight="500"
+                          _expanded={{ color: "white", fontWeight: "700" }}
+                          _focus={{ textDecoration: "none" }}
+                          _hover={{ textDecoration: "none", fontWeight: "700" }}
                         >
                           {item.title}
                         </MenuButton>
@@ -176,11 +179,11 @@ const AppNavbar = () => {
                                   mb="10px"
                                   h="22px"
                                   _hover={{
-                                    backgroundColor: "#1A1D22",
+                                    backgroundColor: "black.300",
                                     color: "#F56646",
                                     fontWeight: "700",
                                   }}
-                                  _focus={{ backgroundColor: "#1A1D22" }}
+                                  _focus={{ backgroundColor: "black.300" }}
                                 >
                                   {child.title}
                                 </MenuItem>
diff --git a/frontend/src/components/LandingBarMobile.js b/frontend/src/components/LandingBarMobile.js
index 9e988555..82c84b88 100644
--- a/frontend/src/components/LandingBarMobile.js
+++ b/frontend/src/components/LandingBarMobile.js
@@ -142,6 +142,8 @@ const LandingBarMobile = () => {
                             m={0}
                             fontSize="sm"
                             _focus={{ backgroundColor: "black.300" }}
+                            _active={{ backgroundColor: "black.300" }}
+                            _hover={{ backgroundColor: "black.300" }}
                           >
                             {child.title}
                           </MenuItem>
diff --git a/frontend/src/components/LandingNavbar.js b/frontend/src/components/LandingNavbar.js
index f3365a03..e8831f05 100644
--- a/frontend/src/components/LandingNavbar.js
+++ b/frontend/src/components/LandingNavbar.js
@@ -74,15 +74,18 @@ const LandingNavbar = () => {
                         as={Button}
                         rightIcon={<ChevronDownIcon />}
                         color="white"
+                        fontWeight="500"
                         fontSize="16px"
-                        _expanded={{ color: "white" }}
+                        _expanded={{ color: "white", fontWeight: "700" }}
+                        _focus={{ textDecoration: "none" }}
+                        _hover={{ textDecoration: "none", fontWeight: "700" }}
                       >
                         {item.title}
                       </MenuButton>
                       <Portal>
                         <MenuList
                           zIndex={100}
-                          bg="#1A1D22"
+                          bg="black.300"
                           w="auto"
                           minW="auto"
                           borderRadius="10px"
@@ -107,11 +110,11 @@ const LandingNavbar = () => {
                                 mb="10px"
                                 h="22px"
                                 _hover={{
-                                  backgroundColor: "#1A1D22",
-                                  color: "#F56646",
+                                  backgroundColor: "black.300",
+                                  color: "orange.1000",
                                   fontWeight: "700",
                                 }}
-                                _focus={{ backgroundColor: "#1A1D22" }}
+                                _focus={{ backgroundColor: "black.300" }}
                               >
                                 {child.title}
                               </MenuItem>
@@ -129,7 +132,7 @@ const LandingNavbar = () => {
             {ui.isLoggedIn && (
               <RouterLink href="/welcome" passHref>
                 <Box
-                  bg="#F56646"
+                  bg="orange.1000"
                   alignSelf={"center"}
                   fontWeight="700"
                   borderRadius="15px"
@@ -150,7 +153,7 @@ const LandingNavbar = () => {
             )}
             {!ui.isLoggedIn && (
               <Button
-                bg="#F56646"
+                bg="orange.1000"
                 variant="solid"
                 onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
                 size="sm"