ui v2: restyle dialog component

frontend/packages/core/src/button.tsx

@@ -44,7 +44,6 @@ const StyledButton = styled(MuiButton)(
     textTransform: "none",
     height: "48px",
     padding: "14px 32px",
-    margin: "2rem .875rem",
   },
   props => ({
     color: props["data-color"].font,

frontend/packages/core/src/dialog.tsx

@@ -1,27 +1,87 @@
-import React from "react";
-import MuiDialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import Typography from "@material-ui/core/Typography";
-
-export interface DialogProps {
+import * as React from "react";
+import styled from "@emotion/styled";
+import type { DialogProps as MuiDialogProps } from "@material-ui/core";
+import {
+  Dialog as MuiDialog,
+  DialogActions as MuiDialogActions,
+  DialogContent as MuiDialogContent,
+  DialogTitle as MuiDialogTitle,
+  IconButton as MuiIconButton,
+  Paper,
+} from "@material-ui/core";
+import CloseIcon from "@material-ui/icons/Close";
+
+const DialogPaper = styled(Paper)({
+  border: "1px solid rgba(13, 16, 48, 0.1)",
+  boxShadow: "0px 10px 24px rgba(35, 48, 143, 0.3)",
+  boxSizing: "border-box",
+  backgroundColor: "#FFFFFF",
+});
+
+const DialogTitle = styled(MuiDialogTitle)({
+  display: "flex",
+  justifyContent: "space-between",
+  fontSize: "20px",
+  padding: "12px 12px 0 32px",
+  fontWeight: 400,
+  color: "#0D1030",
+});
+
+const DialogTitleText = styled.div({
+  padding: "14px 0 0 0",
+});
+
+const IconButton = styled(MuiIconButton)({
+  height: "12px",
+  width: "12px",
+  color: "#0D1030",
+});
+
+const DialogContent = styled(MuiDialogContent)({
+  padding: "16px 32px 32px 32px",
+  fontSize: "16px",
+  fontWeight: 400,
+  color: "rgba(13, 16, 48, 0.6)",
+  "> *": {
+    margin: "16px 0 0 0",
+  },
+});
+
+const DialogActions = styled(MuiDialogActions)({
+  borderTop: "1px solid rgba(13, 16, 48, 0.12)",
+  padding: "0 8px",
+  "> *": {
+    margin: "16px 8px 16px 8px",
+  },
+});
+
+export interface DialogContentProps {}
+export interface DialogActionsProps {}
+export interface DialogProps extends Pick<MuiDialogProps, "open"> {
   title: string;
-  content: string;
-  open: boolean;
-  onClose: () => void;
+  children:
+    | React.ReactElement<DialogContentProps>
+    | React.ReactElement<DialogContentProps>[]
+    | React.ReactElement<DialogActionsProps>
+    | React.ReactElement<DialogActionsProps>[];
 }
 
-const Dialog: React.FC<DialogProps> = ({ title, content, open, onClose, children }) => {
+const Dialog = ({ title, children, open }: DialogProps) => {
+  const [isOpen, setIsOpen] = React.useState(open);
+  const onClose = () => {
+    setIsOpen(prevOpenState => !prevOpenState);
+  };
   return (
-    <MuiDialog open={open} onClose={onClose}>
-      <DialogTitle>{title}</DialogTitle>
-      <DialogContent>
-        <Typography gutterBottom>{content}</Typography>
-      </DialogContent>
-      <DialogActions>{children}</DialogActions>
+    <MuiDialog PaperComponent={DialogPaper} open={isOpen} onClose={onClose}>
+      <DialogTitle disableTypography>
+        <DialogTitleText>{title}</DialogTitleText>
+        <IconButton onClick={onClose}>
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      {children}
     </MuiDialog>
   );
 };
 
-export default Dialog;
+export { Dialog, DialogActions, DialogContent };

frontend/packages/core/src/index.tsx

@@ -8,7 +8,7 @@ import ClutchApp from "./AppProvider";
 import { Button, ButtonGroup, ButtonProps, ClipboardButton } from "./button";
 import Confirmation from "./confirmation";
 import { useWizardContext, WizardContext } from "./Contexts";
-import Dialog from "./dialog";
+import { Dialog, DialogActions, DialogContent } from "./dialog";
 import { Error } from "./error";
 import { Hint, Note, NoteConfig, NotePanel, Warning } from "./Feedback";
 import { Status } from "./icon";
@@ -38,6 +38,8 @@ export {
   ClipboardButton,
   Confirmation,
   Dialog,
+  DialogActions,
+  DialogContent,
   Error,
   ExpandableRow,
   ExpandableTable,

frontend/packages/core/src/stories/dialog.stories.tsx

@@ -1,29 +1,46 @@
 import React from "react";
+import { action } from "@storybook/addon-actions";
 import type { Meta } from "@storybook/react";
 
 import { Button } from "../button";
 import type { DialogProps } from "../dialog";
-import Dialog from "../dialog";
+import { Dialog, DialogActions, DialogContent } from "../dialog";
+import { TextField } from "../Input/text-field";
 
 export default {
   title: "Core/Dialog",
   component: Dialog,
-  argTypes: {
-    onClose: { action: "onClose event" },
-  },
 } as Meta;
 
-const Template = (props: DialogProps) => (
-  <Dialog {...props}>
-    <Button text="Yes" />
-    <Button text="No" />
+const Template = ({ content, open, ...props }: DialogProps & { content: React.ReactNode }) => (
+  <Dialog open={open} {...props}>
+    <DialogContent>{content}</DialogContent>
+    <DialogActions>
+      <Button text="Back" variant="neutral" onClick={action("back button click")} />
+      <Button text="Continue" onClick={action("continue button click")} />
+    </DialogActions>
   </Dialog>
 );
 
 export const Primary = Template.bind({});
 Primary.args = {
-  title: "Dialog's Title",
+  title: "Title",
   content:
-    "This is the content of the dialog. This is the content of the dialog. This is the content of the dialog.",
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
   open: true,
 };
+
+export const WithTextField = Template.bind({});
+WithTextField.args = {
+  ...Primary.args,
+  content: (
+    <>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+      voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      <TextField label="Title" placeholder="Input Text" />
+    </>
+  ),
+};

frontend/workflows/serverexperimentation/src/start-experiment.tsx

@@ -3,7 +3,7 @@ import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import { clutch as IClutch } from "@clutch-sh/api";
 import type { BaseWorkflowProps } from "@clutch-sh/core";
-import { Button, ButtonGroup, client, Dialog } from "@clutch-sh/core";
+import { Button, ButtonGroup, client, Dialog, DialogActions, DialogContent } from "@clutch-sh/core";
 import { PageLayout } from "@clutch-sh/experimentation";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
@@ -208,19 +208,20 @@ const StartExperiment: React.FC<StartExperimentProps> = ({
         upstreamClusterTypeSelectionEnabled={upstreamClusterTypeSelectionEnabled}
         onStart={experimentDetails => setExperimentData(experimentDetails)}
       />
-      <Dialog
-        title="Experiment Start Confirmation"
-        content="Are you sure you want to start an experiment? The experiment will start immediately and you will be moved to experiment details view page."
-        open={experimentData !== undefined}
-        onClose={() => setExperimentData(undefined)}
-      >
-        <Button
-          text="Yes"
-          onClick={() => {
-            createExperiment(experimentData);
-          }}
-        />
-        <Button text="No" onClick={() => setExperimentData(undefined)} />
+      <Dialog title="Experiment Start Confirmation" open={experimentData !== undefined}>
+        <DialogContent>
+          Are you sure you want to start an experiment? The experiment will start immediately and
+          you will be moved to experiment details view page.
+        </DialogContent>
+        <DialogActions>
+          <Button variant="neutral" text="No" onClick={() => setExperimentData(undefined)} />
+          <Button
+            text="Yes"
+            onClick={() => {
+              createExperiment(experimentData);
+            }}
+          />
+        </DialogActions>
       </Dialog>
     </PageLayout>
   );