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

Login register forms
2022-11-17 12:42:56 +03:00 · 2022-11-17 12:42:56 +03:00 · db06fef9c3
commit db06fef9c3
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -41,3 +41,4 @@ package-lock.json
 # vercel
 .vercel

+.todo
--- a/frontend/pages/subscriptions.js
+++ b/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"
--- a/frontend/src/Theme/Input/index.js
+++ b/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: {
--- 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) {
@ -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>
--- a/frontend/src/components/AppNavbar.js
+++ b/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}>
-                                  <Text color="black">{child.title}</Text>
+                                <MenuItem
+                                  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>
                  );
                })}
--- a/frontend/src/components/EntriesNavigation.js
+++ b/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
-                .slice(
-                  cursor,
-                  streamCache.length <= cursor + PAGE_SIZE
-                    ? streamCache.length
-                    : cursor + PAGE_SIZE
-                )
-                .map((entry, idx) => (
-                  <StreamEntry
-                    showOnboardingTooltips={false}
-                    key={`entry-list-${idx}`}
-                    entry={entry}
-                    disableDelete={!canDelete}
-                    disableCopy={!canCreate}
-                    filterCallback={handleFilterStateCallback}
-                    filterConstants={{ DIRECTIONS, CONDITION, FILTER_TYPES }}
-                  />
-                ))}
-              {previousEvent &&
-              !loadOlderEventsIsFetching &&
-              !previousEventIsFetching ? (
-                <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."
-                  ) : (
+                {streamCache
+                  .slice(
+                    cursor,
+                    streamCache.length <= cursor + PAGE_SIZE
+                      ? streamCache.length
+                      : cursor + PAGE_SIZE
+                  )
+                  .map((entry, idx) => (
+                    <StreamEntry
+                      showOnboardingTooltips={false}
+                      key={`entry-list-${idx}`}
+                      entry={entry}
+                      disableDelete={!canDelete}
+                      disableCopy={!canCreate}
+                      filterCallback={handleFilterStateCallback}
+                      filterConstants={{ DIRECTIONS, CONDITION, FILTER_TYPES }}
+                    />
+                  ))}
+                {previousEvent &&
+                !loadOlderEventsIsFetching &&
+                !previousEventIsFetching ? (
+                  <Center>
                    <Button
-                      isLoading
-                      loadingText="Loading"
+                      onClick={() => {
+                        loadPreviousEventHandler();
+                      }}
                      variant="outline"
                      colorScheme="green"
-                    ></Button>
-                  )}
-                </Center>
-              )}
+                    >
+                      Load older events
+                    </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>
        </>
--- a/frontend/src/components/ForgotPassword.js
+++ b/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 {
-  FormControl,
-  InputGroup,
-  FormErrorMessage,
-  Button,
-  Input,
-  InputRightElement,
-} from "@chakra-ui/react";
-import CustomIcon from "./CustomIcon";
+import { FormControl, InputGroup, Button, Input } from "@chakra-ui/react";
 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"
