Skip to content

Commit a4d74b8

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore(site): remove paperLight background value (coder#10857)
I noticed we have been overusing colors in the UI, so simplifying is better for the "look and feel" and maintaining the styles over time. ![image](https://github.com/coder/coder/assets/3165839/f70c831d-eba8-4521-820a-6257ae0bedf1) If you want to have a better sense of what it looks like, I recommend you go to the Chromatic snapshot.
1 parent c634a38 commit a4d74b8

File tree

33 files changed

+69
-94
lines changed

33 files changed

+69
-94
lines changed

‎site/src/@types/mui.d.ts

-4
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,6 @@ declare module "@mui/material/styles" {
1414
experimental: NewTheme;
1515
}
1616

17-
interface TypeBackground {
18-
paperLight: string;
19-
}
20-
2117
interface Palette {
2218
neutral: PaletteColor;
2319
}

‎site/src/components/Dashboard/Navbar/NavbarView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -187,8 +187,8 @@ export const NavbarView: FC<NavbarViewProps> = ({
187187
<nav
188188
css={(theme) => ({
189189
height: navHeight,
190-
background: theme.palette.background.paper,
191190
borderBottom: `1px solid ${theme.palette.divider}`,
191+
backgroundColor: theme.palette.background.paper,
192192
})}
193193
>
194194
<div css={styles.wrapper}>

‎site/src/components/DeploySettingsLayout/Fieldset.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ export const Fieldset: FC<FieldsetProps> = (props) => {
2929
css={{
3030
borderRadius: 8,
3131
border: `1px solid ${theme.palette.divider}`,
32-
background: theme.palette.background.paper,
3332
marginTop: 32,
3433
}}
3534
onSubmit={onSubmit}
@@ -63,7 +62,7 @@ export const Fieldset: FC<FieldsetProps> = (props) => {
6362
css={[
6463
theme.typography.body2 as CSSObject,
6564
{
66-
background: theme.palette.background.paperLight,
65+
background: theme.palette.background.paper,
6766
padding: "16px 24px",
6867
display: "flex",
6968
alignItems: "center",

‎site/src/components/DeploySettingsLayout/Option.tsx

+2-6
Original file line numberDiff line numberDiff line change
@@ -127,9 +127,7 @@ interface OptionConfigProps extends BoxProps {
127127
export const OptionConfig = (props: OptionConfigProps) => {
128128
const { source, sx, ...attrs } = props;
129129
const theme = useTheme();
130-
const borderColor = source
131-
? theme.palette.primary.main
132-
: theme.palette.divider;
130+
const borderColor = source ? undefined : theme.palette.divider;
133131

134132
return (
135133
<Box
@@ -139,9 +137,7 @@ export const OptionConfig = (props: OptionConfigProps) => {
139137
fontFamily: MONOSPACE_FONT_FAMILY,
140138
fontWeight: 600,
141139
backgroundColor: (theme) =>
142-
source
143-
? theme.palette.primary.dark
144-
: theme.palette.background.paperLight,
140+
source ? theme.palette.primary.dark : theme.palette.background.paper,
145141
display: "inline-flex",
146142
alignItems: "center",
147143
borderRadius: 0.25,

‎site/src/components/ErrorBoundary/RuntimeErrorState.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,6 @@ const styles = {
160160
}),
161161

162162
stack: (theme) => ({
163-
backgroundColor: theme.palette.background.paper,
164163
border: `1px solid ${theme.palette.divider}`,
165164
borderRadius: 4,
166165
marginTop: 64,
@@ -174,7 +173,7 @@ const styles = {
174173
fontWeight: 600,
175174
letterSpacing: 1,
176175
padding: "8px 8px 8px 16px",
177-
backgroundColor: theme.palette.background.paperLight,
176+
backgroundColor: theme.palette.background.paper,
178177
borderBottom: `1px solid ${theme.palette.divider}`,
179178
color: theme.palette.text.secondary,
180179
display: "flex",

‎site/src/components/Filter/filter.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ const BaseSkeleton = (props: SkeletonProps) => {
125125
height={36}
126126
{...props}
127127
sx={{
128-
bgcolor: (theme) => theme.palette.background.paperLight,
128+
bgcolor: (theme) => theme.palette.background.paper,
129129
borderRadius: "6px",
130130
...props.sx,
131131
}}

‎site/src/components/Markdown/Markdown.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ const markdownStyles: Interpolation<Theme> = (theme: Theme) => ({
217217
},
218218

219219
"& .prismjs": {
220-
background: theme.palette.background.paperLight,
220+
background: theme.palette.background.paper,
221221
borderRadius: 8,
222222
padding: "16px 24px",
223223
overflowX: "auto",

‎site/src/components/PageHeader/FullWidthPageHeader.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const FullWidthPageHeader: FC<
1212
{
1313
...(theme.typography.body2 as CSSObject),
1414
padding: 24,
15-
background: theme.palette.background.paper,
15+
background: theme.palette.background.default,
1616
borderBottom: `1px solid ${theme.palette.divider}`,
1717
display: "flex",
1818
alignItems: "center",

‎site/src/components/Resources/AgentButton.tsx

+23-29
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,28 @@
11
import Button, { ButtonProps } from "@mui/material/Button";
2-
import { FC, forwardRef } from "react";
3-
4-
export const PrimaryAgentButton: FC<ButtonProps> = ({
5-
className,
6-
...props
7-
}) => {
8-
return (
9-
<Button
10-
color="neutral"
11-
{...props}
12-
sx={{
13-
backgroundColor: (theme) => theme.palette.background.default,
14-
"&:hover": {
15-
backgroundColor: (theme) => theme.palette.background.paper,
16-
},
17-
// Making them smaller since those icons don't have a padding around them
18-
"& .MuiButton-startIcon": {
19-
width: 12,
20-
height: 12,
21-
"& svg": { width: "100%", height: "100%" },
22-
},
23-
...props.sx,
24-
}}
25-
/>
26-
);
27-
};
2+
import { forwardRef } from "react";
283

294
// eslint-disable-next-line react/display-name -- Name is inferred from variable name
30-
export const SecondaryAgentButton = forwardRef<HTMLButtonElement, ButtonProps>(
31-
({ className, ...props }, ref) => {
32-
return <Button ref={ref} className={className} {...props} />;
5+
export const AgentButton = forwardRef<HTMLButtonElement, ButtonProps>(
6+
(props, ref) => {
7+
return (
8+
<Button
9+
color="neutral"
10+
{...props}
11+
ref={ref}
12+
sx={{
13+
backgroundColor: (theme) => theme.palette.background.default,
14+
"&:hover": {
15+
backgroundColor: (theme) => theme.palette.background.paper,
16+
},
17+
// Making them smaller since those icons don't have a padding around them
18+
"& .MuiButton-startIcon": {
19+
width: 12,
20+
height: 12,
21+
"& svg": { width: "100%", height: "100%" },
22+
},
23+
...props.sx,
24+
}}
25+
/>
26+
);
3327
},
3428
);

‎site/src/components/Resources/AgentMetadata.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,6 @@ const styles = {
207207
root: (theme) => ({
208208
padding: "20px 32px",
209209
borderTop: `1px solid ${theme.palette.divider}`,
210-
background: theme.palette.background.paper,
211210
overflowX: "auto",
212211
scrollPadding: "0 32px",
213212
}),

‎site/src/components/Resources/AgentRow.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -513,7 +513,6 @@ const useAgentLogs = (
513513

514514
const styles = {
515515
agentRow: (theme) => ({
516-
backgroundColor: theme.palette.background.paperLight,
517516
fontSize: 16,
518517
borderLeft: `2px solid ${theme.palette.text.secondary}`,
519518

@@ -578,6 +577,7 @@ const styles = {
578577
alignItems: "center",
579578
gap: 48,
580579
flexWrap: "wrap",
580+
backgroundColor: theme.palette.background.paper,
581581

582582
[theme.breakpoints.down("md")]: {
583583
gap: 16,

‎site/src/components/Resources/AgentRowPreview.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({
103103
const styles = {
104104
agentRow: (theme) => ({
105105
padding: "16px 32px",
106-
backgroundColor: theme.palette.background.paperLight,
106+
backgroundColor: theme.palette.background.paper,
107107
fontSize: 16,
108108
position: "relative",
109109

‎site/src/components/Resources/AppLink/AppLink.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useTheme } from "@emotion/react";
77
import { getApiKey } from "api/api";
88
import type * as TypesGen from "api/typesGenerated";
99
import { useProxy } from "contexts/ProxyContext";
10-
import { PrimaryAgentButton } from "components/Resources/AgentButton";
10+
import { AgentButton } from "components/Resources/AgentButton";
1111
import { createAppLinkHref } from "utils/apps";
1212
import { generateRandomString } from "utils/random";
1313
import { BaseIcon } from "./BaseIcon";
@@ -86,7 +86,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
8686
const isPrivateApp = app.sharing_level === "owner";
8787

8888
const button = (
89-
<PrimaryAgentButton
89+
<AgentButton
9090
startIcon={icon}
9191
endIcon={isPrivateApp ? undefined : <ShareIcon app={app} />}
9292
disabled={!canClick}
@@ -100,7 +100,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
100100
>
101101
{appDisplayName}
102102
</span>
103-
</PrimaryAgentButton>
103+
</AgentButton>
104104
);
105105

106106
return (

‎site/src/components/Resources/PortForwardButton.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
HelpTooltipText,
2121
HelpTooltipTitle,
2222
} from "components/HelpTooltip/HelpTooltip";
23-
import { SecondaryAgentButton } from "components/Resources/AgentButton";
23+
import { AgentButton } from "components/Resources/AgentButton";
2424
import {
2525
Popover,
2626
PopoverContent,
@@ -49,14 +49,14 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
4949
return (
5050
<Popover>
5151
<PopoverTrigger>
52-
<SecondaryAgentButton disabled={!portsQuery.data}>
52+
<AgentButton disabled={!portsQuery.data}>
5353
Ports
5454
{portsQuery.data ? (
5555
<div css={styles.portCount}>{portsQuery.data.ports.length}</div>
5656
) : (
5757
<CircularProgress size={10} css={{ marginLeft: 8 }} />
5858
)}
59-
</SecondaryAgentButton>
59+
</AgentButton>
6060
</PopoverTrigger>
6161
<PopoverContent horizontal="right" classes={{ paper }}>
6262
<PortForwardPopoverView {...props} ports={portsQuery.data?.ports} />

‎site/src/components/Resources/ResourceCard.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import { SensitiveValue } from "./SensitiveValue";
1313

1414
const styles = {
1515
resourceCard: (theme) => ({
16-
background: theme.palette.background.paper,
1716
borderRadius: 8,
1817
border: `1px solid ${theme.palette.divider}`,
1918

‎site/src/components/Resources/SSHButton/SSHButton.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
PopoverTrigger,
1515
} from "components/Popover/Popover";
1616
import { Stack } from "components/Stack/Stack";
17-
import { SecondaryAgentButton } from "../AgentButton";
17+
import { AgentButton } from "../AgentButton";
1818

1919
export interface SSHButtonProps {
2020
workspaceName: string;
@@ -34,7 +34,7 @@ export const SSHButton: FC<PropsWithChildren<SSHButtonProps>> = ({
3434
return (
3535
<Popover isDefaultOpen={isDefaultOpen}>
3636
<PopoverTrigger>
37-
<SecondaryAgentButton>SSH</SecondaryAgentButton>
37+
<AgentButton>SSH</AgentButton>
3838
</PopoverTrigger>
3939

4040
<PopoverContent horizontal="right" classes={{ paper }}>

‎site/src/components/Resources/TerminalLink/TerminalLink.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Link from "@mui/material/Link";
2-
import { SecondaryAgentButton } from "components/Resources/AgentButton";
2+
import { AgentButton } from "components/Resources/AgentButton";
33
import { FC } from "react";
44
import * as TypesGen from "api/typesGenerated";
55
import { generateRandomString } from "utils/random";
@@ -46,7 +46,7 @@ export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
4646
}}
4747
data-testid="terminal"
4848
>
49-
<SecondaryAgentButton>{Language.linkText}</SecondaryAgentButton>
49+
<AgentButton>{Language.linkText}</AgentButton>
5050
</Link>
5151
);
5252
};

‎site/src/components/Resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { FC, PropsWithChildren, useState, useRef } from "react";
22
import { getApiKey } from "api/api";
33
import { VSCodeIcon } from "components/Icons/VSCodeIcon";
44
import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon";
5-
import { PrimaryAgentButton } from "components/Resources/AgentButton";
5+
import { AgentButton } from "components/Resources/AgentButton";
66
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
77
import ButtonGroup from "@mui/material/ButtonGroup";
88
import { useLocalStorage } from "hooks";
@@ -63,7 +63,7 @@ export const VSCodeDesktopButton: FC<
6363
<VSCodeInsidersButton {...props} />
6464
)}
6565

66-
<PrimaryAgentButton
66+
<AgentButton
6767
aria-controls={
6868
isVariantMenuOpen ? "vscode-variant-button-menu" : undefined
6969
}
@@ -77,7 +77,7 @@ export const VSCodeDesktopButton: FC<
7777
sx={{ px: 0 }}
7878
>
7979
<KeyboardArrowDownIcon sx={{ fontSize: 16 }} />
80-
</PrimaryAgentButton>
80+
</AgentButton>
8181
</ButtonGroup>
8282

8383
<Menu
@@ -126,7 +126,7 @@ const VSCodeButton = ({
126126
const [loading, setLoading] = useState(false);
127127

128128
return (
129-
<PrimaryAgentButton
129+
<AgentButton
130130
startIcon={<VSCodeIcon />}
131131
disabled={loading}
132132
onClick={() => {
@@ -157,7 +157,7 @@ const VSCodeButton = ({
157157
}}
158158
>
159159
VS Code Desktop
160-
</PrimaryAgentButton>
160+
</AgentButton>
161161
);
162162
};
163163

@@ -170,7 +170,7 @@ const VSCodeInsidersButton = ({
170170
const [loading, setLoading] = useState(false);
171171

172172
return (
173-
<PrimaryAgentButton
173+
<AgentButton
174174
startIcon={<VSCodeInsidersIcon />}
175175
disabled={loading}
176176
onClick={() => {
@@ -201,6 +201,6 @@ const VSCodeInsidersButton = ({
201201
}}
202202
>
203203
VS Code Insiders
204-
</PrimaryAgentButton>
204+
</AgentButton>
205205
);
206206
};

‎site/src/components/SyntaxHighlighter/coderTheme.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -207,9 +207,9 @@ export const coderTheme = (theme: Theme): editor.IStandaloneThemeData => ({
207207
],
208208
colors: {
209209
"editor.foreground": theme.palette.text.primary,
210-
"editor.background": theme.palette.background.paper,
210+
"editor.background": theme.palette.background.default,
211211
"editor.selectionBackground": theme.palette.action.hover,
212-
"editor.lineHighlightBackground": theme.palette.background.paperLight,
212+
"editor.lineHighlightBackground": theme.palette.background.paper,
213213

214214
"editorCursor.foreground": "#f8f8f0",
215215
"editorWhitespace.foreground": "#3B3A32",

‎site/src/components/TemplateFiles/TemplateFiles.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ const styles = {
146146
}),
147147

148148
codeWrapper: (theme) => ({
149-
background: theme.palette.background.paperLight,
149+
background: theme.palette.background.paper,
150150
}),
151151

152152
files: (theme) => ({

‎site/src/components/Timeline/TimelineDateRow.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ export const TimelineDateRow: FC<TimelineDateRow> = ({ date }) => {
1414
return (
1515
<TableRow
1616
css={css`
17-
background: ${theme.palette.background.paper};
18-
1917
&:not(:first-of-type) td {
2018
border-top: 1px solid ${theme.palette.divider};
2119
}
@@ -24,7 +22,7 @@ export const TimelineDateRow: FC<TimelineDateRow> = ({ date }) => {
2422
<TableCell
2523
css={{
2624
padding: `8px 32px !important`,
27-
background: `${theme.palette.background.paperLight} !important`,
25+
background: `${theme.palette.background.paper} !important`,
2826
fontSize: 12,
2927
position: "relative",
3028
color: theme.palette.text.secondary,

‎site/src/components/WorkspaceBuildLogs/Logs.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ const styles = {
120120
},
121121

122122
"&.debug": {
123-
backgroundColor: theme.palette.background.paperLight,
123+
backgroundColor: theme.palette.background.paper,
124124
},
125125

126126
"&.warn": {

0 commit comments

Comments
 (0)