fix: add labels to buttons

openfoodfacts · Oct 21, 2024 · 853a2fc · 853a2fc
1 parent e49772a
commit 853a2fc
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/.env.local b/.env.local
@@ -10,7 +10,7 @@ VITE_API_URL = "http://localhost:8000/api/v1"
 # PO Url
 # ------
 VITE_PO_URL = "https://world.openfoodfacts.org"
-VITE_PO_DELETE_IMAGES_URL = "https://world.openfoodfacts.net/cgi/product_image_move.pl"
+VITE_PO_DELETE_IMAGES_URL = "https://world.openfoodfacts.localhost/cgi/product_image_move.pl"
 
 # PO Url for images
 # ------

diff --git a/src/components/DeleteButton.tsx b/src/components/DeleteButton.tsx
@@ -1,4 +1,4 @@
-import IconButton from '@mui/material/IconButton';
+import Button from '@mui/material/Button';
 import DeleteIcon from '@mui/icons-material/Delete';
 import CheckIcon from '@mui/icons-material/Check';
 import { useState } from 'react';
@@ -27,13 +27,24 @@ const DeleteButton = ({ barcode, imgids }: DeleteButtonProps) => {
     }
 
   return (
-    <IconButton aria-label="delete" color='error' onClick={handleDelete}>
+    <Button 
+        aria-label="delete"
+        color='error'
+        startIcon={
+            isConfirmed ? 
+            <CheckIcon />
+            :
+            <DeleteIcon />
+        }
+        onClick={handleDelete}
+        variant='contained'
+    >
         { isConfirmed ? 
-        <CheckIcon /> 
-            : 
-        <DeleteIcon />
+            "confirm"
+            :
+            "delete"
         }
-    </IconButton>
+    </Button>
   )
 }
 

diff --git a/src/components/InfoModal.tsx b/src/components/InfoModal.tsx
@@ -145,7 +145,7 @@ export default function ModalInfo({barcode}: ModalInfoProps) {
                             <Box sx={{ display: 'flex', gap: '20px', alignItems: 'center', justifyContent: 'center', mt:2}}>
                                 <Grid container spacing={2}>
                                     {Object.keys(ticketInfo.images).map((key) => (
-                                        <Grid key={key}>
+                                        <Grid key={key} sx={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
                                             <img 
                                                 src={ticketInfo.images[key]} 
                                                 alt={key}