Mobile responsive variant of new Dialog component

Author: francisli

src/components/design_system/dialog/Dialog.stories.tsx

@@ -5,16 +5,6 @@ import Dialog from "./Dialog";
 const meta: Meta<typeof Dialog> = {
   title: "Components/Design System/Dialog",
   component: Dialog,
-  decorators: [
-    (Story) => (
-      <>
-        <div id="anchor">
-          <Story />
-        </div>
-        <div style={{ height: "8rem" }}></div>
-      </>
-    ),
-  ],
 };
 export default meta;
 
@@ -28,5 +18,6 @@ export const Default: Story = {
     children: <p style={{ width: "100%" }}>Testing, testing testing</p>,
     cancelLabel: "Cancel",
     confirmLabel: "Save",
+    fullScreenOnMobile: true,
   },
 };

src/components/design_system/dialog/Dialog.tsx

@@ -1,16 +1,25 @@
 import { ReactNode } from "react";
 import {
+  AppBar,
   Dialog as MuiDialog,
   DialogActions,
   DialogContent,
   DialogTitle,
+  IconButton,
+  Toolbar,
+  useMediaQuery,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import { ArrowBack } from "@mui/icons-material";
 import Button from "@/components/design_system/button/Button";
 
 interface DialogProps {
   cancelLabel?: string;
   children: ReactNode;
   confirmLabel?: string;
+  fullScreenOnMobile: boolean;
+  onCancel?: () => void;
+  onConfirm?: () => void;
   open: boolean;
   size: "xs" | "sm" | "md" | "lg" | "xl";
   title: ReactNode;
@@ -20,19 +29,55 @@ function Dialog({
   cancelLabel,
   children,
   confirmLabel,
+  fullScreenOnMobile = false,
+  onCancel,
+  onConfirm,
   open,
   size = "sm",
   title,
 }: DialogProps) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
   return (
-    <MuiDialog open={open} fullWidth maxWidth={size}>
-      <DialogTitle align="center" variant="h3">
+    <MuiDialog
+      open={open}
+      fullScreen={fullScreenOnMobile && isMobile}
+      fullWidth
+      maxWidth={size}
+    >
+      {isMobile && (
+        <AppBar position="fixed">
+          <Toolbar>
+            <IconButton
+              onClick={() => onCancel?.()}
+              color="inherit"
+              sx={{ padding: "1.25rem" }}
+            >
+              <ArrowBack />
+            </IconButton>
+          </Toolbar>
+        </AppBar>
+      )}
+      <DialogTitle
+        align="center"
+        variant="h3"
+        sx={{ paddingTop: { xs: "5.5rem", sm: "1.5rem" } }}
+      >
         {title}
       </DialogTitle>
       <DialogContent>{children}</DialogContent>
       <DialogActions>
-        {cancelLabel && <Button variant="secondary">{cancelLabel}</Button>}
-        {confirmLabel && <Button variant="primary">{confirmLabel}</Button>}
+        {cancelLabel && (
+          <Button variant="secondary" onClick={() => onCancel?.()}>
+            Cancel
+          </Button>
+        )}
+        {confirmLabel && (
+          <Button variant="primary" onClick={() => onConfirm?.()}>
+            Confirm
+          </Button>
+        )}
       </DialogActions>
     </MuiDialog>
   );

src/components/header/Header.module.css

@@ -2,14 +2,6 @@
   padding: 1rem;
 }
 
-.toolbar {
-  background-color: var(--primary-40);
-  display: flex;
-  justify-content: space-between;
-  box-shadow: 0;
-  padding: 0;
-}
-
 .burger {
   color: var(--primary-99);
 }

src/components/header/Header.tsx

@@ -23,7 +23,7 @@ export default function Header() {
   return (
     <>
       <AppBar position="fixed" sx={{ display: "block" }}>
-        <Toolbar className={classes.toolbar}>
+        <Toolbar>
           <Link href="/">
             <Image
               src="/img/compass-logo-white.svg"

src/theme.ts

@@ -408,5 +408,16 @@ export const compassTheme = createTheme({
         indicatorColor: "transparent",
       },
     },
+    MuiToolbar: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "var(--primary-40)",
+          boxShadow: "0",
+          display: "flex",
+          justifyContent: "space-between",
+          padding: "0",
+        },
+      },
+    },
   },
 });