cosmetic improvements

interface/src/CustomTheme.tsx

@@ -1,7 +1,12 @@
 import { memo } from 'react';
 import type { FC } from 'react';
 
-import { CssBaseline, ThemeProvider, responsiveFontSizes } from '@mui/material';
+import {
+  CssBaseline,
+  ThemeProvider,
+  responsiveFontSizes,
+  tooltipClasses
+} from '@mui/material';
 import { createTheme } from '@mui/material/styles';
 
 import type { RequiredChildrenProps } from 'utils';
@@ -44,6 +49,24 @@ const theme = responsiveFontSizes(
             color: '#9e9e9e' // grey[500]
           }
         }
+      },
+      MuiTooltip: {
+        defaultProps: {
+          placement: 'top',
+          arrow: true
+        },
+        styleOverrides: {
+          tooltip: {
+            padding: '4px 8px',
+            fontSize: 10,
+            color: 'rgba(0, 0, 0, 0.87)',
+            backgroundColor: '#4caf50', // MUI success.main default color
+            boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.15)',
+            [`& .${tooltipClasses.arrow}`]: {
+              color: '#4caf50'
+            }
+          }
+        }
       }
     }
   })