refactor: Initial color palette changes (#3087)

BrunoQuaresma · web-flow · commit 5b7825159280 · 2022-07-21T17:56:16.000Z
diff --git 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
@@ -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, 0.1),
     },
 
     "&:focus": {
diff --git 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,
diff --git 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,
 
diff --git 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
@@ -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
@@ -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
@@ -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, 0.1),
     },
 
     "&:focus": {
diff --git 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, 0.1),
     },
 
     "&:focus": {
diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
@@ -4,12 +4,23 @@ 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 +37,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 +73,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 +109,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
@@ -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%)",
   },
 }
