From 6b8275a8f8f02582a29019d2ad955cb7336e3544 Mon Sep 17 00:00:00 2001
From: nullsploit01 <harshaldharmik099@gmail.com>
Date: Wed, 10 Jan 2024 01:54:36 +0530
Subject: [PATCH] add tooltip

---
 ui/src/components/organisms/catalog-products/index.tsx | 10 +++++-----
 .../components/organisms/edit-product-modal/index.tsx  | 10 +++++++---
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/organisms/catalog-products/index.tsx b/ui/src/components/organisms/catalog-products/index.tsx
index 1ffaa3b..5c24c15 100644
--- 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
index bc35327..d4f222d 100644
--- 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>