From 61fb3c9b70e208802c2256cf7640906a3c7ffa8b Mon Sep 17 00:00:00 2001 From: varbuzz <rejandev@gmail.com> Date: Sat, 8 Jul 2023 17:01:05 +0545 Subject: [PATCH] fix: style issue contacts --- src/components/CustomFormInputs/index.tsx | 47 ++++---- src/scenes/Cart/index.tsx | 108 ++++++++++++------- src/scenes/Contact/fragments/ContactForm.tsx | 27 +++-- 3 files changed, 111 insertions(+), 71 deletions(-) diff --git a/src/components/CustomFormInputs/index.tsx b/src/components/CustomFormInputs/index.tsx index 6c6959b..1da8a51 100644 --- a/src/components/CustomFormInputs/index.tsx +++ b/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> )} /> ); diff --git a/src/scenes/Cart/index.tsx b/src/scenes/Cart/index.tsx index d0fccc9..8f3e55a 100644 --- a/src/scenes/Cart/index.tsx +++ b/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}> diff --git a/src/scenes/Contact/fragments/ContactForm.tsx b/src/scenes/Contact/fragments/ContactForm.tsx index 165e505..7beb89b 100644 --- a/src/scenes/Contact/fragments/ContactForm.tsx +++ b/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'