Page color updates (actualbudget#1799)

* page color updates * notes
FlorianLang06 · Oct 21, 2023 · 8be3661 · 8be3661
1 parent de6beb2
commit 8be3661
Show file tree

Hide file tree

Showing 18 changed files with 34 additions and 47 deletions.
diff --git a/packages/desktop-client/src/components/LoggedInUser.tsx b/packages/desktop-client/src/components/LoggedInUser.tsx
@@ -78,7 +78,7 @@ export default function LoggedInUser({
     return (
       <Text
         style={{
-          color: theme.altpageTextSubdued,
+          color: theme.pageTextLight,
           fontStyle: 'italic',
           ...styles.delayedFadeIn,
           ...style,

diff --git a/packages/desktop-client/src/components/UpdateNotification.tsx b/packages/desktop-client/src/components/UpdateNotification.tsx
@@ -36,7 +36,7 @@ export default function UpdateNotification() {
           bottom: 0,
           right: 0,
           margin: '15px 17px',
-          backgroundColor: theme.altPageTextPositive,
+          backgroundColor: theme.pageTextPositive,
           color: theme.tableBackground,
           padding: '7px 10px',
           borderRadius: 4,

diff --git a/packages/desktop-client/src/components/accounts/MobileAccounts.js b/packages/desktop-client/src/components/accounts/MobileAccounts.js
@@ -23,7 +23,7 @@ function AccountHeader({ name, amount, style = {} }) {
         flex: '1 0 auto',
         flexDirection: 'row',
         marginTop: 10,
-        color: theme.altpageTextSubdued,
+        color: theme.pageTextLight,
         ...style,
       }}
     >
@@ -143,7 +143,7 @@ function EmptyMessage({ onAdd }) {
         Add Account
       </Button>
 
-      <Text style={{ marginTop: 20, color: theme.altpageTextSubdued }}>
+      <Text style={{ marginTop: 20, color: theme.pageTextLight }}>
         In the future, you can add accounts using the add button in the header.
       </Text>
     </View>

diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js
@@ -186,7 +186,7 @@ function PayeeList({
                   style={{
                     fontSize: isNarrowWidth ? 'inherit' : 11,
                     padding: 5,
-                    color: theme.altpageTextSubdued,
+                    color: theme.pageTextLight,
                     textAlign: 'center',
                   }}
                 >

diff --git a/packages/desktop-client/src/components/budget/BudgetTotals.js b/packages/desktop-client/src/components/budget/BudgetTotals.js
@@ -56,7 +56,7 @@ const BudgetTotals = memo(function BudgetTotals({
           <DotsHorizontalTriple
             width={15}
             height={15}
-            style={{ color: theme.altpageTextSubdued }}
+            style={{ color: theme.pageTextLight }}
           />
           {menuOpen && (
             <Tooltip

diff --git a/packages/desktop-client/src/components/budget/MonthCountSelector.tsx b/packages/desktop-client/src/components/budget/MonthCountSelector.tsx
@@ -42,9 +42,7 @@ export function MonthCountSelector({
     calendars.push(
       <Calendar
         key={i}
-        color={
-          maxMonths >= i ? theme.altpageTextSubdued : theme.altButtonBareText
-        }
+        color={maxMonths >= i ? theme.pageTextLight : theme.altButtonBareText}
         onClick={() => onChange(i)}
       />,
     );

diff --git a/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
@@ -407,7 +407,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
                 <DotsHorizontalTriple
                   width={15}
                   height={15}
-                  style={{ color: theme.altpageTextSubdued }}
+                  style={{ color: theme.pageTextLight }}
                 />
               </Button>
               {menuOpen && (

diff --git a/packages/desktop-client/src/components/manager/WelcomeScreen.js b/packages/desktop-client/src/components/manager/WelcomeScreen.js
@@ -48,7 +48,7 @@ export default function WelcomeScreen() {
           to help you get your bearings, and check out the rest of the
           documentation while you’re there to learn more about advanced topics.
         </Paragraph>
-        <Paragraph style={{ color: theme.altpageTextSubdued }}>
+        <Paragraph style={{ color: theme.pageTextLight }}>
           Get started by importing an existing budget file from Actual or
           another budgeting app, or start fresh with an empty budget. You can
           always create or import another budget later.

diff --git a/packages/desktop-client/src/components/modals/CreateLocalAccount.tsx b/packages/desktop-client/src/components/modals/CreateLocalAccount.tsx
@@ -110,7 +110,7 @@ function CreateLocalAccount({ modalProps, actions }: CreateLocalAccountProps) {
                   style={{
                     textAlign: 'right',
                     fontSize: '0.7em',
-                    color: theme.altpageTextSubdued,
+                    color: theme.pageTextLight,
                     marginTop: 3,
                   }}
                 >

diff --git a/packages/desktop-client/src/components/modals/EditRule.js b/packages/desktop-client/src/components/modals/EditRule.js
@@ -283,7 +283,7 @@ function ScheduleDescription({ id }) {
           <DisplayId
             type="payees"
             id={schedule._payee}
-            noneColor={theme.altpageTextSubdued}
+            noneColor={theme.pageTextLight}
           />
         </Text>
         <Text style={{ margin: '0 5px' }}> — </Text>

diff --git a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
@@ -46,7 +46,7 @@ function CashFlowGraph({ graphData, isConcise }: CashFlowGraphProps) {
               labelComponent={<Tooltip portalHost={portalHost} />}
               labels={x => x.premadeLabel}
               style={{
-                data: { stroke: theme.altpageTextSubdued },
+                data: { stroke: theme.pageTextLight },
               }}
             />
             <VictoryAxis

diff --git a/packages/desktop-client/src/components/schedules/EditSchedule.js b/packages/desktop-client/src/components/schedules/EditSchedule.js
@@ -488,7 +488,7 @@ export default function ScheduleDetails({ modalProps, actions, id }) {
               }}
               style={{
                 padding: '0 10px',
-                color: theme.altpageTextSubdued,
+                color: theme.pageTextLight,
                 fontSize: 12,
               }}
               onChange={(_, op) =>
@@ -634,7 +634,7 @@ export default function ScheduleDetails({ modalProps, actions, id }) {
               {state.isCustom && (
                 <Text
                   style={{
-                    color: theme.altpageTextSubdued,
+                    color: theme.pageTextLight,
                     fontSize: 13,
                     textAlign: 'right',
                     width: 350,

diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js
@@ -937,7 +937,7 @@ class Transaction extends PureComponent {
     let isPreview = isPreviewId(id);
     let textStyle = isPreview && {
       fontStyle: 'italic',
-      color: theme.altpageTextSubdued,
+      color: theme.pageTextLight,
     };
 
     return (

diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js
@@ -422,7 +422,7 @@ function StatusCell({
       : status === 'due'
       ? theme.alt3WarningText
       : selected
-      ? theme.altPageTextLink
+      ? theme.pageTextLinkLight
       : theme.pageTextSubdued;
 
   function onSelect() {

diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
@@ -10,14 +10,10 @@ export const pageBackgroundLineBottom = colorPalette.navy150;
 export const pageText = colorPalette.navy150;
 export const pageTextLight = colorPalette.navy300;
 export const pageTextSubdued = colorPalette.navy500;
-export const altpageTextSubdued = pageTextSubdued;
-export const pageTextDark = colorPalette.navy100;
+export const pageTextDark = colorPalette.navy800;
 export const pageTextPositive = colorPalette.purple200;
 export const pageTextLink = colorPalette.purple400;
-export const altPageTextLink = pageTextLink;
-
-export const modalBackground = colorPalette.gray800;
-export const modalBorder = colorPalette.navy600;
+export const pageTextLinkLight = colorPalette.purple200;
 
 export const cardBackground = colorPalette.gray800;
 export const cardBorder = colorPalette.purple400;
@@ -61,9 +57,6 @@ export const sidebarItemText = colorPalette.navy150;
 export const sidebarItemTextSelected = colorPalette.purple400;
 export const sidebarItemTextHover = colorPalette.navy150;
 
-export const tooltipBackground = colorPalette.navy600;
-export const tooltipBorder = colorPalette.navy500;
-
 export const menuBackground = colorPalette.navy600;
 export const menuItemBackground = colorPalette.navy600;
 export const menuItemBackgroundHover = colorPalette.navy500;
@@ -90,6 +83,8 @@ export const altMenuBorderHover = colorPalette.purple400;
 export const menuAutoCompleteBackground = colorPalette.navy400;
 export const menuAutoCompleteText = colorPalette.navy900;
 
+export const modalBackground = colorPalette.gray800;
+export const modalBorder = colorPalette.navy600;
 export const mobileNavBackground = colorPalette.navy800;
 export const mobileNavItem = colorPalette.navy150;
 export const mobileNavItemSelected = colorPalette.purple400;

diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts
@@ -8,15 +8,11 @@ export const pageBackgroundLineTop = colorPalette.navy50;
 export const pageBackgroundLineMid = colorPalette.green500;
 export const pageBackgroundLineBottom = colorPalette.orange200;
 export const pageText = colorPalette.blue300;
-export const pageTextLight = colorPalette.navy600;
+export const pageTextLight = colorPalette.navy500;
 export const pageTextSubdued = colorPalette.blue500;
-export const altpageTextSubdued = colorPalette.navy500;
 export const pageTextPositive = colorPalette.blue50;
-export const pageTextLink = colorPalette.blue400;
-export const altPageTextLink = pageTextLink;
-
-export const modalBackground = colorPalette.navy900;
-export const modalBorder = colorPalette.navy200;
+export const pageTextLink = colorPalette.blue600;
+export const pageTextLinkLight = colorPalette.blue300;
 
 export const cardBackground = colorPalette.purple700;
 export const cardBorder = colorPalette.purple400;
@@ -57,9 +53,6 @@ export const sidebarItemText = colorPalette.orange200;
 export const sidebarItemTextSelected = colorPalette.orange400;
 export const sidebarItemTextHover = colorPalette.orange150;
 
-export const tooltipBackground = colorPalette.white;
-export const tooltipBorder = colorPalette.black;
-
 export const menuBackground = colorPalette.green800;
 export const menuItemBackground = colorPalette.green700;
 export const menuItemBackgroundHover = colorPalette.green500;
@@ -86,6 +79,8 @@ export const altMenuBorderHover = colorPalette.purple400;
 export const menuAutoCompleteBackground = colorPalette.navy900;
 export const menuAutoCompleteText = colorPalette.white;
 
+export const modalBackground = colorPalette.navy900;
+export const modalBorder = colorPalette.navy200;
 export const mobileNavBackground = colorPalette.white;
 export const mobileNavItem = colorPalette.gray300;
 export const mobileNavItemSelected = colorPalette.purple500;

diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
@@ -8,17 +8,12 @@ export const pageBackgroundLineTop = colorPalette.white;
 export const pageBackgroundLineMid = colorPalette.navy100;
 export const pageBackgroundLineBottom = colorPalette.blue150;
 export const pageText = '#272630';
-export const pageTextLight = colorPalette.navy600;
+export const pageTextLight = colorPalette.navy500;
 export const pageTextSubdued = colorPalette.navy300;
-export const altpageTextSubdued = colorPalette.navy500;
 export const pageTextDark = colorPalette.navy800;
 export const pageTextPositive = colorPalette.purple600;
-export const altPageTextPositive = colorPalette.purple400;
 export const pageTextLink = colorPalette.blue600;
-export const altPageTextLink = colorPalette.blue300;
-
-export const modalBackground = colorPalette.white;
-export const modalBorder = colorPalette.white;
+export const pageTextLinkLight = colorPalette.blue300;
 
 export const cardBackground = colorPalette.white;
 export const cardBorder = colorPalette.purple700;
@@ -61,9 +56,6 @@ export const sidebarItemText = colorPalette.navy150;
 export const sidebarItemTextSelected = colorPalette.purple200;
 export const sidebarItemTextHover = colorPalette.navy50;
 
-export const tooltipBackground = colorPalette.navy50;
-export const tooltipBorder = colorPalette.navy50;
-
 export const menuBackground = colorPalette.white;
 export const menuItemBackground = colorPalette.navy50;
 export const menuItemBackgroundHover = colorPalette.navy100;
@@ -90,6 +82,8 @@ export const altMenuBorderHover = colorPalette.purple300;
 export const menuAutoCompleteBackground = colorPalette.navy900;
 export const menuAutoCompleteText = colorPalette.white;
 
+export const modalBackground = colorPalette.white;
+export const modalBorder = colorPalette.white;
 export const mobileNavBackground = colorPalette.white;
 export const mobileNavItem = colorPalette.gray300;
 export const mobileNavItemSelected = colorPalette.purple500;

diff --git a/upcoming-release-notes/1799.md b/upcoming-release-notes/1799.md
@@ -0,0 +1,5 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+Consolidating and making consistent page colors