From acf44560778fc0202baad538ef7210f81121e476 Mon Sep 17 00:00:00 2001 From: Neil <55785687+carkom@users.noreply.github.com> Date: Mon, 16 Oct 2023 07:18:33 -0700 Subject: [PATCH] darkMode Fixes (#1800) * darkMode Fixes * notes * AutoComplete Colors * Sync button fix * dark color changes --- .../src/components/LoggedInUser.tsx | 6 +++++- .../src/components/Titlebar.tsx | 2 +- .../components/autocomplete/Autocomplete.tsx | 4 ++-- .../desktop-client/src/style/themes/dark.ts | 20 ++++++++++--------- .../src/style/themes/development.ts | 2 ++ .../desktop-client/src/style/themes/light.ts | 2 ++ upcoming-release-notes/1800.md | 5 +++++ 7 files changed, 28 insertions(+), 13 deletions(-) create mode 100644 upcoming-release-notes/1800.md 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/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 ? { 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 f69127488a9..e8863fef818 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; @@ -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; @@ -154,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; @@ -174,8 +176,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; 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; 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