From 7da8608e080c8550bad4a378a284eb7d733cde32 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira.pilot23@gmail.com>
Date: Tue, 4 Oct 2022 19:17:45 +0000
Subject: [PATCH 1/5] added a warning summary component

---
 .../WarningSummary/WarningSummary.stories.tsx | 14 ++++
 .../WarningSummary/WarningSummary.tsx         | 64 +++++++++++++++++++
 2 files changed, 78 insertions(+)
 create mode 100644 site/src/components/WarningSummary/WarningSummary.stories.tsx
 create mode 100644 site/src/components/WarningSummary/WarningSummary.tsx

diff --git a/site/src/components/WarningSummary/WarningSummary.stories.tsx b/site/src/components/WarningSummary/WarningSummary.stories.tsx
new file mode 100644
index 0000000000000..01277ae5d7781
--- /dev/null
+++ b/site/src/components/WarningSummary/WarningSummary.stories.tsx
@@ -0,0 +1,14 @@
+import { Story } from "@storybook/react"
+import { WarningSummary, WarningSummaryProps } from "./WarningSummary"
+
+export default {
+  title: "components/WarningSummary",
+  component: WarningSummary,
+}
+
+const Template: Story<WarningSummaryProps> = (args) => <WarningSummary {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  warningString: "This is a warning",
+}
diff --git a/site/src/components/WarningSummary/WarningSummary.tsx b/site/src/components/WarningSummary/WarningSummary.tsx
new file mode 100644
index 0000000000000..5a3c946cead48
--- /dev/null
+++ b/site/src/components/WarningSummary/WarningSummary.tsx
@@ -0,0 +1,64 @@
+import { FC, useState } from "react"
+import { Stack } from "components/Stack/Stack"
+import { makeStyles, Theme } from "@material-ui/core/styles"
+import CloseIcon from "@material-ui/icons/Close"
+import ReportProblemOutlinedIcon from "@material-ui/icons/ReportProblemOutlined"
+import IconButton from "@material-ui/core/IconButton"
+import { colors } from "theme/colors"
+
+export interface WarningSummaryProps {
+  warningString: string
+}
+
+export const WarningSummary: FC<WarningSummaryProps> = ({ warningString }) => {
+  const styles = useStyles()
+  const [isOpen, setOpen] = useState(true)
+
+  const closeWarning = () => {
+    setOpen(false)
+  }
+
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <Stack
+      className={styles.root}
+      direction="row"
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      <Stack direction="row" spacing={0} alignItems="center">
+        <ReportProblemOutlinedIcon />
+        <span className={styles.errorMessage}>{warningString}</span>
+      </Stack>
+
+      <IconButton onClick={closeWarning} className={styles.iconButton}>
+        <CloseIcon className={styles.closeIcon} />
+      </IconButton>
+    </Stack>
+  )
+}
+const useStyles = makeStyles<Theme>((theme) => ({
+  root: {
+    border: `2px solid ${colors.orange[7]}`,
+    padding: `8px`,
+    borderRadius: theme.shape.borderRadius,
+    gap: 0,
+    color: `${colors.orange[7]}`, // icon inherits color from parent
+  },
+  errorMessage: {
+    marginRight: `${theme.spacing(1)}px`,
+    marginLeft: "10px",
+    color: `${colors.orange[4]}`,
+  },
+  iconButton: {
+    padding: 0,
+  },
+  closeIcon: {
+    width: 25,
+    height: 25,
+    color: `${colors.orange[7]}`,
+  },
+}))

From a15a59fc4d9d69e5943ad0527f5a0f56c782fe9e Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira.pilot23@gmail.com>
Date: Tue, 4 Oct 2022 19:46:33 +0000
Subject: [PATCH 2/5] added warning to workspace page

