From 4cb61ad41f471bb6c72e575d4fd51e12b6d21209 Mon Sep 17 00:00:00 2001
From: Ian Jones <51156018+ianjon3s@users.noreply.github.com>
Date: Thu, 29 Aug 2024 17:31:37 +0100
Subject: [PATCH] style: Simplify editor sidebar tabs (#3591)

---
 .../components/Sidebar/StyledTab.tsx          | 29 +++++--------------
 .../FlowEditor/components/Sidebar/index.tsx   | 20 +++++--------
 2 files changed, 16 insertions(+), 33 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/StyledTab.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/StyledTab.tsx
index 94bdc60043..7bc7245b4b 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/StyledTab.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/StyledTab.tsx
@@ -3,36 +3,23 @@ import Tab, { tabClasses, TabProps } from "@mui/material/Tab";
 import React from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
-interface StyledTabProps extends TabProps {
-  tabTheme?: "light" | "dark";
-}
-
-const StyledTab = styled(({ tabTheme, ...props }: StyledTabProps) => (
+const StyledTab = styled((props: TabProps) => (
   <Tab {...props} disableFocusRipple disableTouchRipple disableRipple />
-))<StyledTabProps>(({ theme, tabTheme }) => ({
+))<TabProps>(({ theme }) => ({
   position: "relative",
   zIndex: 1,
   textTransform: "none",
   background: "transparent",
-  border: `1px solid transparent`,
   borderBottomColor: theme.palette.border.main,
-  color: theme.palette.primary.main,
-  fontWeight: FONT_WEIGHT_SEMI_BOLD,
+  color: theme.palette.text.primary,
+  minWidth: "75px",
   minHeight: "36px",
   margin: theme.spacing(0, 0.5),
-  marginBottom: "-1px",
-  padding: "0.5em",
+  padding: "0.75em 0.25em",
   [`&.${tabClasses.selected}`]: {
-    background:
-      tabTheme === "dark"
-        ? theme.palette.background.dark
-        : theme.palette.background.default,
-    borderColor: theme.palette.border.main,
-    borderBottomColor: theme.palette.common.white,
-    color:
-      tabTheme === "dark"
-        ? theme.palette.common.white
-        : theme.palette.text.primary,
+    fontWeight: FONT_WEIGHT_SEMI_BOLD,
+    color: theme.palette.text.primary,
+    boxShadow: `inset 0 -3px 0 ${theme.palette.info.main}`,
   },
 }));
 
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx
index db16ddf1ca..b76df2413f 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx
@@ -70,7 +70,7 @@ const SidebarContainer = styled(Box)(() => ({
 }));
 
 const Header = styled("header")(({ theme }) => ({
-  padding: theme.spacing(1),
+  padding: theme.spacing(1, 1.5),
   "& input": {
     flex: "1",
     padding: "5px",
@@ -109,6 +109,7 @@ const TabList = styled(Box)(({ theme }) => ({
   },
   "& .MuiTabs-root": {
     minHeight: "0",
+    padding: theme.spacing(0, 1.5),
   },
   // Hide default MUI indicator as we're using custom styling
   "& .MuiTabs-indicator": {
@@ -304,12 +305,7 @@ const Sidebar: React.FC<{
           )}
         </Box>
         <Box width="100%" mt={2}>
-          <Box
-            display="flex"
-            flexDirection="column"
-            alignItems="flex-end"
-            marginRight={1}
-          >
+          <Box display="flex" flexDirection="column" alignItems="flex-end">
             <Badge
               sx={{ width: "100%" }}
               badgeContent={alteredNodes && alteredNodes.length}
@@ -396,13 +392,13 @@ const Sidebar: React.FC<{
         </Box>
       </Header>
       <TabList>
-        <Tabs centered onChange={handleChange} value={activeTab} aria-label="">
-          <StyledTab value="PreviewBrowser" label="Preview" tabTheme="light" />
-          <StyledTab value="History" label="History" tabTheme="light" />
+        <Tabs onChange={handleChange} value={activeTab} aria-label="">
+          <StyledTab value="PreviewBrowser" label="Preview" />
+          <StyledTab value="History" label="History" />
           {hasFeatureFlag("SEARCH") && (
-            <StyledTab value="Search" label="Search" tabTheme="light" />
+            <StyledTab value="Search" label="Search" />
           )}
-          <StyledTab value="Console" label="Console" tabTheme="dark" />
+          <StyledTab value="Console" label="Console" />
         </Tabs>
       </TabList>
       {activeTab === "PreviewBrowser" && (