sideBar Dark Color changes (#1887)

* sideBar Dark Color changes * notes * VRT updates * test fixes * color fixes * Revert "test fixes" This reverts commit 3c6131b. * Revert "VRT updates" This reverts commit b84d765. * color update * VRT updates * calendar changes * VRT update * notes update * color change * Revert "VRT update" This reverts commit 4c5aba4. * Revert "VRT updates" This reverts commit ba142b0. * VRT updates
actualbudget · Nov 16, 2023 · 7fdd976 · 7fdd976
1 parent 1f10599
commit 7fdd976
Show file tree

Hide file tree

Showing 24 changed files with 19 additions and 20 deletions.
diff --git a/...es-a-new-account-and-views-the-initial-balance-transaction-2-chromium-linux.png b/...es-a-new-account-and-views-the-initial-balance-transaction-2-chromium-linux.png
diff --git a/...tion-available-funds-overspent-budgeted-and-for-next-month-2-chromium-linux.png b/...tion-available-funds-overspent-budgeted-and-for-next-month-2-chromium-linux.png
diff --git a/...est.js-snapshots/Budget-transfer-funds-to-another-category-2-chromium-linux.png b/...est.js-snapshots/Budget-transfer-funds-to-another-category-2-chromium-linux.png
diff --git a/...js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png b/...js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png
diff --git a/.../e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-2-chromium-linux.png b/.../e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-2-chromium-linux.png
diff --git a/...e-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png b/...e-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png
diff --git a/...e-and-makes-sure-it-is-applied-when-creating-a-transaction-4-chromium-linux.png b/...e-and-makes-sure-it-is-applied-when-creating-a-transaction-4-chromium-linux.png
diff --git a/...edules.test.js-snapshots/Schedules-checks-the-page-visuals-2-chromium-linux.png b/...edules.test.js-snapshots/Schedules-checks-the-page-visuals-2-chromium-linux.png
diff --git a/...-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png b/...-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png
diff --git a/...-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png b/...-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png
diff --git a/...-new-schedule-posts-the-transaction-and-later-completes-it-6-chromium-linux.png b/...-new-schedule-posts-the-transaction-and-later-completes-it-6-chromium-linux.png
diff --git a/...-new-schedule-posts-the-transaction-and-later-completes-it-8-chromium-linux.png b/...-new-schedule-posts-the-transaction-and-later-completes-it-8-chromium-linux.png
diff --git a/...ettings.test.js-snapshots/Settings-checks-the-page-visuals-2-chromium-linux.png b/...ettings.test.js-snapshots/Settings-checks-the-page-visuals-2-chromium-linux.png
diff --git a/...ons.test.js-snapshots/Transactions-checks-the-page-visuals-2-chromium-linux.png b/...ons.test.js-snapshots/Transactions-checks-the-page-visuals-2-chromium-linux.png
diff --git a/...js-snapshots/Transactions-creates-a-split-test-transaction-2-chromium-linux.png b/...js-snapshots/Transactions-creates-a-split-test-transaction-2-chromium-linux.png
diff --git a/....test.js-snapshots/Transactions-creates-a-test-transaction-2-chromium-linux.png b/....test.js-snapshots/Transactions-creates-a-test-transaction-2-chromium-linux.png
diff --git a/...js-snapshots/Transactions-filters-transactions-by-category-6-chromium-linux.png b/...js-snapshots/Transactions-filters-transactions-by-category-6-chromium-linux.png
diff --git a/...est.js-snapshots/Transactions-filters-transactions-by-date-6-chromium-linux.png b/...est.js-snapshots/Transactions-filters-transactions-by-date-6-chromium-linux.png
diff --git a/packages/desktop-client/src/components/Page.tsx b/packages/desktop-client/src/components/Page.tsx
@@ -20,7 +20,7 @@ function PageTitle({
       <View
         style={{
           alignItems: 'center',
-          backgroundColor: theme.sidebarItemBackground,
+          backgroundColor: theme.mobilePageBackground,
           color: theme.mobileModalText,
           flexDirection: 'row',
           flex: '1 0 auto',

diff --git a/packages/desktop-client/src/components/sidebar/Account.tsx b/packages/desktop-client/src/components/sidebar/Account.tsx
@@ -103,7 +103,7 @@ function Account({
               // ignores it if it's active
               fontWeight: (style && style.fontWeight) || 'normal',
               '& .dot': {
-                backgroundColor: theme.sidebarItemBackgroundSelected,
+                backgroundColor: theme.sidebarItemAccentSelected,
                 transform: 'translateX(-4.5px)',
               },
             }}

diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
@@ -38,18 +38,13 @@ export const tableRowBackgroundHighlightText = colorPalette.navy150;
 export const tableRowHeaderBackground = colorPalette.navy700;
 export const tableRowHeaderText = colorPalette.navy150;
 
-export const sidebarBackground = colorPalette.navy800;
-export const sidebarItemBackground = colorPalette.navy800;
+export const sidebarBackground = colorPalette.navy900;
 export const sidebarItemBackgroundPositive = colorPalette.green500;
 export const sidebarItemBackgroundFailed = colorPalette.red300;
-export const sidebarItemBackgroundSelected = colorPalette.navy800;
+export const sidebarItemAccnetSelected = colorPalette.purple200;
 export const sidebarItemBackgroundHover = colorPalette.navy700;
-export const sidebarItemAccent = colorPalette.navy800;
-export const sidebarItemAccentSelected = colorPalette.purple400;
-export const sidebarItemAccentHover = colorPalette.navy700;
 export const sidebarItemText = colorPalette.navy150;
-export const sidebarItemTextSelected = colorPalette.purple400;
-export const sidebarItemTextHover = colorPalette.navy150;
+export const sidebarItemTextSelected = colorPalette.purple200;
 
 export const menuBackground = colorPalette.navy600;
 export const menuItemBackground = colorPalette.navy600;
@@ -67,6 +62,7 @@ export const menuAutoCompleteText = colorPalette.navy900;
 export const menuAutoCompleteTextHeader = menuItemTextHeader;
 
 export const modalBackground = colorPalette.gray800;
+export const mobilePageBackground = colorPalette.navy800;
 export const modalBorder = colorPalette.navy600;
 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
@@ -66,8 +66,9 @@ export const menuAutoCompleteBackgroundHover = colorPalette.navy600;
 export const menuAutoCompleteText = colorPalette.white;
 export const menuAutoCompleteTextHeader = colorPalette.orange150;
 
-export const modalBackground = colorPalette.white;
-export const modalBorder = colorPalette.white;
+export const modalBackground = colorPalette.navy900;
+export const mobilePageBackground = colorPalette.blue800;
+export const modalBorder = colorPalette.navy200;
 export const mobileNavBackground = colorPalette.white;
 export const mobileNavItem = colorPalette.gray300;
 export const mobileNavItemSelected = colorPalette.purple500;
@@ -119,9 +120,9 @@ export const buttonNormalBorder = colorPalette.navy150;
 export const buttonNormalShadow = 'rgba(0, 0, 0, 0.2)';
 export const buttonNormalSelectedText = colorPalette.white;
 export const buttonNormalSelectedBackground = colorPalette.blue600;
-export const buttonNormalDisabledText = colorPalette.navy300;
-export const buttonNormalDisabledBackground = buttonNormalBackground;
-export const buttonNormalDisabledBorder = buttonNormalBorder;
+export const buttonNormalDisabledText = colorPalette.navy500;
+export const buttonNormalDisabledBackground = colorPalette.navy800;
+export const buttonNormalDisabledBorder = colorPalette.navy500;
 
 export const calendarText = colorPalette.navy50;
 export const calendarBackground = colorPalette.navy900;

diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
@@ -39,17 +39,12 @@ export const tableRowHeaderBackground = colorPalette.navy50;
 export const tableRowHeaderText = colorPalette.navy800;
 
 export const sidebarBackground = colorPalette.navy900;
-export const sidebarItemBackground = colorPalette.blue800;
 export const sidebarItemBackgroundPositive = colorPalette.green500;
 export const sidebarItemBackgroundFailed = colorPalette.red300;
-export const sidebarItemBackgroundSelected = colorPalette.purple200;
 export const sidebarItemBackgroundHover = colorPalette.navy800;
-export const sidebarItemAccent = colorPalette.blue800;
 export const sidebarItemAccentSelected = colorPalette.purple200;
-export const sidebarItemAccentHover = colorPalette.blue700;
 export const sidebarItemText = colorPalette.navy150;
 export const sidebarItemTextSelected = colorPalette.purple200;
-export const sidebarItemTextHover = colorPalette.navy50;
 
 export const menuBackground = colorPalette.white;
 export const menuItemBackground = colorPalette.navy50;
@@ -67,6 +62,7 @@ export const menuAutoCompleteText = colorPalette.white;
 export const menuAutoCompleteTextHeader = colorPalette.orange150;
 
 export const modalBackground = colorPalette.white;
+export const mobilePageBackground = colorPalette.blue800;
 export const modalBorder = colorPalette.white;
 export const mobileNavBackground = colorPalette.white;
 export const mobileNavItem = colorPalette.gray300;

diff --git a/upcoming-release-notes/1887.md b/upcoming-release-notes/1887.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Updates dark theme sidebar color and clean up theme files.