From 3bfb8b70ff319d37d55bba156e9bf615a75580dc Mon Sep 17 00:00:00 2001
From: Ian Jones <51156018+ianjon3s@users.noreply.github.com>
Date: Tue, 3 Sep 2024 17:57:38 +0100
Subject: [PATCH] style: Map + label tab style update (#3616)

---
 .../components/MapAndLabel/Public/index.tsx   | 37 +++++++++++++++----
 .../shared/Preview/MapContainer.tsx           |  2 +-
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
index 5d2d37d0c6..aea700dce5 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
@@ -3,7 +3,8 @@ import TabContext from "@mui/lab/TabContext";
 import TabPanel from "@mui/lab/TabPanel";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Tab from "@mui/material/Tab";
+import { lighten, styled } from "@mui/material/styles";
+import Tab, { tabClasses, TabProps } from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import Typography from "@mui/material/Typography";
 import { SiteAddress } from "@planx/components/FindProperty/model";
@@ -39,6 +40,20 @@ function a11yProps(index: number) {
   };
 }
 
+const StyledTab = styled((props: TabProps) => (
+  <Tab {...props} disableFocusRipple disableTouchRipple disableRipple />
+))<TabProps>(({ theme }) => ({
+  textTransform: "none",
+  textAlign: "right",
+  fontWeight: FONT_WEIGHT_SEMI_BOLD,
+  fontSize: theme.typography.body1.fontSize,
+  minWidth: "120px",
+  [`&.${tabClasses.selected}`]: {
+    background: lighten(theme.palette.border.light, 0.2),
+    color: theme.palette.text.primary,
+  },
+})) as typeof Tab;
+
 const VerticalFeatureTabs: React.FC<{ features: Feature[] }> = ({
   features,
 }) => {
@@ -63,19 +78,27 @@ const VerticalFeatureTabs: React.FC<{ features: Feature[] }> = ({
             editFeature(parseInt(newValue, 10));
           }}
           aria-label="Select a feature to enter data"
-          sx={{ borderRight: 1, borderColor: "divider" }}
+          TabIndicatorProps={{
+            style: {
+              width: "4px",
+            },
+          }}
+          sx={{
+            borderRight: 1,
+            borderColor: (theme) => theme.palette.border.main,
+          }}
         >
           {features.map((feature, i) => (
-            <Tab
+            <StyledTab
               key={`tab-${i}`}
               value={i.toString()}
               label={`${schema.type} ${feature.properties?.label}`}
+              disableRipple
+              disableTouchRipple
               {...a11yProps(i)}
               {...(isFeatureInvalid(i) && {
                 sx: (theme) => ({
-                  borderRight: `12px solid ${theme.palette.error.main}`,
-                  // Appear over tab indicator
-                  zIndex: 2,
+                  borderLeft: `5px solid ${theme.palette.error.main}`,
                 }),
               })}
             />
@@ -98,7 +121,7 @@ const VerticalFeatureTabs: React.FC<{ features: Feature[] }> = ({
               }}
             >
               <Box>
-                <Typography component="h2" variant="h3">
+                <Typography component="h2" variant="h3" gutterBottom>
                   {`${schema.type} ${feature.properties?.label}`}
                 </Typography>
                 <Typography variant="body2" mb={2}>
diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/MapContainer.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/MapContainer.tsx
index d287cc99ed..43550e3348 100644
--- a/editor.planx.uk/src/@planx/components/shared/Preview/MapContainer.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/MapContainer.tsx
@@ -10,7 +10,7 @@ interface MapContainerProps {
 
 export const MapContainer = styled(Box)<MapContainerProps>(
   ({ theme, environment, size }) => ({
-    padding: theme.spacing(1, 0, 1, 0),
+    padding: theme.spacing(0.5, 0, 0.5, 0),
     width: "100%",
     maxWidth: "none",
     "& my-map": {