From 30b362415407ddfc7108dc6befecc123a66eb689 Mon Sep 17 00:00:00 2001 From: zx <67887489+tan-zx@users.noreply.github.com> Date: Tue, 1 Oct 2024 18:00:36 +0800 Subject: [PATCH 1/2] feat: remove dark blue theme --- .../AppearancePage/AppearanceForm.tsx | 7 - .../AppearancePage/AppearancePage.test.tsx | 18 -- .../pages/UsersPage/storybookData/users.ts | 32 ---- site/src/theme/darkBlue/branding.ts | 33 ---- site/src/theme/darkBlue/experimental.ts | 52 ------ site/src/theme/darkBlue/index.ts | 15 -- site/src/theme/darkBlue/monaco.ts | 37 ----- site/src/theme/darkBlue/mui.ts | 79 --------- site/src/theme/darkBlue/roles.ts | 157 ------------------ site/src/theme/index.ts | 4 +- 10 files changed, 1 insertion(+), 433 deletions(-) delete mode 100644 site/src/theme/darkBlue/branding.ts delete mode 100644 site/src/theme/darkBlue/experimental.ts delete mode 100644 site/src/theme/darkBlue/index.ts delete mode 100644 site/src/theme/darkBlue/monaco.ts delete mode 100644 site/src/theme/darkBlue/mui.ts delete mode 100644 site/src/theme/darkBlue/roles.ts diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx index 6559e31723156..3468685a246cb 100644 --- a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx +++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx @@ -42,19 +42,12 @@ export const AppearanceForm: FC = ({ themes={[themes.dark, themes.light]} onSelect={() => onChangeTheme("auto")} /> - onChangeTheme("dark")} /> - onChangeTheme("darkBlue")} - /> { expect(API.updateAppearanceSettings).toBeCalledTimes(0); }); - it("changes theme to dark blue", async () => { - renderWithAuth(); - - jest.spyOn(API, "updateAppearanceSettings").mockResolvedValueOnce({ - ...MockUser, - theme_preference: "darkBlue", - }); - - const darkBlue = await screen.findByText("Dark blue"); - await userEvent.click(darkBlue); - - // Check if the API was called correctly - expect(API.updateAppearanceSettings).toBeCalledTimes(1); - expect(API.updateAppearanceSettings).toHaveBeenCalledWith("me", { - theme_preference: "darkBlue", - }); - }); - it("changes theme to light", async () => { renderWithAuth(); diff --git a/site/src/pages/UsersPage/storybookData/users.ts b/site/src/pages/UsersPage/storybookData/users.ts index 5056b3e827c89..5d24acc384039 100644 --- a/site/src/pages/UsersPage/storybookData/users.ts +++ b/site/src/pages/UsersPage/storybookData/users.ts @@ -336,22 +336,6 @@ export const MockUsers: User[] = [ }, ], }, - { - id: "59da0bfe-9c99-47fa-a563-f9fdb18449d0", - created_at: "2022-08-15T08:30:10.343828Z", - updated_at: "2024-09-05T12:27:22.098297Z", - last_seen_at: "2024-09-05T12:27:22.098297Z", - status: "active", - login_type: "oidc", - theme_preference: "darkBlue", - organization_ids: ["703f72a1-76f6-4f89-9de6-8a3989693fe5"], - roles: [ - { - name: "owner", - display_name: "Owner", - }, - ], - }, { id: "12b03f43-1bb7-4fca-967a-585c97f31682", created_at: "2022-08-10T15:35:20.553581Z", @@ -416,22 +400,6 @@ export const MockUsers: User[] = [ }, ], }, - { - id: "c323e5c3-57cb-45e7-81c4-56d6cacb2f8c", - created_at: "2024-03-04T11:12:41.201352Z", - updated_at: "2024-09-05T07:24:39.32465Z", - last_seen_at: "2024-09-05T07:24:39.324649Z", - status: "active", - login_type: "oidc", - theme_preference: "darkBlue", - organization_ids: ["703f72a1-76f6-4f89-9de6-8a3989693fe5"], - roles: [ - { - name: "owner", - display_name: "Owner", - }, - ], - }, { id: "9e7815af-bc48-435a-91c7-72dcbf26f036", created_at: "2024-05-24T14:53:53.996555Z", diff --git a/site/src/theme/darkBlue/branding.ts b/site/src/theme/darkBlue/branding.ts deleted file mode 100644 index c59079b58a3e6..0000000000000 --- a/site/src/theme/darkBlue/branding.ts +++ /dev/null @@ -1,33 +0,0 @@ -import type { Branding } from "../branding"; -import colors from "../tailwindColors"; - -export const branding: Branding = { - enterprise: { - background: colors.blue[950], - divider: colors.blue[900], - border: colors.blue[400], - text: colors.blue[50], - }, - premium: { - background: colors.violet[950], - divider: colors.violet[900], - border: colors.violet[400], - text: colors.violet[50], - }, - - featureStage: { - background: colors.sky[900], - divider: colors.sky[800], - border: colors.sky[400], - text: colors.sky[400], - - hover: { - background: colors.gray[900], - divider: colors.gray[800], - border: colors.sky[400], - text: colors.sky[400], - }, - }, -}; - -export default branding; diff --git a/site/src/theme/darkBlue/experimental.ts b/site/src/theme/darkBlue/experimental.ts deleted file mode 100644 index d7e4b816a775e..0000000000000 --- a/site/src/theme/darkBlue/experimental.ts +++ /dev/null @@ -1,52 +0,0 @@ -import type { NewTheme } from "../experimental"; -import colors from "../tailwindColors"; - -export default { - l1: { - background: colors.gray[950], - outline: colors.gray[700], - text: colors.white, - fill: { - solid: colors.gray[600], - outline: colors.gray[600], - text: colors.white, - }, - }, - - l2: { - background: colors.gray[900], - outline: colors.gray[700], - text: colors.gray[50], - fill: { - solid: colors.gray[500], - outline: colors.gray[500], - text: colors.white, - }, - disabled: { - background: colors.gray[900], - outline: colors.zinc[700], - text: colors.gray[200], - fill: { - solid: colors.gray[500], - outline: colors.gray[500], - text: colors.white, - }, - }, - hover: { - background: colors.gray[800], - outline: colors.gray[600], - text: colors.white, - fill: { - solid: colors.zinc[400], - outline: colors.zinc[400], - text: colors.white, - }, - }, - }, - - pillDefault: { - background: colors.gray[800], - outline: colors.gray[700], - text: colors.gray[200], - }, -} satisfies NewTheme; diff --git a/site/src/theme/darkBlue/index.ts b/site/src/theme/darkBlue/index.ts deleted file mode 100644 index 29cec249232c6..0000000000000 --- a/site/src/theme/darkBlue/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { forDarkThemes } from "../externalImages"; -import branding from "./branding"; -import experimental from "./experimental"; -import monaco from "./monaco"; -import muiTheme from "./mui"; -import roles from "./roles"; - -export default { - ...muiTheme, - externalImages: forDarkThemes, - experimental, - branding, - monaco, - roles, -}; diff --git a/site/src/theme/darkBlue/monaco.ts b/site/src/theme/darkBlue/monaco.ts deleted file mode 100644 index 4c73d8b9918e8..0000000000000 --- a/site/src/theme/darkBlue/monaco.ts +++ /dev/null @@ -1,37 +0,0 @@ -import type * as monaco from "monaco-editor"; -import muiTheme from "./mui"; - -export default { - base: "vs-dark", - inherit: true, - rules: [ - { - token: "comment", - foreground: "6B737C", - }, - { - token: "type", - foreground: "B392F0", - }, - { - token: "string", - foreground: "9DB1C5", - }, - { - token: "variable", - foreground: "DDDDDD", - }, - { - token: "identifier", - foreground: "B392F0", - }, - { - token: "delimiter.curly", - foreground: "EBB325", - }, - ], - colors: { - "editor.foreground": muiTheme.palette.text.primary, - "editor.background": muiTheme.palette.background.paper, - }, -} satisfies monaco.editor.IStandaloneThemeData as monaco.editor.IStandaloneThemeData; diff --git a/site/src/theme/darkBlue/mui.ts b/site/src/theme/darkBlue/mui.ts deleted file mode 100644 index 42a002c53d1c6..0000000000000 --- a/site/src/theme/darkBlue/mui.ts +++ /dev/null @@ -1,79 +0,0 @@ -// biome-ignore lint/nursery/noRestrictedImports: createTheme -import { createTheme } from "@mui/material/styles"; -import { BODY_FONT_FAMILY, borderRadius } from "../constants"; -import { components } from "../mui"; -import tw from "../tailwindColors"; - -const muiTheme = createTheme({ - palette: { - mode: "dark", - primary: { - main: tw.sky[500], - contrastText: tw.sky[50], - light: tw.sky[300], - dark: tw.sky[400], - }, - secondary: { - main: tw.gray[500], - contrastText: tw.gray[200], - dark: tw.gray[400], - }, - background: { - default: tw.gray[900], - paper: tw.gray[900], - }, - text: { - primary: tw.gray[50], - secondary: tw.gray[400], - disabled: tw.gray[500], - }, - divider: tw.gray[700], - warning: { - light: tw.amber[500], - main: tw.amber[800], - dark: tw.amber[950], - }, - success: { - main: tw.green[500], - dark: tw.green[600], - }, - info: { - light: tw.blue[400], - main: tw.blue[600], - dark: tw.blue[950], - contrastText: tw.gray[200], - }, - error: { - light: tw.red[400], - main: tw.red[500], - dark: tw.red[950], - contrastText: tw.gray[200], - }, - action: { - hover: tw.gray[800], - }, - neutral: { - main: tw.gray[50], - }, - dots: tw.gray[500], - }, - typography: { - fontFamily: BODY_FONT_FAMILY, - - body1: { - fontSize: "1rem" /* 16px at default scaling */, - lineHeight: "160%", - }, - - body2: { - fontSize: "0.875rem" /* 14px at default scaling */, - lineHeight: "160%", - }, - }, - shape: { - borderRadius, - }, - components, -}); - -export default muiTheme; diff --git a/site/src/theme/darkBlue/roles.ts b/site/src/theme/darkBlue/roles.ts deleted file mode 100644 index 413398ca6db45..0000000000000 --- a/site/src/theme/darkBlue/roles.ts +++ /dev/null @@ -1,157 +0,0 @@ -import type { Roles } from "../roles"; -import colors from "../tailwindColors"; - -const roles: Roles = { - danger: { - background: colors.orange[950], - outline: colors.orange[500], - text: colors.orange[50], - fill: { - solid: colors.orange[500], - outline: colors.orange[400], - text: colors.white, - }, - disabled: { - background: colors.orange[950], - outline: colors.orange[800], - text: colors.orange[200], - fill: { - solid: colors.orange[800], - outline: colors.orange[800], - text: colors.white, - }, - }, - hover: { - background: colors.orange[900], - outline: colors.orange[500], - text: colors.white, - fill: { - solid: colors.orange[500], - outline: colors.orange[500], - text: colors.white, - }, - }, - }, - error: { - background: colors.red[950], - outline: colors.red[600], - text: colors.red[50], - fill: { - solid: colors.red[400], - outline: colors.red[400], - text: colors.white, - }, - }, - warning: { - background: colors.amber[950], - outline: colors.amber[300], - text: colors.amber[50], - fill: { - solid: colors.amber[500], - outline: colors.amber[500], - text: colors.white, - }, - }, - notice: { - background: colors.blue[950], - outline: colors.blue[400], - text: colors.blue[50], - fill: { - solid: colors.blue[500], - outline: colors.blue[600], - text: colors.white, - }, - }, - info: { - background: colors.gray[950], - outline: colors.gray[400], - text: colors.gray[50], - fill: { - solid: colors.gray[500], - outline: colors.gray[600], - text: colors.white, - }, - }, - success: { - background: colors.green[950], - outline: colors.green[500], - text: colors.green[50], - fill: { - solid: colors.green[600], - outline: colors.green[600], - text: colors.white, - }, - disabled: { - background: colors.green[950], - outline: colors.green[800], - text: colors.green[200], - fill: { - solid: colors.green[800], - outline: colors.green[800], - text: colors.white, - }, - }, - hover: { - background: colors.green[900], - outline: colors.green[500], - text: colors.white, - fill: { - solid: colors.green[500], - outline: colors.green[500], - text: colors.white, - }, - }, - }, - active: { - background: colors.sky[950], - outline: colors.sky[500], - text: colors.sky[50], - fill: { - solid: colors.sky[600], - outline: colors.sky[400], - text: colors.white, - }, - disabled: { - background: colors.sky[950], - outline: colors.sky[800], - text: colors.sky[200], - fill: { - solid: colors.sky[800], - outline: colors.sky[800], - text: colors.white, - }, - }, - hover: { - background: colors.sky[900], - outline: colors.sky[500], - text: colors.white, - fill: { - solid: colors.sky[500], - outline: colors.sky[500], - text: colors.white, - }, - }, - }, - inactive: { - background: colors.gray[950], - outline: colors.gray[500], - text: colors.gray[50], - fill: { - solid: colors.gray[400], - outline: colors.gray[400], - text: colors.white, - }, - }, - preview: { - background: colors.violet[950], - outline: colors.violet[500], - text: colors.violet[50], - fill: { - solid: colors.violet[400], - outline: colors.violet[400], - text: colors.white, - }, - }, -}; - -export default roles; diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts index b024e88db1577..625e3e7d63858 100644 --- a/site/src/theme/index.ts +++ b/site/src/theme/index.ts @@ -3,7 +3,6 @@ import type { Theme as MuiTheme } from "@mui/material/styles"; import type * as monaco from "monaco-editor"; import type { Branding } from "./branding"; import dark from "./dark"; -import darkBlue from "./darkBlue"; import type { NewTheme } from "./experimental"; import type { ExternalImageModeStyles } from "./externalImages"; import light from "./light"; @@ -33,8 +32,7 @@ export const DEFAULT_THEME = "dark"; const theme = { dark, - darkBlue, light, -} satisfies Record; +} satisfies Record<"dark" | "light", Theme>; export default theme; From f68e15e09d2eadc60e24b08b1288fd96f6119fe1 Mon Sep 17 00:00:00 2001 From: zx <67887489+tan-zx@users.noreply.github.com> Date: Wed, 2 Oct 2024 18:19:12 +0800 Subject: [PATCH 2/2] fix: add migration, PR comments --- .../000260_remove_dark_blue_theme.down.sql | 1 + .../000260_remove_dark_blue_theme.up.sql | 1 + .../pages/UsersPage/storybookData/users.ts | 32 +++++++++++++++++++ site/src/theme/index.ts | 2 +- 4 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 coderd/database/migrations/000260_remove_dark_blue_theme.down.sql create mode 100644 coderd/database/migrations/000260_remove_dark_blue_theme.up.sql diff --git a/coderd/database/migrations/000260_remove_dark_blue_theme.down.sql b/coderd/database/migrations/000260_remove_dark_blue_theme.down.sql new file mode 100644 index 0000000000000..8be3ce5999592 --- /dev/null +++ b/coderd/database/migrations/000260_remove_dark_blue_theme.down.sql @@ -0,0 +1 @@ +-- Nothing to restore diff --git a/coderd/database/migrations/000260_remove_dark_blue_theme.up.sql b/coderd/database/migrations/000260_remove_dark_blue_theme.up.sql new file mode 100644 index 0000000000000..9e6b509f99dd2 --- /dev/null +++ b/coderd/database/migrations/000260_remove_dark_blue_theme.up.sql @@ -0,0 +1 @@ +UPDATE users SET theme_preference = '' WHERE theme_preference = 'darkBlue'; diff --git a/site/src/pages/UsersPage/storybookData/users.ts b/site/src/pages/UsersPage/storybookData/users.ts index 5d24acc384039..2e9c98ccb0e73 100644 --- a/site/src/pages/UsersPage/storybookData/users.ts +++ b/site/src/pages/UsersPage/storybookData/users.ts @@ -336,6 +336,22 @@ export const MockUsers: User[] = [ }, ], }, + { + id: "59da0bfe-9c99-47fa-a563-f9fdb18449d0", + created_at: "2022-08-15T08:30:10.343828Z", + updated_at: "2024-09-05T12:27:22.098297Z", + last_seen_at: "2024-09-05T12:27:22.098297Z", + status: "active", + login_type: "oidc", + theme_preference: "dark", + organization_ids: ["703f72a1-76f6-4f89-9de6-8a3989693fe5"], + roles: [ + { + name: "owner", + display_name: "Owner", + }, + ], + }, { id: "12b03f43-1bb7-4fca-967a-585c97f31682", created_at: "2022-08-10T15:35:20.553581Z", @@ -400,6 +416,22 @@ export const MockUsers: User[] = [ }, ], }, + { + id: "c323e5c3-57cb-45e7-81c4-56d6cacb2f8c", + created_at: "2024-03-04T11:12:41.201352Z", + updated_at: "2024-09-05T07:24:39.32465Z", + last_seen_at: "2024-09-05T07:24:39.324649Z", + status: "active", + login_type: "oidc", + theme_preference: "dark", + organization_ids: ["703f72a1-76f6-4f89-9de6-8a3989693fe5"], + roles: [ + { + name: "owner", + display_name: "Owner", + }, + ], + }, { id: "9e7815af-bc48-435a-91c7-72dcbf26f036", created_at: "2024-05-24T14:53:53.996555Z", diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts index 625e3e7d63858..a36bd9b223e8d 100644 --- a/site/src/theme/index.ts +++ b/site/src/theme/index.ts @@ -33,6 +33,6 @@ export const DEFAULT_THEME = "dark"; const theme = { dark, light, -} satisfies Record<"dark" | "light", Theme>; +} satisfies Record; export default theme;