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] 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"}