cosmetic improvements

interface/src/components/ButtonTooltip.tsx

@@ -1,22 +1,7 @@
-import { Tooltip, type TooltipProps, styled, tooltipClasses } from '@mui/material';
+import { Tooltip, type TooltipProps } from '@mui/material';
 
-export const ButtonTooltip = styled(({ className, ...props }: TooltipProps) => (
-  <Tooltip
-    {...props}
-    placement="top"
-    arrow
-    classes={{ ...(className && { popper: className }) }}
-  />
-))(({ theme }) => ({
-  [`& .${tooltipClasses.arrow}`]: {
-    color: theme.palette.success.main
-  },
-  [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: theme.palette.success.main,
-    color: 'rgba(0, 0, 0, 0.87)',
-    boxShadow: theme.shadows[1],
-    fontSize: 10
-  }
-}));
+export const ButtonTooltip = ({ children, ...props }: TooltipProps) => (
+  <Tooltip {...props}>{children}</Tooltip>
+);
 
 export default ButtonTooltip;

interface/src/components/SectionContent.tsx

@@ -1,30 +1,20 @@
 import type { FC } from 'react';
 
-import { Divider, Paper } from '@mui/material';
+import { Paper } from '@mui/material';
 
 import type { RequiredChildrenProps } from 'utils';
 
 interface SectionContentProps extends RequiredChildrenProps {
-  title?: string;
   id?: string;
 }
 
 const SectionContent: FC<SectionContentProps> = (props) => {
-  const { children, title, id } = props;
+  const { children, id } = props;
   return (
-    <Paper id={id} sx={{ p: 2, m: 2 }}>
-      {title && (
-        <Divider
-          sx={{
-            pb: 2,
-            borderColor: 'primary.main',
-            fontSize: 20,
-            color: 'primary.main'
-          }}
-        >
-          {title}
-        </Divider>
-      )}
+    <Paper
+      id={id}
+      sx={{ p: 1.5, m: 1.5, borderRadius: 3, border: '1px solid rgb(65, 65, 65)' }}
+    >
       {children}
     </Paper>
   );