Merge branch 'changing-menu' of https://github.com/bugout-dev/moonstream into mobile-menu

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) {
@@ -54,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>
@@ -65,14 +83,14 @@ const AccountIconButton = (props) => {
                 );
               }
             })}
-          <MenuDivider />
-          <MenuItem
+          <div
+            className="desktop-menu-item"
             onClick={() => {
               logout();
             }}
           >
             Logout
-          </MenuItem>
+          </div>
         </MenuList>
       </Portal>
     </Menu>

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 (

frontend/src/components/LandingNavbar.js

@@ -12,6 +12,8 @@ import {
   MenuList,
   MenuItem,
   Portal,
+  Box,
+  Text,
 } from "@chakra-ui/react";
 import { ChevronDownIcon } from "@chakra-ui/icons";
 import useModals from "../core/hooks/useModals";
@@ -61,6 +63,7 @@ const LandingNavbar = () => {
                       variant="link"
                       href={item.path}
                       color="black"
+                      fontSize="16px"
                       isActive={!!(router.pathname === item.path)}
                     >
                       {item.title}
@@ -72,6 +75,7 @@ const LandingNavbar = () => {
                         as={Button}
                         rightIcon={<ChevronDownIcon />}
                         color="white"
+                        fontSize="16px"
                         _expanded={{ color: "white" }}
                       >
                         {item.title}
@@ -99,6 +103,7 @@ const LandingNavbar = () => {
                                 m={0}
                                 color="white"
                                 fontWeight="400"
+                                fontSize="16px"
                                 px="0px"
                                 mb="10px"
                                 h="22px"
@@ -124,17 +129,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 && (
@@ -143,9 +155,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>

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"

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,
       },
       {

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;
+}
+