chore: add styles to buttons

This commit is contained in:
Rodolfo Ruiz
2025-06-05 19:57:25 -06:00
parent b03dd0a418
commit c22d0ab9c2
2 changed files with 128 additions and 60 deletions

View File

@@ -119,7 +119,18 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
/> />
</Box> </Box>
)} )}
<Button variant="outlined" component="label"> <Button component="label"
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>
@@ -128,8 +139,32 @@ 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}>Cancel</Button> <Button onClick={onCancel}
<Button variant="contained" onClick={handleSubmit}>Save</Button> sx={{
backgroundColor: 'transparent',
color: 'black',
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
color: '#fff',
},
}}>
Cancel</Button>
<Button variant="contained" onClick={handleSubmit}
sx={{
backgroundColor: '#A68A72',
color: '#fff',
borderRadius: 2,
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
},
}}>
Save</Button>
</Box> </Box>
</Box> </Box>
</Box> </Box>

View File

@@ -121,8 +121,30 @@ 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)}>Cancel</Button> <Button onClick={() => setConfirmOpen(false)}
<Button variant="contained" color="error" onClick={confirmDelete}>Delete</Button> 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>
</Box> </Box>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
@@ -136,7 +158,18 @@ 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" color="primary" onClick={() => setOpen(true)}
sx={{
backgroundColor: '#A68A72',
color: '#fff',
borderRadius: 2,
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
},
}}>
Add Product Add Product
</Button> </Button>
</Box> </Box>