-            variant="filled"
-            placeholder="Your email here"
+            borderColor="white"
+            bg="#1A1D22"
+            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>
--- a/frontend/src/components/LandingBarMobile.js
+++ b/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;
--- a/frontend/src/components/LandingNavbar.js
+++ b/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 {
-  PAGETYPE,
-  SITEMAP,
-  PRIMARY_MOON_LOGO_URL,
-  BACKGROUND_COLOR,
-} from "../core/constants";
+import { PAGETYPE, SITEMAP, PRIMARY_MOON_LOGO_URL } 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 && (
-        <>
-          <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 && <LandingBarMobile />}
      {!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">
-                      <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
+                    <Menu autoSelect="false">
+                      <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}
-                  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 && (
@ -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>
--- 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"
--- a/frontend/src/components/NewDashboardName.js
+++ b/frontend/src/components/NewDashboardName.js
@ -57,9 +57,13 @@ const NewDashboardName = (props) => {
  return (
    <>
      <Stack direction={["column", "row", null]}>
-        <InputGroup>
-          <InputLeftAddon>Name:</InputLeftAddon>
+        <InputGroup border="1px solid white" borderRadius="7px">
+          <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}
--- a/frontend/src/components/NewSubscription.js
+++ b/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">
-                    <InputLeftAddon>
+                  <InputGroup
+                    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">
-                    <InputLeftAddon>
+                  <InputGroup
+                    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">
--- a/frontend/src/components/Sidebar.js
+++ b/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 {
-  Flex,
-  Image,
-  IconButton,
-  Divider,
-  Text,
-  Button,
-} from "@chakra-ui/react";
+import { Divider, Text, Button } from "@chakra-ui/react";
 import UIContext from "../core/providers/UIProvider/context";
 import React from "react";
-import {
-  HamburgerIcon,
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  LockIcon,
-} from "@chakra-ui/icons";
+import { LockIcon } from "@chakra-ui/icons";
 import { MdSettings, MdDashboard, MdTimeline } from "react-icons/md";
-import {
-  PRIMARY_MOON_LOGO_URL,
-  SITEMAP,
-  PAGETYPE,
-  BACKGROUND_COLOR,
-} from "../core/constants";
+import { 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">
--- a/frontend/src/components/SignIn.js
+++ b/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"
-                colorScheme="blue"
-                placeholder="Your Moonstream username"
+                variant="outline"
+                placeholder="Enter your username or email"
+                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>
-                <CustomIcon icon="name" />
+            </InputGroup>
+          </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">
-        {" "}
-        <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">
+
+      <Text textAlign="center" fontSize="md" color="white">
        Don`t have an account?{" "}
        <Box
          cursor="pointer"
-          color="blue.800"
+          color="#EE8686"
          as="span"
          onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
        >
--- a/frontend/src/components/SignUp.js
+++ b/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"
-                colorScheme="blue"
-                placeholder="Your username here"
-                name="username"
+                borderColor="white"
+                bg="#1A1D22"
+                color="white"
+                _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"
-                colorScheme="blue"
-                placeholder="Your email here"
+                borderColor="white"
+                bg="#1A1D22"
+                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>
-                <CustomIcon icon="name" />
+            </InputGroup>
+          </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}
-          variant="solid"
-          colorScheme="blue"
-          width="100%"
+          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"
          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="gray.1200" pb={8}>
+      <Text textAlign="center" fontSize="md" color="white">
        Already have an account?{" "}
        <Box
          cursor="pointer"
-          color="blue.400"
+          color="#EE8686"
          as="span"
          onClick={() => toggleModal({ type: MODAL_TYPES.LOGIN })}
        >
--- a/frontend/src/components/SubscriptionCard.js
+++ b/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>
--- a/frontend/src/components/UpdateSubscriptionLabelInput.js
+++ b/frontend/src/components/UpdateSubscriptionLabelInput.js
@ -55,6 +55,7 @@ const MobileFiledInput = ({
  return (
    <>
      <Input
+        variant="bw"
        ref={inputRef}
        type="text"
        value={value}
--- a/frontend/src/components/atoms/PlainButton/PlainButton.module.css
+++ b/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;
+}
+
--- a/frontend/src/components/atoms/PlainButton/index.js
+++ b/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;
--- 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,
      },
      {
--- a/frontend/src/core/providers/OverlayProvider/index.js
+++ b/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">
-          <ModalHeader bgColor="white.200" py={2} fontSize="lg">
+        <ModalContent
+          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 />
+          <ModalCloseButton color="white" top="25px" right="25px" />
          <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}
--- a/frontend/src/layouts/AppLayout.js
+++ b/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>
  );
 };
--- a/frontend/src/layouts/RootLayout.js
+++ b/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}
--- a/frontend/styles/sidebar.css
+++ b/frontend/styles/sidebar.css
@ -29,6 +29,14 @@
  }
 }

+.t40 {
+  top: 40px;
+}
+
+.t0 {
+  top: 0px;
+}
+
 .pro-sidebar {
  height: 100%;
  width: 270px;
--- 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;
+}
+