synced/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2025-07-21 01:28:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Initial color palette changes (#3087)

Browse Source
This commit is contained in:
Bruno Quaresma
2022-07-21 14:56:16 -03:00
committed by GitHub
parent e33a74975e
commit 5b78251592
11 changed files with 44 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
site/src/components/AvatarData/AvatarData.tsx
View File

@ -48,5 +48,6 @@ const useStyles = makeStyles((theme) => ({
},
avatar: {
marginRight: theme.spacing(1.5),
background: "hsl(219, 8%, 52%)",
},
}))

2
site/src/components/BuildsTable/BuildsTable.tsx
View File

@ -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": {

3
site/src/components/CodeExample/CodeExample.tsx
View File

@ -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,

2
site/src/components/CopyButton/CopyButton.tsx
View File

@ -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,

4
site/src/components/NavbarView/NavbarView.tsx
View File

@ -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.

2
site/src/components/UserDropdown/UsersDropdown.tsx
View File

@ -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",
},
},

2
site/src/components/UserDropdownContent/UserDropdownContent.tsx
View File

@ -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",
},
},

2
site/src/components/WorkspacesTable/WorkspacesRow.tsx
View File

@ -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": {

2
site/src/pages/TemplatesPage/TemplatesPageView.tsx
View File

@ -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": {

24
site/src/theme/overrides.ts
View File

@ -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,
},
},
},

28
site/src/theme/palettes.ts
View File

@ -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%)",
},
}