chore: add styles to buttons

src/private/AddOrEditProductForm.jsx

@@ -119,7 +119,18 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
             />
           </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
           <input type="file" hidden accept="image/*" onChange={handleImageChange} />
         </Button>
@@ -128,8 +139,32 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
       <Box mt={2}>
         {/* Fields... */}
         <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>

src/private/Admin.jsx

@@ -109,7 +109,7 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
             <Dialog open={open} onClose={() => { setOpen(false); setEditingProduct(null); }} maxWidth="sm" fullWidth>
                 <DialogTitle>{editingProduct ? 'Edit Product' : 'Add Product'}</DialogTitle>
                 <DialogContent>
-                    <AddOrEditProductForm onAdd={handleAddOrEditProduct} initialData={editingProduct} onCancel={() => { setOpen(false); setEditingProduct(null); }}/>
+                    <AddOrEditProductForm onAdd={handleAddOrEditProduct} initialData={editingProduct} onCancel={() => { setOpen(false); setEditingProduct(null); }} />
                 </DialogContent>
             </Dialog>
 
@@ -121,8 +121,30 @@ 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)}>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>
                 </DialogContent>
             </Dialog>
@@ -136,7 +158,18 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
                 />
 
                 <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
                     </Button>
                 </Box>