Add styles for Login from Chakra

EmiliaWenta · Dec 4, 2023 · 3d2bfd2 · 3d2bfd2
1 parent dacc4e1
commit 3d2bfd2
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 40 deletions.
diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx
@@ -1,8 +1,24 @@
 import { useDispatch } from 'react-redux';
 import { login } from '../../redux/reducers/auth/operations';
-import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react';
+import {
+  Flex,
+  Box,
+  Stack,
+  Button,
+  Card,
+  CardBody,
+  FormControl,
+  FormLabel,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  useColorMode,
+} from '@chakra-ui/react';
+
+import { AtSignIcon, LockIcon } from '@chakra-ui/icons';
 
 export default function Login() {
+  const { colorMode } = useColorMode();
   const dispatch = useDispatch();
   const handleSubmit = e => {
     e.preventDefault();
@@ -18,30 +34,85 @@ export default function Login() {
     );
   };
   return (
-    <form onSubmit={handleSubmit}>
-      <label>
-        Email
-        <input
-          type="text"
-          name="email"
-          placeholder="Enter Your email"
-          title="email must contain @"
-          required
-        />
-      </label>
-      <label>
-        Password
-        <input
-          name="password"
-          type="password"
-          placeholder="Enter Your passsword"
-          minLength="8"
-          required
-        />
-      </label>
-      <label>
-        <button type="submit">Login</button>
-      </label>
-    </form>
+    <Box>
+      <Flex paddingTop="25px" justify="center" align="flex-start">
+        <Card
+          bg="#f6f8fa"
+          variant="outline"
+          borderColor="#d8dee4"
+          w="400px"
+          size="lg"
+          borderRadius={8}
+          boxShadow="lg"
+        >
+          <CardBody>
+            <form onSubmit={handleSubmit}>
+              <Stack spacing="4">
+                <FormControl isRequired>
+                  <FormLabel
+                    size="md"
+                    color={colorMode === 'dark' ? 'black' : 'black'}
+                  >
+                    Email
+                  </FormLabel>
+                  <InputGroup>
+                    <InputLeftElement pointerEvents="none">
+                      <AtSignIcon color="gray.300" />
+                    </InputLeftElement>
+                    <Input
+                      color={colorMode === 'dark' ? 'black' : 'black'}
+                      name="email"
+                      placeholder="Enter Your Email"
+                      type="email"
+                      bg="white"
+                      borderColor="#d8dee4"
+                      size="md"
+                      borderRadius="6px"
+                    />
+                  </InputGroup>
+                </FormControl>
+
+                <FormControl isRequired>
+                  <FormLabel
+                    size="md"
+                    color={colorMode === 'dark' ? 'black' : 'black'}
+                  >
+                    Password
+                  </FormLabel>
+
+                  <InputGroup>
+                    <InputLeftElement pointerEvents="none">
+                      <LockIcon color="gray.300" />
+                    </InputLeftElement>
+                    <Input
+                      type="password"
+                      bg="white"
+                      borderColor="#d8dee4"
+                      size="md"
+                      borderRadius="6px"
+                      name="password"
+                      minLength="8"
+                      placeholder="Enter Your password"
+                      color={colorMode === 'dark' ? 'black' : 'black'}
+                    />
+                  </InputGroup>
+                </FormControl>
+
+                <Button
+                  type="submit"
+                  bg="#2da44e"
+                  color="white"
+                  size="sm"
+                  _hover={{ bg: '#2c974b' }}
+                  _active={{ bg: '#298e46' }}
+                >
+                  LogIn
+                </Button>
+              </Stack>
+            </form>
+          </CardBody>
+        </Card>
+      </Flex>
+    </Box>
   );
 }
diff --git a/src/components/Register/Register.jsx b/src/components/Register/Register.jsx
@@ -3,17 +3,13 @@ import { register } from '../../redux/reducers/auth/operations';
 import {
   Flex,
   Box,
-  Spacer,
   Stack,
   Button,
   Card,
   CardBody,
   FormControl,
   FormLabel,
-  Heading,
-  HStack,
   Input,
-  Vstack,
   InputGroup,
   InputLeftElement,
   useColorMode,
@@ -22,9 +18,6 @@ import {
 import { ArrowForwardIcon, AtSignIcon, LockIcon } from '@chakra-ui/icons';
 
 export default function Register() {
-  // const [username, setUsername] = useState("");
-  // const [email, setEmail] = useState("");
-  // const [password, setPassword] = useState("");
   const { colorMode } = useColorMode();
   const dispatch = useDispatch();
   const handleSubmit = e => {
@@ -46,13 +39,6 @@ export default function Register() {
   };
 
   return (
-    // <Box>
-    //   <Flex justify="center" align="center" height="80vh">
-    //     <Center>
-    //       <Stack></Stack>
-    //     </Center>
-    //   </Flex>
-    // </Box>
     <Box>
       <Flex paddingTop="25px" justify="center" align="flex-start">
         <Card