From 6b106eb77ffc3f4a39c8d08af3c4352a1b5a4ec7 Mon Sep 17 00:00:00 2001
From: Anton Mushnin <anton.mushnin@gmail.com>
Date: Thu, 17 Nov 2022 14:02:54 +0300
Subject: [PATCH 1/4] tokens view colors

---
 frontend/pages/account/tokens.js        | 3 ++-
 frontend/src/components/TokenRequest.js | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/pages/account/tokens.js b/frontend/pages/account/tokens.js
index 9fb0ef53..6beb7215 100644
--- a/frontend/pages/account/tokens.js
+++ b/frontend/pages/account/tokens.js
@@ -72,7 +72,7 @@ const Tokens = () => {
         <ScaleFade in>
           <Modal isOpen={isOpen} onClose={onClose} size="lg" trapFocus={false}>
             <ModalOverlay />
-            <ModalContent>
+            <ModalContent bg="black.300">
               <ModalHeader>New API access token</ModalHeader>
               <ModalCloseButton />
               <ModalBody>
@@ -85,6 +85,7 @@ const Tokens = () => {
             <Stack direction={["column", "row", null]} w="100%">
               <InputGroup size="sm" variant="outline">
                 <Input
+                  variant="bw"
                   type="search"
                   maxW="300px"
                   flexBasis="50px"
diff --git a/frontend/src/components/TokenRequest.js b/frontend/src/components/TokenRequest.js
index abe6e4db..d28ea34c 100644
--- a/frontend/src/components/TokenRequest.js
+++ b/frontend/src/components/TokenRequest.js
@@ -64,6 +64,7 @@ const TokenRequest = ({ setNewToken, onClose }) => {
             <chakra.label for="pwd">API key label:</chakra.label>
             <Input
               w="100%"
+              variant="bw"
               ref={register}
               name="token_note"
               placeholder="My API key label"
@@ -81,7 +82,7 @@ const TokenRequest = ({ setNewToken, onClose }) => {
                 <Input
                   id="pwd"
                   colorScheme="blue"
-                  variant="filled"
+                  variant="bw"
                   isDisabled={createToken.isLoading}
                   placeholder="This action requires your password to confirm"
                   name="password"

From 05dd017a508dab93ee3dc303f2831f87aba27060 Mon Sep 17 00:00:00 2001
From: Anton Mushnin <anton.mushnin@gmail.com>
Date: Thu, 17 Nov 2022 14:07:20 +0300
Subject: [PATCH 2/4] themes instead props

---
 frontend/pages/subscriptions.js             |  2 +-
 frontend/src/Theme/Button/index.js          | 25 +++++++
 frontend/src/Theme/theme.js                 |  1 +
 frontend/src/components/ForgotPassword.js   | 39 +---------
 frontend/src/components/NewDashboardName.js |  3 +-
 frontend/src/components/NewSubscription.js  | 62 ++++------------
 frontend/src/components/SignIn.js           | 62 ++--------------
 frontend/src/components/SignUp.js           | 81 ++-------------------
 8 files changed, 61 insertions(+), 214 deletions(-)

diff --git a/frontend/pages/subscriptions.js b/frontend/pages/subscriptions.js
index ecfb469a..d61f2a3c 100644
--- a/frontend/pages/subscriptions.js
+++ b/frontend/pages/subscriptions.js
@@ -63,7 +63,7 @@ const Subscriptions = () => {
               <Flex
                 h="3rem"
                 w="100%"
-                bgColor="#1A1D22"
+                bgColor="black.300"
                 borderColor="white"
                 borderTopRadius="xl"
                 justifyContent="flex-end"
diff --git a/frontend/src/Theme/Button/index.js b/frontend/src/Theme/Button/index.js
index 2c791b1c..02614f44 100644
--- a/frontend/src/Theme/Button/index.js
+++ b/frontend/src/Theme/Button/index.js
@@ -144,6 +144,30 @@ const variantWhiteOnOrange = () => {
   };
 };
 
+const variantPlainOrange = () => {
+  return {
+    alignItems: "center",
+    justifyContent: "center",
+    border: "solid transparent",
+    borderRadius: "30px",
+    variant: "solid",
+    fontSize: ["md", "md", "lg", "lg", "xl", "xl"],
+    textColor: "white",
+    bg: "#F56646",
+    fontWeight: "700",
+    padding: "10px 30px",
+    _hover: {
+      backgroundColor: "#F4532F",
+    },
+    _focus: {
+      backgroundColor: "#F4532F",
+    },
+    _active: {
+      backgroundColor: "#F4532F",
+    },
+  };
+};
+
 const Button = {
   // 1. We can update the base styles
   baseStyle: () => ({
@@ -183,6 +207,7 @@ const Button = {
     link: variantLink,
     orangeAndBlue: variantOrangeAndBlue,
     whiteOnOrange: variantWhiteOnOrange,
+    plainOrange: variantPlainOrange,
   },
 };
 export default Button;
diff --git a/frontend/src/Theme/theme.js b/frontend/src/Theme/theme.js
index 0cb302e0..5e1cfc10 100644
--- a/frontend/src/Theme/theme.js
+++ b/frontend/src/Theme/theme.js
@@ -184,6 +184,7 @@ const theme = extendTheme({
     black: {
       100: "#333399",
       200: "#111442",
+      300: "#1A1D22",
     },
   },
 });
diff --git a/frontend/src/components/ForgotPassword.js b/frontend/src/components/ForgotPassword.js
index 87bd7863..253dc968 100644
--- a/frontend/src/components/ForgotPassword.js
+++ b/frontend/src/components/ForgotPassword.js
@@ -28,24 +28,7 @@ const ForgotPassword = ({ toggleModal }) => {
       <FormControl isInvalid={errors.email} my={4}>
         <InputGroup>
           <Input
-            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",
-            }}
+            variant="bw"
             placeholder="Enter your email"
             name="email"
             autoComplete="email"
@@ -56,26 +39,12 @@ const ForgotPassword = ({ toggleModal }) => {
       <Button
         mt="30px"
         mb="10px"
-        bg="#F56646"
-        fontWeight="700"
-        borderRadius="30px"
-        padding="10px 30px"
-        fontSize="20px"
-        height="46px"
-        color="#ffffff"
+        fontSize="lg"
+        h="46px"
         type="submit"
         width="100%"
-        variant="solid"
+        variant="plainOrange"
         isLoading={isLoading}
-        _hover={{
-          backgroundColor: "#F4532F",
-        }}
-        _focus={{
-          backgroundColor: "#F4532F",
-        }}
-        _active={{
-          backgroundColor: "#F4532F",
-        }}
       >
         Send
       </Button>
diff --git a/frontend/src/components/NewDashboardName.js b/frontend/src/components/NewDashboardName.js
index 8985a7f9..34894189 100644
--- a/frontend/src/components/NewDashboardName.js
+++ b/frontend/src/components/NewDashboardName.js
@@ -58,12 +58,11 @@ const NewDashboardName = (props) => {
     <>
       <Stack direction={["column", "row", null]}>
         <InputGroup border="1px solid white" borderRadius="7px">
-          <InputLeftAddon bg="#1A1D22">Name:</InputLeftAddon>
+          <InputLeftAddon bg="black.300">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}
diff --git a/frontend/src/components/NewSubscription.js b/frontend/src/components/NewSubscription.js
index 6b1c646a..9c4aee0a 100644
--- a/frontend/src/components/NewSubscription.js
+++ b/frontend/src/components/NewSubscription.js
@@ -166,7 +166,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                               isTruncated
                               maxW="60px"
                               fontSize="sm"
-                              bgColor="#1A1D22"
+                              bgColor="black.300"
                             >
                               <Image h="24px" src={selectedItem?.icon_url} />
                             </InputLeftAddon>
@@ -175,13 +175,7 @@ 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",
-                              }}
+                              variant="bw"
                               {...getInputProps()}
                             ></Input>
                             <InputRightAddon p={0}>
@@ -192,12 +186,12 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                                 w="100%"
                                 m={0}
                                 p={0}
-                                bg="#1A1D22"
+                                bg="black.300"
                                 _hover={{
-                                  backgroundColor: "#1A1D22",
+                                  backgroundColor: "black.300",
                                 }}
                                 _focus={{
-                                  backgroundColor: "#1A1D22",
+                                  backgroundColor: "black.300",
                                 }}
                                 {...getToggleButtonProps({})}
                                 aria-label={"toggle menu"}
@@ -212,7 +206,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                             direction="column"
                             className="menuListTim"
                             {...getMenuProps()}
-                            bgColor="#1A1D22"
+                            bgColor="black.300"
                             borderRadius="md"
                             boxShadow="lg"
                             pos="absolute"
@@ -297,7 +291,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                     border="1px solid white"
                     borderRadius="7px"
                   >
-                    <InputLeftAddon bg="#1A1D22">
+                    <InputLeftAddon bg="black.300">
                       <FormLabel
                         fontWeight="600"
                         // alignSelf="flex-start"
@@ -307,15 +301,9 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                       </FormLabel>
                     </InputLeftAddon>
                     <Input
-                      bg="#1A1D22"
                       type="text"
                       autoComplete="off"
-                      _hover={{
-                        backgroundColor: "#1A1D22",
-                      }}
-                      _focus={{
-                        backgroundColor: "#1A1D22",
-                      }}
+                      variant="bw"
                       placeholder="Address to subscribe to"
                       name="address"
                       value={address}
@@ -343,7 +331,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                     border="1px solid white"
                     borderRadius="7px"
                   >
-                    <InputLeftAddon bgColor="#1A1D22">
+                    <InputLeftAddon bgColor="black.300">
                       <FormLabel
                         fontWeight="600"
                         // alignSelf="flex-start"
@@ -355,13 +343,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                     <Input
                       type="text"
                       autoComplete="off"
-                      bg="#1A1D22"
-                      _hover={{
-                        backgroundColor: "#1A1D22",
-                      }}
-                      _focus={{
-                        backgroundColor: "#1A1D22",
-                      }}
+                      variant="bw"
                       placeholder="Name your label"
                       name="label"
                       value={label}
@@ -379,7 +361,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
         )}
 
         {type && (
-          <FormControl isInvalid={errors?.color} bg="#1A1D22">
+          <FormControl isInvalid={errors?.color} bg="black.300">
             {!isModal ? (
               <Flex
                 direction="row"
@@ -398,7 +380,6 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                 >
                   <IconButton
                     size="md"
-                    // colorScheme="blue"
                     color={"white.100"}
                     _hover={{ bgColor: { color } }}
                     bgColor={color}
@@ -407,14 +388,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                     icon={<BiRefresh />}
                   />
                   <Input
-                    variant="outline"
-                    backgroundColor="#1A1D22"
-                    _hover={{
-                      backgroundColor: "#1A1D22",
-                    }}
-                    _focus={{
-                      backgroundColor: "#1A1D22",
-                    }}
+                    variant="bw"
                     type="input"
                     placeholder="color"
                     name="color"
@@ -452,14 +426,7 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                     type="input"
                     placeholder="color"
                     name="color"
-                    variant="outline"
-                    backgroundColor="#1A1D22"
-                    _hover={{
-                      backgroundColor: "#1A1D22",
-                    }}
-                    _focus={{
-                      backgroundColor: "#1A1D22",
-                    }}
+                    variant="bw"
                     ref={register({ required: "color is required!" })}
                     value={color}
                     onChange={() => null}
@@ -471,12 +438,11 @@ const _NewSubscription = ({ onClose, setIsLoading, isModal, initialValue }) => {
                   styles={{
                     default: {
                       card: {
-                        background: "#1A1D22",
+                        background: "black.300",
                         border: "1px solid white",
                       },
                       triangle: {
                         borderBottomColor: "white",
-                        // border: "1px solid white",
                       },
                     },
                   }}
diff --git a/frontend/src/components/SignIn.js b/frontend/src/components/SignIn.js
index f8ac9176..335526aa 100644
--- a/frontend/src/components/SignIn.js
+++ b/frontend/src/components/SignIn.js
@@ -17,7 +17,7 @@ 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);
+  const [showPassword, setShowPassword] = useState(false);
 
   useEffect(() => {
     if (!data) {
@@ -43,29 +43,12 @@ const SignIn = ({ toggleModal }) => {
           <FormControl isInvalid={errors.username}>
             <InputGroup bg="black">
               <Input
-                borderColor="white"
-                bg="#1A1D22"
-                color="white"
-                _placeholder={{ textColor: "#CDCDCD" }}
                 autoComplete="username"
-                variant="outline"
+                variant="bw"
                 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",
-                }}
               />
             </InputGroup>
           </FormControl>
@@ -80,31 +63,14 @@ const SignIn = ({ toggleModal }) => {
           <FormControl isInvalid={errors.password}>
             <InputGroup bg="black">
               <Input
-                borderColor="white"
-                bg="#1A1D22"
-                color="white"
-                _placeholder={{ textColor: "#CDCDCD" }}
                 autoComplete="current-password"
-                variant="outline"
+                variant="bw"
                 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)}>
+              <InputRightElement onClick={() => setShowPassword(!showPassword)}>
                 <CustomIcon icon="password" />
               </InputRightElement>
             </InputGroup>
@@ -125,26 +91,12 @@ const SignIn = ({ toggleModal }) => {
         <Button
           mt="30px"
           mb="10px"
-          bg="#F56646"
-          fontWeight="700"
-          borderRadius="30px"
-          padding="10px 30px"
-          fontSize="20px"
-          height="46px"
-          color="#ffffff"
+          h="46px"
+          fontSize="lg"
+          variant="plainOrange"
           type="submit"
           width="100%"
-          variant="solid"
           isLoading={isLoading}
-          _hover={{
-            backgroundColor: "#F4532F",
-          }}
-          _focus={{
-            backgroundColor: "#F4532F",
-          }}
-          _active={{
-            backgroundColor: "#F4532F",
-          }}
         >
           Login
         </Button>
diff --git a/frontend/src/components/SignUp.js b/frontend/src/components/SignUp.js
index 9aeb5560..41ee6dfc 100644
--- a/frontend/src/components/SignUp.js
+++ b/frontend/src/components/SignUp.js
@@ -17,7 +17,7 @@ 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);
+  const [showPassword, setShowPassword] = useState(false);
 
   useEffect(() => {
     if (isSuccess) {
@@ -41,29 +41,12 @@ const SignUp = ({ toggleModal }) => {
           <FormControl isInvalid={errors.username}>
             <InputGroup>
               <Input
-                borderColor="white"
-                bg="#1A1D22"
-                color="white"
-                _placeholder={{ textColor: "#CDCDCD" }}
                 autoComplete="username"
-                variant="outline"
+                variant="bw"
                 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",
-                }}
               />
             </InputGroup>
           </FormControl>
@@ -79,24 +62,7 @@ const SignUp = ({ toggleModal }) => {
           <FormControl isInvalid={errors.email}>
             <InputGroup>
               <Input
-                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",
-                }}
+                variant="bw"
                 placeholder="Enter your email"
                 name="email"
                 autoComplete="email"
@@ -115,31 +81,14 @@ const SignUp = ({ toggleModal }) => {
           <FormControl isInvalid={errors.password}>
             <InputGroup bg="black">
               <Input
-                borderColor="white"
-                bg="#1A1D22"
-                color="white"
-                _placeholder={{ textColor: "#CDCDCD" }}
                 autoComplete="current-password"
-                variant="outline"
+                variant="bw"
                 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)}>
+              <InputRightElement onClick={() => setShowPassword(!showPassword)}>
                 <CustomIcon icon="password" />
               </InputRightElement>
             </InputGroup>
@@ -148,26 +97,12 @@ const SignUp = ({ toggleModal }) => {
         <Button
           mt="30px"
           mb="10px"
-          bg="#F56646"
-          fontWeight="700"
-          borderRadius="30px"
-          padding="10px 30px"
-          fontSize="20px"
-          height="46px"
-          color="#ffffff"
+          fontSize="lg"
+          h="46px"
           type="submit"
           width="100%"
-          variant="solid"
+          variant="plainOrange"
           isLoading={isLoading}
-          _hover={{
-            backgroundColor: "#F4532F",
-          }}
-          _focus={{
-            backgroundColor: "#F4532F",
-          }}
-          _active={{
-            backgroundColor: "#F4532F",
-          }}
         >
           Register
         </Button>

From 86102c90c77eb6535cf6e1ea0d3a6c80fe164c50 Mon Sep 17 00:00:00 2001
From: Anton Mushnin <anton.mushnin@gmail.com>
Date: Thu, 17 Nov 2022 17:49:45 +0300
Subject: [PATCH 3/4] themes

---
 frontend/src/Theme/Input/index.js | 10 +++++-----
 frontend/src/Theme/theme.js       |  2 ++
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/Theme/Input/index.js b/frontend/src/Theme/Input/index.js
index e91ec47e..afe0faa4 100644
--- a/frontend/src/Theme/Input/index.js
+++ b/frontend/src/Theme/Input/index.js
@@ -27,19 +27,19 @@ const bwVariant = () => {
       border: "1px solid white",
       borderRadius: "7px",
       color: "white",
-      backgroundColor: "#1A1D22",
+      backgroundColor: "black.300",
       errorBorderColor: "#EE8686",
       _hover: {
-        backgroundColor: "#1A1D22",
+        backgroundColor: "black.300",
       },
       _focus: {
-        backgroundColor: "#1A1D22",
+        backgroundColor: "black.300",
       },
       _placeholder: { color: "#CDCDCD" },
       _autofill: {
-        backgroundColor: "#1A1D22",
+        backgroundColor: "black.300",
         textFillColor: "white",
-        boxShadow: "0 0 0px 1000px #1A1D22 inset",
+        boxShadow: "0 0 0px 1000px black.300 inset",
         transition: "background-color 5000s ease-in-out 0s",
       },
     },
diff --git a/frontend/src/Theme/theme.js b/frontend/src/Theme/theme.js
index 5e1cfc10..5cabd994 100644
--- a/frontend/src/Theme/theme.js
+++ b/frontend/src/Theme/theme.js
@@ -165,6 +165,7 @@ const theme = extendTheme({
       700: "#fd7835",
       800: "#fd671b",
       900: "#FD5602",
+      1000: "#F56646",
     },
 
     green: {
@@ -185,6 +186,7 @@ const theme = extendTheme({
       100: "#333399",
       200: "#111442",
       300: "#1A1D22",
+      400: "#292929",
     },
   },
 });

From 9a8961e3e3076ffbd727e4ad6cff5d58f9afb095 Mon Sep 17 00:00:00 2001
From: Anton Mushnin <anton.mushnin@gmail.com>
Date: Thu, 17 Nov 2022 18:31:46 +0300
Subject: [PATCH 4/4] dashboard edit

---
 frontend/pages/dashboard/[dashboardId].js     |  3 +-
 frontend/src/components/AutoCompleter.js      | 25 ++++++++------
 frontend/src/components/CheckboxGrouped.js    |  2 +-
 frontend/src/components/NewDashboardChart.js  | 34 ++++++++-----------
 .../core/providers/OverlayProvider/index.js   |  6 ++--
 5 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/frontend/pages/dashboard/[dashboardId].js b/frontend/pages/dashboard/[dashboardId].js
index 80f2b610..9be63c88 100644
--- a/frontend/pages/dashboard/[dashboardId].js
+++ b/frontend/pages/dashboard/[dashboardId].js
@@ -160,7 +160,8 @@ const Analytics = () => {
               })
             }
             size="md"
-            colorScheme="blue"
+            color="orange.1000"
+            borderColor="1000"
             variant="outline"
             icon={<BsGear />}
           />
diff --git a/frontend/src/components/AutoCompleter.js b/frontend/src/components/AutoCompleter.js
index 464ce719..e8a5d313 100644
--- a/frontend/src/components/AutoCompleter.js
+++ b/frontend/src/components/AutoCompleter.js
@@ -53,8 +53,13 @@ const AutoCompleter = ({
         return (
           <Box pos="relative">
             <Box {...getRootProps({}, { suppressRefError: true })}>
-              <InputGroup>
+              <InputGroup
+                border="1px solid white"
+                bg="black.300"
+                borderRadius="7px"
+              >
                 <InputLeftAddon
+                  borderStyle="none"
                   isTruncated
                   maxW="60px"
                   fontSize={ui.isMobileView ? "xs" : "sm"}
@@ -75,6 +80,9 @@ const AutoCompleter = ({
                 </InputLeftAddon>
 
                 <Input
+                  variant="bw"
+                  borderStyle="none none none"
+                  borderLeft="1px solid white"
                   placeholder={placeholder}
                   isTruncated
                   fontSize="sm"
@@ -82,9 +90,10 @@ const AutoCompleter = ({
                     // defaultValue: getDefaultValue(selectedItem),
                   })}
                 ></Input>
-                <InputRightAddon>
+                <InputRightAddon bg="black.300">
                   {" "}
                   <button
+                    style={{ backgroundColor: "black.300" }}
                     {...getToggleButtonProps()}
                     aria-label={"toggle menu"}
                   >
@@ -99,7 +108,7 @@ const AutoCompleter = ({
                 direction="column"
                 className="menuListTim"
                 {...getMenuProps()}
-                bgColor="gray.300"
+                bgColor="black.300"
                 borderRadius="md"
                 boxShadow="lg"
                 pos="absolute"
@@ -123,6 +132,7 @@ const AutoCompleter = ({
                           px={4}
                           py={1}
                           alignItems="center"
+                          border="1px solid white"
                           key={`autocomplete-item-${index}`}
                           {...getItemProps({
                             index,
@@ -130,13 +140,8 @@ const AutoCompleter = ({
                           })}
                           direction="row"
                           w="100%"
-                          bgColor={
-                            index === highlightedIndex
-                              ? "orange.900"
-                              : "inherit"
-                          }
-                          color={
-                            index === highlightedIndex ? "gray.100" : "inherit"
+                          fontWeight={
+                            index === highlightedIndex ? "600" : "inherit"
                           }
                         >
                           {dropdownItem(item)}
diff --git a/frontend/src/components/CheckboxGrouped.js b/frontend/src/components/CheckboxGrouped.js
index ea63fd80..a65187ad 100644
--- a/frontend/src/components/CheckboxGrouped.js
+++ b/frontend/src/components/CheckboxGrouped.js
@@ -28,7 +28,7 @@ const CheckboxGroupped = ({
               px={2}
               key={`list-item-checkbox-${idx}`}
               direction="row"
-              bgColor={idx % 2 == 0 ? "gray.50" : "gray.100"}
+              bgColor={idx % 2 == 0 ? "black.400" : "black.300"}
             >
               <Checkbox
                 isChecked={isItemChecked(listItem)}
diff --git a/frontend/src/components/NewDashboardChart.js b/frontend/src/components/NewDashboardChart.js
index de44eb51..1416e872 100644
--- a/frontend/src/components/NewDashboardChart.js
+++ b/frontend/src/components/NewDashboardChart.js
@@ -4,7 +4,6 @@ import {
   FormLabel,
   Stack,
   Button,
-  Badge,
   Spinner,
   Accordion,
   AccordionItem,
@@ -13,6 +12,7 @@ import {
   AccordionIcon,
   Box,
   IconButton,
+  Text,
 } from "@chakra-ui/react";
 import { useSubscriptions } from "../core/hooks";
 import color from "color";
@@ -78,7 +78,7 @@ const NewDashboardChart = () => {
                   });
                 }
                 return (
-                  <AccordionItem key={`new-chart-component-${idx}`}>
+                  <AccordionItem pt="5px" key={`new-chart-component-${idx}`}>
                     {subscribedItem?.subscription_id &&
                       subscriptionItemFromCache && (
                         <>
@@ -246,31 +246,24 @@ const NewDashboardChart = () => {
                             dropdownItem={(item) => {
                               const badgeColor = color(`${item.color}`);
                               return (
-                                <>
+                                <Stack cursor="pointer" direction="row">
                                   <chakra.span whiteSpace="nowrap">
                                     {item.label}
                                   </chakra.span>
-                                  <Badge
-                                    size="sm"
-                                    placeSelf="self-end"
-                                    colorScheme={item.abi ? "green" : "gray"}
+                                  <Text
+                                    fontSize="md"
+                                    color={item.abi ? "white" : "gray"}
                                   >
                                     ABI
-                                  </Badge>
-                                  <Badge
+                                  </Text>
+                                  <Text
                                     isTruncated
-                                    size="sm"
-                                    placeSelf="self-end"
-                                    bgColor={item.color}
-                                    color={
-                                      badgeColor.isDark()
-                                        ? badgeColor.lighten(100).hex()
-                                        : badgeColor.darken(0.6).hex()
-                                    }
+                                    fontSize="md"
+                                    placeSelf="self-center"
                                   >
                                     {item.address}
-                                  </Badge>
-                                </>
+                                  </Text>
+                                </Stack>
                               );
                             }}
                           />
@@ -299,7 +292,8 @@ const NewDashboardChart = () => {
       )}
 
       <Button
-        colorScheme="green"
+        variant="plainOrange"
+        fontSize="md"
         size="md"
         onClick={() =>
           ui.dispatchDashboardUpdate({
diff --git a/frontend/src/core/providers/OverlayProvider/index.js b/frontend/src/core/providers/OverlayProvider/index.js
index 4b65db3f..8c1e3203 100644
--- a/frontend/src/core/providers/OverlayProvider/index.js
+++ b/frontend/src/core/providers/OverlayProvider/index.js
@@ -270,7 +270,7 @@ const OverlayProvider = ({ children }) => {
         <ModalOverlay backdropFilter="auto" backdropBrightness="60%" />
 
         <ModalContent
-          bg="#1A1D22"
+          bg="black.300"
           borderRadius="15px"
           border="1px white solid"
           p="30px"
@@ -357,8 +357,8 @@ const OverlayProvider = ({ children }) => {
           }
         }}
       >
-        <DrawerOverlay />
-        <DrawerContent overflowY="scroll" textColor="black">
+        <DrawerOverlay backdropFilter="auto" backdropBrightness="60%" />
+        <DrawerContent overflowY="scroll" textColor="white" bg="black.300">
           <DrawerCloseButton />
           <DrawerHeader borderBottomWidth="1px">
             {drawer.type === DRAWER_TYPES.NEW_DASHBOARD && "New dashboard"}