From 29b100a429b89253d6e2d823e714c782a54099ff Mon Sep 17 00:00:00 2001
From: Kyle Foster <hkylefoster@gmail.com>
Date: Wed, 20 Jul 2022 13:33:17 -0400
Subject: [PATCH 1/4] Initial color palette changes

---
 site/src/components/AvatarData/AvatarData.tsx |  1 +
 .../components/BuildsTable/BuildsTable.tsx    |  2 +-
 site/src/components/NavbarView/NavbarView.tsx |  4 +--
 .../components/UserDropdown/UsersDropdown.tsx |  2 +-
 .../UserDropdownContent.tsx                   |  2 +-
 .../WorkspacesTable/WorkspacesRow.tsx         |  2 +-
 .../pages/TemplatesPage/TemplatesPageView.tsx |  2 +-
 site/src/theme/overrides.ts                   | 23 ++++++++++++---
 site/src/theme/palettes.ts                    | 28 +++++++++----------
 9 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx
index ad531b039ba61..107b0370039a4 100644
--- a/site/src/components/AvatarData/AvatarData.tsx
+++ b/site/src/components/AvatarData/AvatarData.tsx
@@ -48,5 +48,6 @@ const useStyles = makeStyles((theme) => ({
   },
   avatar: {
     marginRight: theme.spacing(1.5),
+    background: "hsl(219, 8%, 52%)",
   },
 }))
diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx
index 1a282b4184055..50372d686c900 100644
--- a/site/src/components/BuildsTable/BuildsTable.tsx
+++ b/site/src/components/BuildsTable/BuildsTable.tsx
@@ -109,7 +109,7 @@ export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
 const useStyles = makeStyles((theme) => ({
   clickableTableRow: {
     "&:hover td": {
-      backgroundColor: fade(theme.palette.primary.light, 0.1),
+      backgroundColor: fade(theme.palette.primary.dark, .1),
     },
 
     "&:focus": {
diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx
index 26d9fa2d0fb2a..6d7cb201d3a1a 100644
--- a/site/src/components/NavbarView/NavbarView.tsx
+++ b/site/src/components/NavbarView/NavbarView.tsx
@@ -104,7 +104,7 @@ const useStyles = makeStyles((theme) => ({
   },
   link: {
     alignItems: "center",
-    color: "#A7A7A7",
+    color: "hsl(220, 11%, 71%)",
     display: "flex",
     fontSize: 16,
     height: navHeight,
@@ -113,7 +113,7 @@ const useStyles = makeStyles((theme) => ({
     transition: "background-color 0.3s ease",
 
     "&:hover": {
-      backgroundColor: fade(theme.palette.primary.light, 0.1),
+      backgroundColor: fade(theme.palette.primary.light, 0.05),
     },
 
     // NavLink adds this class when the current route matches.
diff --git a/site/src/components/UserDropdown/UsersDropdown.tsx b/site/src/components/UserDropdown/UsersDropdown.tsx
index 07156c4ca97b4..5b02a29096c5c 100644
--- a/site/src/components/UserDropdown/UsersDropdown.tsx
+++ b/site/src/components/UserDropdown/UsersDropdown.tsx
@@ -83,7 +83,7 @@ export const useStyles = makeStyles((theme) => ({
     padding: `${theme.spacing(1.5)}px ${theme.spacing(2.75)}px`,
 
     "&:hover": {
-      backgroundColor: fade(theme.palette.primary.light, 0.1),
+      backgroundColor: fade(theme.palette.primary.light, 0.05),
       transition: "background-color 0.3s ease",
     },
   },
diff --git a/site/src/components/UserDropdownContent/UserDropdownContent.tsx b/site/src/components/UserDropdownContent/UserDropdownContent.tsx
index e55be7e4500f4..4d4a840c546b8 100644
--- a/site/src/components/UserDropdownContent/UserDropdownContent.tsx
+++ b/site/src/components/UserDropdownContent/UserDropdownContent.tsx
@@ -142,7 +142,7 @@ const useStyles = makeStyles((theme) => ({
     padding: `${theme.spacing(1.5)}px ${theme.spacing(2.75)}px`,
 
     "&:hover": {
-      backgroundColor: fade(theme.palette.primary.light, 0.1),
+      backgroundColor: fade(theme.palette.primary.light, 0.05),
       transition: "background-color 0.3s ease",
     },
   },
diff --git a/site/src/components/WorkspacesTable/WorkspacesRow.tsx b/site/src/components/WorkspacesTable/WorkspacesRow.tsx
index b048e65bf1339..12157926aa789 100644
--- a/site/src/components/WorkspacesTable/WorkspacesRow.tsx
+++ b/site/src/components/WorkspacesTable/WorkspacesRow.tsx
@@ -91,7 +91,7 @@ export const WorkspacesRow: FC<{ workspaceRef: WorkspaceItemMachineRef }> = ({ w
 const useStyles = makeStyles((theme) => ({
   clickableTableRow: {
     "&:hover td": {
-      backgroundColor: fade(theme.palette.primary.light, 0.1),
+      backgroundColor: fade(theme.palette.primary.dark, .1),
     },
 
     "&:focus": {
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
index 074208f2d3747..f38fc9ddbe77a 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -174,7 +174,7 @@ const useStyles = makeStyles((theme) => ({
   },
   clickableTableRow: {
     "&:hover td": {
-      backgroundColor: fade(theme.palette.primary.light, 0.1),
+      backgroundColor: fade(theme.palette.primary.dark, .1),
     },
 
     "&:focus": {
diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
index a11deb15cc56c..4398e14362f67 100644
--- a/site/src/theme/overrides.ts
+++ b/site/src/theme/overrides.ts
@@ -4,12 +4,22 @@ import { MONOSPACE_FONT_FAMILY } from "./constants"
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const getOverrides = (palette: PaletteOptions) => {
   return {
+    MuiCssBaseline: {
+      '@global': {
+        body: {
+          backgroundImage: "linear-gradient(to right bottom, hsl(223, 38%, 14%), hsl(221, 53%, 3%))",
+          backgroundRepeat: "no-repeat",
+          backgroundAttachment: "fixed",
+          letterSpacing: "-0.015em",
+        },
+      },
+    },
     MuiAvatar: {
       root: {
         borderColor: palette.divider,
         width: 36,
         height: 36,
-        fontSize: 20,
+        fontSize: 18,
       },
     },
     MuiButton: {
@@ -26,7 +36,7 @@ export const getOverrides = (palette: PaletteOptions) => {
       contained: {
         boxShadow: "none",
         color: palette.text?.primary,
-        backgroundColor: "#151515",
+        backgroundColor: "hsl(223, 27%, 3%)",
         "&:hover": {
           boxShadow: "none",
           backgroundColor: "#000000",
@@ -62,11 +72,12 @@ export const getOverrides = (palette: PaletteOptions) => {
       root: {
         // Gives the appearance of a border!
         borderRadius: 2,
-        border: `1px solid ${palette.divider}`,
+        background: "hsla(222, 31%, 19%, .5)",
 
         "& td": {
           paddingTop: 16,
           paddingBottom: 16,
+          background: "transparent"
         },
       },
     },
@@ -97,11 +108,15 @@ export const getOverrides = (palette: PaletteOptions) => {
     },
     MuiOutlinedInput: {
       root: {
+        "& .MuiOutlinedInput-notchedOutline": {
+          borderColor: palette.divider,
+        },
+
         "& input:-webkit-autofill": {
           WebkitBoxShadow: `0 0 0 1000px ${palette.background?.paper} inset`,
         },
         "&:hover .MuiOutlinedInput-notchedOutline": {
-          borderColor: (palette.primary as SimplePaletteColorOptions).light,
+          borderColor: palette.divider,
         },
       },
     },
diff --git a/site/src/theme/palettes.ts b/site/src/theme/palettes.ts
index 41433a6240e78..41702d0d73d27 100644
--- a/site/src/theme/palettes.ts
+++ b/site/src/theme/palettes.ts
@@ -3,29 +3,29 @@ import { PaletteOptions } from "@material-ui/core/styles/createPalette"
 export const darkPalette: PaletteOptions = {
   type: "dark",
   primary: {
-    main: "#409BF4",
-    contrastText: "#f8f8f8",
-    light: "#79B8FF",
-    dark: "#1976D2",
+    main: "hsl(215, 81%, 63%)",
+    contrastText: "hsl(218, 44%, 92%)",
+    light: "hsl(215, 83%, 70%)",
+    dark: "hsl(215, 74%, 51%)",
   },
   secondary: {
-    main: "#008510",
-    contrastText: "#f8f8f8",
-    dark: "#7057FF",
+    main: "hsl(142, 64%, 34%)",
+    contrastText: "hsl(218, 44%, 92%)",
+    dark: "hsl(233, 73%, 63%)",
   },
   background: {
-    default: "#1F1F1F",
-    paper: "#292929",
+    default: "hsl(222, 38%, 14%)",
+    paper: "hsl(222, 32%, 19%)",
   },
   text: {
-    primary: "#F8F8F8",
-    secondary: "#C1C1C1",
+    primary: "hsl(218, 44%, 92%)",
+    secondary: "hsl(218, 32%, 77%)",
   },
-  divider: "#383838",
+  divider: "hsl(221, 32%, 26%)",
   warning: {
-    main: "#C16800",
+    main: "hsl(20, 79%, 53%)",
   },
   success: {
-    main: "#6BBE00",
+    main: "hsl(142, 58%, 41%)",
   },
 }

From ee7a3fbce679cd99c47107e7a811eb8a500a9bb0 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Thu, 21 Jul 2022 16:02:26 +0000
Subject: [PATCH 2/4] Fix FE styles

---
 site/src/components/BuildsTable/BuildsTable.tsx       | 2 +-
 site/src/components/WorkspacesTable/WorkspacesRow.tsx | 2 +-
 site/src/pages/TemplatesPage/TemplatesPageView.tsx    | 2 +-
 site/src/theme/overrides.ts                           | 7 ++++---
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx
index 50372d686c900..92229a1a3be16 100644
--- a/site/src/components/BuildsTable/BuildsTable.tsx
+++ b/site/src/components/BuildsTable/BuildsTable.tsx
@@ -109,7 +109,7 @@ export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
 const useStyles = makeStyles((theme) => ({
   clickableTableRow: {
     "&:hover td": {
-      backgroundColor: fade(theme.palette.primary.dark, .1),
+      backgroundColor: fade(theme.palette.primary.dark, 0.1),
     },
 
     "&:focus": {
diff --git a/site/src/components/WorkspacesTable/WorkspacesRow.tsx b/site/src/components/WorkspacesTable/WorkspacesRow.tsx
index 12157926aa789..bfe9b2e99e42e 100644
--- a/site/src/components/WorkspacesTable/WorkspacesRow.tsx
+++ b/site/src/components/WorkspacesTable/WorkspacesRow.tsx
@@ -91,7 +91,7 @@ export const WorkspacesRow: FC<{ workspaceRef: WorkspaceItemMachineRef }> = ({ w
 const useStyles = makeStyles((theme) => ({
   clickableTableRow: {
     "&:hover td": {
-      backgroundColor: fade(theme.palette.primary.dark, .1),
+      backgroundColor: fade(theme.palette.primary.dark, 0.1),
     },
 
     "&:focus": {
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
index f38fc9ddbe77a..79d1ec294ccc1 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -174,7 +174,7 @@ const useStyles = makeStyles((theme) => ({
   },
   clickableTableRow: {
     "&:hover td": {
-      backgroundColor: fade(theme.palette.primary.dark, .1),
+      backgroundColor: fade(theme.palette.primary.dark, 0.1),
     },
 
     "&:focus": {
diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
index 4398e14362f67..7310ad77e945a 100644
--- a/site/src/theme/overrides.ts
+++ b/site/src/theme/overrides.ts
@@ -5,9 +5,10 @@ import { MONOSPACE_FONT_FAMILY } from "./constants"
 export const getOverrides = (palette: PaletteOptions) => {
   return {
     MuiCssBaseline: {
-      '@global': {
+      "@global": {
         body: {
-          backgroundImage: "linear-gradient(to right bottom, hsl(223, 38%, 14%), hsl(221, 53%, 3%))",
+          backgroundImage:
+            "linear-gradient(to right bottom, hsl(223, 38%, 14%), hsl(221, 53%, 3%))",
           backgroundRepeat: "no-repeat",
           backgroundAttachment: "fixed",
           letterSpacing: "-0.015em",
@@ -77,7 +78,7 @@ export const getOverrides = (palette: PaletteOptions) => {
         "& td": {
           paddingTop: 16,
           paddingBottom: 16,
-          background: "transparent"
+          background: "transparent",
         },
       },
     },

From b4687d6c88a5df04a4ddff0467bf7c8aa1c0776b Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Thu, 21 Jul 2022 16:45:29 +0000
Subject: [PATCH 3/4] Make code example darker

---
 site/src/components/CodeExample/CodeExample.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
index e317ad47b32a3..95adc25ad4fc3 100644
--- a/site/src/components/CodeExample/CodeExample.tsx
+++ b/site/src/components/CodeExample/CodeExample.tsx
@@ -29,7 +29,8 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
-    background: theme.palette.background.default,
+    background: "hsl(223, 27%, 3%)",
+    border: `1px solid ${theme.palette.divider}`,
     color: theme.palette.primary.contrastText,
     fontFamily: MONOSPACE_FONT_FAMILY,
     fontSize: 14,

From 6a421ff9b6cad165be0e0bb1cd43b9a7f8f8d35d Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Thu, 21 Jul 2022 17:30:41 +0000
Subject: [PATCH 4/4] Fix copy button color

---
 site/src/components/CopyButton/CopyButton.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
index 6b0c241bd0692..030ca4623a59a 100644
--- a/site/src/components/CopyButton/CopyButton.tsx
+++ b/site/src/components/CopyButton/CopyButton.tsx
@@ -82,8 +82,6 @@ const useStyles = makeStyles((theme) => ({
   },
   copyButton: {
     borderRadius: 7,
-    background: theme.palette.background.default,
-    color: theme.palette.primary.contrastText,
     padding: theme.spacing(0.85),
     minWidth: 32,
 

<!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/3087.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/3087.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/3087.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/3087.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>