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) => (
+
+))(({ 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) => (
- ({
- 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[] }> = ({
}}
>
-
+
{`${schema.type} ${feature.properties?.label}`}
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)(
({ 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": {