---
 .../WarningSummary/WarningSummary.tsx           |  2 +-
 site/src/components/Workspace/Workspace.tsx     | 17 +++++++++++------
 site/src/i18n/en/workspacePage.json             |  3 +++
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/site/src/components/WarningSummary/WarningSummary.tsx b/site/src/components/WarningSummary/WarningSummary.tsx
index 5a3c946cead48..3b7a86eb22718 100644
--- a/site/src/components/WarningSummary/WarningSummary.tsx
+++ b/site/src/components/WarningSummary/WarningSummary.tsx
@@ -43,7 +43,7 @@ export const WarningSummary: FC<WarningSummaryProps> = ({ warningString }) => {
 const useStyles = makeStyles<Theme>((theme) => ({
   root: {
     border: `2px solid ${colors.orange[7]}`,
-    padding: `8px`,
+    padding: `${theme.spacing(1)}px`,
     borderRadius: theme.shape.borderRadius,
     gap: 0,
     color: `${colors.orange[7]}`, // icon inherits color from parent
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index e8c1a82a41b76..a7d000f7c5215 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -15,6 +15,8 @@ import { WorkspaceScheduleBanner } from "../WorkspaceScheduleBanner/WorkspaceSch
 import { WorkspaceScheduleButton } from "../WorkspaceScheduleButton/WorkspaceScheduleButton"
 import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 import { WorkspaceStats } from "../WorkspaceStats/WorkspaceStats"
+import { WarningSummary } from "../WarningSummary/WarningSummary"
+import { useTranslation } from "react-i18next"
 
 export enum WorkspaceErrors {
   GET_RESOURCES_ERROR = "getResourcesError",
@@ -71,19 +73,21 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   buildInfo,
   applicationsHost,
 }) => {
+  const { t } = useTranslation("workspacePage")
   const styles = useStyles()
   const navigate = useNavigate()
   const hasTemplateIcon = workspace.template_icon && workspace.template_icon !== ""
 
-  const buildError = workspaceErrors[WorkspaceErrors.BUILD_ERROR] ? (
+  const buildError = Boolean(workspaceErrors[WorkspaceErrors.BUILD_ERROR]) && (
     <ErrorSummary error={workspaceErrors[WorkspaceErrors.BUILD_ERROR]} dismissible />
-  ) : (
-    <></>
   )
-  const cancellationError = workspaceErrors[WorkspaceErrors.CANCELLATION_ERROR] ? (
+
+  const cancellationError = Boolean(workspaceErrors[WorkspaceErrors.CANCELLATION_ERROR]) && (
     <ErrorSummary error={workspaceErrors[WorkspaceErrors.CANCELLATION_ERROR]} dismissible />
-  ) : (
-    <></>
+  )
+
+  const workspaceRefreshWarning = Boolean(workspaceErrors[WorkspaceErrors.GET_RESOURCES_ERROR]) && (
+    <WarningSummary warningString={t("warningsAndErrors.workspaceRefreshWarning")} />
   )
 
   return (
@@ -126,6 +130,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
       <Stack direction="column" className={styles.firstColumnSpacer} spacing={2.5}>
         {buildError}
         {cancellationError}
+        {workspaceRefreshWarning}
 
         <WorkspaceScheduleBanner
           isLoading={bannerProps.isLoading}
diff --git a/site/src/i18n/en/workspacePage.json b/site/src/i18n/en/workspacePage.json
index 9094ce9f7d183..f4b1ab6eb9762 100644
--- a/site/src/i18n/en/workspacePage.json
+++ b/site/src/i18n/en/workspacePage.json
@@ -6,5 +6,8 @@
     "schedule": "Schedule",
     "editDeadlineMinus": "Subtract one hour",
     "editDeadlinePlus": "Add one hour"
+  }, 
+  "warningsAndErrors": {
+    "workspaceRefreshWarning": "We're having difficulty fetching the latest workspace state. Refresh the page to see the newest changes."
   }
 }

From 59ceb624323e9cfc0af141483e093ac562311e70 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira.pilot23@gmail.com>
Date: Wed, 5 Oct 2022 14:53:32 +0000
Subject: [PATCH 3/5] consolidated warnings

---
 .../WarningAlert/WarningAlert.stories.tsx     | 27 ++++++++
 .../components/WarningAlert/WarningAlert.tsx  | 43 +++++++++++++
 .../WarningSummary/WarningSummary.stories.tsx | 14 ----
 .../WarningSummary/WarningSummary.tsx         | 64 -------------------
 site/src/components/Workspace/Workspace.tsx   |  4 +-
 .../WorkspaceDeletedBanner.tsx                | 44 ++++---------
 .../WorkspaceScheduleBanner.tsx               | 44 +++++--------
 site/src/i18n/en/workspacePage.json           | 11 +++-
 8 files changed, 110 insertions(+), 141 deletions(-)
 create mode 100644 site/src/components/WarningAlert/WarningAlert.stories.tsx
 create mode 100644 site/src/components/WarningAlert/WarningAlert.tsx
 delete mode 100644 site/src/components/WarningSummary/WarningSummary.stories.tsx
 delete mode 100644 site/src/components/WarningSummary/WarningSummary.tsx

diff --git a/site/src/components/WarningAlert/WarningAlert.stories.tsx b/site/src/components/WarningAlert/WarningAlert.stories.tsx
new file mode 100644
index 0000000000000..166a754b76031
--- /dev/null
+++ b/site/src/components/WarningAlert/WarningAlert.stories.tsx
@@ -0,0 +1,27 @@
+import { Story } from "@storybook/react"
+import { WarningAlert, WarningAlertProps } from "./WarningAlert"
+import Button from "@material-ui/core/Button"
+
+export default {
+  title: "components/WarningAlert",
+  component: WarningAlert,
+}
+
+const Template: Story<WarningAlertProps> = (args) => <WarningAlert {...args} />
+
+export const ExampleWithClose = Template.bind({})
+ExampleWithClose.args = {
+  text: "This is a warning",
+}
+
+const ExampleAction = (
+  <Button color="inherit" onClick={() => null} size="small">
+    Button
+  </Button>
+)
+
+export const ExampleWithAction = Template.bind({})
+ExampleWithAction.args = {
+  text: "This is a warning",
+  action: ExampleAction,
+}
diff --git a/site/src/components/WarningAlert/WarningAlert.tsx b/site/src/components/WarningAlert/WarningAlert.tsx
new file mode 100644
index 0000000000000..189b2f9e498f7
--- /dev/null
+++ b/site/src/components/WarningAlert/WarningAlert.tsx
@@ -0,0 +1,43 @@
+import { useState, FC, ReactElement } from "react"
+import Alert from "@material-ui/lab/Alert"
+import IconButton from "@material-ui/core/IconButton"
+import Collapse from "@material-ui/core/Collapse"
+import { Stack } from "components/Stack/Stack"
+import CloseIcon from "@material-ui/icons/Close"
+
+export interface WarningAlertProps {
+  text: string
+  action?: ReactElement
+}
+
+export const WarningAlert: FC<WarningAlertProps> = ({ text, action }) => {
+  const [open, setOpen] = useState(true)
+
+  return (
+    <Stack>
+      <Collapse in={open}>
+        <Alert
+          severity="warning"
+          action={
+            action ? (
+              action
+            ) : (
+              <IconButton
+                aria-label="close"
+                color="inherit"
+                size="small"
+                onClick={() => {
+                  setOpen(false)
+                }}
+              >
+                <CloseIcon fontSize="inherit" />
+              </IconButton>
+            )
+          }
+        >
+          {text}
+        </Alert>
+      </Collapse>
+    </Stack>
+  )
+}
diff --git a/site/src/components/WarningSummary/WarningSummary.stories.tsx b/site/src/components/WarningSummary/WarningSummary.stories.tsx
deleted file mode 100644
index 01277ae5d7781..0000000000000
--- a/site/src/components/WarningSummary/WarningSummary.stories.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Story } from "@storybook/react"
-import { WarningSummary, WarningSummaryProps } from "./WarningSummary"
-
-export default {
-  title: "components/WarningSummary",
-  component: WarningSummary,
-}
-
-const Template: Story<WarningSummaryProps> = (args) => <WarningSummary {...args} />
-
-export const Example = Template.bind({})
-Example.args = {
-  warningString: "This is a warning",
-}
diff --git a/site/src/components/WarningSummary/WarningSummary.tsx b/site/src/components/WarningSummary/WarningSummary.tsx
deleted file mode 100644
index 3b7a86eb22718..0000000000000
--- a/site/src/components/WarningSummary/WarningSummary.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { FC, useState } from "react"
-import { Stack } from "components/Stack/Stack"
-import { makeStyles, Theme } from "@material-ui/core/styles"
-import CloseIcon from "@material-ui/icons/Close"
-import ReportProblemOutlinedIcon from "@material-ui/icons/ReportProblemOutlined"
-import IconButton from "@material-ui/core/IconButton"
-import { colors } from "theme/colors"
-
-export interface WarningSummaryProps {
-  warningString: string
-}
-
-export const WarningSummary: FC<WarningSummaryProps> = ({ warningString }) => {
-  const styles = useStyles()
-  const [isOpen, setOpen] = useState(true)
-
-  const closeWarning = () => {
-    setOpen(false)
-  }
-
-  if (!isOpen) {
-    return null
-  }
-
-  return (
-    <Stack
-      className={styles.root}
-      direction="row"
-      alignItems="center"
-      justifyContent="space-between"
-    >
-      <Stack direction="row" spacing={0} alignItems="center">
-        <ReportProblemOutlinedIcon />
-        <span className={styles.errorMessage}>{warningString}</span>
-      </Stack>
-
-      <IconButton onClick={closeWarning} className={styles.iconButton}>
-        <CloseIcon className={styles.closeIcon} />
-      </IconButton>
-    </Stack>
-  )
-}
-const useStyles = makeStyles<Theme>((theme) => ({
-  root: {
-    border: `2px solid ${colors.orange[7]}`,
-    padding: `${theme.spacing(1)}px`,
-    borderRadius: theme.shape.borderRadius,
-    gap: 0,
-    color: `${colors.orange[7]}`, // icon inherits color from parent
-  },
-  errorMessage: {
-    marginRight: `${theme.spacing(1)}px`,
-    marginLeft: "10px",
-    color: `${colors.orange[4]}`,
-  },
-  iconButton: {
-    padding: 0,
-  },
-  closeIcon: {
-    width: 25,
-    height: 25,
-    color: `${colors.orange[7]}`,
-  },
-}))
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index a7d000f7c5215..9f5e2ea684c0d 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -15,7 +15,7 @@ import { WorkspaceScheduleBanner } from "../WorkspaceScheduleBanner/WorkspaceSch
 import { WorkspaceScheduleButton } from "../WorkspaceScheduleButton/WorkspaceScheduleButton"
 import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 import { WorkspaceStats } from "../WorkspaceStats/WorkspaceStats"
-import { WarningSummary } from "../WarningSummary/WarningSummary"
+import { WarningAlert } from "../WarningAlert/WarningAlert"
 import { useTranslation } from "react-i18next"
 
 export enum WorkspaceErrors {
@@ -87,7 +87,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   )
 
   const workspaceRefreshWarning = Boolean(workspaceErrors[WorkspaceErrors.GET_RESOURCES_ERROR]) && (
-    <WarningSummary warningString={t("warningsAndErrors.workspaceRefreshWarning")} />
+    <WarningAlert text={t("warningsAndErrors.workspaceRefreshWarning")} />
   )
 
   return (
diff --git a/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx b/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx
index 604de7a6d19de..cb41bf9e2150d 100644
--- a/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx
+++ b/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx
@@ -1,15 +1,9 @@
 import Button from "@material-ui/core/Button"
-import { makeStyles } from "@material-ui/core/styles"
-import Alert from "@material-ui/lab/Alert"
-import AlertTitle from "@material-ui/lab/AlertTitle"
 import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"
 import { isWorkspaceDeleted } from "../../util/workspace"
-
-const Language = {
-  bannerTitle: "This workspace has been deleted and cannot be edited.",
-  createWorkspaceCta: "Create new workspace",
-}
+import { WarningAlert } from "components/WarningAlert/WarningAlert"
+import { useTranslation } from "react-i18next"
 
 export interface WorkspaceDeletedBannerProps {
   workspace: TypesGen.Workspace
@@ -20,34 +14,22 @@ export const WorkspaceDeletedBanner: FC<React.PropsWithChildren<WorkspaceDeleted
   workspace,
   handleClick,
 }) => {
-  const styles = useStyles()
+  const { t } = useTranslation("workspacePage")
 
   if (!isWorkspaceDeleted(workspace)) {
     return null
   }
 
+  const NewWorkspaceButton = (
+    <Button color="inherit" onClick={handleClick} size="small">
+      {t("ctas.createWorkspaceCta")}
+    </Button>
+  )
+
   return (
-    <Alert
-      className={styles.root}
-      action={
-        <Button color="inherit" onClick={handleClick} size="small">
-          {Language.createWorkspaceCta}
-        </Button>
-      }
-      severity="warning"
-    >
-      <AlertTitle>{Language.bannerTitle}</AlertTitle>
-    </Alert>
+    <WarningAlert
+      text={t("warningsAndErrors.workspaceDeletedWarning")}
+      action={NewWorkspaceButton}
+    />
   )
 }
-
-export const useStyles = makeStyles(() => {
-  return {
-    root: {
-      alignItems: "center",
-      "& .MuiAlertTitle-root": {
-        marginBottom: "0px",
-      },
-    },
-  }
-})
diff --git a/site/src/components/WorkspaceScheduleBanner/WorkspaceScheduleBanner.tsx b/site/src/components/WorkspaceScheduleBanner/WorkspaceScheduleBanner.tsx
index 81538af5352df..e6cd565e7f969 100644
--- a/site/src/components/WorkspaceScheduleBanner/WorkspaceScheduleBanner.tsx
+++ b/site/src/components/WorkspaceScheduleBanner/WorkspaceScheduleBanner.tsx
@@ -1,21 +1,16 @@
 import Button from "@material-ui/core/Button"
-import Alert from "@material-ui/lab/Alert"
-import AlertTitle from "@material-ui/lab/AlertTitle"
 import dayjs from "dayjs"
 import isSameOrBefore from "dayjs/plugin/isSameOrBefore"
 import utc from "dayjs/plugin/utc"
 import { FC } from "react"
-import * as TypesGen from "../../api/typesGenerated"
-import { isWorkspaceOn } from "../../util/workspace"
+import * as TypesGen from "api/typesGenerated"
+import { isWorkspaceOn } from "util/workspace"
+import { WarningAlert } from "components/WarningAlert/WarningAlert"
+import { useTranslation } from "react-i18next"
 
 dayjs.extend(utc)
 dayjs.extend(isSameOrBefore)
 
-export const Language = {
-  bannerAction: "Extend",
-  bannerTitle: "Your workspace is scheduled to automatically shut down soon.",
-}
-
 export interface WorkspaceScheduleBannerProps {
   isLoading?: boolean
   onExtend: () => void
@@ -36,26 +31,19 @@ export const WorkspaceScheduleBanner: FC<React.PropsWithChildren<WorkspaceSchedu
   onExtend,
   workspace,
 }) => {
+  const { t } = useTranslation("workspacePage")
+
   if (!shouldDisplay(workspace)) {
     return null
-  } else {
-    return (
-      <Alert
-        action={
-          <Button
-            variant="outlined"
-            color="inherit"
-            disabled={isLoading}
-            onClick={onExtend}
-            size="small"
-          >
-            {Language.bannerAction}
-          </Button>
-        }
-        severity="warning"
-      >
-        <AlertTitle>{Language.bannerTitle}</AlertTitle>
-      </Alert>
-    )
   }
+
+  const ScheduleButton = (
+    <Button variant="outlined" color="inherit" disabled={isLoading} onClick={onExtend} size="small">
+      {t("ctas.extendScheduleCta")}
+    </Button>
+  )
+
+  return (
+    <WarningAlert text={t("warningsAndErrors.workspaceShutdownWarning")} action={ScheduleButton} />
+  )
 }
diff --git a/site/src/i18n/en/workspacePage.json b/site/src/i18n/en/workspacePage.json
index f4b1ab6eb9762..bbc199734661a 100644
--- a/site/src/i18n/en/workspacePage.json
+++ b/site/src/i18n/en/workspacePage.json
@@ -6,8 +6,15 @@
     "schedule": "Schedule",
     "editDeadlineMinus": "Subtract one hour",
     "editDeadlinePlus": "Add one hour"
-  }, 
+  },
+  "ctas": {
+    "createWorkspaceCta": "Create new workspace",
+    "extendScheduleCta": "Extend"
+
+  },
   "warningsAndErrors": {
-    "workspaceRefreshWarning": "We're having difficulty fetching the latest workspace state. Refresh the page to see the newest changes."
+    "workspaceRefreshWarning": "We're having difficulty fetching the latest workspace state. Refresh the page to see the newest changes.",
+    "workspaceDeletedWarning": "This workspace has been deleted and cannot be edited.",
+    "workspaceShutdownWarning": "Your workspace is scheduled to automatically shut down soon."
   }
 }

From 5db509bab209bdb0e8aa564ad9055f11ec972880 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira.pilot23@gmail.com>
Date: Wed, 5 Oct 2022 15:08:59 +0000
Subject: [PATCH 4/5] prettier

---
 site/src/i18n/en/workspacePage.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/site/src/i18n/en/workspacePage.json b/site/src/i18n/en/workspacePage.json
index bbc199734661a..2d98f12d4da56 100644
--- a/site/src/i18n/en/workspacePage.json
+++ b/site/src/i18n/en/workspacePage.json
@@ -10,7 +10,6 @@
   "ctas": {
     "createWorkspaceCta": "Create new workspace",
     "extendScheduleCta": "Extend"
-
   },
   "warningsAndErrors": {
     "workspaceRefreshWarning": "We're having difficulty fetching the latest workspace state. Refresh the page to see the newest changes.",

From 5aeb6e2bc0af8f9d672c99acd9d972ed20fb294d Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira.pilot23@gmail.com>
Date: Wed, 5 Oct 2022 20:05:24 +0000
Subject: [PATCH 5/5] updated design

---
 .../WarningAlert/WarningAlert.stories.tsx     | 16 +++-
 .../components/WarningAlert/WarningAlert.tsx  | 76 ++++++++++++-------
 site/src/components/Workspace/Workspace.tsx   |  2 +-
 .../WorkspaceDeletedBanner.tsx                |  4 +-
 .../WorkspaceScheduleBanner.tsx               |  7 +-
 site/src/i18n/en/common.json                  |  3 +
 6 files changed, 70 insertions(+), 38 deletions(-)

diff --git a/site/src/components/WarningAlert/WarningAlert.stories.tsx b/site/src/components/WarningAlert/WarningAlert.stories.tsx
index 166a754b76031..dc8eed293441e 100644
--- a/site/src/components/WarningAlert/WarningAlert.stories.tsx
+++ b/site/src/components/WarningAlert/WarningAlert.stories.tsx
@@ -9,13 +9,14 @@ export default {
 
 const Template: Story<WarningAlertProps> = (args) => <WarningAlert {...args} />
 
-export const ExampleWithClose = Template.bind({})
-ExampleWithClose.args = {
+export const ExampleWithDismiss = Template.bind({})
+ExampleWithDismiss.args = {
   text: "This is a warning",
+  dismissible: true,
 }
 
 const ExampleAction = (
-  <Button color="inherit" onClick={() => null} size="small">
+  <Button onClick={() => null} size="small">
     Button
   </Button>
 )
@@ -23,5 +24,12 @@ const ExampleAction = (
 export const ExampleWithAction = Template.bind({})
 ExampleWithAction.args = {
   text: "This is a warning",
-  action: ExampleAction,
+  actions: [ExampleAction],
+}
+
+export const ExampleWithActionAndDismiss = Template.bind({})
+ExampleWithActionAndDismiss.args = {
+  text: "This is a warning",
+  actions: [ExampleAction],
+  dismissible: true,
 }
diff --git a/site/src/components/WarningAlert/WarningAlert.tsx b/site/src/components/WarningAlert/WarningAlert.tsx
index 189b2f9e498f7..7b0a024927913 100644
--- a/site/src/components/WarningAlert/WarningAlert.tsx
+++ b/site/src/components/WarningAlert/WarningAlert.tsx
@@ -1,43 +1,61 @@
 import { useState, FC, ReactElement } from "react"
-import Alert from "@material-ui/lab/Alert"
-import IconButton from "@material-ui/core/IconButton"
 import Collapse from "@material-ui/core/Collapse"
 import { Stack } from "components/Stack/Stack"
-import CloseIcon from "@material-ui/icons/Close"
+import { makeStyles, Theme } from "@material-ui/core/styles"
+import { colors } from "theme/colors"
+import ReportProblemOutlinedIcon from "@material-ui/icons/ReportProblemOutlined"
+import Button from "@material-ui/core/Button"
+import { useTranslation } from "react-i18next"
 
 export interface WarningAlertProps {
   text: string
-  action?: ReactElement
+  dismissible?: boolean
+  actions?: ReactElement[]
 }
 
-export const WarningAlert: FC<WarningAlertProps> = ({ text, action }) => {
+export const WarningAlert: FC<WarningAlertProps> = ({
+  text,
+  dismissible = false,
+  actions = [],
+}) => {
+  const { t } = useTranslation("common")
   const [open, setOpen] = useState(true)
+  const classes = useStyles()
 
   return (
-    <Stack>
-      <Collapse in={open}>
-        <Alert
-          severity="warning"
-          action={
-            action ? (
-              action
-            ) : (
-              <IconButton
-                aria-label="close"
-                color="inherit"
-                size="small"
-                onClick={() => {
-                  setOpen(false)
-                }}
-              >
-                <CloseIcon fontSize="inherit" />
-              </IconButton>
-            )
-          }
-        >
+    <Collapse in={open}>
+      <Stack
+        className={classes.alertContainer}
+        direction="row"
+        alignItems="center"
+        spacing={0}
+        justifyContent="space-between"
+      >
+        <Stack direction="row" spacing={1}>
+          <ReportProblemOutlinedIcon fontSize="small" className={classes.alertIcon} />
           {text}
-        </Alert>
-      </Collapse>
-    </Stack>
+        </Stack>
+        <Stack direction="row">
+          {actions.length > 0 && actions.map((action) => <div key={String(action)}>{action}</div>)}
+          {dismissible && (
+            <Button size="small" onClick={() => setOpen(false)} variant="outlined">
+              {t("ctas.dismissCta")}
+            </Button>
+          )}
+        </Stack>
+      </Stack>
+    </Collapse>
   )
 }
+
+const useStyles = makeStyles<Theme>((theme) => ({
+  alertContainer: {
+    border: `1px solid ${colors.orange[7]}`,
+    borderRadius: theme.shape.borderRadius,
+    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    backgroundColor: `${colors.gray[16]}`,
+  },
+  alertIcon: {
+    color: `${colors.orange[7]}`,
+  },
+}))
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index 9f5e2ea684c0d..945258a836467 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -87,7 +87,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   )
 
   const workspaceRefreshWarning = Boolean(workspaceErrors[WorkspaceErrors.GET_RESOURCES_ERROR]) && (
-    <WarningAlert text={t("warningsAndErrors.workspaceRefreshWarning")} />
+    <WarningAlert text={t("warningsAndErrors.workspaceRefreshWarning")} dismissible />
   )
 
   return (
diff --git a/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx b/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx
index cb41bf9e2150d..c398047ee96fc 100644
--- a/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx
+++ b/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx
@@ -21,7 +21,7 @@ export const WorkspaceDeletedBanner: FC<React.PropsWithChildren<WorkspaceDeleted
   }
 
   const NewWorkspaceButton = (
-    <Button color="inherit" onClick={handleClick} size="small">
+    <Button onClick={handleClick} size="small">
       {t("ctas.createWorkspaceCta")}
     </Button>
   )
@@ -29,7 +29,7 @@ export const WorkspaceDeletedBanner: FC<React.PropsWithChildren<WorkspaceDeleted
   return (
     <WarningAlert
       text={t("warningsAndErrors.workspaceDeletedWarning")}
-      action={NewWorkspaceButton}
+      actions={[NewWorkspaceButton]}
     />
   )
 }
diff --git a/site/src/components/WorkspaceScheduleBanner/WorkspaceScheduleBanner.tsx b/site/src/components/WorkspaceScheduleBanner/WorkspaceScheduleBanner.tsx
index e6cd565e7f969..2ff5ca57096e1 100644
--- a/site/src/components/WorkspaceScheduleBanner/WorkspaceScheduleBanner.tsx
+++ b/site/src/components/WorkspaceScheduleBanner/WorkspaceScheduleBanner.tsx
@@ -38,12 +38,15 @@ export const WorkspaceScheduleBanner: FC<React.PropsWithChildren<WorkspaceSchedu
   }
 
   const ScheduleButton = (
-    <Button variant="outlined" color="inherit" disabled={isLoading} onClick={onExtend} size="small">
+    <Button variant="outlined" disabled={isLoading} onClick={onExtend} size="small">
       {t("ctas.extendScheduleCta")}
     </Button>
   )
 
   return (
-    <WarningAlert text={t("warningsAndErrors.workspaceShutdownWarning")} action={ScheduleButton} />
+    <WarningAlert
+      text={t("warningsAndErrors.workspaceShutdownWarning")}
+      actions={[ScheduleButton]}
+    />
   )
 }
diff --git a/site/src/i18n/en/common.json b/site/src/i18n/en/common.json
index 514205e9da8c2..99dda7c9e541d 100644
--- a/site/src/i18n/en/common.json
+++ b/site/src/i18n/en/common.json
@@ -18,5 +18,8 @@
     "confirm": "Are you sure you want to proceed? Type the name of this {{entity}} below to confirm.",
     "confirmLabel": "Name of {{entity}} to delete",
     "incorrectName": "Incorrect {{entity}} name."
+  },
+  "ctas": {
+    "dismissCta": "Dismiss"
   }
 }

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/4375.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/4375.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/4375.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/4375.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>