feat: General improvements

CHANGELOG.md

@@ -11,6 +11,13 @@ You can also check the
 
 # Unreleased
 
+- Features
+  - It's now possible to label individual chart tabs
+  - Time is now displayed in addition to date in `Last edit` column in user
+    profile
+  - Free canvas layout option now includes a 3-column layout, depending on the
+    screen width
+  - Added a new popover login menu
 - Fixes
   - Map is now correctly centered after copying a chart or switching to layout
     mode
@@ -20,7 +27,10 @@ You can also check the
   - Renaming of charts through user profile now works correctly
   - Manually entering dates in date pickers works correctly again
   - Improved scrolling behavior in the chart tabs
+- Style
   - Aligned editor and layouting page layouts
+  - Removed dimension selection from modal when merging cubes
+  - Updated styles of confirmation dialog
 
 # [4.7.4] - 2024-07-23
 

app/components/confirmation-dialog.tsx

@@ -9,7 +9,7 @@ import {
   DialogProps,
   DialogTitle,
 } from "@mui/material";
-import React, { useState } from "react";
+import { useState } from "react";
 
 const ConfirmationDialog = ({
   title,
@@ -27,42 +27,45 @@ const ConfirmationDialog = ({
   onClose: NonNullable<DialogProps["onClose"]>;
 }) => {
   const [loading, setLoading] = useState(false);
-
   return (
     <Dialog
-      // To prevent the click away listener from closing the dialog.
-      onClick={(e) => e.stopPropagation()}
       maxWidth="xs"
+      PaperProps={{ sx: { gap: 4, width: "100%", p: 6 } }}
       {...props}
     >
-      <DialogTitle sx={{ typography: "h3" }}>
-        {title ??
+      <DialogTitle sx={{ p: 0, typography: "h4" }}>
+        {title ||
           t({
             id: "login.profile.chart.confirmation.default",
             message: "Are you sure you want to perform this action?",
           })}
       </DialogTitle>
       {text && (
-        <DialogContent>
-          <DialogContentText>{text}</DialogContentText>
+        <DialogContent sx={{ p: 0 }}>
+          <DialogContentText sx={{ typography: "body2" }}>
+            {text}
+          </DialogContentText>
         </DialogContent>
       )}
       <DialogActions
         sx={{
+          p: 0,
           "& > .MuiButton-root": {
             justifyContent: "center",
+            minWidth: 76,
+            minHeight: "fit-content",
             pointerEvents: loading ? "none" : "auto",
           },
         }}
       >
         <Button
-          variant="text"
+          variant="outlined"
           onClick={() => props.onClose({}, "escapeKeyDown")}
         >
           <Trans id="no">No</Trans>
         </Button>
         <Button
-          variant="text"
+          variant="contained"
           onClick={async (e) => {
             e.stopPropagation();
             setLoading(true);

app/components/menu-action-item.tsx

@@ -18,7 +18,7 @@ const StyledMenuItem = styled(MenuItem)(({ theme, color }) => ({
 
 export type MenuActionProps = {
   label: string | NonNullable<React.ReactNode>;
-  iconName: IconName;
+  iconName?: IconName;
   priority?: number;
   stayOpen?: boolean;
   color?: "primary" | "error";
@@ -60,7 +60,7 @@ export const MenuActionItem = (
     label,
     color = "primary",
   }: {
-    icon: IconName;
+    icon?: IconName;
     label: string | NonNullable<React.ReactNode>;
     color?: MenuActionProps["color"];
   }) => {
@@ -105,7 +105,9 @@ export const MenuActionItem = (
             {...forwardedProps}
             sx={{ minHeight: 0 }}
           >
-            <Icon size={16} name={icon} style={{ marginTop: "0.25rem" }} />
+            {icon && (
+              <Icon size={16} name={icon} style={{ marginTop: "0.25rem" }} />
+            )}
             {label}
           </StyledMenuItem>
           <Divider sx={{ mx: 1, "&:last-of-type": { display: "none" } }} />

app/components/react-grid.tsx

@@ -36,7 +36,7 @@ export const MIN_H = 1;
 /** In grid unit */
 const MAX_W = 4;
 
-export const COLS = { lg: 4, md: 2, sm: 1, xs: 1, xxs: 1 };
+export const COLS = { lg: 4, md: 3, sm: 2, xs: 1, xxs: 1 };
 const ROW_HEIGHT = 100;
 
 const useStyles = makeStyles((theme: Theme) => ({