chore: Move repeated shared Tooltip styles to MUI theme (#3790)

theopensystemslab · Oct 10, 2024 · 2ff47d5 · 2ff47d5
1 parent f5030d9
commit 2ff47d5
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 93 deletions.
diff --git a/editor.planx.uk/src/components/EditorNavMenu.tsx b/editor.planx.uk/src/components/EditorNavMenu.tsx
@@ -62,21 +62,6 @@ const MenuTitle = styled(Typography)(({ theme }) => ({
   textAlign: "left",
 })) as typeof Typography;
 
-const TooltipWrap = styled(({ className, ...props }: TooltipProps) => (
-  <Tooltip {...props} arrow placement="right" classes={{ popper: className }} />
-))(() => ({
-  [`& .${tooltipClasses.arrow}`]: {
-    color: "#2c2c2c",
-  },
-  [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: "#2c2c2c",
-    left: "-5px",
-    fontSize: "0.8em",
-    borderRadius: 0,
-    fontWeight: FONT_WEIGHT_SEMI_BOLD,
-  },
-}));
-
 const MenuButton = styled(IconButton, {
   shouldForwardProp: (prop) => prop !== "isActive",
 })<{ isActive: boolean }>(({ theme, isActive, disabled }) => ({
@@ -273,7 +258,7 @@ function EditorNavMenu() {
         {visibleRoutes.map(({ title, Icon, route, disabled }) => (
           <MenuItem key={title}>
             {compact ? (
-              <TooltipWrap title={title}>
+              <Tooltip title={title} placement="right">
                 <Box component="span">
                   <MenuButton
                     isActive={isActive(route)}
@@ -284,7 +269,7 @@ function EditorNavMenu() {
                     <Icon />
                   </MenuButton>
                 </Box>
-              </TooltipWrap>
+              </Tooltip>
             ) : (
               <MenuButton
                 isActive={isActive(route)}

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
@@ -2,26 +2,9 @@ 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 { styled } from "@mui/material/styles";
-import Tooltip, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip";
+import Tooltip from "@mui/material/Tooltip";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
-import { FONT_WEIGHT_SEMI_BOLD } from "theme";
-
-const TooltipWrap = styled(({ className, ...props }: TooltipProps) => (
-  <Tooltip {...props} arrow placement="right" classes={{ popper: className }} />
-))(() => ({
-  [`& .${tooltipClasses.arrow}`]: {
-    color: "#2c2c2c",
-  },
-  [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: "#2c2c2c",
-    left: "-5px",
-    fontSize: "0.8em",
-    borderRadius: 0,
-    fontWeight: FONT_WEIGHT_SEMI_BOLD,
-  },
-}));
 
 export const ToggleTagsButton: React.FC = () => {
   const [showTags, toggleShowTags] = useStore((state) => [
@@ -41,7 +24,7 @@ export const ToggleTagsButton: React.FC = () => {
         background: theme.palette.background.paper,
       })}
     >
-      <TooltipWrap title="Toggle tags">
+      <Tooltip title="Toggle tags" placement="right">
         <IconButton
           aria-label="Toggle tags"
           onClick={toggleShowTags}
@@ -55,7 +38,7 @@ export const ToggleTagsButton: React.FC = () => {
         >
           {showTags ? <LabelIcon /> : <LabelOffIcon />}
         </IconButton>
-      </TooltipWrap>
+      </Tooltip>
     </Box>
   );
 };
diff --git a/...anx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FlowStatus/PublicLink.tsx b/...anx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FlowStatus/PublicLink.tsx
@@ -2,7 +2,6 @@ import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
-import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { FlowStatus } from "@opensystemslab/planx-core/types";
 import React, { useState } from "react";
@@ -11,27 +10,25 @@ import SettingsDescription from "ui/editor/SettingsDescription";
 const CopyButton = (props: { link: string; isActive: boolean }) => {
   const [copyMessage, setCopyMessage] = useState<"copy" | "copied">("copy");
   return (
-    <Tooltip title={copyMessage}>
-      <Button
-        disabled={!props.isActive}
-        variant="help"
-        onMouseLeave={() => {
-          setTimeout(() => {
-            setCopyMessage("copy");
-          }, 500);
-        }}
-        onClick={() => {
-          setCopyMessage("copied");
-          navigator.clipboard.writeText(props.link);
-        }}
-        sx={{ marginLeft: 0.5 }}
-      >
-        <ContentCopyIcon style={{ width: "18px", height: "18px" }} />
-        <Typography ml={0.5} variant="body3">
-          {copyMessage}
-        </Typography>
-      </Button>
-    </Tooltip>
+    <Button
+      disabled={!props.isActive}
+      variant="help"
+      onMouseLeave={() => {
+        setTimeout(() => {
+          setCopyMessage("copy");
+        }, 500);
+      }}
+      onClick={() => {
+        setCopyMessage("copied");
+        navigator.clipboard.writeText(props.link);
+      }}
+      sx={{ marginLeft: 0.5 }}
+    >
+      <ContentCopyIcon style={{ width: "18px", height: "18px" }} />
+      <Typography ml={0.5} variant="body3">
+        {copyMessage}
+      </Typography>
+    </Button>
   );
 };
 

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/EventsLog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/EventsLog.tsx
@@ -146,7 +146,7 @@ const CollapsibleRow: React.FC<Submission> = (submission) => {
         <TableCell>{submission.sessionId}</TableCell>
         <TableCell>
           {showDownloadButton && (
-            <Tooltip arrow title="Download application data">
+            <Tooltip title="Download application data">
               <IconButton
                 aria-label="download application"
                 size="small"

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/EditHistory.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/EditHistory.tsx
@@ -10,7 +10,7 @@ import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
 import IconButton from "@mui/material/IconButton";
 import { styled } from "@mui/material/styles";
-import Tooltip, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip";
+import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import SimpleExpand from "@planx/components/shared/Preview/SimpleExpand";
 import { formatOps } from "@planx/graph";
@@ -23,17 +23,6 @@ import { Operation } from "types";
 import { useStore } from "../../lib/store";
 import { formatLastEditDate } from "../../utils";
 
-const TooltipWrap = styled(({ className, ...props }: TooltipProps) => (
-  <Tooltip {...props} placement="left-start" classes={{ popper: className }} />
-))(({ theme }) => ({
-  [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: theme.palette.background.dark,
-    fontSize: "0.8em",
-    borderRadius: 0,
-    fontWeight: FONT_WEIGHT_SEMI_BOLD,
-  },
-}));
-
 const HistoryListItem = styled("li")(() => ({
   listStyleType: "square",
   overflowWrap: "break-word",
@@ -184,7 +173,7 @@ const EditHistory = () => {
                       </Typography>
                     </Box>
                     {i > 0 && op.actor && canUserEditTeam(teamSlug) && (
-                      <TooltipWrap title="Restore to this point">
+                      <Tooltip title="Restore to this point" placement="left">
                         <IconButton
                           aria-label="Restore to this point"
                           onClick={() => handleUndo(i)}
@@ -196,7 +185,7 @@ const EditHistory = () => {
                             color={inUndoScope(i) ? "inherit" : "primary"}
                           />
                         </IconButton>
-                      </TooltipWrap>
+                      </Tooltip>
                     )}
                   </Box>
                   {op.data && (

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Publish/PublishDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Publish/PublishDialog.tsx
@@ -244,7 +244,9 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
     backgroundColor: theme.palette.background.default,
     color: theme.palette.text.primary,
     boxShadow: theme.shadows[1],
-    fontSize: theme.typography.body2,
+    fontSize: 11,
+    fontWeight: theme.typography.fontWeightRegular,
+    borderRadius: 4,
   },
 }));
 
@@ -278,6 +280,7 @@ export const ValidationChecks = (props: {
         <LightTooltip
           title="Validation checks are automatic tests that scan your service and highlight when content changes introduce an error, like incorrectly using a component type or breaking an integration."
           placement="right"
+          arrow={false}
         >
           <IconButton>
             <Help color="primary" />

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx
@@ -126,12 +126,14 @@ const TabList = styled(Box)(({ theme }) => ({
 }));
 
 const Sidebar: React.FC = React.memo(() => {
-  const [resetPreview, isFlowPublished, toggleSidebar, showSidebar] = useStore((state) => [
-    state.resetPreview,
-    state.isFlowPublished,
-    state.toggleSidebar,
-    state.showSidebar,
-  ]);
+  const [resetPreview, isFlowPublished, toggleSidebar, showSidebar] = useStore(
+    (state) => [
+      state.resetPreview,
+      state.isFlowPublished,
+      state.toggleSidebar,
+      state.showSidebar,
+    ],
+  );
 
   const [activeTab, setActiveTab] = useState<SidebarTabs>("PreviewBrowser");
 
@@ -152,27 +154,24 @@ const Sidebar: React.FC = React.memo(() => {
 
   return (
     <Root>
-      <Collapse 
-        in={showSidebar} 
-        orientation="horizontal" 
-        collapsedSize={SIDEBAR_WIDTH_MINIMISED} 
+      <Collapse
+        in={showSidebar}
+        orientation="horizontal"
+        collapsedSize={SIDEBAR_WIDTH_MINIMISED}
         sx={{ height: "100%" }}
         easing={"ease-in-out"}
         timeout={200}
       >
         <SidebarWrapper>
           <StyledToggleButton onClick={toggleSidebar} value="toggleSidebar">
-            {showSidebar
-              ? <ChevronRightIcon />
-              : <ChevronLeftIcon />
-            }
+            {showSidebar ? <ChevronRightIcon /> : <ChevronLeftIcon />}
           </StyledToggleButton>
           <Header>
             <Box width="100%" display="flex">
               <input type="text" disabled value={urls.preview} />
 
               <Permission.IsPlatformAdmin>
-                <Tooltip arrow title="Open draft service">
+                <Tooltip title="Open draft service">
                   <Link
                     href={urls.draft}
                     target="_blank"
@@ -184,7 +183,7 @@ const Sidebar: React.FC = React.memo(() => {
                 </Tooltip>
               </Permission.IsPlatformAdmin>
 
-              <Tooltip arrow title="Open preview of changes to publish">
+              <Tooltip title="Open preview of changes to publish">
                 <Link
                   href={urls.preview}
                   target="_blank"
@@ -196,7 +195,7 @@ const Sidebar: React.FC = React.memo(() => {
               </Tooltip>
 
               {isFlowPublished ? (
-                <Tooltip arrow title="Open published service">
+                <Tooltip title="Open published service">
                   <Link
                     href={urls.analytics}
                     target="_blank"
@@ -207,7 +206,7 @@ const Sidebar: React.FC = React.memo(() => {
                   </Link>
                 </Tooltip>
               ) : (
-                <Tooltip arrow title="Flow not yet published">
+                <Tooltip title="Flow not yet published">
                   <Box>
                     <Link component={"button"} disabled aria-disabled={true}>
                       <LanguageIcon />

diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
@@ -639,6 +639,23 @@ const getThemeOptions = ({
           },
         ],
       },
+      MuiTooltip: {
+        defaultProps: {
+          arrow: true,
+        },
+        styleOverrides: {
+          arrow: {
+            color: "#2c2c2c",
+          },
+          tooltip: {
+            backgroundColor: "#2c2c2c",
+            left: "-5px",
+            fontSize: "0.8em",
+            borderRadius: 0,
+            fontWeight: FONT_WEIGHT_SEMI_BOLD,
+          },
+        },
+      },
     },
   };