refactor(site): add minor tweaks to the workspace delete dialog (#10758)

BrunoQuaresma · web-flow · commit b508c325b173 · 2023-11-17T12:01:57.000-03:00
Before: <img width="483" alt="Screenshot 2023-11-17 at 11 29 25" src="https://github.com/coder/coder/assets/3165839/28e07832-d816-48d3-a3d5-500227f2799e"> After: <img width="491" alt="Screenshot 2023-11-17 at 11 29 30" src="https://github.com/coder/coder/assets/3165839/e01bc181-34af-4299-b86a-9081a5efd954">
diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx
@@ -1,6 +1,5 @@
 import MuiDialog, { DialogProps as MuiDialogProps } from "@mui/material/Dialog";
 import { type ReactNode } from "react";
-import { colors } from "theme/colors";
 import { ConfirmDialogType } from "./types";
 import { type Interpolation, type Theme } from "@emotion/react";
 import LoadingButton, { LoadingButtonProps } from "@mui/lab/LoadingButton";
@@ -73,24 +72,24 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
 const styles = {
   warningButton: (theme) => ({
     "&.MuiButton-contained": {
-      backgroundColor: colors.orange[12],
-      borderColor: colors.orange[9],
+      backgroundColor: theme.palette.warning.main,
+      borderColor: theme.palette.warning.main,
 
       "&:not(.MuiLoadingButton-loading)": {
         color: theme.palette.text.primary,
       },
 
       "&:hover:not(:disabled)": {
-        backgroundColor: colors.orange[9],
-        borderColor: colors.orange[9],
+        backgroundColor: theme.palette.warning.main,
+        borderColor: theme.palette.warning.main,
       },
 
       "&.Mui-disabled": {
-        backgroundColor: colors.orange[14],
-        borderColor: colors.orange[15],
+        backgroundColor: theme.palette.warning.dark,
+        borderColor: theme.palette.warning.dark,
 
         "&:not(.MuiLoadingButton-loading)": {
-          color: colors.orange[12],
+          color: theme.palette.warning.main,
         },
       },
     },
diff --git a/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx b/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
@@ -12,26 +12,26 @@ const styles = {
   workspaceInfo: (theme) => ({
     display: "flex",
     justifyContent: "space-between",
-    backgroundColor: colors.gray[14],
+    backgroundColor: theme.palette.background.paperLight,
     border: `1px solid ${theme.palette.divider}`,
-    borderRadius: 8,
-    padding: 12,
+    borderRadius: 6,
+    padding: 16,
     marginBottom: 20,
     lineHeight: "1.3em",
 
     "& .name": {
-      fontSize: 18,
-      fontWeight: 800,
+      fontSize: 16,
+      fontWeight: 600,
       color: theme.palette.text.primary,
     },
 
     "& .label": {
-      fontSize: 11,
+      fontSize: 12,
       color: theme.palette.text.secondary,
     },
 
     "& .info": {
-      fontSize: 14,
+      fontSize: 12,
       fontWeight: 500,
       color: theme.palette.text.primary,
     },
@@ -44,6 +44,7 @@ const styles = {
     border: `1px solid ${colors.orange[11]}`,
     borderRadius: 8,
     padding: 12,
+    gap: 8,
     lineHeight: "18px",
 
     "& .option": {
@@ -54,9 +55,8 @@ const styles = {
     },
 
     "& .info": {
-      fontSize: "14px",
-      color: colors.orange[10],
-      fontWeight: 500,
+      fontSize: 14,
+      fontWeight: 600,
     },
   }),
 } satisfies Record<string, Interpolation<Theme>>;
@@ -112,7 +112,7 @@ export const WorkspaceDeleteDialog = (props: WorkspaceDeleteDialogProps) => {
               <p className="name">{workspace.name}</p>
               <p className="label">workspace</p>
             </div>
-            <div>
+            <div css={{ textAlign: "right" }}>
               <p className="info">{workspaceBuildDateStr}</p>
               <p className="label">created</p>
             </div>
@@ -167,7 +167,7 @@ export const WorkspaceDeleteDialog = (props: WorkspaceDeleteDialogProps) => {
                 </div>
                 <div css={{ flexDirection: "column" }}>
                   <p className="info">Orphan resources</p>
-                  <span css={{ fontSize: "11px" }}>
+                  <span css={{ fontSize: 12, marginTop: 4, display: "block" }}>
                     Skip resource cleanup. Resources such as volumes and virtual
                     machines will not be destroyed.&nbsp;
                     <Link
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -180,7 +180,7 @@ export const WorkspacesPageView = ({
                 </MoreMenuItem>
                 <Divider />
                 <MoreMenuItem danger onClick={onDeleteAll}>
-                  <DeleteOutlined /> Delete
+                  <DeleteOutlined /> Delete&hellip;
                 </MoreMenuItem>
               </MoreMenuContent>
             </MoreMenu>
