From 21682ce646a0e1366f247eeb4ddeb8c163a658f1 Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Wed, 16 Oct 2024 13:23:21 +0100
Subject: [PATCH] refactor: Simplify editor toggle button group

---
 .../FlowEditor/ToggleDataFieldsButton.tsx     | 47 ++++++++-----------
 .../FlowEditor/ToggleImagesButton.tsx         | 47 ++++++++-----------
 .../FlowEditor/ToggleTagsButton.tsx           | 47 ++++++++-----------
 .../src/pages/FlowEditor/index.tsx            | 16 ++++++-
 4 files changed, 71 insertions(+), 86 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
index 8c2ae3eb28..e50a5f7418 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
@@ -1,6 +1,5 @@
 import DataFieldIcon from "@mui/icons-material/Code";
 import DataFieldOffIcon from "@mui/icons-material/CodeOff";
-import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import { useStore } from "pages/FlowEditor/lib/store";
@@ -13,32 +12,24 @@ export const ToggleDataFieldsButton: React.FC = () => {
   ]);
 
   return (
-    <Box
-      sx={(theme) => ({
-        position: "fixed",
-        bottom: theme.spacing(6),
-        left: theme.spacing(7),
-        zIndex: theme.zIndex.appBar,
-        border: `1px solid ${theme.palette.border.main}`,
-        borderRadius: "3px",
-        background: theme.palette.background.paper,
-      })}
-    >
-      <Tooltip title="Toggle data fields" placement="right">
-        <IconButton
-          aria-label="Toggle data fields"
-          onClick={toggleShowDataFields}
-          size="large"
-          sx={(theme) => ({
-            padding: theme.spacing(1),
-            color: showDataFields
-              ? theme.palette.text.primary
-              : theme.palette.text.disabled,
-          })}
-        >
-          {showDataFields ? <DataFieldIcon /> : <DataFieldOffIcon />}
-        </IconButton>
-      </Tooltip>
-    </Box>
+    <Tooltip title="Toggle data fields" placement="right">
+      <IconButton
+        aria-label="Toggle data fields"
+        onClick={toggleShowDataFields}
+        size="large"
+        sx={(theme) => ({
+          background: theme.palette.background.paper,
+          padding: theme.spacing(1),
+          color: showDataFields
+            ? theme.palette.text.primary
+            : theme.palette.text.disabled,
+          "&:hover": {
+            background: theme.palette.common.white,
+          },
+        })}
+      >
+        {showDataFields ? <DataFieldIcon /> : <DataFieldOffIcon />}
+      </IconButton>
+    </Tooltip>
   );
 };
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
index 5e27b46a0a..4e1a958804 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
@@ -1,6 +1,5 @@
 import ImageOffIcon from "@mui/icons-material/HideImage";
 import ImageIcon from "@mui/icons-material/Image";
-import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import { useStore } from "pages/FlowEditor/lib/store";
@@ -13,32 +12,24 @@ export const ToggleImagesButton: React.FC = () => {
   ]);
 
   return (
-    <Box
-      sx={(theme) => ({
-        position: "fixed",
-        bottom: theme.spacing(10),
-        left: theme.spacing(7),
-        zIndex: theme.zIndex.appBar,
-        border: `1px solid ${theme.palette.border.main}`,
-        borderRadius: "3px",
-        background: theme.palette.background.paper,
-      })}
-    >
-      <Tooltip title="Toggle images" placement="right">
-        <IconButton
-          aria-label="Toggle images"
-          onClick={toggleShowImages}
-          size="large"
-          sx={(theme) => ({
-            padding: theme.spacing(1),
-            color: showImages
-              ? theme.palette.text.primary
-              : theme.palette.text.disabled,
-          })}
-        >
-          {showImages ? <ImageIcon /> : <ImageOffIcon />}
-        </IconButton>
-      </Tooltip>
-    </Box>
+    <Tooltip title="Toggle images" placement="right">
+      <IconButton
+        aria-label="Toggle images"
+        onClick={toggleShowImages}
+        size="large"
+        sx={(theme) => ({
+          background: theme.palette.background.paper,
+          padding: theme.spacing(1),
+          color: showImages
+            ? theme.palette.text.primary
+            : theme.palette.text.disabled,
+          "&:hover": {
+            background: theme.palette.common.white,
+          },
+        })}
+      >
+        {showImages ? <ImageIcon /> : <ImageOffIcon />}
+      </IconButton>
+    </Tooltip>
   );
 };
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
index 18a01e24a8..068563981a 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
@@ -1,6 +1,5 @@
 import LabelIcon from "@mui/icons-material/Label";
 import LabelOffIcon from "@mui/icons-material/LabelOff";
