From 7c018d968f46fb251e1ba70d40906da450332aed Mon Sep 17 00:00:00 2001 From: carkom Date: Sun, 15 Oct 2023 16:34:54 +0100 Subject: [PATCH 1/5] darkMode Fixes --- packages/desktop-client/src/components/LoggedInUser.tsx | 6 +++++- packages/desktop-client/src/style/themes/dark.ts | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/desktop-client/src/components/LoggedInUser.tsx b/packages/desktop-client/src/components/LoggedInUser.tsx index 7e81e9a732d..f1775be3410 100644 --- a/packages/desktop-client/src/components/LoggedInUser.tsx +++ b/packages/desktop-client/src/components/LoggedInUser.tsx @@ -91,7 +91,11 @@ export default function LoggedInUser({ return ( - diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts index 3591bc97cc7..15b4eb63f8c 100644 --- a/packages/desktop-client/src/style/themes/dark.ts +++ b/packages/desktop-client/src/style/themes/dark.ts @@ -174,8 +174,8 @@ export const errorText = colorPalette.red200; export const altErrorText = errorText; export const alt2ErrorText = errorText; export const errorAccent = colorPalette.red500; -export const upcomingBackground = tableBackground; -export const upcomingText = tableTextInactive; +export const upcomingBackground = colorPalette.purple700; +export const upcomingText = colorPalette.purple100; export const altUpcomingText = upcomingText; export const upcomingAccent = tableBorder; From 7b7a6edfd56dd4e8c6c4e4773d53bd603de4c3e6 Mon Sep 17 00:00:00 2001 From: carkom Date: Sun, 15 Oct 2023 16:39:22 +0100 Subject: [PATCH 2/5] notes --- upcoming-release-notes/1800.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 upcoming-release-notes/1800.md diff --git a/upcoming-release-notes/1800.md b/upcoming-release-notes/1800.md new file mode 100644 index 00000000000..ce17a7e7b5b --- /dev/null +++ b/upcoming-release-notes/1800.md @@ -0,0 +1,5 @@ +--- +category: Enhancements +authors: [carkom] +--- +Fixes dark mode issues: server status color, and upcoming pill on schedules page From 7fbb551ffa91f79dec826436eade6faf798d474d Mon Sep 17 00:00:00 2001 From: carkom Date: Sun, 15 Oct 2023 17:04:34 +0100 Subject: [PATCH 3/5] AutoComplete Colors --- .../src/components/autocomplete/Autocomplete.tsx | 4 ++-- packages/desktop-client/src/style/themes/dark.ts | 4 +++- packages/desktop-client/src/style/themes/development.ts | 2 ++ packages/desktop-client/src/style/themes/light.ts | 2 ++ 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx index f6ea70b82d7..018d446ecc4 100644 --- a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx @@ -504,8 +504,8 @@ function SingleAutocomplete({ offset={2} style={{ padding: 0, - backgroundColor: theme.menuItemText, - color: theme.tableBackground, + backgroundColor: theme.menuAutoCompleteBackground, + color: theme.menuAutoCompleteText, minWidth: 200, ...tooltipStyle, }} diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts index 15b4eb63f8c..9df1aecf26a 100644 --- a/packages/desktop-client/src/style/themes/dark.ts +++ b/packages/desktop-client/src/style/themes/dark.ts @@ -78,7 +78,7 @@ export const altMenuBackground = colorPalette.navy700; export const alt2MenuBackground = altMenuBackground; export const altMenuItemBackground = colorPalette.navy700; export const altMenuItemBackgroundHover = colorPalette.navy600; -export const alt2MenuItemBackgroundHover = altMenuItemBackgroundHover; +export const alt2MenuItemBackgroundHover = colorPalette.navy300; export const altMenuItemText = colorPalette.navy150; export const alt2MenuItemText = altMenuItemText; export const altMenuItemTextHover = colorPalette.navy150; @@ -87,6 +87,8 @@ export const altMenuItemTextHeader = colorPalette.purple500; export const alt2MenuItemTextHeader = altMenuItemTextHeader; export const altMenuBorder = colorPalette.navy200; export const altMenuBorderHover = colorPalette.purple400; +export const menuAutoCompleteBackground = colorPalette.navy400; +export const menuAutoCompleteText = colorPalette.navy900; export const mobileNavBackground = colorPalette.navy800; export const mobileNavItem = colorPalette.navy150; diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts index b29e5275759..b25f2c4e798 100644 --- a/packages/desktop-client/src/style/themes/development.ts +++ b/packages/desktop-client/src/style/themes/development.ts @@ -83,6 +83,8 @@ export const altMenuItemTextHeader = colorPalette.purple500; export const alt2MenuItemTextHeader = colorPalette.orange150; export const altMenuBorder = colorPalette.navy200; export const altMenuBorderHover = colorPalette.purple400; +export const menuAutoCompleteBackground = colorPalette.navy900; +export const menuAutoCompleteText = colorPalette.white; export const mobileNavBackground = colorPalette.white; export const mobileNavItem = colorPalette.gray300; diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts index d8c88811b55..18fe55ea864 100644 --- a/packages/desktop-client/src/style/themes/light.ts +++ b/packages/desktop-client/src/style/themes/light.ts @@ -87,6 +87,8 @@ export const altMenuItemTextHeader = colorPalette.navy400; export const alt2MenuItemTextHeader = colorPalette.orange150; export const altMenuBorder = colorPalette.blue700; export const altMenuBorderHover = colorPalette.purple300; +export const menuAutoCompleteBackground = colorPalette.navy900; +export const menuAutoCompleteText = colorPalette.white; export const mobileNavBackground = colorPalette.white; export const mobileNavItem = colorPalette.gray300; From 7a7c9937ce880b6850abcb5a9e922d454c257613 Mon Sep 17 00:00:00 2001 From: carkom Date: Sun, 15 Oct 2023 19:51:16 +0100 Subject: [PATCH 4/5] Sync button fix --- packages/desktop-client/src/components/Titlebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx index 6c305f23787..8b0e593a1e5 100644 --- a/packages/desktop-client/src/components/Titlebar.tsx +++ b/packages/desktop-client/src/components/Titlebar.tsx @@ -165,7 +165,7 @@ export function SyncButton({ style, isMobile = false }: SyncButtonProps) { syncState === 'offline' || syncState === 'local' ? theme.altTableText - : null; + : 'inherit'; const activeStyle = isMobile ? { From 7cc282c7c9a8ce7aa6edf23446d84e625b6ee4c0 Mon Sep 17 00:00:00 2001 From: carkom Date: Mon, 16 Oct 2023 09:40:52 +0100 Subject: [PATCH 5/5] dark color changes --- packages/desktop-client/src/style/themes/dark.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts index 9df1aecf26a..276ff8ff7d6 100644 --- a/packages/desktop-client/src/style/themes/dark.ts +++ b/packages/desktop-client/src/style/themes/dark.ts @@ -8,10 +8,10 @@ export const pageBackgroundLineTop = colorPalette.purple400; export const pageBackgroundLineMid = colorPalette.navy900; export const pageBackgroundLineBottom = colorPalette.navy150; export const pageText = colorPalette.navy150; -export const pageTextLight = pageText; +export const pageTextLight = colorPalette.navy300; export const pageTextSubdued = colorPalette.navy500; export const altpageTextSubdued = pageTextSubdued; -export const pageTextDark = colorPalette.navy800; +export const pageTextDark = colorPalette.navy100; export const pageTextPositive = colorPalette.purple200; export const pageTextLink = colorPalette.purple400; export const altPageTextLink = pageTextLink; @@ -156,11 +156,11 @@ export const buttonBareDisabledText = buttonNormalDisabledText; export const buttonBareDisabledBackground = buttonBareBackground; export const noticeBackground = colorPalette.green800; -export const noticeBackgroundLight = noticeBackground; -export const noticeBackgroundDark = noticeBackground; +export const noticeBackgroundLight = colorPalette.green900; +export const noticeBackgroundDark = colorPalette.green500; export const noticeText = colorPalette.green300; -export const noticeTextLight = noticeText; -export const noticeTextDark = noticeText; +export const noticeTextLight = colorPalette.green500; +export const noticeTextDark = colorPalette.green150; export const noticeTextMenu = colorPalette.green500; export const noticeBorder = colorPalette.green800; export const warningBackground = colorPalette.orange800;