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..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.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 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, 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, 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..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.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 index 074208f2d3747..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.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 index a11deb15cc56c..7310ad77e945a 100644 --- 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 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%)", }, } pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

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.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy