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'
+            }
+          }
+        }
       }
     }
   })

interface/src/app/main/CustomEntities.tsx

@@ -327,7 +327,7 @@ const CustomEntities = () => {
         />
       )}
 
-      <Box mt={1} display="flex" flexWrap="wrap">
+      <Box mt={2} display="flex" flexWrap="wrap">
         <Box flexGrow={1}>
           {numChanges > 0 && (
             <ButtonRow>

interface/src/app/main/Dashboard.tsx

@@ -14,6 +14,7 @@ import {
   IconButton,
   ToggleButton,
   ToggleButtonGroup,
+  Tooltip,
   Typography
 } from '@mui/material';
 
@@ -284,37 +285,44 @@ const Dashboard = memo(() => {
 
         {data.nodes.length > 0 && (
           <>
-            <ToggleButtonGroup
-              color="primary"
-              size="small"
-              value={showAll}
-              exclusive
-              onChange={handleShowAll}
-            >
-              <ButtonTooltip title={LL.ALLVALUES()} arrow>
-                <ToggleButton value={true}>
-                  <UnfoldMoreIcon sx={{ fontSize: 18 }} />
-                </ToggleButton>
-              </ButtonTooltip>
-              <ButtonTooltip title={LL.COMPACT()} arrow>
-                <ToggleButton value={false}>
-                  <UnfoldLessIcon sx={{ fontSize: 18 }} />
-                </ToggleButton>
-              </ButtonTooltip>
-            </ToggleButtonGroup>
-            <ButtonTooltip title={LL.DASHBOARD_1()} arrow>
-              <HelpOutlineIcon color="primary" sx={{ ml: 1, fontSize: 20 }} />
-            </ButtonTooltip>
-
             <Box
-              padding={1}
+              display="flex"
-              justifyContent="center"
+              justifyContent="flex-end"
-              flexDirection="column"
+              flexWrap="nowrap"
-              sx={{
+              whiteSpace="nowrap"
-                borderRadius: 1,
-                border: '1px solid rgb(65, 65, 65)'
-              }}
             >
+              <ToggleButtonGroup
+                size="small"
+                color="primary"
+                value={showAll}
+                exclusive
+                onChange={handleShowAll}
+              >
+                <ButtonTooltip title={LL.ALLVALUES()}>
+                  <ToggleButton value={true}>
+                    <UnfoldMoreIcon sx={{ fontSize: 18 }} />
+                  </ToggleButton>
+                </ButtonTooltip>
+                <ButtonTooltip title={LL.COMPACT()}>
+                  <ToggleButton value={false}>
+                    <UnfoldLessIcon sx={{ fontSize: 18 }} />
+                  </ToggleButton>
+                </ButtonTooltip>
+              </ToggleButtonGroup>
+              <Tooltip title={LL.DASHBOARD_1()}>
+                <HelpOutlineIcon
+                  sx={{
+                    ml: 1,
+                    mt: 1,
+                    fontSize: 20,
+                    verticalAlign: 'middle'
+                  }}
+                  color="primary"
+                />
+              </Tooltip>
+            </Box>
+
+            <Box mt={1} justifyContent="center" flexDirection="column">
               <IconContext.Provider
                 value={{
                   color: 'lightblue',

interface/src/app/main/Devices.tsx

@@ -535,15 +535,7 @@ const Devices = memo(() => {
 
   const renderCoreData = () => (
     <>
-      <Box
+      <Box justifyContent="center" flexDirection="column">
-        padding={1}
-        justifyContent="center"
-        flexDirection="column"
-        sx={{
-          borderRadius: 1,
-          border: '1px solid rgb(65, 65, 65)'
-        }}
-      >
         <IconContext.Provider
           value={{
             color: 'lightblue',

interface/src/app/main/Help.tsx

@@ -73,7 +73,7 @@ const Help = () => {
           divider={<Divider orientation="vertical" flexItem />}
           sx={{
             borderRadius: 3,
-            border: '2px solid grey',
+            border: '1px solid lightblue',
             justifyContent: 'space-evenly',
             alignItems: 'center'
           }}
@@ -99,7 +99,7 @@ const Help = () => {
       )}
 
       {me.admin && (
-        <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
+        <List>
           <ListItem>
             <ListItemButton
               component="a"

interface/src/app/main/Scheduler.tsx

@@ -338,7 +338,7 @@ const Scheduler = () => {
         />
       )}
 
-      <Box mt={1} display="flex" flexWrap="wrap">
+      <Box display="flex" flexWrap="wrap">
         <Box flexGrow={1}>
           {numChanges !== 0 && (
             <ButtonRow>

interface/src/app/main/Sensors.tsx

@@ -105,8 +105,6 @@ const Sensors = () => {
       color: #90CAF9;
       .th {
         border-bottom: 1px solid #565656;
-      }
-      .th {
         height: 36px;
       }
     `,
@@ -491,7 +489,7 @@ const Sensors = () => {
         />
       )}
       {sensorData?.analog_enabled === true && me.admin && (
-        <Box mt={1} display="flex" flexWrap="wrap" justifyContent="flex-end">
+        <Box mt={2} display="flex" flexWrap="wrap" justifyContent="flex-end">
           <Button
             variant="outlined"
             color="primary"

interface/src/app/settings/Settings.tsx

@@ -17,6 +17,7 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
+  Divider,
   List
 } from '@mui/material';
 
@@ -74,9 +75,9 @@ const Settings = () => {
     </Dialog>
   );
 
-  const content = () => (
+  return (
-    <>
+    <SectionContent>
-      <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
+      <List>
         <ListMenuItem
           icon={TuneIcon}
           bgcolor="#134ba2"
@@ -143,7 +144,15 @@ const Settings = () => {
 
       {renderFactoryResetDialog()}
 
-      <Box mt={2} display="flex" flexWrap="wrap">
+      <Divider />
+
+      <Box
+        mt={2}
+        display="flex"
+        justifyContent="flex-end"
+        flexWrap="nowrap"
+        whiteSpace="nowrap"
+      >
         <Button
           startIcon={<SettingsBackupRestoreIcon />}
           variant="outlined"
@@ -153,10 +162,8 @@ const Settings = () => {
           {LL.FACTORY_RESET()}
         </Button>
       </Box>
-    </>
+    </SectionContent>
   );
-
-  return <SectionContent>{content()}</SectionContent>;
 };
 
 export default Settings;

interface/src/app/status/Status.tsx

@@ -253,7 +253,7 @@ const SystemStatus = () => {
 
     return (
       <>
-        <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
+        <List>
           <ListMenuItem
             icon={BuildIcon}
             bgcolor="#72caf9"

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) => (
+export const ButtonTooltip = ({ children, ...props }: TooltipProps) => (
-  <Tooltip
+  <Tooltip {...props}>{children}</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 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 }}>
+    <Paper
-      {title && (
+      id={id}
-        <Divider
+      sx={{ p: 1.5, m: 1.5, borderRadius: 3, border: '1px solid rgb(65, 65, 65)' }}
-          sx={{
+    >
-            pb: 2,
-            borderColor: 'primary.main',
-            fontSize: 20,
-            color: 'primary.main'
-          }}
-        >
-          {title}
-        </Divider>
-      )}
       {children}
     </Paper>
   );