From 7e3123b602234cb1e4a7eac2932948d149fe3b0e Mon Sep 17 00:00:00 2001
From: Derek Schaller <d_a_schaller@yahoo.com>
Date: Tue, 1 Dec 2020 22:48:15 -0800
Subject: [PATCH 1/4] ui v2: restyle modal component

---
 .../packages/core/src/Input/text-field.tsx    |  2 +
 frontend/packages/core/src/button.tsx         |  4 +-
 frontend/packages/core/src/dialog.tsx         | 59 +++++++++++++------
 frontend/packages/core/src/index.tsx          |  2 +-
 .../core/src/stories/dialog.stories.tsx       | 39 +++++++++---
 5 files changed, 77 insertions(+), 29 deletions(-)

diff --git a/frontend/packages/core/src/Input/text-field.tsx b/frontend/packages/core/src/Input/text-field.tsx
index 7382fdcfe7..99ceb94232 100644
--- a/frontend/packages/core/src/Input/text-field.tsx
+++ b/frontend/packages/core/src/Input/text-field.tsx
@@ -20,11 +20,13 @@ const BaseTextField = ({ InputProps, InputLabelProps, ...props }: MuiStandardTex
 );
 
 const StyledTextField = styled(BaseTextField)({
+  padding: "8px 0",
   ".MuiInputLabel-root": {
     fontSize: "14px",
     fontWeight: 500,
     transform: "scale(1)",
     marginLeft: "2px",
+    padding: "8px 0",
   },
 
   ".MuiInputLabel-root, .MuiInputLabel-root.Mui-focused": {
diff --git a/frontend/packages/core/src/button.tsx b/frontend/packages/core/src/button.tsx
index 5dd208ac7f..e68a1f2d85 100644
--- a/frontend/packages/core/src/button.tsx
+++ b/frontend/packages/core/src/button.tsx
@@ -40,8 +40,8 @@ const StyledButton = styled(MuiButton)(
     borderRadius: "4px",
     fontWeight: 700,
     textTransform: "none",
-    padding: "0.875rem 2rem",
-    margin: "2rem .875rem",
+    margin: "16px 8px",
+    padding: "14px 32px",
   },
   props => ({
     color: props["data-color"].font,
diff --git a/frontend/packages/core/src/dialog.tsx b/frontend/packages/core/src/dialog.tsx
index caceaceba4..d61b0f9688 100644
--- a/frontend/packages/core/src/dialog.tsx
+++ b/frontend/packages/core/src/dialog.tsx
@@ -1,27 +1,50 @@
-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";
+import * as React from "react";
+import styled from "@emotion/styled";
+import {
+  Dialog as MuiDialog,
+  DialogActions as MuiDialogActions,
+  DialogContent as MuiDialogContent,
+  DialogTitle as MuiDialogTitle,
+} from "@material-ui/core";
+import CloseIcon from "@material-ui/icons/Close";
+
+const DialogTitle = styled(MuiDialogTitle)({
+  display: "flex",
+  justifyContent: "space-between",
+  fontSize: "16px",
+  padding: "16px 16px 0 16px",
+  fontWeight: 400,
+});
+
+const DialogContent = styled(MuiDialogContent)({
+  padding: "8px 16px",
+  fontSize: "12px",
+  fontWeight: 400,
+  color: "rgba(13, 16, 48, 0.6)",
+});
+
+const DialogActions = styled(MuiDialogActions)({
+  borderTop: "1px solid rgba(13, 16, 48, 0.12)",
+  padding: "0 8px",
+});
 
 export interface DialogProps {
   title: string;
-  content: string;
+  children: React.ReactNode;
+  actions: React.ReactNode;
   open: boolean;
   onClose: () => void;
 }
 
-const Dialog: React.FC<DialogProps> = ({ title, content, open, onClose, children }) => {
-  return (
-    <MuiDialog open={open} onClose={onClose}>
-      <DialogTitle>{title}</DialogTitle>
-      <DialogContent>
-        <Typography gutterBottom>{content}</Typography>
-      </DialogContent>
-      <DialogActions>{children}</DialogActions>
-    </MuiDialog>
-  );
-};
+export const Dialog = ({ title, children, open, onClose, actions }: DialogProps) => (
+  <MuiDialog open={open} onClose={onClose}>
+    <DialogTitle disableTypography>
+      {title}
+      <CloseIcon />
+    </DialogTitle>
+    <DialogContent>{children}</DialogContent>
+    <DialogActions>{actions}</DialogActions>
+  </MuiDialog>
+);
 
 export default Dialog;
diff --git a/frontend/packages/core/src/index.tsx b/frontend/packages/core/src/index.tsx
index e4ae85bfed..34829abfbb 100644
--- a/frontend/packages/core/src/index.tsx
+++ b/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 } from "./dialog";
 import { Error } from "./error";
 import { Hint, Note, NoteConfig, NotePanel, Warning } from "./Feedback";
 import { Status } from "./icon";
diff --git a/frontend/packages/core/src/stories/dialog.stories.tsx b/frontend/packages/core/src/stories/dialog.stories.tsx
index 3cc20e6ed9..ca072bc31b 100644
--- a/frontend/packages/core/src/stories/dialog.stories.tsx
+++ b/frontend/packages/core/src/stories/dialog.stories.tsx
@@ -3,7 +3,8 @@ import type { Meta } from "@storybook/react";
 
 import { Button } from "../button";
 import type { DialogProps } from "../dialog";
-import Dialog from "../dialog";
+import { Dialog } from "../dialog";
+import { TextField } from "../Input/text-field";
 
 export default {
   title: "Core/Dialog",
@@ -13,17 +14,39 @@ export default {
   },
 } as Meta;
 
-const Template = (props: DialogProps) => (
-  <Dialog {...props}>
-    <Button text="Yes" />
-    <Button text="No" />
+const Template = ({ children, ...props }: DialogProps) => (
+  <Dialog
+    actions={
+      <>
+        <Button text="Back" variant="neutral" />
+        <Button text="Continue" />
+      </>
+    }
+    {...props}
+  >
+    {children}
   </Dialog>
 );
 
 export const Primary = Template.bind({});
 Primary.args = {
-  title: "Dialog's Title",
-  content:
-    "This is the content of the dialog. This is the content of the dialog. This is the content of the dialog.",
+  title: "Title",
+  children:
+    "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,
+  children: (
+    <>
+      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" />
+    </>
+  ),
+};

From 717008ce96e71e4d2c0593499dd6a1696580646b Mon Sep 17 00:00:00 2001
From: Derek Schaller <d_a_schaller@yahoo.com>
Date: Wed, 2 Dec 2020 13:27:32 -0800
Subject: [PATCH 2/4] hook up close icon

---
 frontend/packages/core/src/dialog.tsx         | 27 +++++++++++----
 .../core/src/stories/dialog.stories.tsx       | 34 ++++++++++++-------
 .../src/start-experiment.tsx                  | 20 ++++++-----
 3 files changed, 54 insertions(+), 27 deletions(-)

diff --git a/frontend/packages/core/src/dialog.tsx b/frontend/packages/core/src/dialog.tsx
index d61b0f9688..f2b8428f28 100644
--- a/frontend/packages/core/src/dialog.tsx
+++ b/frontend/packages/core/src/dialog.tsx
@@ -1,10 +1,12 @@
 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,
 } from "@material-ui/core";
 import CloseIcon from "@material-ui/icons/Close";
 
@@ -14,6 +16,14 @@ const DialogTitle = styled(MuiDialogTitle)({
   fontSize: "16px",
   padding: "16px 16px 0 16px",
   fontWeight: 400,
+  color: "#000000",
+});
+
+const IconButton = styled(MuiIconButton)({
+  height: "16px",
+  width: "16px",
+  padding: "0",
+  color: "#000000",
 });
 
 const DialogContent = styled(MuiDialogContent)({
@@ -28,23 +38,28 @@ const DialogActions = styled(MuiDialogActions)({
   padding: "0 8px",
 });
 
-export interface DialogProps {
+export interface DialogProps extends Pick<MuiDialogProps, "open"> {
   title: string;
   children: React.ReactNode;
   actions: React.ReactNode;
-  open: boolean;
   onClose: () => void;
 }
 
-export const Dialog = ({ title, children, open, onClose, actions }: DialogProps) => (
+export const Dialog = ({ title, children, open, onClose, actions }: DialogProps) => {
+  console.log(open)
+  return (
   <MuiDialog open={open} onClose={onClose}>
     <DialogTitle disableTypography>
-      {title}
-      <CloseIcon />
+      <div>
+        {title}
+      </div>
+      <IconButton onClick={onClose}>
+        <CloseIcon fontSize="small"/>
+      </IconButton>
     </DialogTitle>
     <DialogContent>{children}</DialogContent>
     <DialogActions>{actions}</DialogActions>
   </MuiDialog>
 );
-
+  };
 export default Dialog;
diff --git a/frontend/packages/core/src/stories/dialog.stories.tsx b/frontend/packages/core/src/stories/dialog.stories.tsx
index ca072bc31b..72351545c7 100644
--- a/frontend/packages/core/src/stories/dialog.stories.tsx
+++ b/frontend/packages/core/src/stories/dialog.stories.tsx
@@ -14,19 +14,27 @@ export default {
   },
 } as Meta;
 
-const Template = ({ children, ...props }: DialogProps) => (
-  <Dialog
-    actions={
-      <>
-        <Button text="Back" variant="neutral" />
-        <Button text="Continue" />
-      </>
-    }
-    {...props}
-  >
-    {children}
-  </Dialog>
-);
+const Template = ({ children, open, ...props }: DialogProps) => {
+  const [isOpen, setIsOpen] = React.useState(open);
+  const onClose = () => {
+    setIsOpen(!isOpen);
+  }
+  return (
+    <Dialog
+      actions={
+        <>
+          <Button text="Back" variant="neutral" />
+          <Button text="Continue" />
+        </>
+      }
+      onClose={onClose}
+      open={isOpen}
+      {...props}
+    >
+      {children}
+    </Dialog>
+  );
+};
 
 export const Primary = Template.bind({});
 Primary.args = {
diff --git a/frontend/workflows/serverexperimentation/src/start-experiment.tsx b/frontend/workflows/serverexperimentation/src/start-experiment.tsx
index 5a8eaea835..210da432b0 100644
--- a/frontend/workflows/serverexperimentation/src/start-experiment.tsx
+++ b/frontend/workflows/serverexperimentation/src/start-experiment.tsx
@@ -210,17 +210,21 @@ const StartExperiment: React.FC<StartExperimentProps> = ({
       />
       <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)}
+        actions={(
+          <>
+            <Button variant="neutral" text="No" onClick={() => setExperimentData(undefined)} />
+            <Button
+              text="Yes"
+              onClick={() => {
+                createExperiment(experimentData);
+              }}
+            />
+          </>
+        )}
       >
-        <Button
-          text="Yes"
-          onClick={() => {
-            createExperiment(experimentData);
-          }}
-        />
-        <Button text="No" onClick={() => setExperimentData(undefined)} />
+        Are you sure you want to start an experiment? The experiment will start immediately and you will be moved to experiment details view page.
       </Dialog>
     </PageLayout>
   );

From 42753cec64e76d4aa36b48435b1a0114c6a5f458 Mon Sep 17 00:00:00 2001
From: Derek Schaller <d_a_schaller@yahoo.com>
Date: Wed, 2 Dec 2020 13:29:01 -0800
Subject: [PATCH 3/4] fix lint

---
 frontend/packages/core/src/dialog.tsx                | 12 ++++--------
 .../packages/core/src/stories/dialog.stories.tsx     |  2 +-
 .../serverexperimentation/src/start-experiment.tsx   |  7 ++++---
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/frontend/packages/core/src/dialog.tsx b/frontend/packages/core/src/dialog.tsx
index f2b8428f28..61b18a579d 100644
--- a/frontend/packages/core/src/dialog.tsx
+++ b/frontend/packages/core/src/dialog.tsx
@@ -45,21 +45,17 @@ export interface DialogProps extends Pick<MuiDialogProps, "open"> {
   onClose: () => void;
 }
 
-export const Dialog = ({ title, children, open, onClose, actions }: DialogProps) => {
-  console.log(open)
-  return (
+export const Dialog = ({ title, children, open, onClose, actions }: DialogProps) => (
   <MuiDialog open={open} onClose={onClose}>
     <DialogTitle disableTypography>
-      <div>
-        {title}
-      </div>
+      <div>{title}</div>
       <IconButton onClick={onClose}>
-        <CloseIcon fontSize="small"/>
+        <CloseIcon fontSize="small" />
       </IconButton>
     </DialogTitle>
     <DialogContent>{children}</DialogContent>
     <DialogActions>{actions}</DialogActions>
   </MuiDialog>
 );
-  };
+
 export default Dialog;
diff --git a/frontend/packages/core/src/stories/dialog.stories.tsx b/frontend/packages/core/src/stories/dialog.stories.tsx
index 72351545c7..86613293b7 100644
--- a/frontend/packages/core/src/stories/dialog.stories.tsx
+++ b/frontend/packages/core/src/stories/dialog.stories.tsx
@@ -18,7 +18,7 @@ const Template = ({ children, open, ...props }: DialogProps) => {
   const [isOpen, setIsOpen] = React.useState(open);
   const onClose = () => {
     setIsOpen(!isOpen);
-  }
+  };
   return (
     <Dialog
       actions={
diff --git a/frontend/workflows/serverexperimentation/src/start-experiment.tsx b/frontend/workflows/serverexperimentation/src/start-experiment.tsx
index 210da432b0..a782eb3a1e 100644
--- a/frontend/workflows/serverexperimentation/src/start-experiment.tsx
+++ b/frontend/workflows/serverexperimentation/src/start-experiment.tsx
@@ -212,7 +212,7 @@ const StartExperiment: React.FC<StartExperimentProps> = ({
         title="Experiment Start Confirmation"
         open={experimentData !== undefined}
         onClose={() => setExperimentData(undefined)}
-        actions={(
+        actions={
           <>
             <Button variant="neutral" text="No" onClick={() => setExperimentData(undefined)} />
             <Button
@@ -222,9 +222,10 @@ const StartExperiment: React.FC<StartExperimentProps> = ({
               }}
             />
           </>
-        )}
+        }
       >
-        Are you sure you want to start an experiment? The experiment will start immediately and you will be moved to experiment details view page.
+        Are you sure you want to start an experiment? The experiment will start immediately and you
+        will be moved to experiment details view page.
       </Dialog>
     </PageLayout>
   );

From 215b223aa8892a3b4eadfe6a4ecfc83da921192c Mon Sep 17 00:00:00 2001
From: Derek Schaller <d_a_schaller@yahoo.com>
Date: Mon, 7 Dec 2020 13:44:45 -0800
Subject: [PATCH 4/4] feedback

---
 frontend/packages/core/src/button.tsx         |  1 -
 frontend/packages/core/src/dialog.tsx         | 78 ++++++++++++-------
 frontend/packages/core/src/index.tsx          |  4 +-
 .../core/src/stories/dialog.stories.tsx       | 40 ++++------
 .../src/start-experiment.tsx                  | 34 ++++----
 5 files changed, 83 insertions(+), 74 deletions(-)

diff --git a/frontend/packages/core/src/button.tsx b/frontend/packages/core/src/button.tsx
index 9ff0ebcff9..f49c25060e 100644
--- a/frontend/packages/core/src/button.tsx
+++ b/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,
diff --git a/frontend/packages/core/src/dialog.tsx b/frontend/packages/core/src/dialog.tsx
index 61b18a579d..2f1740dbcf 100644
--- a/frontend/packages/core/src/dialog.tsx
+++ b/frontend/packages/core/src/dialog.tsx
@@ -7,55 +7,81 @@ import {
   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: "16px",
-  padding: "16px 16px 0 16px",
+  fontSize: "20px",
+  padding: "12px 12px 0 32px",
   fontWeight: 400,
-  color: "#000000",
+  color: "#0D1030",
+});
+
+const DialogTitleText = styled.div({
+  padding: "14px 0 0 0",
 });
 
 const IconButton = styled(MuiIconButton)({
-  height: "16px",
-  width: "16px",
-  padding: "0",
-  color: "#000000",
+  height: "12px",
+  width: "12px",
+  color: "#0D1030",
 });
 
 const DialogContent = styled(MuiDialogContent)({
-  padding: "8px 16px",
-  fontSize: "12px",
+  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;
-  children: React.ReactNode;
-  actions: React.ReactNode;
-  onClose: () => void;
+  children:
+    | React.ReactElement<DialogContentProps>
+    | React.ReactElement<DialogContentProps>[]
+    | React.ReactElement<DialogActionsProps>
+    | React.ReactElement<DialogActionsProps>[];
 }
 
-export const Dialog = ({ title, children, open, onClose, actions }: DialogProps) => (
-  <MuiDialog open={open} onClose={onClose}>
-    <DialogTitle disableTypography>
-      <div>{title}</div>
-      <IconButton onClick={onClose}>
-        <CloseIcon fontSize="small" />
-      </IconButton>
-    </DialogTitle>
-    <DialogContent>{children}</DialogContent>
-    <DialogActions>{actions}</DialogActions>
-  </MuiDialog>
-);
-
-export default Dialog;
+const Dialog = ({ title, children, open }: DialogProps) => {
+  const [isOpen, setIsOpen] = React.useState(open);
+  const onClose = () => {
+    setIsOpen(prevOpenState => !prevOpenState);
+  };
+  return (
+    <MuiDialog PaperComponent={DialogPaper} open={isOpen} onClose={onClose}>
+      <DialogTitle disableTypography>
+        <DialogTitleText>{title}</DialogTitleText>
+        <IconButton onClick={onClose}>
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      {children}
+    </MuiDialog>
+  );
+};
+
+export { Dialog, DialogActions, DialogContent };
diff --git a/frontend/packages/core/src/index.tsx b/frontend/packages/core/src/index.tsx
index 5b84acbb4a..97f7fd79d8 100644
--- a/frontend/packages/core/src/index.tsx
+++ b/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,
diff --git a/frontend/packages/core/src/stories/dialog.stories.tsx b/frontend/packages/core/src/stories/dialog.stories.tsx
index 86613293b7..d88c3abfa7 100644
--- a/frontend/packages/core/src/stories/dialog.stories.tsx
+++ b/frontend/packages/core/src/stories/dialog.stories.tsx
@@ -1,45 +1,31 @@
 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 = ({ children, open, ...props }: DialogProps) => {
-  const [isOpen, setIsOpen] = React.useState(open);
-  const onClose = () => {
-    setIsOpen(!isOpen);
-  };
-  return (
-    <Dialog
-      actions={
-        <>
-          <Button text="Back" variant="neutral" />
-          <Button text="Continue" />
-        </>
-      }
-      onClose={onClose}
-      open={isOpen}
-      {...props}
-    >
-      {children}
-    </Dialog>
-  );
-};
+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: "Title",
-  children:
+  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.",
   open: true,
 };
@@ -47,7 +33,7 @@ Primary.args = {
 export const WithTextField = Template.bind({});
 WithTextField.args = {
   ...Primary.args,
-  children: (
+  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
diff --git a/frontend/workflows/serverexperimentation/src/start-experiment.tsx b/frontend/workflows/serverexperimentation/src/start-experiment.tsx
index a782eb3a1e..085d911b87 100644
--- a/frontend/workflows/serverexperimentation/src/start-experiment.tsx
+++ b/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,24 +208,20 @@ const StartExperiment: React.FC<StartExperimentProps> = ({
         upstreamClusterTypeSelectionEnabled={upstreamClusterTypeSelectionEnabled}
         onStart={experimentDetails => setExperimentData(experimentDetails)}
       />
-      <Dialog
-        title="Experiment Start Confirmation"
-        open={experimentData !== undefined}
-        onClose={() => setExperimentData(undefined)}
-        actions={
-          <>
-            <Button variant="neutral" text="No" onClick={() => setExperimentData(undefined)} />
-            <Button
-              text="Yes"
-              onClick={() => {
-                createExperiment(experimentData);
-              }}
-            />
-          </>
-        }
-      >
-        Are you sure you want to start an experiment? The experiment will start immediately and you
-        will be moved to experiment details view page.
+      <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>
   );