From 10991fc967383400d2f6cf07f3e1831192e348d2 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 24 Nov 2023 12:16:12 +0000
Subject: [PATCH 01/10] Refactor navbar and table colors

---
 site/src/components/Dashboard/Navbar/NavbarView.tsx | 1 -
 site/src/theme/mui.ts                               | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/site/src/components/Dashboard/Navbar/NavbarView.tsx b/site/src/components/Dashboard/Navbar/NavbarView.tsx
index 0f1eed8522b0f..118b87362503a 100644
--- a/site/src/components/Dashboard/Navbar/NavbarView.tsx
+++ b/site/src/components/Dashboard/Navbar/NavbarView.tsx
@@ -187,7 +187,6 @@ export const NavbarView: FC<NavbarViewProps> = ({
     <nav
       css={(theme) => ({
         height: navHeight,
-        background: theme.palette.background.paper,
         borderBottom: `1px solid ${theme.palette.divider}`,
       })}
     >
diff --git a/site/src/theme/mui.ts b/site/src/theme/mui.ts
index 86f0d26019274..7acd0b5595606 100644
--- a/site/src/theme/mui.ts
+++ b/site/src/theme/mui.ts
@@ -244,7 +244,6 @@ dark = createTheme(dark, {
         root: ({ theme }) => ({
           borderCollapse: "unset",
           border: "none",
-          background: dark.palette.background.paper,
           boxShadow: `0 0 0 1px ${dark.palette.background.default} inset`,
           overflow: "hidden",
 
@@ -266,7 +265,7 @@ dark = createTheme(dark, {
           fontSize: 14,
           color: dark.palette.text.secondary,
           fontWeight: 600,
-          background: dark.palette.background.paperLight,
+          background: dark.palette.background.paper,
         },
         root: {
           fontSize: 16,

From cdcc9032fc60e334afed9e98f57bcb4a46dc0f10 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 24 Nov 2023 12:30:29 +0000
Subject: [PATCH 02/10] Refactor deploy settings and workspace page

---
 site/src/components/DeploySettingsLayout/Fieldset.tsx   | 3 +--
 site/src/components/DeploySettingsLayout/Option.tsx     | 8 ++------
 site/src/components/ErrorBoundary/RuntimeErrorState.tsx | 3 +--
 site/src/components/Filter/filter.tsx                   | 2 +-
 site/src/components/Markdown/Markdown.tsx               | 2 +-
 site/src/components/PageHeader/FullWidthPageHeader.tsx  | 2 +-
 site/src/components/Resources/AgentRow.tsx              | 2 +-
 site/src/components/Resources/ResourceCard.tsx          | 1 -
 8 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/site/src/components/DeploySettingsLayout/Fieldset.tsx b/site/src/components/DeploySettingsLayout/Fieldset.tsx
index 9100b3e307110..d3baea71a3b12 100644
--- a/site/src/components/DeploySettingsLayout/Fieldset.tsx
+++ b/site/src/components/DeploySettingsLayout/Fieldset.tsx
@@ -29,7 +29,6 @@ export const Fieldset: FC<FieldsetProps> = (props) => {
       css={{
         borderRadius: 8,
         border: `1px solid ${theme.palette.divider}`,
-        background: theme.palette.background.paper,
         marginTop: 32,
       }}
       onSubmit={onSubmit}
@@ -63,7 +62,7 @@ export const Fieldset: FC<FieldsetProps> = (props) => {
         css={[
           theme.typography.body2 as CSSObject,
           {
-            background: theme.palette.background.paperLight,
+            background: theme.palette.background.paper,
             padding: "16px 24px",
             display: "flex",
             alignItems: "center",
diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx
index a63dea4bd1b9d..978233accebde 100644
--- a/site/src/components/DeploySettingsLayout/Option.tsx
+++ b/site/src/components/DeploySettingsLayout/Option.tsx
@@ -127,9 +127,7 @@ interface OptionConfigProps extends BoxProps {
 export const OptionConfig = (props: OptionConfigProps) => {
   const { source, sx, ...attrs } = props;
   const theme = useTheme();
-  const borderColor = source
-    ? theme.palette.primary.main
-    : theme.palette.divider;
+  const borderColor = source ? undefined : theme.palette.divider;
 
   return (
     <Box
@@ -139,9 +137,7 @@ export const OptionConfig = (props: OptionConfigProps) => {
         fontFamily: MONOSPACE_FONT_FAMILY,
         fontWeight: 600,
         backgroundColor: (theme) =>
-          source
-            ? theme.palette.primary.dark
-            : theme.palette.background.paperLight,
+          source ? theme.palette.primary.dark : theme.palette.background.paper,
         display: "inline-flex",
         alignItems: "center",
         borderRadius: 0.25,
diff --git a/site/src/components/ErrorBoundary/RuntimeErrorState.tsx b/site/src/components/ErrorBoundary/RuntimeErrorState.tsx
index a9f4fe085ee0f..50741b327d676 100644
--- a/site/src/components/ErrorBoundary/RuntimeErrorState.tsx
+++ b/site/src/components/ErrorBoundary/RuntimeErrorState.tsx
@@ -160,7 +160,6 @@ const styles = {
   }),
 
   stack: (theme) => ({
-    backgroundColor: theme.palette.background.paper,
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: 4,
     marginTop: 64,
@@ -174,7 +173,7 @@ const styles = {
     fontWeight: 600,
     letterSpacing: 1,
     padding: "8px 8px 8px 16px",
-    backgroundColor: theme.palette.background.paperLight,
+    backgroundColor: theme.palette.background.paper,
     borderBottom: `1px solid ${theme.palette.divider}`,
     color: theme.palette.text.secondary,
     display: "flex",
diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx
index 1824554721b13..9a559e11e24b1 100644
--- a/site/src/components/Filter/filter.tsx
+++ b/site/src/components/Filter/filter.tsx
@@ -125,7 +125,7 @@ const BaseSkeleton = (props: SkeletonProps) => {
       height={36}
       {...props}
       sx={{
-        bgcolor: (theme) => theme.palette.background.paperLight,
+        bgcolor: (theme) => theme.palette.background.paper,
         borderRadius: "6px",
         ...props.sx,
       }}
diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx
index 00447a6d7d6ca..d46511022544f 100644
--- a/site/src/components/Markdown/Markdown.tsx
+++ b/site/src/components/Markdown/Markdown.tsx
@@ -217,7 +217,7 @@ const markdownStyles: Interpolation<Theme> = (theme: Theme) => ({
   },
 
   "& .prismjs": {
-    background: theme.palette.background.paperLight,
+    background: theme.palette.background.paper,
     borderRadius: 8,
     padding: "16px 24px",
     overflowX: "auto",
diff --git a/site/src/components/PageHeader/FullWidthPageHeader.tsx b/site/src/components/PageHeader/FullWidthPageHeader.tsx
index 8b2f23973c41f..32257579cffe8 100644
--- a/site/src/components/PageHeader/FullWidthPageHeader.tsx
+++ b/site/src/components/PageHeader/FullWidthPageHeader.tsx
@@ -12,7 +12,7 @@ export const FullWidthPageHeader: FC<
         {
           ...(theme.typography.body2 as CSSObject),
           padding: 24,
-          background: theme.palette.background.paper,
+          background: theme.palette.background.default,
           borderBottom: `1px solid ${theme.palette.divider}`,
           display: "flex",
           alignItems: "center",
diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
index 7a22a55542a6e..4f691e07278b8 100644
--- a/site/src/components/Resources/AgentRow.tsx
+++ b/site/src/components/Resources/AgentRow.tsx
@@ -513,7 +513,7 @@ const useAgentLogs = (
 
 const styles = {
   agentRow: (theme) => ({
-    backgroundColor: theme.palette.background.paperLight,
+    backgroundColor: theme.palette.background.paper,
     fontSize: 16,
     borderLeft: `2px solid ${theme.palette.text.secondary}`,
 
diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
index 28273c414e482..d4dc9d2882d9c 100644
--- a/site/src/components/Resources/ResourceCard.tsx
+++ b/site/src/components/Resources/ResourceCard.tsx
@@ -13,7 +13,6 @@ import { SensitiveValue } from "./SensitiveValue";
 
 const styles = {
   resourceCard: (theme) => ({
-    background: theme.palette.background.paper,
     borderRadius: 8,
     border: `1px solid ${theme.palette.divider}`,
 

From 06563ef56b0ddaed818156d7b5c6993b4c58802e Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 24 Nov 2023 12:34:12 +0000
Subject: [PATCH 03/10] Refactor template editor

---
 site/src/components/Resources/AgentRowPreview.tsx             | 2 +-
 site/src/components/SyntaxHighlighter/coderTheme.ts           | 4 ++--
 .../pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx | 2 --
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx
index ab553b42409be..43e35948479da 100644
--- a/site/src/components/Resources/AgentRowPreview.tsx
+++ b/site/src/components/Resources/AgentRowPreview.tsx
@@ -103,7 +103,7 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({
 const styles = {
   agentRow: (theme) => ({
     padding: "16px 32px",
-    backgroundColor: theme.palette.background.paperLight,
+    backgroundColor: theme.palette.background.paper,
     fontSize: 16,
     position: "relative",
 
diff --git a/site/src/components/SyntaxHighlighter/coderTheme.ts b/site/src/components/SyntaxHighlighter/coderTheme.ts
index 352bcf0454273..377651fd02f9e 100644
--- a/site/src/components/SyntaxHighlighter/coderTheme.ts
+++ b/site/src/components/SyntaxHighlighter/coderTheme.ts
@@ -207,9 +207,9 @@ export const coderTheme = (theme: Theme): editor.IStandaloneThemeData => ({
   ],
   colors: {
     "editor.foreground": theme.palette.text.primary,
-    "editor.background": theme.palette.background.paper,
+    "editor.background": theme.palette.background.default,
     "editor.selectionBackground": theme.palette.action.hover,
-    "editor.lineHighlightBackground": theme.palette.background.paperLight,
+    "editor.lineHighlightBackground": theme.palette.background.paper,
 
     "editorCursor.foreground": "#f8f8f0",
     "editorWhitespace.foreground": "#3B3A32",
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index a4aaa8debedcb..b07578fe63bfb 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -471,7 +471,6 @@ const styles = {
     alignItems: "center",
     justifyContent: "space-between",
     height: topbarHeight,
-    background: theme.palette.background.paper,
   }),
   topbarSides: {
     display: "flex",
@@ -486,7 +485,6 @@ const styles = {
   },
   sidebar: (theme) => ({
     minWidth: 256,
-    backgroundColor: theme.palette.background.paper,
     borderRight: `1px solid ${theme.palette.divider}`,
   }),
   sidebarTitle: (theme) => ({

From 3addeb2f41336e89c379ff4083a7d9892dfcaff4 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 24 Nov 2023 12:36:48 +0000
Subject: [PATCH 04/10] Refactor timeline components

---
 site/src/components/TemplateFiles/TemplateFiles.tsx | 2 +-
 site/src/components/Timeline/TimelineDateRow.tsx    | 4 +---
 site/src/components/WorkspaceBuildLogs/Logs.tsx     | 2 +-
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/site/src/components/TemplateFiles/TemplateFiles.tsx b/site/src/components/TemplateFiles/TemplateFiles.tsx
index 758ebbd9da062..7acce3a1b0ee1 100644
--- a/site/src/components/TemplateFiles/TemplateFiles.tsx
+++ b/site/src/components/TemplateFiles/TemplateFiles.tsx
@@ -146,7 +146,7 @@ const styles = {
   }),
 
   codeWrapper: (theme) => ({
-    background: theme.palette.background.paperLight,
+    background: theme.palette.background.paper,
   }),
 
   files: (theme) => ({
diff --git a/site/src/components/Timeline/TimelineDateRow.tsx b/site/src/components/Timeline/TimelineDateRow.tsx
index 1023c40a3883f..331ba7e056534 100644
--- a/site/src/components/Timeline/TimelineDateRow.tsx
+++ b/site/src/components/Timeline/TimelineDateRow.tsx
@@ -14,8 +14,6 @@ export const TimelineDateRow: FC<TimelineDateRow> = ({ date }) => {
   return (
     <TableRow
       css={css`
-        background: ${theme.palette.background.paper};
-
         &:not(:first-of-type) td {
           border-top: 1px solid ${theme.palette.divider};
         }
@@ -24,7 +22,7 @@ export const TimelineDateRow: FC<TimelineDateRow> = ({ date }) => {
       <TableCell
         css={{
           padding: `8px 32px !important`,
-          background: `${theme.palette.background.paperLight} !important`,
+          background: `${theme.palette.background.paper} !important`,
           fontSize: 12,
           position: "relative",
           color: theme.palette.text.secondary,
diff --git a/site/src/components/WorkspaceBuildLogs/Logs.tsx b/site/src/components/WorkspaceBuildLogs/Logs.tsx
index cb4b0a525a92d..e95999806b0b6 100644
--- a/site/src/components/WorkspaceBuildLogs/Logs.tsx
+++ b/site/src/components/WorkspaceBuildLogs/Logs.tsx
@@ -120,7 +120,7 @@ const styles = {
     },
 
     "&.debug": {
-      backgroundColor: theme.palette.background.paperLight,
+      backgroundColor: theme.palette.background.paper,
     },
 
     "&.warn": {

From 60d8ec86f97364a3f46a4bc1fb919f76e61e5a65 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 24 Nov 2023 12:42:48 +0000
Subject: [PATCH 05/10] Remove remaining paperLight elements

---
 .../WorkspaceStatusBadge/WorkspaceStatusBadge.tsx           | 2 +-
 .../pages/TemplatePage/TemplateInsightsPage/DateRange.tsx   | 6 +++---
 .../pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx  | 2 +-
 site/src/pages/TerminalPage/TerminalAlerts.tsx              | 2 +-
 site/src/pages/TerminalPage/TerminalPageAlert.tsx           | 2 +-
 site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx     | 2 +-
 site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx        | 6 +++---
 .../WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx         | 3 +--
 site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx           | 2 +-
 9 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
index d707694d6ad8b..119d403612919 100644
--- a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
+++ b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
@@ -92,7 +92,7 @@ const FailureTooltip: FC<TooltipProps> = ({ children, ...tooltipProps }) => {
   const popper = useClassName(
     (css, theme) => css`
       & .${tooltipClasses.tooltip} {
-        background-color: ${theme.palette.background.paperLight};
+        background-color: ${theme.palette.background.paper};
         border: 1px solid ${theme.palette.divider};
         font-size: 12px;
         padding: 8px 10px;
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx
index 6ec3543283d94..94b5500c833ca 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx
@@ -157,7 +157,7 @@ const styles = {
       color: theme.palette.text.secondary,
 
       "&:hover .rdrStaticRangeLabel": {
-        background: theme.palette.background.paperLight,
+        background: theme.palette.background.paper,
         color: theme.palette.text.primary,
       },
 
@@ -175,7 +175,7 @@ const styles = {
     },
 
     "& .rdrCalendarWrapper": {
-      backgroundColor: theme.palette.background.paperLight,
+      backgroundColor: theme.palette.background.paper,
     },
 
     "& .rdrDateDisplayItem": {
@@ -188,7 +188,7 @@ const styles = {
 
       "&.rdrDateDisplayItemActive": {
         borderColor: theme.palette.text.primary,
-        backgroundColor: theme.palette.background.paperLight,
+        backgroundColor: theme.palette.background.paper,
 
         "& input": {
           color: theme.palette.text.primary,
diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx
index 622854884c118..58a860e36db20 100644
--- a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx
+++ b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx
@@ -147,7 +147,7 @@ const styles = {
   },
 
   active: (theme) => ({
-    backgroundColor: theme.palette.background.paperLight,
+    backgroundColor: theme.palette.background.paper,
   }),
 
   versionCell: {
diff --git a/site/src/pages/TerminalPage/TerminalAlerts.tsx b/site/src/pages/TerminalPage/TerminalAlerts.tsx
index 3a5d7ebd66276..05706a5bc440a 100644
--- a/site/src/pages/TerminalPage/TerminalAlerts.tsx
+++ b/site/src/pages/TerminalPage/TerminalAlerts.tsx
@@ -96,7 +96,7 @@ const TerminalAlert = (props: AlertProps) => {
         borderWidth: 0,
         borderBottomWidth: 1,
         borderBottomColor: (theme) => theme.palette.divider,
-        backgroundColor: (theme) => theme.palette.background.paperLight,
+        backgroundColor: (theme) => theme.palette.background.paper,
         borderLeft: (theme) =>
           `3px solid ${theme.palette[props.severity!].light}`,
         marginBottom: 1,
diff --git a/site/src/pages/TerminalPage/TerminalPageAlert.tsx b/site/src/pages/TerminalPage/TerminalPageAlert.tsx
index 7a157cc35b4e4..ab7f69d21fd7a 100644
--- a/site/src/pages/TerminalPage/TerminalPageAlert.tsx
+++ b/site/src/pages/TerminalPage/TerminalPageAlert.tsx
@@ -112,7 +112,7 @@ export default ({
         borderWidth: 0,
         borderBottomWidth: 1,
         borderBottomColor: (theme) => theme.palette.divider,
-        backgroundColor: (theme) => theme.palette.background.paperLight,
+        backgroundColor: (theme) => theme.palette.background.paper,
         borderLeft: (theme) => `3px solid ${theme.palette[severity].light}`,
         marginBottom: 1,
       }}
diff --git a/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx b/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx
index 216654ee39f4d..e99548825cc2d 100644
--- a/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx
+++ b/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx
@@ -161,7 +161,7 @@ const classNames = {
   paper: (css, theme) => css`
     width: 360px;
     margin-top: 8px;
-    background: ${theme.palette.background.paperLight};
+    background: ${theme.palette.background.paper};
   `,
 } satisfies Record<string, ClassName>;
 
diff --git a/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx b/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx
index b9cc757d52526..2143a15b5f463 100644
--- a/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx
+++ b/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx
@@ -76,7 +76,7 @@ export function UserRoleCell({
           css={{
             backgroundColor: hasOwnerRole
               ? theme.palette.info.dark
-              : theme.palette.background.paperLight,
+              : theme.palette.background.paper,
             borderColor: hasOwnerRole
               ? theme.palette.info.light
               : theme.palette.divider,
@@ -102,7 +102,7 @@ function OverflowRolePill({ roles }: OverflowRolePillProps) {
         <Pill
           text={`+${roles.length} more`}
           css={{
-            backgroundColor: theme.palette.background.paperLight,
+            backgroundColor: theme.palette.background.paper,
             borderColor: theme.palette.divider,
           }}
         />
@@ -136,7 +136,7 @@ function OverflowRolePill({ roles }: OverflowRolePillProps) {
             key={role.name}
             text={role.display_name || role.name}
             css={{
-              backgroundColor: theme.palette.background.paperLight,
+              backgroundColor: theme.palette.background.paper,
               borderColor: theme.palette.divider,
             }}
           />
diff --git a/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx b/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
index d5c4b8c477d07..f3436a7236403 100644
--- a/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
@@ -12,8 +12,7 @@ const styles = {
   workspaceInfo: (theme) => ({
     display: "flex",
     justifyContent: "space-between",
-    backgroundColor: theme.palette.background.paperLight,
-    border: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.divider,
     borderRadius: 6,
     padding: 16,
     marginBottom: 20,
diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
index a6b09376af0a1..e2e621e954860 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
@@ -106,7 +106,7 @@ export const WorkspacesEmpty = (props: {
                   color: "inherit",
 
                   "&:hover": {
-                    backgroundColor: theme.palette.background.paperLight,
+                    backgroundColor: theme.palette.background.paper,
                   },
                 })}
               >

From 0f11fc18a88ec34d1a344cea6a0f07e8d0409fed Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 24 Nov 2023 12:43:18 +0000
Subject: [PATCH 06/10] Remove paperLight from code

---
 site/src/@types/mui.d.ts | 4 ----
 site/src/theme/mui.ts    | 1 -
 2 files changed, 5 deletions(-)

diff --git a/site/src/@types/mui.d.ts b/site/src/@types/mui.d.ts
index 0762f53151c59..50ca165c18ce2 100644
--- a/site/src/@types/mui.d.ts
+++ b/site/src/@types/mui.d.ts
@@ -14,10 +14,6 @@ declare module "@mui/material/styles" {
     experimental: NewTheme;
   }
 
-  interface TypeBackground {
-    paperLight: string;
-  }
-
   interface Palette {
     neutral: PaletteColor;
   }
diff --git a/site/src/theme/mui.ts b/site/src/theme/mui.ts
index 7acd0b5595606..00ecdb31a0db2 100644
--- a/site/src/theme/mui.ts
+++ b/site/src/theme/mui.ts
@@ -40,7 +40,6 @@ export let dark = createTheme({
     background: {
       default: colors.gray[17],
       paper: colors.gray[16],
-      paperLight: colors.gray[14],
     },
     text: {
       primary: colors.gray[1],

From b79455b4ebb66551da2872f67cfb0b3a618e8beb Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 27 Nov 2023 17:11:15 +0000
Subject: [PATCH 07/10] Refactor color for agent row

---
 site/src/components/Resources/AgentMetadata.tsx | 1 -
 site/src/components/Resources/AgentRow.tsx      | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
index 32636eae63919..4145843b03c96 100644
--- a/site/src/components/Resources/AgentMetadata.tsx
+++ b/site/src/components/Resources/AgentMetadata.tsx
@@ -207,7 +207,6 @@ const styles = {
   root: (theme) => ({
     padding: "20px 32px",
     borderTop: `1px solid ${theme.palette.divider}`,
-    background: theme.palette.background.paper,
     overflowX: "auto",
     scrollPadding: "0 32px",
   }),
diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
index 4f691e07278b8..4bff9c76dbdb7 100644
--- a/site/src/components/Resources/AgentRow.tsx
+++ b/site/src/components/Resources/AgentRow.tsx
@@ -513,7 +513,6 @@ const useAgentLogs = (
 
 const styles = {
   agentRow: (theme) => ({
-    backgroundColor: theme.palette.background.paper,
     fontSize: 16,
     borderLeft: `2px solid ${theme.palette.text.secondary}`,
 
@@ -578,6 +577,7 @@ const styles = {
     alignItems: "center",
     gap: 48,
     flexWrap: "wrap",
+    backgroundColor: theme.palette.background.paper,
 
     [theme.breakpoints.down("md")]: {
       gap: 16,

From a7b692646d72203812c63621c1b660997cdd5114 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 27 Nov 2023 17:12:21 +0000
Subject: [PATCH 08/10] Remove bg and add border back

---
 .../WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx b/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
index f3436a7236403..d5e76d7a9bbef 100644
--- a/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
@@ -12,11 +12,11 @@ const styles = {
   workspaceInfo: (theme) => ({
     display: "flex",
     justifyContent: "space-between",
-    backgroundColor: theme.palette.divider,
     borderRadius: 6,
     padding: 16,
     marginBottom: 20,
     lineHeight: "1.3em",
+    border: `1px solid ${theme.palette.divider}`,
 
     "& .name": {
       fontSize: 16,

From c89cbadfc1c8dece3a280f7fe301a9256963d38f Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 27 Nov 2023 18:38:11 +0000
Subject: [PATCH 09/10] Refactor agent button

---
 site/src/components/Resources/AgentButton.tsx | 52 ++++++++-----------
 .../components/Resources/AppLink/AppLink.tsx  |  6 +--
 .../Resources/PortForwardButton.tsx           |  6 +--
 .../Resources/SSHButton/SSHButton.tsx         |  4 +-
 .../Resources/TerminalLink/TerminalLink.tsx   |  4 +-
 .../VSCodeDesktopButton.tsx                   | 14 ++---
 6 files changed, 40 insertions(+), 46 deletions(-)

diff --git a/site/src/components/Resources/AgentButton.tsx b/site/src/components/Resources/AgentButton.tsx
index 1c0d346300793..c0ab32c58f313 100644
--- a/site/src/components/Resources/AgentButton.tsx
+++ b/site/src/components/Resources/AgentButton.tsx
@@ -1,34 +1,28 @@
 import Button, { ButtonProps } from "@mui/material/Button";
-import { FC, forwardRef } from "react";
-
-export const PrimaryAgentButton: FC<ButtonProps> = ({
-  className,
-  ...props
-}) => {
-  return (
-    <Button
-      color="neutral"
-      {...props}
-      sx={{
-        backgroundColor: (theme) => theme.palette.background.default,
-        "&:hover": {
-          backgroundColor: (theme) => theme.palette.background.paper,
-        },
-        // Making them smaller since those icons don't have a padding around them
-        "& .MuiButton-startIcon": {
-          width: 12,
-          height: 12,
-          "& svg": { width: "100%", height: "100%" },
-        },
-        ...props.sx,
-      }}
-    />
-  );
-};
+import { forwardRef } from "react";
 
 // eslint-disable-next-line react/display-name -- Name is inferred from variable name
-export const SecondaryAgentButton = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, ...props }, ref) => {
-    return <Button ref={ref} className={className} {...props} />;
+export const AgentButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    return (
+      <Button
+        color="neutral"
+        {...props}
+        ref={ref}
+        sx={{
+          backgroundColor: (theme) => theme.palette.background.default,
+          "&:hover": {
+            backgroundColor: (theme) => theme.palette.background.paper,
+          },
+          // Making them smaller since those icons don't have a padding around them
+          "& .MuiButton-startIcon": {
+            width: 12,
+            height: 12,
+            "& svg": { width: "100%", height: "100%" },
+          },
+          ...props.sx,
+        }}
+      />
+    );
   },
 );
diff --git a/site/src/components/Resources/AppLink/AppLink.tsx b/site/src/components/Resources/AppLink/AppLink.tsx
index 8f83648495ba4..36d7ebd04526d 100644
--- a/site/src/components/Resources/AppLink/AppLink.tsx
+++ b/site/src/components/Resources/AppLink/AppLink.tsx
@@ -7,7 +7,7 @@ import { useTheme } from "@emotion/react";
 import { getApiKey } from "api/api";
 import type * as TypesGen from "api/typesGenerated";
 import { useProxy } from "contexts/ProxyContext";
-import { PrimaryAgentButton } from "components/Resources/AgentButton";
+import { AgentButton } from "components/Resources/AgentButton";
 import { createAppLinkHref } from "utils/apps";
 import { generateRandomString } from "utils/random";
 import { BaseIcon } from "./BaseIcon";
@@ -86,7 +86,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
   const isPrivateApp = app.sharing_level === "owner";
 
   const button = (
-    <PrimaryAgentButton
+    <AgentButton
       startIcon={icon}
       endIcon={isPrivateApp ? undefined : <ShareIcon app={app} />}
       disabled={!canClick}
@@ -100,7 +100,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
       >
         {appDisplayName}
       </span>
-    </PrimaryAgentButton>
+    </AgentButton>
   );
 
   return (
diff --git a/site/src/components/Resources/PortForwardButton.tsx b/site/src/components/Resources/PortForwardButton.tsx
index 8cd738e677352..6d1747f32a723 100644
--- a/site/src/components/Resources/PortForwardButton.tsx
+++ b/site/src/components/Resources/PortForwardButton.tsx
@@ -20,7 +20,7 @@ import {
   HelpTooltipText,
   HelpTooltipTitle,
 } from "components/HelpTooltip/HelpTooltip";
-import { SecondaryAgentButton } from "components/Resources/AgentButton";
+import { AgentButton } from "components/Resources/AgentButton";
 import {
   Popover,
   PopoverContent,
@@ -49,14 +49,14 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
   return (
     <Popover>
       <PopoverTrigger>
-        <SecondaryAgentButton disabled={!portsQuery.data}>
+        <AgentButton disabled={!portsQuery.data}>
           Ports
           {portsQuery.data ? (
             <div css={styles.portCount}>{portsQuery.data.ports.length}</div>
           ) : (
             <CircularProgress size={10} css={{ marginLeft: 8 }} />
           )}
-        </SecondaryAgentButton>
+        </AgentButton>
       </PopoverTrigger>
       <PopoverContent horizontal="right" classes={{ paper }}>
         <PortForwardPopoverView {...props} ports={portsQuery.data?.ports} />
diff --git a/site/src/components/Resources/SSHButton/SSHButton.tsx b/site/src/components/Resources/SSHButton/SSHButton.tsx
index f15dbc24b6e28..50bb041115af0 100644
--- a/site/src/components/Resources/SSHButton/SSHButton.tsx
+++ b/site/src/components/Resources/SSHButton/SSHButton.tsx
@@ -14,7 +14,7 @@ import {
   PopoverTrigger,
 } from "components/Popover/Popover";
 import { Stack } from "components/Stack/Stack";
-import { SecondaryAgentButton } from "../AgentButton";
+import { AgentButton } from "../AgentButton";
 
 export interface SSHButtonProps {
   workspaceName: string;
@@ -34,7 +34,7 @@ export const SSHButton: FC<PropsWithChildren<SSHButtonProps>> = ({
   return (
     <Popover isDefaultOpen={isDefaultOpen}>
       <PopoverTrigger>
-        <SecondaryAgentButton>SSH</SecondaryAgentButton>
+        <AgentButton>SSH</AgentButton>
       </PopoverTrigger>
 
       <PopoverContent horizontal="right" classes={{ paper }}>
diff --git a/site/src/components/Resources/TerminalLink/TerminalLink.tsx b/site/src/components/Resources/TerminalLink/TerminalLink.tsx
index bbf0e08a930d8..d504be39020c0 100644
--- a/site/src/components/Resources/TerminalLink/TerminalLink.tsx
+++ b/site/src/components/Resources/TerminalLink/TerminalLink.tsx
@@ -1,5 +1,5 @@
 import Link from "@mui/material/Link";
-import { SecondaryAgentButton } from "components/Resources/AgentButton";
+import { AgentButton } from "components/Resources/AgentButton";
 import { FC } from "react";
 import * as TypesGen from "api/typesGenerated";
 import { generateRandomString } from "utils/random";
@@ -46,7 +46,7 @@ export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
       }}
       data-testid="terminal"
     >
-      <SecondaryAgentButton>{Language.linkText}</SecondaryAgentButton>
+      <AgentButton>{Language.linkText}</AgentButton>
     </Link>
   );
 };
diff --git a/site/src/components/Resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx b/site/src/components/Resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx
index ad9f74b0e5270..35a8cab250955 100644
--- a/site/src/components/Resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx
+++ b/site/src/components/Resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx
@@ -2,7 +2,7 @@ import { FC, PropsWithChildren, useState, useRef } from "react";
 import { getApiKey } from "api/api";
 import { VSCodeIcon } from "components/Icons/VSCodeIcon";
 import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon";
-import { PrimaryAgentButton } from "components/Resources/AgentButton";
+import { AgentButton } from "components/Resources/AgentButton";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import { useLocalStorage } from "hooks";
@@ -63,7 +63,7 @@ export const VSCodeDesktopButton: FC<
           <VSCodeInsidersButton {...props} />
         )}
 
-        <PrimaryAgentButton
+        <AgentButton
           aria-controls={
             isVariantMenuOpen ? "vscode-variant-button-menu" : undefined
           }
@@ -77,7 +77,7 @@ export const VSCodeDesktopButton: FC<
           sx={{ px: 0 }}
         >
           <KeyboardArrowDownIcon sx={{ fontSize: 16 }} />
-        </PrimaryAgentButton>
+        </AgentButton>
       </ButtonGroup>
 
       <Menu
@@ -126,7 +126,7 @@ const VSCodeButton = ({
   const [loading, setLoading] = useState(false);
 
   return (
-    <PrimaryAgentButton
+    <AgentButton
       startIcon={<VSCodeIcon />}
       disabled={loading}
       onClick={() => {
@@ -157,7 +157,7 @@ const VSCodeButton = ({
       }}
     >
       VS Code Desktop
-    </PrimaryAgentButton>
+    </AgentButton>
   );
 };
 
@@ -170,7 +170,7 @@ const VSCodeInsidersButton = ({
   const [loading, setLoading] = useState(false);
 
   return (
-    <PrimaryAgentButton
+    <AgentButton
       startIcon={<VSCodeInsidersIcon />}
       disabled={loading}
       onClick={() => {
@@ -201,6 +201,6 @@ const VSCodeInsidersButton = ({
       }}
     >
       VS Code Insiders
-    </PrimaryAgentButton>
+    </AgentButton>
   );
 };

From 913dbaabaed47f5b88201b7a0006a75bbfc33f51 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 27 Nov 2023 18:40:34 +0000
Subject: [PATCH 10/10] Add navbar background back

---
 site/src/components/Dashboard/Navbar/NavbarView.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/site/src/components/Dashboard/Navbar/NavbarView.tsx b/site/src/components/Dashboard/Navbar/NavbarView.tsx
index 118b87362503a..f23963bfbbba7 100644
--- a/site/src/components/Dashboard/Navbar/NavbarView.tsx
+++ b/site/src/components/Dashboard/Navbar/NavbarView.tsx
@@ -188,6 +188,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
       css={(theme) => ({
         height: navHeight,
         borderBottom: `1px solid ${theme.palette.divider}`,
+        backgroundColor: theme.palette.background.paper,
       })}
     >
       <div css={styles.wrapper}>