AgileWebs/fendi-react-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add and apply styles to existing buttons

Browse Source
This commit is contained in:
Rodolfo Ruiz 2025-06-05 20:14:19 -06:00
parent c22d0ab9c2
commit f75f771329
3 changed files with 52 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/App.css
View File

@ -40,3 +40,47 @@
.read-the-docs {
color: #888;
}
.button-gold {
background-color: #A68A72 !important;
color: #fff !important;
border-radius: 16px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
.button-gold:hover {
background-color: #26201A !important;
}
.button-transparent {
background-color: transparent !important;
color: black !important;
border-radius: 16px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
.button-transparent:hover {
background-color: #26201A !important;
color: #fff !important;
}
/*
.button-transparent {
background-color: transparent !important;
color: black !important;
text-transform: uppercase !important;
font-weight: 600 !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
.button-transparent:hover {
background-color: #26201A !important;
color: #fff !important;
} */

39
src/private/AddOrEditProductForm.jsx
View File

@ -119,18 +119,7 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
/>
</Box>
)}
<Button component="label"
sx={{
backgroundColor: 'transparent',
color: 'black',
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
color: '#fff',
},
}}>
<Button component="label" className="button-transparent">
Upload Image
<input type="file" hidden accept="image/*" onChange={handleImageChange} />
</Button>
@ -139,31 +128,9 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
<Box mt={2}>
{/* Fields... */}
<Box display="flex" justifyContent="flex-end" gap={1} mt={2}>
<Button onClick={onCancel}
sx={{
backgroundColor: 'transparent',
color: 'black',
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
color: '#fff',
},
}}>
<Button onClick={onCancel} className='button-transparent'>
Cancel</Button>
<Button variant="contained" onClick={handleSubmit}
sx={{
backgroundColor: '#A68A72',
color: '#fff',
borderRadius: 2,
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
},
}}>
<Button variant="contained" onClick={handleSubmit} className="button-gold">
Save</Button>
</Box>
</Box>

41
src/private/Admin.jsx
View File

@ -7,6 +7,8 @@ import AddOrEditProductForm from './AddOrEditProductForm.jsx';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import '../App.css';
const columnsBase = [
{ field: 'id', headerName: 'ID', width: 70 },
{ field: 'company', headerName: 'Company', flex: 1 },
@ -121,30 +123,8 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
<strong>{rowToDelete?.name}</strong>?
</Typography>
<Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
<Button onClick={() => setConfirmOpen(false)}
sx={{
backgroundColor: 'transparent',
color: 'black',
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
color: '#fff',
},
}}>Cancel</Button>
<Button variant="contained" color="error" onClick={confirmDelete}
sx={{
backgroundColor: '#A68A72',
color: '#fff',
borderRadius: 2,
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
},
}}>Delete</Button>
<Button onClick={() => setConfirmOpen(false)} className='button-transparent'>Cancel</Button>
<Button variant="contained" onClick={confirmDelete} className="button-gold">Delete</Button>
</Box>
</DialogContent>
</Dialog>
@ -158,18 +138,7 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
/>
<Box display="flex" justifyContent="flex-end" mt={2}>
<Button variant="contained" color="primary" onClick={() => setOpen(true)}
sx={{
backgroundColor: '#A68A72',
color: '#fff',
borderRadius: 2,
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
},
}}>
<Button variant="contained" onClick={() => setOpen(true)} className="button-gold">
Add Product
</Button>
</Box>