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 { .read-the-docs {
color: #888; 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> </Box>
)} )}
<Button component="label" <Button component="label" className="button-transparent">
sx={{
backgroundColor: 'transparent',
color: 'black',
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
color: '#fff',
},
}}>
Upload Image Upload Image
<input type="file" hidden accept="image/*" onChange={handleImageChange} /> <input type="file" hidden accept="image/*" onChange={handleImageChange} />
</Button> </Button>
@ -139,31 +128,9 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
<Box mt={2}> <Box mt={2}>
{/* Fields... */} {/* Fields... */}
<Box display="flex" justifyContent="flex-end" gap={1} mt={2}> <Box display="flex" justifyContent="flex-end" gap={1} mt={2}>
<Button onClick={onCancel} <Button onClick={onCancel} className='button-transparent'>
sx={{
backgroundColor: 'transparent',
color: 'black',
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
color: '#fff',
},
}}>
Cancel</Button> Cancel</Button>
<Button variant="contained" onClick={handleSubmit} <Button variant="contained" onClick={handleSubmit} className="button-gold">
sx={{
backgroundColor: '#A68A72',
color: '#fff',
borderRadius: 2,
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
},
}}>
Save</Button> Save</Button>
</Box> </Box>
</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 EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete'; import DeleteIcon from '@mui/icons-material/Delete';
import '../App.css';
const columnsBase = [ const columnsBase = [
{ field: 'id', headerName: 'ID', width: 70 }, { field: 'id', headerName: 'ID', width: 70 },
{ field: 'company', headerName: 'Company', flex: 1 }, { field: 'company', headerName: 'Company', flex: 1 },
@ -121,30 +123,8 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
<strong>{rowToDelete?.name}</strong>? <strong>{rowToDelete?.name}</strong>?
</Typography> </Typography>
<Box mt={2} display="flex" justifyContent="flex-end" gap={1}> <Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
<Button onClick={() => setConfirmOpen(false)} <Button onClick={() => setConfirmOpen(false)} className='button-transparent'>Cancel</Button>
sx={{ <Button variant="contained" onClick={confirmDelete} className="button-gold">Delete</Button>
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>
</Box> </Box>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
@ -158,18 +138,7 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
/> />
<Box display="flex" justifyContent="flex-end" mt={2}> <Box display="flex" justifyContent="flex-end" mt={2}>
<Button variant="contained" color="primary" onClick={() => setOpen(true)} <Button variant="contained" onClick={() => setOpen(true)} className="button-gold">
sx={{
backgroundColor: '#A68A72',
color: '#fff',
borderRadius: 2,
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
},
}}>
Add Product Add Product
</Button> </Button>
</Box> </Box>