add tooltip

nullsploit01 · Jan 9, 2024 · 6b8275a · 6b8275a
1 parent aa3cc2d
commit 6b8275a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/ui/src/components/organisms/catalog-products/index.tsx b/ui/src/components/organisms/catalog-products/index.tsx
@@ -4,7 +4,7 @@ import { IProduct } from 'src/models/product'
 import { getFormattedPrice } from 'src/utils'
 
 import { Delete, Edit } from '@mui/icons-material/'
-import { Box, Button, ButtonGroup, Typography } from '@mui/material'
+import { Box, ButtonGroup, IconButton, Typography } from '@mui/material'
 import { Fragment } from 'react'
 
 const CatalogProducts = () => {
@@ -32,12 +32,12 @@ const CatalogProducts = () => {
     return (
       <Box sx={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
         <ButtonGroup variant="text">
-          <Button onClick={() => editProduct(product)}>
+          <IconButton onClick={() => editProduct(product)}>
             <Edit color="secondary" />
-          </Button>
-          <Button onClick={() => removeProduct(product)}>
+          </IconButton>
+          <IconButton onClick={() => removeProduct(product)}>
             <Delete color="error" />
-          </Button>
+          </IconButton>
         </ButtonGroup>
       </Box>
     )

diff --git a/ui/src/components/organisms/edit-product-modal/index.tsx b/ui/src/components/organisms/edit-product-modal/index.tsx
@@ -2,7 +2,7 @@ import CustomModal from 'src/components/molecules/modal'
 import { useProducts } from 'src/hooks/products'
 import { IProduct } from 'src/models/product'
 
-import { Box, Button, Card, CardMedia, TextField, Typography } from '@mui/material'
+import { Box, Button, Card, CardMedia, TextField, Tooltip, Typography } from '@mui/material'
 import Grid from '@mui/material/Unstable_Grid2'
 import { Form, Formik } from 'formik'
 import { Fragment } from 'react'
@@ -35,13 +35,17 @@ const EditProductModal = () => {
                               border: 1,
                               maxHeight: '130px',
                               maxWidth: '180px',
-                              overflow: 'hidden'
+                              overflow: 'hidden',
+                              borderRadius: 2,
+                              borderColor: 'gray'
                             }}
                           >
                             <Card>
                               <CardMedia sx={{ width: '100%', height: 'auto', display: 'block' }}>
                                 {values.image && (
-                                  <CardMedia sx={{ height: 140, py: 8 }} image={values.image} />
+                                  <Tooltip arrow placement="right" title="Edit Image">
+                                    <CardMedia sx={{ height: 140, py: 8 }} image={values.image} />
+                                  </Tooltip>
                                 )}
                               </CardMedia>
                             </Card>