Remove form control

src/components/_sign-in/FormHeadlines.tsx

@@ -1,19 +1,33 @@
 import React, { FC } from 'react';
 import { Box, styled, Typography } from '@mui/material';
+import RegistrImg from '../../assets/icons/19334d4fd3fc6b625204b907041f2e5e-aboard-exit-symbol.png';
 
 interface IFormHeadlinesProps {
   [key: string]: unknown;
 }
 
-const StyledFormHeadlines = styled(Box)(() => ({
+const StyledFormHeadlines = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
   textAlign: 'center',
-  padding: '1rem 0',
+  padding: theme.spacing(4),
+  gap: theme.spacing(2),
+
+  '& img': {
+    width: '250px',
+    height: '250px'
+  },
+
+  '& .title': {
+    fontSize: '1.5rem'
+  }
 }));
 
 const FormHeadlines: FC<IFormHeadlinesProps> = () => {
   return (
     <StyledFormHeadlines>
-      <Typography variant="h5">Sign In</Typography>
+      <img src={RegistrImg} alt="Form Image" width="50%" height="50%" />
     </StyledFormHeadlines>
   );
 };

src/components/_sign-in/MainSignIn.tsx

@@ -13,7 +13,7 @@ const StyledMainSignIn = styled(Box)(() => ({
   height: '100vh',
   display: 'flex',
   alignItems: 'center',
-  justifyContent: 'center',
+  justifyContent: 'center'
 }));
 
 const MainSignIn: FC<IMainSignInProps> = () => {

src/components/_sign-in/SignInForm.tsx

@@ -10,21 +10,6 @@ interface ISignInFormProps {
   [key: string]: unknown;
 }
 
-const StyledSignInForm = styled('form')(() => ({
-  width: '30vw',
-  background: '#fff',
-  padding: '0.5rem',
-  borderRadius: '5px',
-}));
-
-const StyledFormAction = styled(Box)(() => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  gap: '1.5rem',
-  padding: '1rem 0.5rem',
-}));
-
 const SignInForm: FC<ISignInFormProps> = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
@@ -41,7 +26,7 @@ const SignInForm: FC<ISignInFormProps> = () => {
         .catch((e) => {
           console.log(e);
         });
-    },
+    }
   });
 
   const handleCancel = () => {
@@ -51,38 +36,53 @@ const SignInForm: FC<ISignInFormProps> = () => {
   return (
     <StyledSignInForm onSubmit={handleSubmit}>
       <FormHeadlines />
-      <FormControl fullWidth>
-        <FormLabel htmlFor="email">Email</FormLabel>
+
+      <StyledFormFields>
         <TextField
           variant="outlined"
           className="form-field"
           name="email"
           type="email"
           value={values.email}
           onChange={handleChange}
+          label={'Please Enter your email'}
         />
-      </FormControl>
-      <FormControl fullWidth>
-        <FormLabel htmlFor="password">Password</FormLabel>
+
         <TextField
           variant="outlined"
           className="form-field"
           name="password"
           type="password"
+          label={'Please Enter your password'}
           value={values.password}
           onChange={handleChange}
         />
-      </FormControl>
-      <StyledFormAction>
-        <Button variant="outlined" fullWidth type="button" onClick={handleCancel}>
-          Cancel
-        </Button>
-        <Button variant="contained" fullWidth type="submit">
-          Sign In
-        </Button>
-      </StyledFormAction>
+      </StyledFormFields>
+      <StyledButton variant="contained" fullWidth type="submit">
+        Sign In
+      </StyledButton>
     </StyledSignInForm>
   );
 };
 
 export default SignInForm;
+
+
+
+const StyledSignInForm = styled('form')(({ theme }) => ({
+  width: '30vw',
+  background: '#fff',
+  padding: theme.spacing(2),
+  borderRadius: '5px',
+  boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)'
+}));
+
+const StyledFormFields = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(2)
+}));
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  marginTop: theme.spacing(2)
+}));

src/components/_sign-up/FormHeadLines.tsx

