Merge pull request #712 from bugout-dev/landing-page-improvements

Landing page improvements

frontend/pages/contact/index.js

@@ -38,6 +38,7 @@ const Contact = () => {
         textColor="black"
         bgColor="white"
         position="relative"
+        pt="72px"
       >
         <Icon
           as={BiArrowBack}

frontend/pages/features/index.js

@@ -23,6 +23,7 @@ const Features = () => {
       id="container"
       maxW="container.xl"
       px={["10%", "10%", "7%", "0"]}
+      mt="72px"
     >
       <Heading as="h1" hidden>
         Moonstream feautes

frontend/pages/index.js

@@ -721,7 +721,7 @@ const Homepage = () => {
                 <Heading {...HEADING_PROPS} textAlign="center" as="h2" pb={10}>
                   FAQ
                 </Heading>
-                <Accordion defaultIndex={[0]} allowMultiple allowToggle>
+                <Accordion defaultIndex={[-1]} allowMultiple allowToggle>
                   <FAQCard
                     heading="I’m a game designer. What can Moonstream engine do for me?"
                     headingProps={HEADING_PROPS}

frontend/pages/privacy-policy/index.js

@@ -4,7 +4,7 @@ import { DEFAULT_METATAGS } from "../../src/core/constants";
 import { getLayout, getLayoutProps } from "../../src/layouts/WideInfoPage";
 
 const PrivacyPolicy = () => (
-  <Box>
+  <Box mt="72px">
     <Box px="1.5rem" m="auto" mb={8} maxWidth="1199.98px" minHeight="60vh">
       <Heading my={8} as="h1">
         Privacy Policy for Moonstream

frontend/pages/status/index.js

@@ -58,6 +58,7 @@ const Status = () => {
         px={12}
         py={2}
         borderTopRadius="xl"
+        mt="72px"
       >
         {`Status page`}
       </Heading>

frontend/pages/team/index.js

@@ -49,7 +49,7 @@ const Team = () => {
       alignItems="center"
       w="100%"
     >
-      <Stack mx={margin} maxW="1700px" w="100%">
+      <Stack mt="72px" mx={margin} maxW="1700px" w="100%">
         <SimpleGrid
           px={12}
           alignItems="start"

frontend/pages/tos/index.js

@@ -5,9 +5,9 @@ import { DEFAULT_METATAGS } from "../../src/core/constants";
 import { getLayout, getLayoutProps } from "../../src/layouts/WideInfoPage";
 
 const TermsOfService = () => (
-  <Box>
+  <Box mt="72px">
     <Box px="1.5rem" m="auto" mb={8} maxWidth="1199.98px" minHeight="60vh">
-      <Heading my={8} as="h1">
+      <Heading textAlign="start" my={8} as="h1">
         Moonstream Terms of Service
       </Heading>
       <Text fontSize="md">

frontend/pages/whitepapers.js

@@ -6,7 +6,9 @@ import { MdPictureAsPdf } from "react-icons/md";
 const Papers = () => {
   return (
     <VStack>
-      <Heading py={12}>Whitepapers</Heading>
+      <Heading pb={12} pt="72px">
+        Whitepapers
+      </Heading>
       <Link
         color="orange.900"
         href="https://github.com/bugout-dev/moonstream/blob/main/datasets/nfts/papers/ethereum-nfts.pdf"

frontend/public/icons/password.svg

@@ -5,11 +5,11 @@
         <g id="04-01-register" transform="translate(-895.000000, -362.000000)">
             <g id="Group" transform="translate(891.000000, 356.000000)">
                 <rect id="Rectangle-Copy-5" x="0" y="0" width="24" height="24"></rect>
-                <g id="Group-6" transform="translate(5.000000, 7.000000)" stroke="#83859E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+                <g id="Group-6" transform="translate(5.000000, 7.000000)" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
                     <path d="M0,5.09090909 C0,5.09090909 2.54545455,-2.57571742e-14 7,-2.57571742e-14 C11.4545455,-2.57571742e-14 14,5.09090909 14,5.09090909 C14,5.09090909 11.4545455,10.1818182 7,10.1818182 C2.54545455,10.1818182 0,5.09090909 0,5.09090909 Z" id="Path"></path>
                     <circle id="Oval" cx="7" cy="5.09090909" r="1.90909091"></circle>
                 </g>
             </g>
         </g>
     </g>
-</svg>
+</svg>

frontend/src/Theme/MenuButton/index.js

@@ -0,0 +1,26 @@
+const mobileVariant = () => {
+  return {
+    _active: {
+      backgroundColor: "black.300",
+      color: "white",
+      textDecoration: "none",
+    },
+    _focus: {
+      backgroundColor: "black.300",
+      color: "white",
+      textDecoration: "none",
+    },
+    color: "white",
+    fontSize: "sm",
+    margin: "0px",
+    padding: "0px",
+  };
+};
+
+const MenuButton = {
+  variants: {
+    mobile: mobileVariant,
+  },
+};
+
+export default MenuButton;

frontend/src/Theme/theme.js

@@ -2,6 +2,7 @@ import { extendTheme } from "@chakra-ui/react";
 import Button from "./Button";
 import Tag from "./Tag";
 import Menu from "./Menu";
+import MenuButton from "./MenuButton";
 import Input from "./Input";
 // import Spinner from "./Spinner";
 import NumberInput from "./NumberInput";
@@ -59,6 +60,7 @@ const theme = extendTheme({
     Spinner,
     Tooltip,
     Heading,
+    MenuButton,
   },
 
   fonts: {

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>

frontend/src/components/LandingBarMobile.js

@@ -1,18 +1,46 @@
 import React, { useContext } from "react";
 import RouterLink from "next/link";
-import { Image, Link, Flex, Spacer, Text, Box } from "@chakra-ui/react";
+import {
-import { PRIMARY_MOON_LOGO_URL } from "../core/constants";
+  Button,
+  Image,
+  ButtonGroup,
+  Spacer,
+  Link,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Portal,
+  Text,
+  Box,
+} from "@chakra-ui/react";
+
+import { PAGETYPE, SITEMAP, PRIMARY_MOON_LOGO_URL } from "../core/constants";
 import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
 import useModals from "../core/hooks/useModals";
 import UIContext from "../core/providers/UIProvider/context";
 import PlainButton from "./atoms/PlainButton";
+import ChakraAccountIconButton from "./AccountIconButton";
 
 const LandingBarMobile = () => {
   const ui = useContext(UIContext);
   const { toggleModal } = useModals();
   return (
-    <Flex direction="column" width={"100%"}>
+    <Flex
-      <Flex width={"100%"} alignItems="center" flex="flex: 0 0 100%" px="27px">
+      h={ui.isAppView ? "72px" : "89px"}
+      direction="column"
+      width={"100%"}
+      justifyContent={ui.isLoggedIn ? "center" : "space-between"}
+    >
+      <Flex
+        width={"100%"}
+        alignItems="center"
+        flex="flex: 0 0 100%"
+        pl="10px"
+        pr="27px"
+        mt={ui.isLoggedIn ? "0px" : "12px"}
+      >
         <RouterLink href="/" passHref>
           <Link
             as={Image}
@@ -29,6 +57,7 @@ const LandingBarMobile = () => {
             style={{
               marginRight: "12px",
               fontSize: "14px",
+              padding: "2px 10px",
             }}
             onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
           >
@@ -52,7 +81,7 @@ const LandingBarMobile = () => {
         {ui.isLoggedIn && (
           <RouterLink href="/welcome" passHref>
             <Box
-              bg="#F56646"
+              bg="orange.1000"
               alignSelf={"center"}
               as={Link}
               color="white"
@@ -63,13 +92,71 @@ const LandingBarMobile = () => {
               h="25px"
               textAlign="center"
               fontSize="14px"
-              // pb="5px"
             >
               <Text lineHeight="25px">App</Text>
             </Box>
           </RouterLink>
         )}
+        {ui.isLoggedIn && ui.isMobileView && (
+          <>
+            <ChakraAccountIconButton variant="link" colorScheme="orange" />
+          </>
+        )}
       </Flex>
+      <ButtonGroup
+        justifyContent="center"
+        w="100%"
+        variant="link"
+        spacing={4}
+        flexGrow={0.5}
+      >
+        {SITEMAP.map((item, idx) => {
+          return (
+            <React.Fragment key={`Fragment-${idx}`}>
+              {item.type !== PAGETYPE.FOOTER_CATEGORY && item.children && (
+                <Menu>
+                  <MenuButton variant="mobile" mb="0px" p="0px" as={Button}>
+                    {item.title}
+                  </MenuButton>
+                  <Portal>
+                    <MenuList
+                      zIndex={100}
+                      bg="black.300"
+                      w="auto"
+                      minW="auto"
+                      borderRadius="10px"
+                      p="10px 20px 10px 20px"
+                      border="1px solid white"
+                    >
+                      {item.children.map((child, idx) => (
+                        <RouterLink
+                          shallow={true}
+                          key={`${idx}-${item.title}-menu-links`}
+                          href={child.path}
+                          passHref
+                        >
+                          <MenuItem
+                            color="white"
+                            key={`menu-${idx}`}
+                            as={"a"}
+                            m={0}
+                            fontSize="sm"
+                            _focus={{ backgroundColor: "black.300" }}
+                            _active={{ backgroundColor: "black.300" }}
+                            _hover={{ backgroundColor: "black.300" }}
+                          >
+                            {child.title}
+                          </MenuItem>
+                        </RouterLink>
+                      ))}
+                    </MenuList>
+                  </Portal>
+                </Menu>
+              )}
+            </React.Fragment>
+          );
+        })}
+      </ButtonGroup>
     </Flex>
   );
 };

frontend/src/components/LandingNavbar.js

@@ -4,7 +4,6 @@ import {
   Button,
   Image,
   ButtonGroup,
-  Spacer,
   Link,
   Flex,
   Menu,
@@ -36,7 +35,7 @@ const LandingNavbar = () => {
           <Flex
             pl={ui.isMobileView ? 2 : "60px"}
             justifySelf="flex-start"
-            h="48px"
+            h={ui.isMobileView && !ui.isAppView ? "89px" : "72px"}
             py={1}
             flexBasis="200px"
             flexGrow={0.6}
@@ -75,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"
@@ -108,11 +110,11 @@ const LandingNavbar = () => {
                                 mb="10px"
                                 h="22px"
                                 _hover={{
-                                  backgroundColor: "#1A1D22",
+                                  backgroundColor: "black.300",
-                                  color: "#F56646",
+                                  color: "orange.1000",
                                   fontWeight: "700",
                                 }}
-                                _focus={{ backgroundColor: "#1A1D22" }}
+                                _focus={{ backgroundColor: "black.300" }}
                               >
                                 {child.title}
                               </MenuItem>
@@ -130,7 +132,7 @@ const LandingNavbar = () => {
             {ui.isLoggedIn && (
               <RouterLink href="/welcome" passHref>
                 <Box
-                  bg="#F56646"
+                  bg="orange.1000"
                   alignSelf={"center"}
                   fontWeight="700"
                   borderRadius="15px"
@@ -151,7 +153,7 @@ const LandingNavbar = () => {
             )}
             {!ui.isLoggedIn && (
               <Button
-                bg="#F56646"
+                bg="orange.1000"
                 variant="solid"
                 onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
                 size="sm"
@@ -180,12 +182,6 @@ const LandingNavbar = () => {
           </ButtonGroup>
         </>
       )}
-      {ui.isLoggedIn && ui.isMobileView && (
-        <>
-          <Spacer />
-          <ChakraAccountIconButton variant="link" colorScheme="orange" />
-        </>
-      )}
     </>
   );
 };

frontend/src/components/Navbar.js

@@ -15,8 +15,8 @@ const Navbar = () => {
       zIndex={1}
       alignItems="center"
       id="Navbar"
-      minH={isMobileView ? "48px" : "72px"}
+      minH={isMobileView && !isAppView ? "89px" : "72px"}
-      maxH={isMobileView ? "48px" : "72px"}
+      maxH={isMobileView && !isAppView ? "89px" : "72px"}
       bgColor={BACKGROUND_COLOR}
       borderBottom="1px solid white"
       direction="row"

frontend/src/components/NewDashboardChart.js

@@ -244,7 +244,6 @@ const NewDashboardChart = () => {
                               </Button>
                             )}
                             dropdownItem={(item) => {
-                              const badgeColor = color(`${item.color}`);
                               return (
                                 <Stack cursor="pointer" direction="row">
                                   <chakra.span whiteSpace="nowrap">

frontend/src/components/Scrollable.js

@@ -27,10 +27,11 @@ const Scrollable = (props) => {
       }
     }
 
+    const navbar = document.getElementById("Navbar");
     if (dir === -1) {
-      document.getElementById("Navbar").style.top = "-48px";
+      navbar.style.top = `${-navbar.offsetHeight}px`;
     } else {
-      document.getElementById("Navbar").style.top = "-0";
+      navbar.style.top = "-0";
     }
     setY(currentScroll);
     if (currentScroll > scrollDepth) {
@@ -69,6 +70,7 @@ const Scrollable = (props) => {
         ref={scrollerRef}
         overflowY="scroll"
         onScroll={(e) => handleScroll(e)}
+        // pt="72px"
       >
         {props.children}
       </Box>

frontend/src/components/SignIn.js

@@ -70,7 +70,10 @@ const SignIn = ({ toggleModal }) => {
                 type={showPassword ? "text" : "password"}
                 ref={register({ required: "Password is required" })}
               />
-              <InputRightElement onClick={() => setShowPassword(!showPassword)}>
+              <InputRightElement
+                onClick={() => setShowPassword(!showPassword)}
+                style={{ cursor: "pointer" }}
+              >
                 <CustomIcon icon="password" />
               </InputRightElement>
             </InputGroup>

frontend/src/components/SignUp.js

@@ -88,7 +88,10 @@ const SignUp = ({ toggleModal }) => {
                 type={showPassword ? "text" : "password"}
                 ref={register({ required: "Password is required" })}
               />
-              <InputRightElement onClick={() => setShowPassword(!showPassword)}>
+              <InputRightElement
+                onClick={() => setShowPassword(!showPassword)}
+                style={{ cursor: "pointer" }}
+              >
                 <CustomIcon icon="password" />
               </InputRightElement>
             </InputGroup>

frontend/src/components/TokenRequest.js

@@ -115,12 +115,7 @@ const TokenRequest = ({ setNewToken, onClose }) => {
             >
               Submit
             </Button>
-            <Button
+            <Button variant="solid" colorScheme="red" onClick={() => onClose()}>
-              variant="solid"
-              colorScheme="red"
-              type="submit"
-              onClick={() => onClose()}
-            >
               Cancel
             </Button>
           </Stack>