fix: style issue contacts

Author: buzzracharyeah-rejan

src/components/CustomFormInputs/index.tsx

@@ -1,6 +1,7 @@
 // src/form-component/FormInputText.tsx
 import { Control, Controller } from 'react-hook-form';
 import TextField from '@mui/material/TextField';
+import { FormGroup, FormLabel, InputLabel, useTheme } from '@mui/material';
 
 type FormInputProps = {
   name: string;
@@ -9,22 +10,18 @@ type FormInputProps = {
 };
 
 export const FormInputText = ({ name, control, label }: FormInputProps) => {
+  const theme = useTheme();
+
   const classes = {
     textField: {
       borderRadius: '10px',
-      background: '#FFF',
-      color: '#000',
-      border: '1px solid #9F9F9F',
-      '& .MuiInputBase-input': {
-        border: 'none',
-        height: '100%',
+      background: '#fff',
+      padding: '0.85rem 0',
+      '& :focus': {
+        background: '#f3f3f3',
       },
-      '&:hover': {
-        border: '1px solid #9F9F9F',
-      },
-      '&:active': {
-        borderRadius: '10px',
-        border: '1px solid #9F9F9F',
+      '& .MuiInputBase-input': {
+        padding: '1rem',
       },
     },
   };
@@ -33,17 +30,21 @@ export const FormInputText = ({ name, control, label }: FormInputProps) => {
       name={name}
       control={control}
       render={({ field: { onChange, value }, fieldState: { error }, formState }) => (
-        <TextField
-          helperText={error ? error.message : null}
-          size='small'
-          error={!!error}
-          onChange={onChange}
-          value={value}
-          fullWidth
-          label={label}
-          variant='outlined'
-          sx={classes.textField}
-        />
+        <FormGroup>
+          <InputLabel htmlFor={name} sx={{ textTransform: 'capitalize', letterSpacing: '1.2px' }}>
+            {name}
+          </InputLabel>
+          <TextField
+            helperText={error ? error.message : null}
+            size='small'
+            error={!!error}
+            onChange={onChange}
+            value={value}
+            fullWidth
+            variant='outlined'
+            sx={classes.textField}
+          />
+        </FormGroup>
       )}
     />
   );

src/scenes/Cart/index.tsx

@@ -1,47 +1,73 @@
 import { Box, Button, Container, Grid, Typography, useTheme } from '@mui/material';
-import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
+import { DataGrid, GridColDef, GridColTypeDef, GridValueGetterParams } from '@mui/x-data-grid';
 import Header from '../../components/Header';
 import FlexBetween from '../../components/FlexBetween';
+import { useMemo } from 'react';
+
+const classes = {
+  cartContainer: {
+    background: '#F9F1E7',
+    width: '393px',
+    height: '390px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+    p: '1.5rem 2.5rem',
+  },
+  title: {
+    color: '#000',
+    fontSize: '32px',
+    fontStyle: 'normal',
+    fontWeight: '600',
+    lineHeight: 'normal',
+  },
+  subtitle: {
+    color: '#9F9F9F',
+    fontSize: '16px',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: 'normal',
+  },
+  highlight: {
+    color: 'var(--primary, #B88E2F)',
+    fontSize: '20px',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    lineHeight: 'normal',
+  },
+  orderBtn: {
+    border: '1px solid #000',
+    padding: '0.5rem 1.5rem',
+    color: '#000',
+    letterSpacing: '1.25px',
+  },
+  root: {
+    display: 'flex',
+    height: '100%',
+  },
+  dataGrid: {
+    flexGrow: 1,
+  },
+};
 
 const Cart = () => {
-  const classes = {
-    cartContainer: {
-      background: '#F9F1E7',
-      width: '393px',
-      height: '390px',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'space-around',
-      p: '1.5rem 2.5rem',
-    },
-    title: {
-      color: '#000',
-      fontSize: '32px',
-      fontStyle: 'normal',
-      fontWeight: '600',
-      lineHeight: 'normal',
-    },
-    subtitle: {
-      color: '#9F9F9F',
-      fontSize: '16px',
-      fontStyle: 'normal',
-      fontWeight: '400',
-      lineHeight: 'normal',
-    },
-    highlight: {
-      color: 'var(--primary, #B88E2F)',
-      fontSize: '20px',
-      fontStyle: 'normal',
-      fontWeight: '500',
-      lineHeight: 'normal',
-    },
-    orderBtn: {
-      border: '1px solid #000',
-      padding: '0.5rem 1.5rem',
-      color: '#000',
-      letterSpacing: '1.25px',
-    },
-  };
+  const columns: GridColDef[] = useMemo(
+    () => [
+      { field: 'product', headerName: 'Product', editable: false, sortable: false, width: 170 },
+      { field: 'price', headerName: 'Price', width: 120 },
+      { field: 'quantity', headerName: 'Quantity', width: 120 },
+      { field: 'subtotal', headerName: 'Subtotal', width: 140 },
+    ],
+    []
+  );
+
+  const rows = [
+    { id: 1, product: 'super test', price: 32, quantity: 1, subtotal: 32 },
+    { id: 1, product: 'super test', price: 32, quantity: 1, subtotal: 32 },
+    { id: 1, product: 'super test', price: 32, quantity: 1, subtotal: 32 },
+    { id: 1, product: 'super test', price: 32, quantity: 1, subtotal: 32 },
+  ];
+
   return (
     <>
       <Header title='Cart' location='Home' location1='Cart' />
@@ -51,7 +77,9 @@ const Cart = () => {
       >
         <Grid container>
           {/* LEFT */}
-          <Grid item xs={12} md={6} lg={8}></Grid>
+          <Grid item xs={12} md={6} lg={8}>
+            <DataGrid rows={rows} columns={columns} className={classes.dataGrid} />
+          </Grid>
           <Grid item xs={12} md={6} lg={4}>
             {/* RIGHT */}
             <Box sx={classes.cartContainer}>

src/scenes/Contact/fragments/ContactForm.tsx

@@ -17,7 +17,8 @@ const ContactForm = () => {
   return (
     <>
       <Grid container>
-        <Grid item md={6} lg={4}>
+        {/* LEFT SIDE */}
+        <Grid item md={6} lg={4} sx={{ p: '1.25rem' }}>
           <Box display='flex' flexWrap='wrap' justifyContent='space-around' gap='2.8rem'>
             <FlexBetween>
               <Box component='img' alt='location' src='/assets/location.svg' />
@@ -67,9 +68,10 @@ const ContactForm = () => {
           </Box>
         </Grid>
 
+        {/* RIGHT SIDE */}
         <Grid item xs={12} md={6} lg={8}>
-          {' '}
-          <form
+          <Box
+            component='form'
             onSubmit={handleSubmit(onSubmit)}
             style={{
               display: 'flex',
@@ -79,11 +81,20 @@ const ContactForm = () => {
               gap: '3.5rem',
             }}
           >
-            <FormInputText name='name' control={control} label='Your name' />
-            <FormInputText name='email' control={control} label='Email Address' />
-            <FormInputText name='subject' control={control} label='Subject' />
-            <FormInputText name='message' control={control} label='Message' />
-          </form>
+            <Box minWidth='529px'>
+              <FormInputText name='name' control={control} label='Your name' />
+            </Box>
+
+            <Box minWidth='529px'>
+              <FormInputText name='email' control={control} label='Email Address' />
+            </Box>
+            <Box minWidth='529px'>
+              <FormInputText name='subject' control={control} label='Subject' />
+            </Box>
+            <Box minWidth='529px'>
+              <FormInputText name='message' control={control} label='Message' />
+            </Box>
+          </Box>
           <Box mt='2.5rem' mb='0.5rem' textAlign={'center'}>
             <Button
               type='submit'