Merge pull request #707 from bugout-dev/login-register-forms

Login register forms

frontend/.gitignore

@@ -41,3 +41,4 @@ package-lock.json
 # vercel
 .vercel
 
+.todo

frontend/pages/subscriptions.js

@@ -63,7 +63,8 @@ const Subscriptions = () => {
               <Flex
                 h="3rem"
                 w="100%"
-                bgColor="blue.50"
+                bgColor="#1A1D22"
+                borderColor="white"
                 borderTopRadius="xl"
                 justifyContent="flex-end"
                 alignItems="center"

frontend/src/Theme/Input/index.js

@@ -21,6 +21,31 @@ const flushedVariant = (props) => {
   };
 };
 
+const bwVariant = () => {
+  return {
+    field: {
+      border: "1px solid white",
+      borderRadius: "7px",
+      color: "white",
+      backgroundColor: "#1A1D22",
+      errorBorderColor: "#EE8686",
+      _hover: {
+        backgroundColor: "#1A1D22",
+      },
+      _focus: {
+        backgroundColor: "#1A1D22",
+      },
+      _placeholder: { color: "#CDCDCD" },
+      _autofill: {
+        backgroundColor: "#1A1D22",
+        textFillColor: "white",
+        boxShadow: "0 0 0px 1000px #1A1D22 inset",
+        transition: "background-color 5000s ease-in-out 0s",
+      },
+    },
+  };
+};
+
 const outlineVariant = (props) => {
   const { colorScheme: c, theme } = props;
   const bgColor = transparentize(`${c}.50`, 0.8)(theme);
@@ -79,6 +104,7 @@ const Input = {
     flushed: flushedVariant,
     newTag: newTagVariant,
     filled: filledVariant,
+    bw: bwVariant,
   },
 
   defaultProps: {

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"
+          zIndex={100}
-          width={["100vw", "100vw", "18rem", "20rem", "22rem", "24rem"]}
+          bg="#1A1D22"
-          borderRadius={0}
+          w="auto"
-          color="black"
+          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 />
+          <div
-          <MenuItem
+            className="desktop-menu-item"
             onClick={() => {
               logout();
             }}
           >
             Logout
-          </MenuItem>
+          </div>
         </MenuList>
       </Portal>
     </Menu>

frontend/src/components/AppNavbar.js

@@ -107,9 +107,20 @@ const AppNavbar = () => {
     <>
       {!ui.isMobileView && (
         <>
-          <Flex px={2}>
+          <Flex px={2} minH="72px" maxH="72px" alignItems="center">
+            <RouterLink href="/" passHref>
+              <Image
+                w="160px"
+                py="0.75rem"
+                pl={1}
+                ml="15px"
+                src={PRIMARY_MOON_LOGO_URL}
+                alt="Moonstream To"
+                cursor="pointer"
+              />
+            </RouterLink>
             <Spacer />
-            <Flex placeSelf="flex-end">
+            <Flex h="100%" alignItems="center">
               <ButtonGroup variant="link" spacing={4}>
                 {SITEMAP.map((item, idx) => {
                   if (
@@ -133,11 +144,21 @@ const AppNavbar = () => {
                           key={`menu-button-${idx}`}
                           as={Button}
                           rightIcon={<ChevronDownIcon />}
+                          color="white"
+                          _expanded={{ color: "white" }}
                         >
                           {item.title}
                         </MenuButton>
                         <Portal>
-                          <MenuList zIndex={100}>
+                          <MenuList
+                            zIndex={100}
+                            bg="#1A1D22"
+                            w="auto"
+                            minW="auto"
+                            borderRadius="10px"
+                            p="20px 20px 10px 20px"
+                            border="1px solid white"
+                          >
                             {item.children.map((child, idx) => (
                               <RouterLink
                                 shallow={true}
@@ -145,8 +166,23 @@ const AppNavbar = () => {
                                 href={child.path}
                                 passHref
                               >
-                                <MenuItem key={`menu-${idx}`} as={"a"} m={0}>
+                                <MenuItem
-                                  <Text color="black">{child.title}</Text>
+                                  key={`menu-${idx}`}
+                                  as={"a"}
+                                  m={0}
+                                  color="white"
+                                  fontWeight="400"
+                                  px="0px"
+                                  mb="10px"
+                                  h="22px"
+                                  _hover={{
+                                    backgroundColor: "#1A1D22",
+                                    color: "#F56646",
+                                    fontWeight: "700",
+                                  }}
+                                  _focus={{ backgroundColor: "#1A1D22" }}
+                                >
+                                  {child.title}
                                 </MenuItem>
                               </RouterLink>
                             ))}
@@ -164,7 +200,7 @@ const AppNavbar = () => {
                       href={item.path}
                       isActive={!!(router.nextRouter.pathname === item.path)}
                     >
-                      {item.title}
+                      <Text color="white">{item.title}</Text>
                     </RouteButton>
                   );
                 })}

frontend/src/components/EntriesNavigation.js

@@ -222,6 +222,9 @@ const EntriesNavigation = () => {
       overflow="hidden"
       direction="column"
       flexGrow={1}
+      mt="10px"
+      mr="5px"
+      ml="5px"
     >
       {streamCache && !eventsIsLoading ? (
         <>
@@ -433,7 +436,7 @@ const EntriesNavigation = () => {
               w="100%"
               //onScroll={(e) => handleScroll(e)}
             >
-              <Stack direction="row" justifyContent="space-between">
+              <Stack mt="5px" direction="row" justifyContent="space-around">
                 {!loadNewerEventsIsFetching && !nextEventIsFetching ? (
                   <Button
                     onClick={() => {
@@ -452,53 +455,53 @@ const EntriesNavigation = () => {
                     colorScheme="green"
                   ></Button>
                 )}
-              </Stack>
+                {streamCache
-              {streamCache
+                  .slice(
-                .slice(
+                    cursor,
-                  cursor,
+                    streamCache.length <= cursor + PAGE_SIZE
-                  streamCache.length <= cursor + PAGE_SIZE
+                      ? streamCache.length
-                    ? streamCache.length
+                      : cursor + PAGE_SIZE
-                    : cursor + PAGE_SIZE
+                  )
-                )
+                  .map((entry, idx) => (
-                .map((entry, idx) => (
+                    <StreamEntry
-                  <StreamEntry
+                      showOnboardingTooltips={false}
-                    showOnboardingTooltips={false}
+                      key={`entry-list-${idx}`}
-                    key={`entry-list-${idx}`}
+                      entry={entry}
-                    entry={entry}
+                      disableDelete={!canDelete}
-                    disableDelete={!canDelete}
+                      disableCopy={!canCreate}
-                    disableCopy={!canCreate}
+                      filterCallback={handleFilterStateCallback}
-                    filterCallback={handleFilterStateCallback}
+                      filterConstants={{ DIRECTIONS, CONDITION, FILTER_TYPES }}
-                    filterConstants={{ DIRECTIONS, CONDITION, FILTER_TYPES }}
+                    />
-                  />
+                  ))}
-                ))}
+                {previousEvent &&
-              {previousEvent &&
+                !loadOlderEventsIsFetching &&
-              !loadOlderEventsIsFetching &&
+                !previousEventIsFetching ? (
-              !previousEventIsFetching ? (
+                  <Center>
-                <Center>
-                  <Button
-                    onClick={() => {
-                      loadPreviousEventHandler();
-                    }}
-                    variant="outline"
-                    colorScheme="green"
-                  >
-                    Load older events
-                  </Button>
-                </Center>
-              ) : (
-                <Center>
-                  {!previousEventIsFetching && !loadOlderEventsIsFetching ? (
-                    "Тransactions not found. You can subscribe to more addresses in Subscriptions menu."
-                  ) : (
                     <Button
-                      isLoading
+                      onClick={() => {
-                      loadingText="Loading"
+                        loadPreviousEventHandler();
+                      }}
                       variant="outline"
                       colorScheme="green"
-                    ></Button>
+                    >
-                  )}
+                      Load older events
-                </Center>
+                    </Button>
-              )}
+                  </Center>
+                ) : (
+                  <Center>
+                    {!previousEventIsFetching && !loadOlderEventsIsFetching ? (
+                      "Тransactions not found. You can subscribe to more addresses in Subscriptions menu."
+                    ) : (
+                      <Button
+                        isLoading
+                        loadingText="Loading"
+                        variant="outline"
+                        colorScheme="green"
+                      ></Button>
+                    )}
+                  </Center>
+                )}
+              </Stack>
             </Flex>
           </Flex>
         </>

frontend/src/components/ForgotPassword.js

@@ -1,15 +1,7 @@
 import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { useToast, useForgotPassword } from "../core/hooks";
-import {
+import { FormControl, InputGroup, Button, Input } from "@chakra-ui/react";
-  FormControl,
-  InputGroup,
-  FormErrorMessage,
-  Button,
-  Input,
-  InputRightElement,
-} from "@chakra-ui/react";
-import CustomIcon from "./CustomIcon";
 import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
 
 const ForgotPassword = ({ toggleModal }) => {
@@ -19,35 +11,71 @@ const ForgotPassword = ({ toggleModal }) => {
 
   useEffect(() => {
     if (!data) return;
-
     toggleModal({ type: MODAL_TYPES.OFF });
   }, [data, toggleModal, toast]);
 
   return (
     <form onSubmit={handleSubmit(forgotPassword)}>
+      <div
+        style={{
+          fontSize: "18px",
+          fontWeight: 400,
+          color: errors.username ? "#EE8686" : "white",
+        }}
+      >
+        {errors.email ? errors.email.message : "Email"}
+      </div>
       <FormControl isInvalid={errors.email} my={4}>
         <InputGroup>
           <Input
-            colorScheme="blue"
+            borderColor="white"
-            variant="filled"
+            bg="#1A1D22"
-            placeholder="Your email here"
+            color="white"
+            _placeholder={{ textColor: "#CDCDCD" }}
+            variant="outline"
+            errorBorderColor="#EE8686"
+            _hover={{
+              backgroundColor: "#1A1D22",
+            }}
+            _focus={{
+              backgroundColor: "#1A1D22",
+            }}
+            _autofill={{
+              backgroundColor: "#1A1D22",
+              textFillColor: "white",
+              boxShadow: "0 0 0px 1000px #1A1D22 inset",
+              transition: "background-color 5000s ease-in-out 0s",
+            }}
+            placeholder="Enter your email"
             name="email"
-            ref={register({ required: "Email is required!" })}
+            autoComplete="email"
+            ref={register({ required: "Email is required" })}
           />
-          <InputRightElement>
-            <CustomIcon icon="name" />
-          </InputRightElement>
         </InputGroup>
-        <FormErrorMessage color="red.400" pl="1">
-          {errors.email && errors.email.message}
-        </FormErrorMessage>
       </FormControl>
       <Button
+        mt="30px"
+        mb="10px"
+        bg="#F56646"
+        fontWeight="700"
+        borderRadius="30px"
+        padding="10px 30px"
+        fontSize="20px"
+        height="46px"
+        color="#ffffff"
         type="submit"
-        variant="solid"
-        colorScheme="blue"
         width="100%"
+        variant="solid"
         isLoading={isLoading}
+        _hover={{
+          backgroundColor: "#F4532F",
+        }}
+        _focus={{
+          backgroundColor: "#F4532F",
+        }}
+        _active={{
+          backgroundColor: "#F4532F",
+        }}
       >
         Send
       </Button>

frontend/src/components/LandingBarMobile.js

@@ -0,0 +1,77 @@
+import React, { useContext } from "react";
+import RouterLink from "next/link";
+import { Image, Link, Flex, Spacer, Text, Box } from "@chakra-ui/react";
+import { 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";
+
+const LandingBarMobile = () => {
+  const ui = useContext(UIContext);
+  const { toggleModal } = useModals();
+  return (
+    <Flex direction="column" width={"100%"}>
+      <Flex width={"100%"} alignItems="center" flex="flex: 0 0 100%" px="27px">
+        <RouterLink href="/" passHref>
+          <Link
+            as={Image}
+            w={"160px"}
+            h={"23px"}
+            justifyContent="left"
+            src={PRIMARY_MOON_LOGO_URL}
+            alt="Moonstream logo"
+          />
+        </RouterLink>
+        <Spacer />
+        {!ui.isLoggedIn && (
+          <PlainButton
+            style={{
+              marginRight: "12px",
+              fontSize: "14px",
+            }}
+            onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
+          >
+            Sign up
+          </PlainButton>
+        )}
+        {!ui.isLoggedIn && (
+          <Text
+            color="white"
+            bg="transparent"
+            onClick={() => toggleModal({ type: MODAL_TYPES.LOGIN })}
+            fontWeight="400"
+            p="0px"
+            m="0px"
+            _focus={{ backgroundColor: "transparent" }}
+            _hover={{ backgroundColor: "transparent" }}
+          >
+            Log in
+          </Text>
+        )}
+        {ui.isLoggedIn && (
+          <RouterLink href="/welcome" passHref>
+            <Box
+              bg="#F56646"
+              alignSelf={"center"}
+              as={Link}
+              color="white"
+              size="sm"
+              fontWeight="700"
+              borderRadius="15px"
+              w="47px"
+              h="25px"
+              textAlign="center"
+              fontSize="14px"
+              // pb="5px"
+            >
+              <Text lineHeight="25px">App</Text>
+            </Box>
+          </RouterLink>
+        )}
+      </Flex>
+    </Flex>
+  );
+};
+
+export default LandingBarMobile;

frontend/src/components/LandingNavbar.js

@@ -6,68 +6,53 @@ import {
   ButtonGroup,
   Spacer,
   Link,
-  IconButton,
   Flex,
   Menu,
   MenuButton,
   MenuList,
   MenuItem,
   Portal,
+  Box,
+  Text,
 } from "@chakra-ui/react";
-import { ChevronDownIcon, HamburgerIcon } from "@chakra-ui/icons";
+import { ChevronDownIcon } from "@chakra-ui/icons";
 import useModals from "../core/hooks/useModals";
 import UIContext from "../core/providers/UIProvider/context";
 import ChakraAccountIconButton from "./AccountIconButton";
 import RouteButton from "./RouteButton";
-import {
+import { PAGETYPE, SITEMAP, PRIMARY_MOON_LOGO_URL } from "../core/constants";
-  PAGETYPE,
-  SITEMAP,
-  PRIMARY_MOON_LOGO_URL,
-  BACKGROUND_COLOR,
-} from "../core/constants";
 import router from "next/router";
 import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
+import LandingBarMobile from "./LandingBarMobile";
 
 const LandingNavbar = () => {
   const ui = useContext(UIContext);
   const { toggleModal } = useModals();
   return (
     <>
-      {ui.isMobileView && (
+      {ui.isMobileView && <LandingBarMobile />}
-        <>
-          <IconButton
-            alignSelf="flex-start"
-            colorScheme="blackAlpha"
-            bgColor={BACKGROUND_COLOR}
-            variant="solid"
-            onClick={() => ui.setSidebarToggled(!ui.sidebarToggled)}
-            icon={<HamburgerIcon />}
-          />
-        </>
-      )}
-      <Flex
-        pl={ui.isMobileView ? 2 : "60px"}
-        justifySelf="flex-start"
-        h="48px"
-        py={1}
-        flexBasis="200px"
-        flexGrow={0.6}
-        id="Logo Container"
-        alignItems="center"
-      >
-        <RouterLink href="/" passHref>
-          <Link
-            as={Image}
-            w={"160px"}
-            justifyContent="left"
-            src={PRIMARY_MOON_LOGO_URL}
-            alt="Moonstream logo"
-          />
-        </RouterLink>
-      </Flex>
-
       {!ui.isMobileView && (
         <>
+          <Flex
+            pl={ui.isMobileView ? 2 : "60px"}
+            justifySelf="flex-start"
+            h="48px"
+            py={1}
+            flexBasis="200px"
+            flexGrow={0.6}
+            id="Logo Container"
+            alignItems="center"
+          >
+            <RouterLink href="/" passHref>
+              <Link
+                as={Image}
+                w={"160px"}
+                justifyContent="left"
+                src={PRIMARY_MOON_LOGO_URL}
+                alt="Moonstream logo"
+              />
+            </RouterLink>
+          </Flex>
           <ButtonGroup variant="link" spacing={4} pr={16} flexGrow={0.5}>
             {SITEMAP.map((item, idx) => {
               return (
@@ -78,18 +63,33 @@ const LandingNavbar = () => {
                       variant="link"
                       href={item.path}
                       color="black"
+                      fontSize="16px"
                       isActive={!!(router.pathname === item.path)}
                     >
                       {item.title}
                     </RouteButton>
                   )}
                   {item.type !== PAGETYPE.FOOTER_CATEGORY && item.children && (
-                    <Menu colorScheme="blackAlpha">
+                    <Menu autoSelect="false">
-                      <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
+                      <MenuButton
+                        as={Button}
+                        rightIcon={<ChevronDownIcon />}
+                        color="white"
+                        fontSize="16px"
+                        _expanded={{ color: "white" }}
+                      >
                         {item.title}
                       </MenuButton>
                       <Portal>
-                        <MenuList zIndex={100}>
+                        <MenuList
+                          zIndex={100}
+                          bg="#1A1D22"
+                          w="auto"
+                          minW="auto"
+                          borderRadius="10px"
+                          p="20px 20px 10px 20px"
+                          border="1px solid white"
+                        >
                           {item.children.map((child, idx) => (
                             <RouterLink
                               shallow={true}
@@ -97,7 +97,23 @@ const LandingNavbar = () => {
                               href={child.path}
                               passHref
                             >
-                              <MenuItem key={`menu-${idx}`} as={"a"} m={0}>
+                              <MenuItem
+                                key={`menu-${idx}`}
+                                as={"a"}
+                                m={0}
+                                color="white"
+                                fontWeight="400"
+                                fontSize="16px"
+                                px="0px"
+                                mb="10px"
+                                h="22px"
+                                _hover={{
+                                  backgroundColor: "#1A1D22",
+                                  color: "#F56646",
+                                  fontWeight: "700",
+                                }}
+                                _focus={{ backgroundColor: "#1A1D22" }}
+                              >
                                 {child.title}
                               </MenuItem>
                             </RouterLink>
@@ -113,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}
+                  fontWeight="700"
-                  colorScheme="orange"
+                  borderRadius="15px"
-                  variant="outline"
+                  w="51px"
-                  size="sm"
+                  h="32px"
-                  fontWeight="400"
+                  textAlign="center"
-                  borderRadius="2xl"
+                  px="10px"
+                  cursor="pointer"
+                  _hover={{
+                    backgroundColor: "#F4532F",
+                  }}
                 >
-                  App
+                  <Text fontSize="16px" lineHeight="32px">
-                </Button>
+                    App
+                  </Text>
+                </Box>
               </RouterLink>
             )}
             {!ui.isLoggedIn && (
@@ -132,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"
+      minH={isMobileView ? "48px" : "72px"}
-      maxH="3rem"
+      maxH={isMobileView ? "48px" : "72px"}
       bgColor={BACKGROUND_COLOR}
       borderBottom="1px solid white"
       direction="row"

frontend/src/components/NewDashboardName.js

@@ -57,9 +57,13 @@ const NewDashboardName = (props) => {
   return (
     <>
       <Stack direction={["column", "row", null]}>
-        <InputGroup>
+        <InputGroup border="1px solid white" borderRadius="7px">
-          <InputLeftAddon>Name:</InputLeftAddon>
+          <InputLeftAddon bg="#1A1D22">Name:</InputLeftAddon>
           <Input
+            borderStyle="none none none"
+            borderLeft="1px solid white"
+            variant="bw"
+            // borderStyle="none"
             value={name}
             onChange={(e) => setName(e.target.value)}
             placeholder={placeholder}

frontend/src/components/NewSubscription.js

@@ -158,12 +158,15 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                           // style={comboboxStyles}
                           {...getRootProps({}, { suppressRefError: true })}
                         >
-                          <InputGroup>
+                          <InputGroup
+                            border="1px solid white"
+                            borderRadius="7px"
+                          >
                             <InputLeftAddon
                               isTruncated
                               maxW="60px"
                               fontSize="sm"
-                              bgColor={"gray.100"}
+                              bgColor="#1A1D22"
                             >
                               <Image h="24px" src={selectedItem?.icon_url} />
                             </InputLeftAddon>
@@ -172,15 +175,30 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                               placeholder="What do you want to subscribe to"
                               isTruncated
                               fontSize="sm"
+                              bg="#1A1D22"
+                              _hover={{
+                                backgroundColor: "#1A1D22",
+                              }}
+                              _focus={{
+                                backgroundColor: "#1A1D22",
+                              }}
                               {...getInputProps()}
                             ></Input>
                             <InputRightAddon p={0}>
                               <Button
-                                variant="outline"
+                                // variant="none"
+                                borderStyle="none"
+                                borderColor="black"
                                 w="100%"
                                 m={0}
                                 p={0}
-                                colorScheme="gray"
+                                bg="#1A1D22"
+                                _hover={{
+                                  backgroundColor: "#1A1D22",
+                                }}
+                                _focus={{
+                                  backgroundColor: "#1A1D22",
+                                }}
                                 {...getToggleButtonProps({})}
                                 aria-label={"toggle menu"}
                               >
@@ -194,7 +212,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                             direction="column"
                             className="menuListTim"
                             {...getMenuProps()}
-                            bgColor="gray.300"
+                            bgColor="#1A1D22"
                             borderRadius="md"
                             boxShadow="lg"
                             pos="absolute"
@@ -213,6 +231,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                                       px={4}
                                       py={1}
                                       alignItems="center"
+                                      cursor="pointer"
                                       key={item.value}
                                       {...getItemProps({
                                         key: item.value,
@@ -221,14 +240,9 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                                       })}
                                       direction="row"
                                       w="100%"
-                                      bgColor={
-                                        index === highlightedIndex
-                                          ? "orange.900"
-                                          : "inherit"
-                                      }
                                       color={
                                         index === highlightedIndex
-                                          ? "gray.100"
+                                          ? "#F56646"
                                           : "inherit"
                                       }
                                       justifyContent="space-between"
@@ -237,6 +251,11 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                                         h="24px"
                                         src={item.icon_url}
                                         alignSelf="flex-start"
+                                        ml={
+                                          index === highlightedIndex
+                                            ? "3px"
+                                            : "inherit"
+                                        }
                                       />
                                       <chakra.span
                                         whiteSpace="nowrap"
@@ -272,8 +291,13 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
             <VStack w="100%" spacing={0}>
               <Flex w="100%">
                 <FormControl isInvalid={errors?.address}>
-                  <InputGroup my={2} fontSize="xs">
+                  <InputGroup
-                    <InputLeftAddon>
+                    my={2}
+                    fontSize="xs"
+                    border="1px solid white"
+                    borderRadius="7px"
+                  >
+                    <InputLeftAddon bg="#1A1D22">
                       <FormLabel
                         fontWeight="600"
                         // alignSelf="flex-start"
@@ -283,8 +307,15 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                       </FormLabel>
                     </InputLeftAddon>
                     <Input
+                      bg="#1A1D22"
                       type="text"
                       autoComplete="off"
+                      _hover={{
+                        backgroundColor: "#1A1D22",
+                      }}
+                      _focus={{
+                        backgroundColor: "#1A1D22",
+                      }}
                       placeholder="Address to subscribe to"
                       name="address"
                       value={address}
@@ -292,7 +323,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                       ref={register({ required: "address is required!" })}
                     ></Input>
                   </InputGroup>
-                  <FormErrorMessage color="red.400" pl="1">
+                  <FormErrorMessage color="#EE8686" pl="1">
                     {errors?.address && errors?.address.message}
                   </FormErrorMessage>
                 </FormControl>
@@ -306,8 +337,13 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
             <VStack w="100%" spacing={0}>
               <Flex w="100%">
                 <FormControl isInvalid={errors?.label}>
-                  <InputGroup my={2} fontSize="xs">
+                  <InputGroup
-                    <InputLeftAddon>
+                    my={2}
+                    fontSize="xs"
+                    border="1px solid white"
+                    borderRadius="7px"
+                  >
+                    <InputLeftAddon bgColor="#1A1D22">
                       <FormLabel
                         fontWeight="600"
                         // alignSelf="flex-start"
@@ -319,6 +355,13 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                     <Input
                       type="text"
                       autoComplete="off"
+                      bg="#1A1D22"
+                      _hover={{
+                        backgroundColor: "#1A1D22",
+                      }}
+                      _focus={{
+                        backgroundColor: "#1A1D22",
+                      }}
                       placeholder="Name your label"
                       name="label"
                       value={label}
@@ -326,7 +369,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                       ref={register({ required: "label is required!" })}
                     ></Input>
                   </InputGroup>
-                  <FormErrorMessage color="red.400" pl="1">
+                  <FormErrorMessage color="#EE8686" pl="1">
                     {errors?.label && errors?.label.message}
                   </FormErrorMessage>
                 </FormControl>
@@ -336,7 +379,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
         )}
 
         {type && (
-          <FormControl isInvalid={errors?.color}>
+          <FormControl isInvalid={errors?.color} bg="#1A1D22">
             {!isModal ? (
               <Flex
                 direction="row"
@@ -364,6 +407,14 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                     icon={<BiRefresh />}
                   />
                   <Input
+                    variant="outline"
+                    backgroundColor="#1A1D22"
+                    _hover={{
+                      backgroundColor: "#1A1D22",
+                    }}
+                    _focus={{
+                      backgroundColor: "#1A1D22",
+                    }}
                     type="input"
                     placeholder="color"
                     name="color"
@@ -401,6 +452,14 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                     type="input"
                     placeholder="color"
                     name="color"
+                    variant="outline"
+                    backgroundColor="#1A1D22"
+                    _hover={{
+                      backgroundColor: "#1A1D22",
+                    }}
+                    _focus={{
+                      backgroundColor: "#1A1D22",
+                    }}
                     ref={register({ required: "color is required!" })}
                     value={color}
                     onChange={() => null}
@@ -408,7 +467,21 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                   ></Input>
                 </Stack>
 
-                <GithubPicker onChangeComplete={handleChangeColorComplete} />
+                <GithubPicker
+                  styles={{
+                    default: {
+                      card: {
+                        background: "#1A1D22",
+                        border: "1px solid white",
+                      },
+                      triangle: {
+                        borderBottomColor: "white",
+                        // border: "1px solid white",
+                      },
+                    },
+                  }}
+                  onChangeComplete={handleChangeColorComplete}
+                />
               </>
             )}
             <FormErrorMessage color="red.400" pl="1">

frontend/src/components/Sidebar.js

@@ -2,35 +2,17 @@ import {
   ProSidebar,
   Menu,
   MenuItem,
-  SidebarHeader,
   SidebarFooter,
   SidebarContent,
 } from "react-pro-sidebar";
 import { useContext } from "react";
 import RouterLink from "next/link";
-import {
+import { Divider, Text, Button } from "@chakra-ui/react";
-  Flex,
-  Image,
-  IconButton,
-  Divider,
-  Text,
-  Button,
-} from "@chakra-ui/react";
 import UIContext from "../core/providers/UIProvider/context";
 import React from "react";
-import {
+import { LockIcon } from "@chakra-ui/icons";
-  HamburgerIcon,
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  LockIcon,
-} from "@chakra-ui/icons";
 import { MdSettings, MdDashboard, MdTimeline } from "react-icons/md";
-import {
+import { SITEMAP, PAGETYPE, BACKGROUND_COLOR } from "../core/constants";
-  PRIMARY_MOON_LOGO_URL,
-  SITEMAP,
-  PAGETYPE,
-  BACKGROUND_COLOR,
-} from "../core/constants";
 import useDashboard from "../core/hooks/useDashboard";
 import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
 import OverlayContext from "../core/providers/OverlayProvider/context";
@@ -48,42 +30,8 @@ const Sidebar = () => {
       onToggle={ui.setSidebarToggled}
       collapsed={ui.sidebarCollapsed}
       hidden={!ui.sidebarVisible}
+      className={ui.isMobileView ? "t40" : "t0"}
     >
-      <SidebarHeader>
-        <Flex>
-          <IconButton
-            ml={4}
-            justifySelf="flex-start"
-            colorScheme="blackAlpha"
-            bgColor={BACKGROUND_COLOR}
-            aria-label="App navigation"
-            icon={
-              ui.isMobileView ? (
-                <HamburgerIcon />
-              ) : ui.sidebarCollapsed ? (
-                <ArrowRightIcon />
-              ) : (
-                <ArrowLeftIcon />
-              )
-            }
-            onClick={() => {
-              ui.isMobileView
-                ? ui.setSidebarToggled(!ui.sidebarToggled)
-                : ui.setSidebarCollapsed(!ui.sidebarCollapsed);
-            }}
-          />
-          <RouterLink href="/" passHref>
-            <Image
-              w="160px"
-              py="0.75rem"
-              pl={1}
-              src={PRIMARY_MOON_LOGO_URL}
-              alt="Moonstream To"
-              cursor="pointer"
-            />
-          </RouterLink>
-        </Flex>
-      </SidebarHeader>
       <SidebarContent>
         <Divider borderColor={BACKGROUND_COLOR} />
         <Menu iconShape="square">

frontend/src/components/SignIn.js

@@ -1,24 +1,23 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import {
   Text,
   Stack,
   Box,
   FormControl,
-  FormErrorMessage,
   InputGroup,
-  Button,
   Input,
   InputRightElement,
+  Button,
 } from "@chakra-ui/react";
 import CustomIcon from "./CustomIcon";
 import { useLogin } from "../core/hooks";
-import PasswordInput from "./PasswordInput";
 import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
 
 const SignIn = ({ toggleModal }) => {
   const { handleSubmit, errors, register } = useForm();
   const { login, isLoading, data } = useLogin();
+  const [showPassword, togglePassword] = useState(false);
 
   useEffect(() => {
     if (!data) {
@@ -30,70 +29,132 @@ const SignIn = ({ toggleModal }) => {
 
   return (
     <>
-      <Text color="gray.1200" fontSize="md">
-        To your Moonstream account
-      </Text>
       <form onSubmit={handleSubmit(login)}>
-        <Stack width="100%" pt={4} spacing={3}>
+        <Stack width="100%" spacing={3}>
+          <div
+            style={{
+              fontSize: "18px",
+              fontWeight: 400,
+              color: errors.username ? "#EE8686" : "white",
+            }}
+          >
+            {errors.username ? errors.username.message : "Username"}
+          </div>
           <FormControl isInvalid={errors.username}>
-            <InputGroup>
+            <InputGroup bg="black">
               <Input
-                _placeholder={{ textColor: "gray.1200" }}
+                borderColor="white"
+                bg="#1A1D22"
+                color="white"
+                _placeholder={{ textColor: "#CDCDCD" }}
                 autoComplete="username"
-                variant="filled"
+                variant="outline"
-                colorScheme="blue"
+                placeholder="Enter your username or email"
-                placeholder="Your Moonstream username"
+                errorBorderColor="#EE8686"
                 name="username"
                 {...register("username", { required: true })}
-                ref={register({ required: "Username is required!" })}
+                ref={register({ required: "Username is required" })}
+                _hover={{
+                  backgroundColor: "#1A1D22",
+                }}
+                _focus={{
+                  backgroundColor: "#1A1D22",
+                }}
+                _autofill={{
+                  backgroundColor: "#1A1D22",
+                  textFillColor: "white",
+                  boxShadow: "0 0 0px 1000px #1A1D22 inset",
+                  transition: "background-color 5000s ease-in-out 0s",
+                }}
               />
-              <InputRightElement>
+            </InputGroup>
-                <CustomIcon icon="name" />
+          </FormControl>
+          <div
+            style={{
+              fontSize: "18px",
+              color: errors.password ? "#EE8686" : "white",
+            }}
+          >
+            {errors.password ? errors.password.message : "Password"}
+          </div>
+          <FormControl isInvalid={errors.password}>
+            <InputGroup bg="black">
+              <Input
+                borderColor="white"
+                bg="#1A1D22"
+                color="white"
+                _placeholder={{ textColor: "#CDCDCD" }}
+                autoComplete="current-password"
+                variant="outline"
+                placeholder="Enter your password"
+                errorBorderColor="#EE8686"
+                name="password"
+                type={showPassword ? "text" : "password"}
+                ref={register({ required: "Password is required" })}
+                _hover={{
+                  backgroundColor: "#1A1D22",
+                }}
+                _focus={{
+                  backgroundColor: "#1A1D22",
+                }}
+                _autofill={{
+                  backgroundColor: "#1A1D22",
+                  textFillColor: "white",
+                  boxShadow: "0 0 0px 1000px #1A1D22 inset",
+                  transition: "background-color 5000s ease-in-out 0s",
+                }}
+              />
+              <InputRightElement onClick={() => togglePassword(!showPassword)}>
+                <CustomIcon icon="password" />
               </InputRightElement>
             </InputGroup>
-            <FormErrorMessage color="red.400" pl="1">
-              {errors.username && errors.username.message}
-            </FormErrorMessage>
-          </FormControl>
-          <FormControl isInvalid={errors.password}>
-            <PasswordInput
-              placeholder="Your Moonstream password"
-              name="password"
-              ref={register({ required: "Password is required!" })}
-            />
-            <FormErrorMessage color="red.400" pl="1">
-              {errors.password && errors.password.message}
-            </FormErrorMessage>
           </FormControl>
+          <Text textAlign="start" fontSize="18px">
+            {" "}
+            <Box
+              cursor="pointer"
+              color="#EE8686"
+              as="span"
+              onClick={() => toggleModal({ type: MODAL_TYPES.FORGOT })}
+            >
+              Forgot your password?
+            </Box>
+          </Text>
         </Stack>
+
         <Button
-          my={8}
+          mt="30px"
+          mb="10px"
+          bg="#F56646"
+          fontWeight="700"
+          borderRadius="30px"
+          padding="10px 30px"
+          fontSize="20px"
+          height="46px"
+          color="#ffffff"
           type="submit"
           width="100%"
           variant="solid"
-          colorScheme="blue"
           isLoading={isLoading}
+          _hover={{
+            backgroundColor: "#F4532F",
+          }}
+          _focus={{
+            backgroundColor: "#F4532F",
+          }}
+          _active={{
+            backgroundColor: "#F4532F",
+          }}
         >
           Login
         </Button>
       </form>
-      <Text textAlign="center" fontSize="md" color="gray.1200">
+
-        {" "}
+      <Text textAlign="center" fontSize="md" color="white">
-        <Box
-          cursor="pointer"
-          color="blue.800"
-          as="span"
-          onClick={() => toggleModal({ type: MODAL_TYPES.FORGOT })}
-        >
-          Forgot your password?
-        </Box>
-        <Box height="1px" width="100%" background="#eaebf8" mb="1.875rem" />
-      </Text>
-      <Text textAlign="center" fontSize="md" color="gray.1200">
         Don`t have an account?{" "}
         <Box
           cursor="pointer"
-          color="blue.800"
+          color="#EE8686"
           as="span"
           onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
         >

frontend/src/components/SignUp.js

@@ -1,11 +1,10 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import {
   Text,
   Stack,
   Box,
   FormControl,
-  FormErrorMessage,
   InputGroup,
   Button,
   Input,
@@ -13,12 +12,12 @@ import {
 } from "@chakra-ui/react";
 import CustomIcon from "./CustomIcon";
 import { useSignUp } from "../core/hooks";
-import PasswordInput from "./PasswordInput";
 import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
 
 const SignUp = ({ toggleModal }) => {
   const { handleSubmit, errors, register } = useForm();
   const { signUp, isLoading, isSuccess } = useSignUp();
+  const [showPassword, togglePassword] = useState(false);
 
   useEffect(() => {
     if (isSuccess) {
@@ -28,76 +27,156 @@ const SignUp = ({ toggleModal }) => {
 
   return (
     <>
-      <Text color="gray.1200" fontSize="md">
-        Sign up for free
-      </Text>
       <form onSubmit={handleSubmit(signUp)}>
-        <Stack width="100%" pt={4} spacing={3}>
+        <Stack width="100%" spacing={3}>
+          <div
+            style={{
+              fontSize: "18px",
+              fontWeight: 400,
+              color: errors.username ? "#EE8686" : "white",
+            }}
+          >
+            {errors.username ? errors.username.message : "Username"}
+          </div>
           <FormControl isInvalid={errors.username}>
             <InputGroup>
               <Input
-                variant="filled"
+                borderColor="white"
-                colorScheme="blue"
+                bg="#1A1D22"
-                placeholder="Your username here"
+                color="white"
-                name="username"
+                _placeholder={{ textColor: "#CDCDCD" }}
                 autoComplete="username"
-                ref={register({ required: "Username is required!" })}
+                variant="outline"
+                placeholder="Enter your username or email"
+                errorBorderColor="#EE8686"
+                name="username"
+                {...register("username", { required: true })}
+                ref={register({ required: "Username is required" })}
+                _hover={{
+                  backgroundColor: "#1A1D22",
+                }}
+                _focus={{
+                  backgroundColor: "#1A1D22",
+                }}
+                _autofill={{
+                  backgroundColor: "#1A1D22",
+                  textFillColor: "white",
+                  boxShadow: "0 0 0px 1000px #1A1D22 inset",
+                  transition: "background-color 5000s ease-in-out 0s",
+                }}
               />
-              <InputRightElement>
-                <CustomIcon icon="name" />
-              </InputRightElement>
             </InputGroup>
-            <FormErrorMessage color="red.400" pl="1">
-              {errors.username && errors.username.message}
-            </FormErrorMessage>
           </FormControl>
+          <div
+            style={{
+              fontSize: "18px",
+              fontWeight: 400,
+              color: errors.username ? "#EE8686" : "white",
+            }}
+          >
+            {errors.email ? errors.email.message : "Email"}
+          </div>
           <FormControl isInvalid={errors.email}>
             <InputGroup>
               <Input
-                variant="filled"
+                borderColor="white"
-                colorScheme="blue"
+                bg="#1A1D22"
-                placeholder="Your email here"
+                color="white"
+                _placeholder={{ textColor: "#CDCDCD" }}
+                variant="outline"
+                errorBorderColor="#EE8686"
+                _hover={{
+                  backgroundColor: "#1A1D22",
+                }}
+                _focus={{
+                  backgroundColor: "#1A1D22",
+                }}
+                _autofill={{
+                  backgroundColor: "#1A1D22",
+                  textFillColor: "white",
+                  boxShadow: "0 0 0px 1000px #1A1D22 inset",
+                  transition: "background-color 5000s ease-in-out 0s",
+                }}
+                placeholder="Enter your email"
                 name="email"
                 autoComplete="email"
-                ref={register({ required: "Email is required!" })}
+                ref={register({ required: "Email is required" })}
               />
-              <InputRightElement>
+            </InputGroup>
-                <CustomIcon icon="name" />
+          </FormControl>
+          <div
+            style={{
+              fontSize: "18px",
+              color: errors.password ? "#EE8686" : "white",
+            }}
+          >
+            {errors.password ? errors.password.message : "Password"}
+          </div>
+          <FormControl isInvalid={errors.password}>
+            <InputGroup bg="black">
+              <Input
+                borderColor="white"
+                bg="#1A1D22"
+                color="white"
+                _placeholder={{ textColor: "#CDCDCD" }}
+                autoComplete="current-password"
+                variant="outline"
+                placeholder="Enter your password"
+                errorBorderColor="#EE8686"
+                name="password"
+                type={showPassword ? "text" : "password"}
+                ref={register({ required: "Password is required" })}
+                _hover={{
+                  backgroundColor: "#1A1D22",
+                }}
+                _focus={{
+                  backgroundColor: "#1A1D22",
+                }}
+                _autofill={{
+                  backgroundColor: "#1A1D22",
+                  textFillColor: "white",
+                  boxShadow: "0 0 0px 1000px #1A1D22 inset",
+                  transition: "background-color 5000s ease-in-out 0s",
+                }}
+              />
+              <InputRightElement onClick={() => togglePassword(!showPassword)}>
+                <CustomIcon icon="password" />
               </InputRightElement>
             </InputGroup>
-            <FormErrorMessage color="red.400" pl="1">
-              {errors.email && errors.email.message}
-            </FormErrorMessage>
-          </FormControl>
-          <FormControl isInvalid={errors.password}>
-            <PasswordInput
-              placeholder="Add password"
-              name="password"
-              autoComplete="new-password"
-              ref={register({ required: "Password is required!" })}
-            />
-            <FormErrorMessage color="red.400" pl="1">
-              {errors.password && errors.password.message}
-            </FormErrorMessage>
           </FormControl>
         </Stack>
         <Button
-          my={8}
+          mt="30px"
-          variant="solid"
+          mb="10px"
-          colorScheme="blue"
+          bg="#F56646"
-          width="100%"
+          fontWeight="700"
+          borderRadius="30px"
+          padding="10px 30px"
+          fontSize="20px"
+          height="46px"
+          color="#ffffff"
           type="submit"
+          width="100%"
+          variant="solid"
           isLoading={isLoading}
+          _hover={{
+            backgroundColor: "#F4532F",
+          }}
+          _focus={{
+            backgroundColor: "#F4532F",
+          }}
+          _active={{
+            backgroundColor: "#F4532F",
+          }}
         >
           Register
         </Button>
       </form>
-      <Box height="1px" width="100%" background="#eaebf8" mb="1.875rem" />
+      <Text textAlign="center" fontSize="md" color="white">
-      <Text textAlign="center" fontSize="md" color="gray.1200" pb={8}>
         Already have an account?{" "}
         <Box
           cursor="pointer"
-          color="blue.400"
+          color="#EE8686"
           as="span"
           onClick={() => toggleModal({ type: MODAL_TYPES.LOGIN })}
         >

frontend/src/components/SubscriptionCard.js

@@ -61,7 +61,6 @@ const SubscriptionCard = ({ subscription, isDesktopView, iconLink }) => {
     <>
       {!isDesktopView && (
         <AccordionItem
-          bgColor="blue.50"
           borderBottomColor="blue.500"
           key={`token-row-${subscription.id}`}
         >
@@ -108,7 +107,7 @@ const SubscriptionCard = ({ subscription, isDesktopView, iconLink }) => {
               <AccordionIcon />
             </AccordionButton>
           </h2>
-          <AccordionPanel pb={4} bgColor="blue.100" boxShadow="md">
+          <AccordionPanel pb={4} boxShadow="md">
             <Stack>
               <Stack fontSize="sm" h="min-content" pr={0}>
                 <Text placeSelf="flex-start">Address:</Text>

frontend/src/components/UpdateSubscriptionLabelInput.js

@@ -55,6 +55,7 @@ const MobileFiledInput = ({
   return (
     <>
       <Input
+        variant="bw"
         ref={inputRef}
         type="text"
         value={value}

frontend/src/components/atoms/PlainButton/PlainButton.module.css

@@ -0,0 +1,16 @@
+.button {
+  background-color: #F56646;
+  font-weight: 700;
+  border-radius: 15px;
+  text-align: center;
+  padding: 5px 10px;
+  cursor: pointer;
+  font-size: 16px;
+  justify-content: center;
+  color: #ffffff;
+}
+
+.button:hover {
+  background-color: #F4532F;
+}
+

frontend/src/components/atoms/PlainButton/index.js

@@ -0,0 +1,16 @@
+/* eslint-disable react/react-in-jsx-scope */
+import styles from "./PlainButton.module.css";
+
+const PlainButton = (props) => {
+  return (
+    <div
+      onClick={props.onClick}
+      className={styles.button}
+      style={props.style}
+      type={props.type}
+    >
+      {props.children}
+    </div>
+  );
+};
+export default PlainButton;

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/src/core/providers/OverlayProvider/index.js

@@ -30,7 +30,6 @@ import {
   AlertDialogOverlay,
   Button,
   Spinner,
-  Divider,
 } from "@chakra-ui/react";
 import UIContext from "../UIProvider/context";
 import useDashboard from "../../hooks/useDashboard";
@@ -264,14 +263,26 @@ const OverlayProvider = ({ children }) => {
       <Modal
         isOpen={modalDisclosure.isOpen}
         onClose={() => toggleModal({ type: MODAL_TYPES.OFF })}
-        size="2xl"
+        size={modal.type === MODAL_TYPES.LOGIN ? "lg" : "2xl"}
         scrollBehavior="outside"
         trapFocus={false}
       >
-        <ModalOverlay />
+        <ModalOverlay backdropFilter="auto" backdropBrightness="60%" />
 
-        <ModalContent textColor="black">
+        <ModalContent
-          <ModalHeader bgColor="white.200" py={2} fontSize="lg">
+          bg="#1A1D22"
+          borderRadius="15px"
+          border="1px white solid"
+          p="30px"
+          textColor="white"
+        >
+          <ModalHeader
+            p="0px"
+            fontSize="24px"
+            lineHeight="24px"
+            fontWeight="700"
+            mb="30px"
+          >
             {modal.type === MODAL_TYPES.NEW_SUBSCRIPTON &&
               "Subscribe to a new address"}
             {modal.type === MODAL_TYPES.FORGOT && "Forgot Password"}
@@ -283,9 +294,9 @@ const OverlayProvider = ({ children }) => {
               "Would you like to give it a name?"}
             {modal.type === MODAL_TYPES.MOBILE_INPUT_FIELD && modal.props.title}
           </ModalHeader>
-          <Divider />
+          <ModalCloseButton color="white" top="25px" right="25px" />
-          <ModalCloseButton />
           <ModalBody
+            p="0px"
             zIndex={100002}
             bgColor={
               modal.type === MODAL_TYPES.UPLOAD_ABI ? "white.200" : undefined
@@ -299,7 +310,9 @@ const OverlayProvider = ({ children }) => {
                   {...modal.props}
                 />
               )}
-              {modal.type === MODAL_TYPES.FORGOT && <ForgotPassword />}
+              {modal.type === MODAL_TYPES.FORGOT && (
+                <ForgotPassword toggleModal={toggleModal} />
+              )}
               {modal.type === MODAL_TYPES.HUBSPOT && (
                 <HubspotForm
                   toggleModal={toggleModal}

frontend/src/layouts/AppLayout.js

@@ -1,9 +1,10 @@
 import { Flex, Spinner, Box } from "@chakra-ui/react";
 import { getLayout as getSiteLayout } from "./RootLayout";
-import React, { useContext, useEffect } from "react";
+import React, { Suspense, useContext, useEffect } from "react";
 import UIContext from "../core/providers/UIProvider/context";
 import AppNavbar from "../components/AppNavbar";
 import { BACKGROUND_COLOR } from "../core/constants";
+import Sidebar from "../components/Sidebar";
 
 const AppLayout = ({ children }) => {
   const ui = useContext(UIContext);
@@ -25,6 +26,7 @@ const AppLayout = ({ children }) => {
       w="100%"
       overflow="hidden"
       direction="column"
+      pb="85px"
     >
       {(!ui.isAppReady || !ui.isLoggedIn) && (
         <Spinner
@@ -55,7 +57,19 @@ const AppLayout = ({ children }) => {
       >
         <AppNavbar />
       </Flex>
-      {ui.isAppReady && ui.isLoggedIn && children}
+      <Flex
+        direction="row"
+        // id="Bugout"
+        className="Main"
+        w="100%"
+        h="100%"
+        maxH="100%"
+      >
+        <Suspense fallback="">
+          <Sidebar />
+        </Suspense>
+        {ui.isAppReady && ui.isLoggedIn && children}
+      </Flex>
     </Flex>
   );
 };

frontend/src/layouts/RootLayout.js

@@ -1,6 +1,6 @@
 import { CloseIcon } from "@chakra-ui/icons";
 import { Flex, Center, Text, Link, IconButton } from "@chakra-ui/react";
-import React, { Suspense, useContext, useState } from "react";
+import React, { useContext, useState } from "react";
 import UIContext from "../core/providers/UIProvider/context";
 const Sidebar = React.lazy(() => import("../components/Sidebar"));
 
@@ -17,9 +17,6 @@ const RootLayout = (props) => {
       h="100%"
       maxH="100%"
     >
-      <Suspense fallback="">
-        <Sidebar />
-      </Suspense>
       <Flex
         direction="column"
         flexGrow={1}

frontend/styles/sidebar.css

@@ -29,6 +29,14 @@
   }
 }
 
+.t40 {
+  top: 40px;
+}
+
+.t0 {
+  top: 0px;
+}
+
 .pro-sidebar {
   height: 100%;
   width: 270px;

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