Skip to content

Commit 03f05e2

Browse files
aslilacaslilac
authored
chore(site): make info gray (#14356)
1 parent cca4519 commit 03f05e2

File tree

19 files changed

+97
-88
lines changed

19 files changed

+97
-88
lines changed

‎.editorconfig

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ trim_trailing_whitespace = true
77
insert_final_newline = true
88
indent_style = tab
99

10-
[*.{md,yaml,yml,tf,tfvars,nix}]
10+
[*.{yaml,yml,tf,tfvars,nix}]
1111
indent_style = space
1212
indent_size = 2
1313

‎site/src/components/Badges/Badges.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -112,9 +112,9 @@ export const EnterpriseBadge: FC = () => {
112112
css={[
113113
styles.badge,
114114
(theme) => ({
115-
backgroundColor: theme.roles.info.background,
116-
border: `1px solid ${theme.roles.info.outline}`,
117-
color: theme.roles.info.text,
115+
backgroundColor: theme.roles.notice.background,
116+
border: `1px solid ${theme.roles.notice.outline}`,
117+
color: theme.roles.notice.text,
118118
}),
119119
]}
120120
>
@@ -129,9 +129,9 @@ export const PremiumBadge: FC = () => {
129129
css={[
130130
styles.badge,
131131
(theme) => ({
132-
backgroundColor: theme.roles.info.background,
133-
border: `1px solid ${theme.roles.info.outline}`,
134-
color: theme.roles.info.text,
132+
backgroundColor: theme.roles.notice.background,
133+
border: `1px solid ${theme.roles.notice.outline}`,
134+
color: theme.roles.notice.text,
135135
}),
136136
]}
137137
>

‎site/src/components/BuildAvatar/BuildAvatar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const BuildAvatar: FC<BuildAvatarProps> = ({ build, size }) => {
1717
const theme = useTheme();
1818
const { status, type } = getDisplayWorkspaceBuildStatus(theme, build);
1919
const badgeType = useClassName(
20-
(css, theme) => css({ backgroundColor: theme.palette[type].light }),
20+
(css, theme) => css({ backgroundColor: theme.roles[type].fill.solid }),
2121
[type],
2222
);
2323

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,11 @@ const styles = {
5252
},
5353

5454
"&.debug": {
55-
backgroundColor: theme.roles.info.background,
56-
color: theme.roles.info.text,
55+
backgroundColor: theme.roles.notice.background,
56+
color: theme.roles.notice.text,
5757

5858
"& .dashed-line": {
59-
backgroundColor: theme.roles.info.outline,
59+
backgroundColor: theme.roles.notice.outline,
6060
},
6161
},
6262

‎site/src/components/RichParameterInput/RichParameterInput.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ const styles = {
109109
},
110110
},
111111
suggestion: (theme) => ({
112-
color: theme.roles.info.fill.solid,
112+
color: theme.roles.notice.fill.solid,
113113
marginLeft: "-4px",
114114
padding: "4px 6px",
115115
lineHeight: "inherit",

‎site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const WorkspaceBuildData = ({ build }: { build: WorkspaceBuild }) => {
1919
css={{
2020
width: 16,
2121
height: 16,
22-
color: theme.palette[statusType].light,
22+
color: theme.roles[statusType].fill.solid,
2323
}}
2424
/>
2525
<div css={{ overflow: "hidden" }}>

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -318,7 +318,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
318318

319319
const styles = {
320320
nameSuggestion: (theme) => ({
321-
color: theme.roles.info.fill.solid,
321+
color: theme.roles.notice.fill.solid,
322322
padding: "4px 8px",
323323
lineHeight: "inherit",
324324
fontSize: "inherit",

‎site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -201,8 +201,8 @@ const AddOrganizationMember: FC<AddOrganizationMemberProps> = ({
201201

202202
const styles = {
203203
role: (theme) => ({
204-
backgroundColor: theme.roles.info.background,
205-
borderColor: theme.roles.info.outline,
204+
backgroundColor: theme.roles.notice.background,
205+
borderColor: theme.roles.notice.outline,
206206
}),
207207
globalRole: (theme) => ({
208208
backgroundColor: theme.roles.inactive.background,

‎site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -170,8 +170,8 @@ const styles = {
170170
borderColor: theme.roles.active.outline,
171171
}),
172172
ownerRoleBadge: (theme) => ({
173-
backgroundColor: theme.roles.info.background,
174-
borderColor: theme.roles.info.outline,
173+
backgroundColor: theme.roles.notice.background,
174+
borderColor: theme.roles.notice.outline,
175175
}),
176176
roleBadge: (theme) => ({
177177
backgroundColor: theme.experimental.l2.background,

‎site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -423,7 +423,7 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
423423
const totalInSeconds =
424424
validUsage?.reduce((total, usage) => total + usage.seconds, 0) ?? 1;
425425
const usageColors = chroma
426-
.scale([theme.roles.success.fill.solid, theme.roles.notice.fill.solid])
426+
.scale([theme.roles.success.fill.solid, theme.roles.warning.fill.solid])
427427
.mode("lch")
428428
.colors(validUsage?.length ?? 0);
429429
// The API returns a row for each app, even if the user didn't use it.

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -37,25 +37,25 @@ export const getStatus = (
3737
switch (version.job.status) {
3838
case "running":
3939
return {
40-
type: "info",
40+
type: "active",
4141
text: "Running",
4242
icon: <PillSpinner />,
4343
};
4444
case "pending":
4545
return {
46-
type: "info",
46+
type: "active",
4747
text: getPendingStatusLabel(version.job),
4848
icon: <QueuedIcon />,
4949
};
5050
case "canceling":
5151
return {
52-
type: "warning",
52+
type: "inactive",
5353
text: "Canceling",
5454
icon: <PillSpinner />,
5555
};
5656
case "canceled":
5757
return {
58-
type: "warning",
58+
type: "inactive",
5959
text: "Canceled",
6060
icon: <ErrorIcon />,
6161
};

‎site/src/pages/UsersPage/UsersFilter.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,12 @@ export const useStatusFilterMenu = ({
3434
{
3535
value: "dormant",
3636
label: "Dormant",
37-
startIcon: <StatusIndicator color="notice" />,
37+
startIcon: <StatusIndicator color="warning" />,
3838
},
3939
{
4040
value: "suspended",
4141
label: "Suspended",
42-
startIcon: <StatusIndicator color="warning" />,
42+
startIcon: <StatusIndicator color="inactive" />,
4343
},
4444
];
4545
return useFilterMenu({

‎site/src/pages/WorkspacesPage/WorkspacesTable.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
202202
{workspace.latest_build.status === "running" &&
203203
!workspace.health.healthy && (
204204
<InfoTooltip
205-
type="notice"
205+
type="warning"
206206
title="Workspace is unhealthy"
207207
message="Your workspace is running but some agents are unhealthy."
208208
/>

‎site/src/theme/dark/roles.ts

+10-10
Original file line numberDiff line numberDiff line change
@@ -53,16 +53,6 @@ export default {
5353
},
5454
},
5555
notice: {
56-
background: colors.yellow[950],
57-
outline: colors.yellow[200],
58-
text: colors.yellow[50],
59-
fill: {
60-
solid: colors.yellow[500],
61-
outline: colors.yellow[500],
62-
text: colors.white,
63-
},
64-
},
65-
info: {
6656
background: colors.blue[950],
6757
outline: colors.blue[400],
6858
text: colors.blue[50],
@@ -72,6 +62,16 @@ export default {
7262
text: colors.white,
7363
},
7464
},
65+
info: {
66+
background: colors.zinc[950],
67+
outline: colors.zinc[400],
68+
text: colors.zinc[50],
69+
fill: {
70+
solid: colors.zinc[500],
71+
outline: colors.zinc[600],
72+
text: colors.white,
73+
},
74+
},
7575
success: {
7676
background: colors.green[950],
7777
outline: colors.green[500],

‎site/src/theme/darkBlue/roles.ts

+20-20
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import colors from "../tailwindColors";
44
export default {
55
danger: {
66
background: colors.orange[950],
7-
outline: colors.orange[600],
7+
outline: colors.orange[500],
88
text: colors.orange[50],
99
fill: {
1010
solid: colors.orange[500],
@@ -34,11 +34,11 @@ export default {
3434
},
3535
error: {
3636
background: colors.red[950],
37-
outline: colors.red[500],
37+
outline: colors.red[600],
3838
text: colors.red[50],
3939
fill: {
40-
solid: colors.red[600],
41-
outline: colors.red[600],
40+
solid: colors.red[400],
41+
outline: colors.red[400],
4242
text: colors.white,
4343
},
4444
},
@@ -53,16 +53,6 @@ export default {
5353
},
5454
},
5555
notice: {
56-
background: colors.yellow[950],
57-
outline: colors.yellow[200],
58-
text: colors.yellow[50],
59-
fill: {
60-
solid: colors.yellow[500],
61-
outline: colors.yellow[500],
62-
text: colors.white,
63-
},
64-
},
65-
info: {
6656
background: colors.blue[950],
6757
outline: colors.blue[400],
6858
text: colors.blue[50],
@@ -72,6 +62,16 @@ export default {
7262
text: colors.white,
7363
},
7464
},
65+
info: {
66+
background: colors.gray[950],
67+
outline: colors.gray[400],
68+
text: colors.gray[50],
69+
fill: {
70+
solid: colors.gray[500],
71+
outline: colors.gray[600],
72+
text: colors.white,
73+
},
74+
},
7575
success: {
7676
background: colors.green[950],
7777
outline: colors.green[500],
@@ -108,7 +108,7 @@ export default {
108108
text: colors.sky[50],
109109
fill: {
110110
solid: colors.sky[600],
111-
outline: colors.sky[600],
111+
outline: colors.sky[400],
112112
text: colors.white,
113113
},
114114
disabled: {
@@ -133,12 +133,12 @@ export default {
133133
},
134134
},
135135
inactive: {
136-
background: colors.zinc[950],
137-
outline: colors.zinc[500],
138-
text: colors.zinc[50],
136+
background: colors.gray[950],
137+
outline: colors.gray[500],
138+
text: colors.gray[50],
139139
fill: {
140-
solid: colors.zinc[400],
141-
outline: colors.zinc[400],
140+
solid: colors.gray[400],
141+
outline: colors.gray[400],
142142
text: colors.white,
143143
},
144144
},

‎site/src/theme/index.ts

+11-2
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,18 @@ import type { ExternalImageModeStyles } from "./externalImages";
88
import light from "./light";
99
import type { Roles } from "./roles";
1010

11-
export interface Theme extends MuiTheme {
12-
experimental: NewTheme;
11+
export interface Theme extends Omit<MuiTheme, "palette"> {
12+
/** @deprecated prefer `theme.roles` when possible */
13+
palette: MuiTheme["palette"];
14+
15+
/** Sets of colors that can be used based on the role that a UI element serves
16+
* for the user.
17+
* Does it signify an error? a warning? that something is currently running? etc.
18+
*/
1319
roles: Roles;
20+
21+
/** Theme properties that we're testing out but haven't committed to. */
22+
experimental: NewTheme;
1423
monaco: monaco.editor.IStandaloneThemeData;
1524
externalImages: ExternalImageModeStyles;
1625
}

‎site/src/theme/light/mui.ts

+17-17
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const muiTheme = createTheme({
3232
},
3333
divider: tw.zinc[200],
3434
warning: {
35-
light: tw.amber[500],
35+
light: tw.amber[400],
3636
main: tw.amber[800],
3737
dark: tw.amber[950],
3838
},
@@ -80,25 +80,25 @@ const muiTheme = createTheme({
8080
...components,
8181
MuiCssBaseline: {
8282
styleOverrides: (theme) => `
83-
html, body, #root, #storybook-root {
84-
height: 100%;
85-
}
83+
html, body, #root, #storybook-root {
84+
height: 100%;
85+
}
8686
87-
button, input {
88-
font-family: ${BODY_FONT_FAMILY};
89-
}
87+
button, input {
88+
font-family: ${BODY_FONT_FAMILY};
89+
}
9090
91-
input:-webkit-autofill,
92-
input:-webkit-autofill:hover,
93-
input:-webkit-autofill:focus,
94-
input:-webkit-autofill:active {
95-
-webkit-box-shadow: 0 0 0 100px ${theme.palette.background.default} inset !important;
96-
}
91+
input:-webkit-autofill,
92+
input:-webkit-autofill:hover,
93+
input:-webkit-autofill:focus,
94+
input:-webkit-autofill:active {
95+
-webkit-box-shadow: 0 0 0 100px ${theme.palette.background.default} inset !important;
96+
}
9797
98-
::placeholder {
99-
color: ${theme.palette.text.disabled};
100-
}
101-
`,
98+
::placeholder {
99+
color: ${theme.palette.text.disabled};
100+
}
101+
`,
102102
},
103103
MuiAvatar: {
104104
styleOverrides: {

‎site/src/theme/light/roles.ts

+10-10
Original file line numberDiff line numberDiff line change
@@ -53,16 +53,6 @@ export default {
5353
},
5454
},
5555
notice: {
56-
background: colors.yellow[50],
57-
outline: colors.yellow[600],
58-
text: colors.yellow[950],
59-
fill: {
60-
solid: colors.yellow[500],
61-
outline: colors.yellow[500],
62-
text: colors.white,
63-
},
64-
},
65-
info: {
6656
background: colors.blue[50],
6757
outline: colors.blue[400],
6858
text: colors.blue[950],
@@ -72,6 +62,16 @@ export default {
7262
text: colors.white,
7363
},
7464
},
65+
info: {
66+
background: colors.zinc[50],
67+
outline: colors.zinc[400],
68+
text: colors.zinc[950],
69+
fill: {
70+
solid: colors.zinc[700],
71+
outline: colors.zinc[600],
72+
text: colors.white,
73+
},
74+
},
7575
success: {
7676
background: colors.green[50],
7777
outline: colors.green[500],

0 commit comments

Comments
 (0)