Dark Theme Reports/Settings (#1512)

actualbudget · Sep 13, 2023 · 0cc3479 · 0cc3479
1 parent b6100cf
commit 0cc3479
Show file tree

Hide file tree

Showing 27 changed files with 165 additions and 135 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -240,35 +240,15 @@ module.exports = {
         './packages/desktop-client/src/components/budget/SidebarCategory.*',
         './packages/desktop-client/src/components/budget/SidebarGroup.*',
         './packages/desktop-client/src/components/budget/constants.*',
+        './packages/desktop-client/src/components/budget/misc.*',
         './packages/desktop-client/src/components/budget/report/BudgetSummary.*',
         './packages/desktop-client/src/components/budget/report/components.*',
         './packages/desktop-client/src/components/budget/rollover/BudgetSummary.*',
         './packages/desktop-client/src/components/budget/rollover/rollover-components.*',
         './packages/desktop-client/src/components/budget/util.*',
-        './packages/desktop-client/src/components/common.*',
-        './packages/desktop-client/src/components/common/Card.*',
-        './packages/desktop-client/src/components/common/Label.*',
-        './packages/desktop-client/src/components/common/View.*',
         './packages/desktop-client/src/components/common/ExternalLink.*',
         './packages/desktop-client/src/components/modals/BudgetSummary.*',
         './packages/desktop-client/src/components/payees/index.*',
-        './packages/desktop-client/src/components/reports/CashFlow.*',
-        './packages/desktop-client/src/components/reports/Change.*',
-        './packages/desktop-client/src/components/reports/DateRange.*',
-        './packages/desktop-client/src/components/reports/Header.*',
-        './packages/desktop-client/src/components/reports/NetWorth.*',
-        './packages/desktop-client/src/components/reports/Overview.*',
-        './packages/desktop-client/src/components/reports/Tooltip.*',
-        './packages/desktop-client/src/components/reports/chart-theme.*',
-        './packages/desktop-client/src/components/reports/graphs/CashFlowGraph.*',
-        './packages/desktop-client/src/components/reports/graphs/NetWorthGraph.*',
-        './packages/desktop-client/src/components/settings/Encryption.*',
-        './packages/desktop-client/src/components/settings/Experimental.*',
-        './packages/desktop-client/src/components/settings/FixSplits.*',
-        './packages/desktop-client/src/components/settings/Format.*',
-        './packages/desktop-client/src/components/settings/Global.*',
-        './packages/desktop-client/src/components/settings/UI.*',
-        './packages/desktop-client/src/components/settings/index.*',
         './packages/desktop-client/src/components/transactions/MobileTransaction.*',
         './packages/desktop-client/src/components/transactions/TransactionsTable.*',
         './packages/desktop-client/src/components/util/AmountInput.*',

diff --git a/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
@@ -15,7 +15,7 @@ import useFeatureFlag from '../../../hooks/useFeatureFlag';
 import DotsHorizontalTriple from '../../../icons/v1/DotsHorizontalTriple';
 import ArrowButtonDown1 from '../../../icons/v2/ArrowButtonDown1';
 import ArrowButtonUp1 from '../../../icons/v2/ArrowButtonUp1';
-import { colors, type CSSProperties, styles } from '../../../style';
+import { theme, type CSSProperties, styles } from '../../../style';
 import AlignedText from '../../common/AlignedText';
 import Button from '../../common/Button';
 import HoverTarget from '../../common/HoverTarget';
@@ -30,7 +30,6 @@ import NamespaceContext from '../../spreadsheet/NamespaceContext';
 import useFormat from '../../spreadsheet/useFormat';
 import useSheetValue from '../../spreadsheet/useSheetValue';
 import { Tooltip } from '../../tooltips';
-import { MONTH_BOX_SHADOW } from '../constants';
 import { makeAmountFullStyle } from '../util';
 
 import { useReport } from './ReportContext';
@@ -100,8 +99,8 @@ function IncomeProgress({ current, target }: IncomeProgressProps) {
   return (
     <PieProgress
       progress={frac}
-      color={over ? colors.r7 : colors.g5}
-      backgroundColor={over ? colors.r10 : colors.n10}
+      color={over ? theme.errorText : theme.noticeText}
+      backgroundColor={over ? theme.errorBackground : theme.pageBackground}
       style={{ width: 20, height: 20 }}
     />
   );
@@ -133,8 +132,8 @@ function ExpenseProgress({ current, target }: ExpenseProgressProps) {
   return (
     <PieProgress
       progress={frac}
-      color={over ? colors.r7 : colors.g5}
-      backgroundColor={over ? colors.r10 : colors.n10}
+      color={over ? theme.errorText : theme.noticeText}
+      backgroundColor={over ? theme.errorBackground : theme.pageBackground}
       style={{ width: 20, height: 20 }}
     />
   );
@@ -168,12 +167,12 @@ function BudgetTotal({
 
       <View style={{ marginLeft: 10 }}>
         <View>
-          <Text style={{ color: colors.n4 }}>{title}</Text>
+          <Text style={{ color: theme.pageTextLight }}>{title}</Text>
         </View>
 
         <Text>
           <CellValue binding={current} type="financial" />
-          <Text style={{ color: colors.n6, fontStyle: 'italic' }}>
+          <Text style={{ color: theme.pageTextSubdued, fontStyle: 'italic' }}>
             {' of '}
             <CellValue
               binding={target}
@@ -231,9 +230,9 @@ function Saved({ projected, style }: SavedProps) {
   return (
     <View style={{ alignItems: 'center', fontSize: 14, ...style }}>
       {projected ? (
-        <Text style={{ color: colors.n4 }}>Projected Savings:</Text>
+        <Text style={{ color: theme.pageTextLight }}>Projected Savings:</Text>
       ) : (
-        <View style={{ color: colors.n4 }}>
+        <View style={{ color: theme.pageTextLight }}>
           {isNegative ? 'Overspent:' : 'Saved:'}
         </View>
       )}
@@ -280,7 +279,11 @@ function Saved({ projected, style }: SavedProps) {
           className={`${css([
             {
               fontSize: 25,
-              color: projected ? colors.y3 : isNegative ? colors.r4 : colors.p5,
+              color: projected
+                ? theme.alt2WarningText
+                : isNegative
+                ? theme.alt2ErrorText
+                : theme.altUpcomingText,
             },
           ])}`}
         >
@@ -320,8 +323,8 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
   return (
     <View
       style={{
-        backgroundColor: 'white',
-        boxShadow: MONTH_BOX_SHADOW,
+        backgroundColor: theme.tableBackground,
+        boxShadow: styles.cardShadow,
         borderRadius: 6,
         marginLeft: 0,
         marginRight: 0,
@@ -362,7 +365,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
                 width={13}
                 height={13}
                 // The margin is to make it the exact same size as the dots button
-                style={{ color: colors.n6, margin: 1 }}
+                style={{ color: theme.pageTextSubdued, margin: 1 }}
               />
             </Button>
           </View>
@@ -397,15 +400,15 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
                 width={15}
                 height={15}
                 tooltipPosition="bottom-right"
-                defaultColor={colors.n6}
+                defaultColor={theme.pageTextSubdued} // notes page color
               />
             </View>
             <View style={{ userSelect: 'none' }}>
               <Button type="bare" onClick={onMenuOpen}>
                 <DotsHorizontalTriple
                   width={15}
                   height={15}
-                  style={{ color: colors.n5 }}
+                  style={{ color: theme.altpageTextSubdued }}
                 />
               </Button>
               {menuOpen && (
@@ -452,7 +455,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
             spacing={2}
             style={{
               alignSelf: 'center',
-              backgroundColor: colors.n11,
+              backgroundColor: theme.tableRowHeaderBackground,
               borderRadius: 4,
               padding: '10px 15px',
               marginTop: 13,
@@ -469,8 +472,8 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
               alignItems: 'center',
               padding: '10px 20px',
               justifyContent: 'space-between',
-              backgroundColor: colors.n11,
-              borderTop: '1px solid ' + colors.n10,
+              backgroundColor: theme.tableRowHeaderBackground,
+              borderTop: '1px solid ' + theme.tableRowHeaderText,
             }}
           >
             <Saved projected={month >= currentMonth} />

diff --git a/packages/desktop-client/src/components/budget/report/components.tsx b/packages/desktop-client/src/components/budget/report/components.tsx
@@ -6,7 +6,7 @@ import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
 
 import useFeatureFlag from '../../../hooks/useFeatureFlag';
 import CheveronDown from '../../../icons/v1/CheveronDown';
-import { styles, colors, type CSSProperties } from '../../../style';
+import { styles, theme, type CSSProperties } from '../../../style';
 import Button from '../../common/Button';
 import Menu from '../../common/Menu';
 import Text from '../../common/Text';
@@ -17,7 +17,6 @@ import useSheetValue from '../../spreadsheet/useSheetValue';
 import { Field, SheetCell } from '../../table';
 import { Tooltip, useTooltip } from '../../tooltips';
 import BalanceWithCarryover from '../BalanceWithCarryover';
-import { MONTH_RIGHT_PADDING } from '../constants';
 import { makeAmountGrey } from '../util';
 
 export { BudgetSummary } from './BudgetSummary';
@@ -27,44 +26,43 @@ let headerLabelStyle: CSSProperties = {
   padding: '0 5px',
   textAlign: 'right',
 };
-
 export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
   const format = useFormat();
   return (
     <View
       style={{
         flex: 1,
         flexDirection: 'row',
-        marginRight: MONTH_RIGHT_PADDING,
+        marginRight: styles.monthRightPadding,
         paddingTop: 10,
         paddingBottom: 10,
       }}
     >
       <View style={headerLabelStyle}>
-        <Text style={{ color: colors.n4 }}>Budgeted</Text>
+        <Text style={{ color: theme.pageTextLight }}>Budgeted</Text>
         <CellValue
           binding={reportBudget.totalBudgetedExpense}
           type="financial"
-          style={{ color: colors.n4, fontWeight: 600 }}
+          style={{ color: theme.pageTextLight, fontWeight: 600 }}
           formatter={value => {
             return format(parseFloat(value || '0'), 'financial');
           }}
         />
       </View>
       <View style={headerLabelStyle}>
-        <Text style={{ color: colors.n4 }}>Spent</Text>
+        <Text style={{ color: theme.pageTextLight }}>Spent</Text>
         <CellValue
           binding={reportBudget.totalSpent}
           type="financial"
-          style={{ color: colors.n4, fontWeight: 600 }}
+          style={{ color: theme.pageTextLight, fontWeight: 600 }}
         />
       </View>
       <View style={headerLabelStyle}>
-        <Text style={{ color: colors.n4 }}>Balance</Text>
+        <Text style={{ color: theme.pageTextLight }}>Balance</Text>
         <CellValue
           binding={reportBudget.totalLeftover}
           type="financial"
-          style={{ color: colors.n4, fontWeight: 600 }}
+          style={{ color: theme.pageTextLight, fontWeight: 600 }}
         />
       </View>
     </View>
@@ -76,15 +74,15 @@ export function IncomeHeaderMonth() {
     <View
       style={{
         flexDirection: 'row',
-        marginRight: MONTH_RIGHT_PADDING,
+        marginRight: styles.monthRightPadding,
         paddingBottom: 5,
       }}
     >
       <View style={headerLabelStyle}>
-        <Text style={{ color: colors.n4 }}>Budgeted</Text>
+        <Text style={{ color: theme.pageTextLight }}>Budgeted</Text>
       </View>
       <View style={headerLabelStyle}>
-        <Text style={{ color: colors.n4 }}>Received</Text>
+        <Text style={{ color: theme.pageTextLight }}>Received</Text>
       </View>
     </View>
   );
@@ -125,15 +123,15 @@ export const GroupMonth = memo(function GroupMonth({ group }: GroupMonthProps) {
           textAlign="right"
           style={{
             fontWeight: 600,
-            paddingRight: MONTH_RIGHT_PADDING,
+            paddingRight: styles.monthRightPadding,
             ...styles.tnum,
           }}
           valueProps={{
             binding: reportBudget.groupBalance(id),
             type: 'financial',
             privacyFilter: {
               style: {
-                paddingRight: MONTH_RIGHT_PADDING,
+                paddingRight: styles.monthRightPadding,
               },
             },
           }}
@@ -309,8 +307,8 @@ export const CategoryMonth = memo(function CategoryMonth({
             padding: '0 4px',
             borderRadius: 4,
             ':hover': {
-              boxShadow: 'inset 0 0 0 1px ' + colors.n7,
-              backgroundColor: 'white',
+              boxShadow: 'inset 0 0 0 1px ' + theme.mobileAccountShadow,
+              backgroundColor: theme.tableBackground,
             },
           }}
           valueProps={{
@@ -363,7 +361,7 @@ export const CategoryMonth = memo(function CategoryMonth({
         <Field
           name="balance"
           width="flex"
-          style={{ paddingRight: MONTH_RIGHT_PADDING, textAlign: 'right' }}
+          style={{ paddingRight: styles.monthRightPadding, textAlign: 'right' }}
         >
           <span {...(category.is_income ? {} : balanceTooltip.getOpenEvents())}>
             <BalanceWithCarryover

diff --git a/packages/desktop-client/src/components/common/Card.tsx b/packages/desktop-client/src/components/common/Card.tsx
@@ -1,6 +1,6 @@
 import { type ComponentProps, forwardRef } from 'react';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 
 import View from './View';
 
@@ -17,8 +17,8 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
           marginLeft: 5,
           marginRight: 5,
           borderRadius: 6,
-          backgroundColor: 'white',
-          borderColor: colors.p3,
+          backgroundColor: theme.cardBackground,
+          borderColor: theme.cardBorder,
           boxShadow: '0 1px 2px #9594A8',
           ...props.style,
         }}

diff --git a/packages/desktop-client/src/components/common/Label.tsx b/packages/desktop-client/src/components/common/Label.tsx
@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 
-import { type CSSProperties, colors, styles } from '../../style';
+import { type CSSProperties, theme, styles } from '../../style';
 
 import Text from './Text';
 
@@ -14,7 +14,7 @@ export default function Label({ title, style }: LabelProps) {
     <Text
       style={{
         ...styles.text,
-        color: colors.n2,
+        color: theme.tableRowHeaderText,
         textAlign: 'right',
         fontSize: 12,
         marginBottom: 2,

diff --git a/packages/desktop-client/src/components/reports/CashFlow.js b/packages/desktop-client/src/components/reports/CashFlow.js
@@ -7,7 +7,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { integerToCurrency } from 'loot-core/src/shared/util';
 
 import useFilters from '../../hooks/useFilters';
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
 import AlignedText from '../common/AlignedText';
 import Block from '../common/Block';
 import Paragraph from '../common/Paragraph';
@@ -113,7 +113,7 @@ function CashFlow() {
 
       <View
         style={{
-          backgroundColor: 'white',
+          backgroundColor: theme.tableBackground,
           padding: 30,
           paddingTop: 0,
           overflow: 'auto',
@@ -125,7 +125,7 @@ function CashFlow() {
             paddingRight: 20,
             flexShrink: 0,
             alignItems: 'flex-end',
-            color: colors.n3,
+            color: theme.pageText,
           }}
         >
           <AlignedText

diff --git a/packages/desktop-client/src/components/reports/Change.js b/packages/desktop-client/src/components/reports/Change.js
@@ -2,13 +2,16 @@ import React from 'react';
 
 import { integerToCurrency } from 'loot-core/src/shared/util';
 
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
 import Block from '../common/Block';
 
 function Change({ amount }) {
   return (
     <Block
-      style={{ ...styles.smallText, color: amount < 0 ? colors.r5 : colors.g5 }}
+      style={{
+        ...styles.smallText,
+        color: amount < 0 ? theme.errorText : theme.noticeText,
+      }}
     >
       {amount >= 0 ? '+' : ''}
       {integerToCurrency(amount)}

diff --git a/packages/desktop-client/src/components/reports/DateRange.js b/packages/desktop-client/src/components/reports/DateRange.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 import * as d from 'date-fns';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import Block from '../common/Block';
 
 function DateRange({ start, end }) {
@@ -26,7 +26,7 @@ function DateRange({ start, end }) {
     content = d.format(end, 'MMMM yyyy');
   }
 
-  return <Block style={{ color: colors.n6 }}>{content}</Block>;
+  return <Block style={{ color: theme.pageTextSubdued }}>{content}</Block>;
 }
 
 export default DateRange;