login form styling

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