@@ -7,7 +7,7 @@ interface IFormHeadLinesProps {
 
 const StyledFormHeadLines = styled(Box)(() => ({
   textAlign: 'center',
-  padding: '1rem 0',
+  padding: '2rem 0'
 }));
 
 const FormHeadLines: FC<IFormHeadLinesProps> = () => {

src/components/_sign-up/MainSignUp.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Box, styled } from '@mui/material';
+import { Box, Card, styled } from '@mui/material';
 import SignUpForm from './SignUpForm';
 
 interface IMainSignUpProps {
@@ -14,6 +14,7 @@ const StyledMainSignUp = styled(Box)(() => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
+  padding: '2rem'
 }));
 
 const MainSignUp: FC<IMainSignUpProps> = () => {

src/components/_sign-up/SignUpForm.tsx

@@ -1,28 +1,43 @@
 import React, { FC } from 'react';
-import { Box, Button, FormControl, FormLabel, styled, TextField } from '@mui/material';
-import FormHeadLines from './FormHeadLines';
+import { Button, styled, TextField } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { useFormik } from 'formik';
 import { SignUpThunk } from 'store/thunk/authentication-thunk';
 import { useAppDispatch } from 'hooks/dispatch';
+import FormHeadlines from 'components/_sign-in/FormHeadlines';
 
 interface ISignUpFormProps {
   [key: string]: unknown;
 }
 
-const StyledSignUpForm = styled('form')(() => ({
+const StyledSignInForm = styled('form')(({ theme }) => ({
   width: '30vw',
   background: '#fff',
-  padding: '0.5rem',
-  borderRadius: '5px'
+  padding: theme.spacing(2),
+  borderRadius: '5px',
+  boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)'
 }));
 
-const StyledFormAction = styled(Box)(() => ({
+const StyledFormFields = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(2)
+}));
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  display: 'flex',
+  alignItems: 'center'
+}));
+
+const StyledImage = styled('img')(({ theme }) => ({
+  width: '250px',
+  height: '250px',
+  marginBottom: theme.spacing(2),
   display: 'flex',
   alignItems: 'center',
-  justifyContent: 'space-between',
-  gap: '1.5rem',
-  padding: '1rem 0rem'
+  justifyContent: 'center',
+  textAlign: 'center'
 }));
 
 const SignUpForm: FC<ISignUpFormProps> = () => {
@@ -47,44 +62,34 @@ const SignUpForm: FC<ISignUpFormProps> = () => {
     }
   });
 
-  const handleCancel = () => {
-    navigate(-1);
-  };
-
   return (
-    <StyledSignUpForm onSubmit={handleSubmit}>
-      <FormHeadLines />
-      <FormControl fullWidth>
-        <FormLabel htmlFor="email">Email</FormLabel>
+    <StyledSignInForm onSubmit={handleSubmit}>
+      <FormHeadlines />
+      <StyledFormFields>
         <TextField
           variant="outlined"
           className="form-field"
           name="email"
           type="email"
           value={values.email}
           onChange={handleChange}
+          label={'Please Enter a your email'}
         />
-      </FormControl>
-      <FormControl fullWidth>
-        <FormLabel htmlFor="password">Password</FormLabel>
+
         <TextField
           variant="outlined"
-          type="password"
-          name="password"
           className="form-field"
+          name="password"
+          type="password"
+          label={'Please Enter a your password'}
           value={values.password}
           onChange={handleChange}
         />
-      </FormControl>
-      <StyledFormAction>
-        <Button variant="outlined" fullWidth type="button" onClick={handleCancel}>
-          Cancel
-        </Button>
-        <Button variant="contained" fullWidth type="submit">
-          Sign Up
-        </Button>
-      </StyledFormAction>
-    </StyledSignUpForm>
+      </StyledFormFields>
+      <StyledButton variant="contained" fullWidth type="submit">
+        Sign Up
+      </StyledButton>
+    </StyledSignInForm>
   );
 };
 

src/components/table/Table.tsx

@@ -28,6 +28,7 @@ const StyledMuiTableCell = styled(MuiTableCell)(() => ({
   }
 }));
 
+
 const Table: React.FC = () => {
   const columns = useMemo<Column<StoreMonthData>[]>(
     () => [

src/containers/SignUp.tsx

@@ -2,13 +2,9 @@ import React, { FC } from 'react';
 import { Box, styled } from '@mui/material';
 import { MainSignUp } from 'components/_sign-up';
 
-interface ISignOutProps {
-  [key: string]: unknown;
-}
+const StyledSignOut = styled(Box)({});
 
-const StyledSignOut = styled(Box)(() => ({}));
-
-const SignOut: FC<ISignOutProps> = () => {
+const SignOut: FC = () => {
   return (
     <StyledSignOut>
       <MainSignUp />