Content app UI fixes (#2447)

* fix: remove horiz margin * fix: fixed tooltip text * fix: use zesty mui theme for the info bar buttons * task: only show tooltip when the button is hovered
zesty-io · Jan 12, 2024 · 6803032 · 6803032
1 parent ad2c6d8
commit 6803032
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 38 deletions.
diff --git a/...ditor/src/app/views/ItemEdit/Content/Actions/Widgets/WidgetDeleteItem/WidgetDeleteItem.js b/...ditor/src/app/views/ItemEdit/Content/Actions/Widgets/WidgetDeleteItem/WidgetDeleteItem.js
@@ -29,7 +29,7 @@ export const WidgetDeleteItem = memo(function WidgetDeleteItem(props) {
 
   return (
     <>
-      <Card sx={{ mx: 2, mb: 3, backgroundColor: "transparent" }} elevation={0}>
+      <Card sx={{ mb: 3, backgroundColor: "transparent" }} elevation={0}>
         <CardHeader
           sx={{
             p: 0,

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Content/Content.js b/src/apps/content-editor/src/app/views/ItemEdit/Content/Content.js
@@ -1,6 +1,14 @@
 import { Editor } from "../../../components/Editor";
 import { PreviewMode } from "../../../components/Editor/PreviewMode";
-import { Box, Stack, IconButton, Tooltip, useMediaQuery } from "@mui/material";
+import {
+  Box,
+  Stack,
+  IconButton,
+  Tooltip,
+  useMediaQuery,
+  ThemeProvider,
+} from "@mui/material";
+import { theme } from "@zesty-io/material";
 import { StartRounded, DesktopMacRounded } from "@mui/icons-material";
 import { Actions } from "./Actions";
 import { useLocalStorage } from "react-use";
@@ -74,46 +82,49 @@ export default function Content(props) {
       </Box>
       {!showDuoMode ? (
         <Box display="flex" gap={1}>
-          <Stack
-            gap={1.5}
-            sx={{
-              ...(!showSidebar && {
-                position: "absolute",
-                right: "24px",
-              }),
-            }}
-          >
-            <Tooltip
-              title={showSidebar ? "Close Info Bar" : "Open Info Bar"}
-              placement="left"
-              dark
+          <ThemeProvider theme={theme}>
+            <Stack
+              gap={1.5}
+              sx={{
+                ...(!showSidebar && {
+                  position: "absolute",
+                  right: "24px",
+                }),
+              }}
             >
-              <IconButton
-                size="small"
-                onClick={() => setShowSidebar(!showSidebar)}
-                data-cy="ContentSidebarToggle"
+              <Tooltip
+                title={showSidebar ? "Close Info Bar" : "Open Info Bar"}
+                placement="left"
               >
-                <StartRounded
-                  fontSize="small"
-                  sx={{
-                    transform: showSidebar ? "rotate(0deg)" : "rotate(180deg)",
-                  }}
-                />
-              </IconButton>
-            </Tooltip>
-            {!isDisabled && (
-              <Tooltip title="Open DUO Mode" placement="left" dark>
                 <IconButton
                   size="small"
-                  onClick={() => {
-                    setShowDuoMode(true);
-                  }}
+                  onClick={() => setShowSidebar(!showSidebar)}
+                  data-cy="ContentSidebarToggle"
                 >
-                  <DesktopMacRounded fontSize="small" />
+                  <StartRounded
+                    fontSize="small"
+                    sx={{
+                      transform: showSidebar
+                        ? "rotate(0deg)"
+                        : "rotate(180deg)",
+                    }}
+                  />
                 </IconButton>
               </Tooltip>
-            )}
-          </Stack>
+              {!isDisabled && (
+                <Tooltip title="Open DUO Mode" placement="left" dark>
+                  <IconButton
+                    size="small"
+                    onClick={() => {
+                      setShowDuoMode(true);
+                    }}
+                  >
+                    <DesktopMacRounded fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+              )}
+            </Stack>
+          </ThemeProvider>
           {showSidebar && (
             <Box
               maxWidth={320}

diff --git a/...content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ItemEditHeaderActions.tsx b/...content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ItemEditHeaderActions.tsx
@@ -252,8 +252,14 @@ export const ItemEditHeaderActions = ({
               </div>
             ) : (
               <div>
-                v{activePublishing?.version} published on <br />
-                by {formatDate(activePublishing?.publishAt)} <br />
+                v{activePublishing?.version} published{" "}
+                {formatDate(activePublishing?.publishAt).includes("Today") ||
+                formatDate(activePublishing?.publishAt).includes("Yesterday")
+                  ? ""
+                  : "on"}
+                <br />
+                {formatDate(activePublishing?.publishAt)} <br />
+                by{" "}
                 {
                   users?.find(
                     (user: any) =>

diff --git a/src/shell/components/ResizeableContainer.tsx b/src/shell/components/ResizeableContainer.tsx
@@ -31,6 +31,8 @@ export const ResizableContainer = ({
   const [isResizing, setIsResizing] = useState(false);
   const [initialPos, setInitialPos] = useState(0);
   const [initialWidth, setInitialWidth] = useState(0);
+  const [isHoveringCollapseButton, setIsHoveringCollapseButton] =
+    useState(false);
   const [width, setWidth] = useLocalStorage(
     `zesty:resizableContainer:${id}`,
     defaultWidth
@@ -113,7 +115,7 @@ export const ResizableContainer = ({
           placement="right-start"
           enterDelay={1000}
           enterNextDelay={1000}
-          open={isTooltipOpen}
+          open={isTooltipOpen && isHoveringCollapseButton}
           onOpen={() => setIsTooltipOpen(true)}
           onClose={() => setIsTooltipOpen(false)}
         >
@@ -122,7 +124,9 @@ export const ResizableContainer = ({
             onClick={() => {
               setIsTooltipOpen(false);
               setCollapsed(!collapsed);
+              setIsHoveringCollapseButton(false);
             }}
+            onMouseOver={() => setIsHoveringCollapseButton(true)}
             sx={{
               borderRadius: "50%",
               borderColor: "grey.600",