updated design

coder · Kira-Pilot · Oct 5, 2022 · Oct 4, 2022 · Oct 4, 2022 · Oct 5, 2022
commit 5aeb6e2bc0af8f9d672c99acd9d972ed20fb294d
diff --git a/site/src/components/WarningAlert/WarningAlert.stories.tsx b/site/src/components/WarningAlert/WarningAlert.stories.tsx
@@ -9,19 +9,27 @@ 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>
 )
 
 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
@@ -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
@@ -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
@@ -21,15 +21,15 @@ 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>
   )
 
   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
@@ -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
@@ -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"
   }
 }