feat: updates styling

src/components/ItemControls/NodeControls/NodeControls.tsx

@@ -49,7 +49,7 @@ export const NodeControls = ({ id }: Props) => {
           <Header title="Node settings" />
           <Tabs sx={{ px: 2 }} value={tab} onChange={onTabChanged}>
             <Tab label="Settings" />
-            <Tab label="Change icon" />
+            <Tab label="Icon" />
           </Tabs>
         </Box>
       }

src/components/ItemControls/components/ControlsContainer.tsx

@@ -14,7 +14,8 @@ export const ControlsContainer = ({ header, children }: Props) => {
         height: '100%',
         width: '100%',
         display: 'flex',
-        flexDirection: 'column'
+        flexDirection: 'column',
+        pb: 2
       }}
     >
       {header && (

src/components/ItemControls/components/Header.tsx

@@ -8,16 +8,18 @@ interface Props {
   title: string;
 }
 
-export const Header = ({ title }: Props) => (
-  <Section py={2}>
-    <Grid container spacing={2}>
-      <Grid item xs={10}>
-        <Box sx={{ display: 'flex', alignItems: 'center', height: '100%' }}>
-          <Typography variant="body2" color="text.secondary">
-            {title}
-          </Typography>
-        </Box>
+export const Header = ({ title }: Props) => {
+  return (
+    <Section sx={{ py: 3 }}>
+      <Grid container spacing={2}>
+        <Grid item xs={10}>
+          <Box sx={{ display: 'flex', alignItems: 'center', height: '100%' }}>
+            <Typography variant="body2" color="text.secondary">
+              {title}
+            </Typography>
+          </Box>
+        </Grid>
       </Grid>
-    </Grid>
-  </Section>
-);
+    </Section>
+  );
+};

src/components/ItemControls/components/Section.tsx

@@ -1,24 +1,29 @@
 import React from 'react';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Stack from '@mui/material/Stack';
+import { Box, SxProps, Typography, Stack } from '@mui/material';
 
 interface Props {
   children: React.ReactNode;
   title?: string;
-  py?: number;
-  px?: number;
+  sx?: SxProps;
 }
 
-export const Section = ({ children, py, px, title }: Props) => (
-  <Box py={py ?? 3} px={px ?? 3}>
-    <Stack>
-      {title && (
-        <Typography variant="body2" color="text.secondary" pb={0.5}>
-          {title}
-        </Typography>
-      )}
-      {children}
-    </Stack>
-  </Box>
-);
+export const Section = ({ children, sx, title }: Props) => {
+  return (
+    <Box
+      sx={{
+        pt: 3,
+        px: 3,
+        ...sx
+      }}
+    >
+      <Stack>
+        {title && (
+          <Typography variant="body2" color="text.secondary" pb={0.5}>
+            {title}
+          </Typography>
+        )}
+        {children}
+      </Stack>
+    </Box>
+  );
+};