-import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import { useStore } from "pages/FlowEditor/lib/store";
@@ -13,32 +12,24 @@ export const ToggleTagsButton: React.FC = () => {
   ]);
 
   return (
-    <Box
-      sx={(theme) => ({
-        position: "fixed",
-        bottom: theme.spacing(2),
-        left: theme.spacing(7),
-        zIndex: theme.zIndex.appBar,
-        border: `1px solid ${theme.palette.border.main}`,
-        borderRadius: "3px",
-        background: theme.palette.background.paper,
-      })}
-    >
-      <Tooltip title="Toggle tags" placement="right">
-        <IconButton
-          aria-label="Toggle tags"
-          onClick={toggleShowTags}
-          size="large"
-          sx={(theme) => ({
-            padding: theme.spacing(1),
-            color: showTags
-              ? theme.palette.text.primary
-              : theme.palette.text.disabled,
-          })}
-        >
-          {showTags ? <LabelIcon /> : <LabelOffIcon />}
-        </IconButton>
-      </Tooltip>
-    </Box>
+    <Tooltip title="Toggle tags" placement="right">
+      <IconButton
+        aria-label="Toggle tags"
+        onClick={toggleShowTags}
+        size="large"
+        sx={(theme) => ({
+          background: theme.palette.background.paper,
+          padding: theme.spacing(1),
+          color: showTags
+            ? theme.palette.text.primary
+            : theme.palette.text.disabled,
+          "&:hover": {
+            background: theme.palette.common.white,
+          },
+        })}
+      >
+        {showTags ? <LabelIcon /> : <LabelOffIcon />}
+      </IconButton>
+    </Tooltip>
   );
 };
diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx
index 50f0c96b7f..f582340893 100644
--- a/editor.planx.uk/src/pages/FlowEditor/index.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/index.tsx
@@ -27,6 +27,18 @@ const EditorContainer = styled(Box, {
     : `calc(100vh - ${HEADER_HEIGHT_EDITOR}px)`,
 }));
 
+const EditorVisualControls = styled(ButtonGroup)(({ theme }) => ({
+  position: "fixed",
+  bottom: theme.spacing(2.5),
+  left: theme.spacing(7.5),
+  zIndex: theme.zIndex.appBar,
+  border: `1px solid ${theme.palette.border.main}`,
+  borderRadius: "3px",
+  background: theme.palette.border.main,
+  gap: "1px",
+  overflow: "hidden",
+}));
+
 const FlowEditor = () => {
   const [flow, ...breadcrumbs] =
     useCurrentRoute().url.pathname.split("/").at(-1)?.split(",") || [];
@@ -53,14 +65,14 @@ const FlowEditor = () => {
       >
         <Box id="editor" ref={scrollContainerRef} sx={{ position: "relative" }}>
           <Flow flow={flow} breadcrumbs={breadcrumbs} />
-          <ButtonGroup
+          <EditorVisualControls
             orientation="vertical"
             aria-label="Toggle node attributes"
           >
             <ToggleImagesButton />
             <ToggleDataFieldsButton />
             <ToggleTagsButton />
-          </ButtonGroup>
+          </EditorVisualControls>
         </Box>
       </Box>
       <Sidebar />