From a31f47e33ae598b76323b509f46a32bbd1081aa7 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 17 Nov 2023 14:31:18 +0000
Subject: [PATCH 1/2] refactor(site): add minor tweaks to the workspace delete
 dialog

---
 site/src/components/Dialogs/Dialog.tsx        | 14 +++++------
 .../WorkspaceDeleteDialog.tsx                 | 24 +++++++++----------
 .../WorkspacesPage/WorkspacesPageView.tsx     |  2 +-
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx
index 10a41825a85a4..e8e982049adaf 100644
--- a/site/src/components/Dialogs/Dialog.tsx
+++ b/site/src/components/Dialogs/Dialog.tsx
@@ -73,24 +73,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
index d2e6369b78e4e..19b8d3f1afa85 100644
--- 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
index 7430cfb82ffbc..82a28ce0b2e3a 100644
--- 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>

From 8a7c73f35be54aa9542d5d67babdbac30b70371f Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 17 Nov 2023 14:44:32 +0000
Subject: [PATCH 2/2] Fix lint

---
 site/src/components/Dialogs/Dialog.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx
index e8e982049adaf..ed379576305b9 100644
--- 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";