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