From 29b100a429b89253d6e2d823e714c782a54099ff Mon Sep 17 00:00:00 2001 From: Kyle Foster 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 = ({ 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 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 = ({ 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 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 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,