darkMode Fixes (actualbudget#1800)

* darkMode Fixes * notes * AutoComplete Colors * Sync button fix * dark color changes
FlorianLang06 · Oct 16, 2023 · 7668f42 · 7668f42
1 parent 259b008
commit 7668f42
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 13 deletions.
diff --git 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 (
     <View style={{ flexDirection: 'row', alignItems: 'center', ...style }}>
-      <Button type="bare" onClick={() => setMenuOpen(true)} style={{ color }}>
+      <Button
+        type="bare"
+        onClick={() => setMenuOpen(true)}
+        style={color && { color }}
+      >
         {serverMessage()}
       </Button>
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,5 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+Fixes dark mode issues: server status color, and upcoming pill on schedules page