From 6dbc701f47718093cf99f527bf0177ad0ceb6e5c Mon Sep 17 00:00:00 2001
From: Anton Mushnin <anton.mushnin@gmail.com>
Date: Mon, 14 Nov 2022 17:38:00 +0300
Subject: [PATCH 1/3] account menu

---
 frontend/src/components/AccountIconButton.js | 25 +++++++++--------
 frontend/styles/styles.css                   | 29 ++++++++++++++++++++
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/AccountIconButton.js b/frontend/src/components/AccountIconButton.js
index 85033857..a39daa80 100644
--- a/frontend/src/components/AccountIconButton.js
+++ b/frontend/src/components/AccountIconButton.js
@@ -6,7 +6,6 @@ import {
   MenuList,
   MenuItem,
   MenuGroup,
-  MenuDivider,
   IconButton,
   chakra,
   Portal,
@@ -33,20 +32,24 @@ const AccountIconButton = (props) => {
       />
       <Portal>
         <MenuList
-          zIndex="dropdown"
-          width={["100vw", "100vw", "18rem", "20rem", "22rem", "24rem"]}
-          borderRadius={0}
-          color="black"
+          zIndex={100}
+          bg="#1A1D22"
+          w="auto"
+          minW="auto"
+          borderRadius="10px"
+          p="20px 20px 10px 20px"
+          border="1px solid white"
         >
           <MenuGroup>
             <RouterLink href="/account/security" passHref>
-              <MenuItem>Security</MenuItem>
+              <div className="desktop-menu-item">Security</div>
             </RouterLink>
             <RouterLink href="/account/tokens" passHref>
-              <MenuItem>API tokens</MenuItem>
+              <div className="desktop-menu-item" title="API tokens">
+                API tokens
+              </div>
             </RouterLink>
           </MenuGroup>
-          <MenuDivider />
           {ui.isMobileView &&
             SITEMAP.map((item, idx) => {
               if (item.type !== PAGETYPE.FOOTER_CATEGORY && item.children) {
@@ -65,14 +68,14 @@ const AccountIconButton = (props) => {
                 );
               }
             })}
-          <MenuDivider />
-          <MenuItem
+          <div
+            className="desktop-menu-item"
             onClick={() => {
               logout();
             }}
           >
             Logout
-          </MenuItem>
+          </div>
         </MenuList>
       </Portal>
     </Menu>
diff --git a/frontend/styles/styles.css b/frontend/styles/styles.css
index a447c426..b8543673 100644
--- a/frontend/styles/styles.css
+++ b/frontend/styles/styles.css
@@ -267,3 +267,32 @@ code {
     linear-gradient(to right, transparent 6px, white 6px),
     linear-gradient(to bottom, #444 1px, transparent 1px);
 }
+
+
+.desktop-menu-item {
+  color: white;
+  font-weight: 400;
+  padding-left: 0px;
+  padding-right: 0px;
+  margin-bottom: 10px;
+  height: 22px;
+  cursor: pointer;
+}
+
+.desktop-menu-item:hover {
+  color: #F56646;
+  font-weight: 700;
+}
+
+/* to dont change div size when bolding text. 
+Need 'title' attr in the longest item's tag*/
+.desktop-menu-item::after {
+  display: block;
+  content: attr(title);
+  font-weight: 700;
+  height: 1px;
+  color: transparent;
+  overflow: hidden;
+  visibility: hidden;
+}
+

From be00baca14216e6ce61070f4fc745adee8cc7390 Mon Sep 17 00:00:00 2001
From: Anton Mushnin <anton.mushnin@gmail.com>
Date: Mon, 14 Nov 2022 21:09:31 +0300
Subject: [PATCH 2/3] navbars sizes

---
 frontend/src/components/AppNavbar.js     |  4 +--
 frontend/src/components/LandingNavbar.js | 35 +++++++++++++++++-------
 frontend/src/components/Navbar.js        |  6 ++--
 frontend/src/core/constants.js           |  2 +-
 4 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/AppNavbar.js b/frontend/src/components/AppNavbar.js
index 53450384..44a68bea 100644
--- a/frontend/src/components/AppNavbar.js
+++ b/frontend/src/components/AppNavbar.js
@@ -107,7 +107,7 @@ const AppNavbar = () => {
     <>
       {!ui.isMobileView && (
         <>
-          <Flex px={2}>
+          <Flex px={2} minH="72px" maxH="72px" alignItems="center">
             <RouterLink href="/" passHref>
               <Image
                 w="160px"
@@ -120,7 +120,7 @@ const AppNavbar = () => {
               />
             </RouterLink>
             <Spacer />
-            <Flex placeSelf="flex-end">
+            <Flex h="100%" alignItems="center">
               <ButtonGroup variant="link" spacing={4}>
                 {SITEMAP.map((item, idx) => {
                   if (
diff --git a/frontend/src/components/LandingNavbar.js b/frontend/src/components/LandingNavbar.js
index d49932a4..c874e2ca 100644
--- a/frontend/src/components/LandingNavbar.js
+++ b/frontend/src/components/LandingNavbar.js
@@ -13,6 +13,8 @@ import {
   MenuList,
   MenuItem,
   Portal,
+  Box,
+  Text,
 } from "@chakra-ui/react";
 import { ChevronDownIcon, HamburgerIcon } from "@chakra-ui/icons";
 import useModals from "../core/hooks/useModals";
@@ -78,6 +80,7 @@ const LandingNavbar = () => {
                       variant="link"
                       href={item.path}
                       color="black"
+                      fontSize="16px"
                       isActive={!!(router.pathname === item.path)}
                     >
                       {item.title}
@@ -89,6 +92,7 @@ const LandingNavbar = () => {
                         as={Button}
                         rightIcon={<ChevronDownIcon />}
                         color="white"
+                        fontSize="16px"
                         _expanded={{ color: "white" }}
                       >
                         {item.title}
@@ -116,6 +120,7 @@ const LandingNavbar = () => {
                                 m={0}
                                 color="white"
                                 fontWeight="400"
+                                fontSize="16px"
                                 px="0px"
                                 mb="10px"
                                 h="22px"
@@ -141,17 +146,24 @@ const LandingNavbar = () => {
           <ButtonGroup variant="link" spacing={4} pr={16}>
             {ui.isLoggedIn && (
               <RouterLink href="/welcome" passHref>
-                <Button
+                <Box
+                  bg="#F56646"
                   alignSelf={"center"}
-                  as={Link}
-                  colorScheme="orange"
-                  variant="outline"
-                  size="sm"
-                  fontWeight="400"
-                  borderRadius="2xl"
+                  fontWeight="700"
+                  borderRadius="15px"
+                  w="51px"
+                  h="32px"
+                  textAlign="center"
+                  px="10px"
+                  cursor="pointer"
+                  _hover={{
+                    backgroundColor: "#F4532F",
+                  }}
                 >
-                  App
-                </Button>
+                  <Text fontSize="16px" lineHeight="32px">
+                    App
+                  </Text>
+                </Box>
               </RouterLink>
             )}
             {!ui.isLoggedIn && (
@@ -160,9 +172,12 @@ const LandingNavbar = () => {
                 variant="solid"
                 onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
                 size="sm"
-                fontWeight="bold"
+                fontWeight="700"
                 borderRadius="2xl"
                 textColor="white"
+                _hover={{
+                  backgroundColor: "#F4532F",
+                }}
               >
                 Sign up
               </Button>
diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js
index cde2d082..c4c451f3 100644
--- a/frontend/src/components/Navbar.js
+++ b/frontend/src/components/Navbar.js
@@ -7,7 +7,7 @@ import LandingNavbar from "./LandingNavbar";
 const AppNavbar = React.lazy(() => import("./AppNavbar"));
 
 const Navbar = () => {
-  const { isAppView, isLoggedIn } = useContext(UIContext);
+  const { isAppView, isLoggedIn, isMobileView } = useContext(UIContext);
 
   return (
     <Flex
@@ -15,8 +15,8 @@ const Navbar = () => {
       zIndex={1}
       alignItems="center"
       id="Navbar"
-      minH="3rem"
-      maxH="3rem"
+      minH={isMobileView ? "48px" : "72px"}
+      maxH={isMobileView ? "48px" : "72px"}
       bgColor={BACKGROUND_COLOR}
       borderBottom="1px solid white"
       direction="row"
diff --git a/frontend/src/core/constants.js b/frontend/src/core/constants.js
index fec35565..d1c48ca6 100644
--- a/frontend/src/core/constants.js
+++ b/frontend/src/core/constants.js
@@ -77,7 +77,7 @@ export const SITEMAP = [
     children: [
       {
         title: "Docs",
-        path: "/docs",
+        path: "https://docs.moonstream.to/",
         type: PAGETYPE.CONTENT,
       },
       {

From 901e85089c811c3c14b5c34616fabf055b40a868 Mon Sep 17 00:00:00 2001
From: Anton Mushnin <anton.mushnin@gmail.com>
Date: Mon, 14 Nov 2022 21:16:03 +0300
Subject: [PATCH 3/3] mobile view account button menu

---
 frontend/src/components/AccountIconButton.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/AccountIconButton.js b/frontend/src/components/AccountIconButton.js
index a39daa80..af0577cc 100644
--- a/frontend/src/components/AccountIconButton.js
+++ b/frontend/src/components/AccountIconButton.js
@@ -57,7 +57,22 @@ const AccountIconButton = (props) => {
                   <MenuGroup key={`AccountIconButton-MenuGroup-${idx}`}>
                     {item.children.map((child, idx) => {
                       return (
-                        <MenuItem key={`AccountIconButton-SITEMAP-${idx}`}>
+                        <MenuItem
+                          key={`AccountIconButton-SITEMAP-${idx}`}
+                          m={0}
+                          color="white"
+                          fontWeight="400"
+                          fontSize="16px"
+                          px="0px"
+                          mb="10px"
+                          h="22px"
+                          _hover={{
+                            backgroundColor: "#1A1D22",
+                            color: "#F56646",
+                            fontWeight: "700",
+                          }}
+                          _focus={{ backgroundColor: "#1A1D22" }}
+                        >
                           <RouterLink href={child.path}>
                             {child.title}
                           </RouterLink>