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 }) => (
-
+
+
+ {name}
+
+
+
)}
/>
);
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 (
<>
@@ -51,7 +77,9 @@ const Cart = () => {
>
{/* LEFT */}
-
+
+
+
{/* RIGHT */}
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 (
<>
-
+ {/* LEFT SIDE */}
+
@@ -67,9 +68,10 @@ const ContactForm = () => {
+ {/* RIGHT SIDE */}
- {' '}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+