Dark Theme color fixes (#2048)

* subdued fix * notes * fixes * upcoming * autocomplete menu * make notes consistenet on budget page * VRT updates
actualbudget · Dec 12, 2023 · 9da0554 · 9da0554
1 parent 8a721bf
commit 9da0554
Show file tree

Hide file tree

Showing 27 changed files with 76 additions and 51 deletions.
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/...apshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png b/...apshots/Mobile-loads-the-budget-page-with-budgeted-amounts-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/...js-snapshots/Transactions-filters-transactions-by-category-2-chromium-linux.png b/...js-snapshots/Transactions-filters-transactions-by-category-2-chromium-linux.png
diff --git a/...js-snapshots/Transactions-filters-transactions-by-category-4-chromium-linux.png b/...js-snapshots/Transactions-filters-transactions-by-category-4-chromium-linux.png
diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx
@@ -145,7 +145,7 @@ export default function NotesButton({
   id,
   width = 12,
   height = 12,
-  defaultColor = theme.pageBackgroundModalActive,
+  defaultColor = theme.buttonNormalText,
   tooltipPosition,
   style,
 }: NotesButtonProps) {

diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.tsx b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
@@ -66,6 +66,7 @@ function SidebarCategory({
       <View style={{ flexShrink: 0, marginLeft: 5 }}>
         <Button
           type="bare"
+          className="hover-visible"
           onClick={e => {
             e.stopPropagation();
             setMenuOpen(true);
@@ -112,6 +113,7 @@ function SidebarCategory({
       <NotesButton
         id={category.id}
         style={dragging && { color: 'currentColor' }}
+        defaultColor={theme.pageTextLight}
       />
     </View>
   );
@@ -121,10 +123,15 @@ function SidebarCategory({
       innerRef={innerRef}
       style={{
         width: 200,
-        '& button': { display: 'none' },
+        overflow: 'hidden',
+        '& .hover-visible': {
+          display: 'none',
+        },
         ...(!dragging &&
           !dragPreview && {
-            '&:hover button': { display: 'flex', color: theme.tableTextHover },
+            '&:hover .hover-visible': {
+              display: 'flex',
+            },
           }),
         ...(dragging && { color: theme.formInputTextPlaceholderSelected }),
         // The zIndex here forces the the view on top of a row below

diff --git a/packages/desktop-client/src/components/budget/SidebarGroup.tsx b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
@@ -95,6 +95,7 @@ function SidebarGroup({
           <View style={{ marginLeft: 5, flexShrink: 0 }}>
             <Button
               type="bare"
+              className="hover-visible"
               onClick={e => {
                 e.stopPropagation();
                 setMenuOpen(true);
@@ -137,7 +138,11 @@ function SidebarGroup({
             )}
           </View>
           <View style={{ flex: 1 }} />
-          <NotesButton id={group.id} />
+          <NotesButton
+            id={group.id}
+            style={dragPreview && { color: 'currentColor' }}
+            defaultColor={theme.pageTextLight}
+          />
         </>
       )}
     </View>
@@ -150,8 +155,15 @@ function SidebarGroup({
         ...style,
         width: 200,
         backgroundColor: theme.tableRowHeaderBackground,
-        '& button': { display: 'none' },
-        '&:hover button': { display: 'flex', color: theme.tableTextHover },
+        overflow: 'hidden',
+        '& .hover-visible': {
+          display: 'none',
+        },
+        ...(!dragPreview && {
+          '&:hover .hover-visible': {
+            display: 'flex',
+          },
+        }),
         ...(dragPreview && {
           paddingLeft: 10,
           zIndex: 10000,

diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx
@@ -126,7 +126,7 @@ export default function BudgetSummary({ month }: BudgetSummaryProps) {
                 width={15}
                 height={15}
                 tooltipPosition="bottom-right"
-                defaultColor={theme.pageTextSubdued} // notes page color
+                defaultColor={theme.pageTextLight}
               />
             </View>
             <View style={{ userSelect: 'none' }}>

diff --git a/packages/desktop-client/src/components/filters/FiltersMenu.js b/packages/desktop-client/src/components/filters/FiltersMenu.js
@@ -429,8 +429,8 @@ export function FilterButton({ onApply, compact, hover }) {
               style={{
                 lineHeight: 1.5,
                 padding: '6px 10px',
-                backgroundColor: theme.menuAutoCompleteBackground,
-                color: theme.menuAutoCompleteText,
+                backgroundColor: theme.menuBackground,
+                color: theme.menuItemText,
               }}
             >
               <Text>Filters</Text>

diff --git a/packages/desktop-client/src/components/reports/GraphButton.tsx b/packages/desktop-client/src/components/reports/GraphButton.tsx
@@ -31,8 +31,8 @@ const GraphButton = ({
           style={{
             lineHeight: 1.5,
             padding: '6px 10px',
-            backgroundColor: theme.menuAutoCompleteBackground,
-            color: theme.menuAutoCompleteText,
+            backgroundColor: theme.menuBackground,
+            color: theme.menuItemText,
           }}
         >
           <Text>{title}</Text>

diff --git a/packages/desktop-client/src/components/reports/Tooltip.js b/packages/desktop-client/src/components/reports/Tooltip.js
@@ -58,10 +58,8 @@ class Tooltip extends Component {
             borderRadius: 2,
             boxShadow: light ? 'none' : '0 1px 6px rgba(0, 0, 0, .20)',
             // TODO: Transparent background
-            backgroundColor: light
-              ? 'transparent'
-              : theme.menuAutoCompleteBackground,
-            color: light ? 'inherit' : theme.menuAutoCompleteText,
+            backgroundColor: light ? 'transparent' : theme.menuBackground,
+            color: light ? 'inherit' : theme.menuItemText,
             padding: 10,
           },
           !light &&
@@ -71,7 +69,7 @@ class Tooltip extends Component {
               borderTop: '7px solid transparent',
               borderBottom: '7px solid transparent',
               [position === 'right' ? 'borderRight' : 'borderLeft']:
-                '7px solid ' + theme.menuAutoCompleteBackground,
+                '7px solid ' + theme.menuBackground,
               [position === 'right' ? 'left' : 'right']: -6,
               top: 'calc(50% - 7px)',
               // eslint-disable-next-line rulesdir/typography

diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
@@ -50,8 +50,8 @@ const CustomTooltip = ({
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >

diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -67,8 +67,8 @@ const CustomTooltip = ({
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >

diff --git a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
@@ -44,8 +44,8 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >

diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -50,8 +50,8 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >

diff --git a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
@@ -43,8 +43,8 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >

diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
@@ -79,8 +79,8 @@ function NetWorthGraph({
               pointerEvents: 'none',
               borderRadius: 2,
               boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-              backgroundColor: theme.menuAutoCompleteBackground,
-              color: theme.menuAutoCompleteText,
+              backgroundColor: theme.menuBackground,
+              color: theme.menuItemText,
               padding: 10,
             },
             style,

diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
@@ -51,8 +51,8 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >

diff --git a/packages/desktop-client/src/components/rules/ActionExpression.tsx b/packages/desktop-client/src/components/rules/ActionExpression.tsx
@@ -15,7 +15,7 @@ import ScheduleValue from './ScheduleValue';
 import Value from './Value';
 
 const valueStyle = {
-  color: theme.pageTextPositive,
+  color: theme.pillTextHighlighted,
 };
 
 type ActionExpressionProps = RuleActionEntity & {
@@ -61,7 +61,7 @@ function SetActionExpression({
       <Text>{friendlyOp(op)}</Text>{' '}
       <Text style={valueStyle}>{mapField(field, options)}</Text>{' '}
       <Text>to </Text>
-      <Value value={value} field={field} />
+      <Value style={valueStyle} value={value} field={field} />
     </>
   );
 }

diff --git a/packages/desktop-client/src/components/rules/ConditionExpression.tsx b/packages/desktop-client/src/components/rules/ConditionExpression.tsx
@@ -9,7 +9,7 @@ import View from '../common/View';
 import Value from './Value';
 
 const valueStyle = {
-  color: theme.pageTextPositive,
+  color: theme.pillTextHighlighted,
 };
 
 type ConditionExpressionProps = {
@@ -49,7 +49,7 @@ export default function ConditionExpression({
       {prefix && <Text>{prefix} </Text>}
       <Text style={valueStyle}>{mapField(field, options)}</Text>{' '}
       <Text>{friendlyOp(op)}</Text>{' '}
-      <Value value={value} field={field} inline={inline} />
+      <Value style={valueStyle} value={value} field={field} inline={inline} />
     </View>
   );
 }
diff --git a/packages/desktop-client/src/components/rules/Value.tsx b/packages/desktop-client/src/components/rules/Value.tsx
@@ -8,21 +8,18 @@ import { getRecurringDescription } from 'loot-core/src/shared/schedules';
 import { integerToCurrency } from 'loot-core/src/shared/util';
 
 import useCategories from '../../hooks/useCategories';
-import { theme } from '../../style';
+import { type CSSProperties, theme } from '../../style';
 import LinkButton from '../common/LinkButton';
 import Text from '../common/Text';
 
-const valueStyle = {
-  color: theme.pageTextPositive,
-};
-
 type ValueProps<T> = {
   value: T;
   field: unknown;
   valueIsRaw?: boolean;
   inline?: boolean;
   data?: unknown;
   describe?: (item: T) => string;
+  style?: CSSProperties;
 };
 
 export default function Value<T>({
@@ -33,13 +30,18 @@ export default function Value<T>({
   data: dataProp,
   // @ts-expect-error fix this later
   describe = x => x.name,
+  style,
 }: ValueProps<T>) {
   const dateFormat = useSelector(
     state => state.prefs.local.dateFormat || 'MM/dd/yyyy',
   );
   const payees = useSelector(state => state.queries.payees);
   const { list: categories } = useCategories();
   const accounts = useSelector(state => state.queries.accounts);
+  const valueStyle = {
+    color: theme.pageTextPositive,
+    ...style,
+  };
 
   const data =
     dataProp ||

diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js
@@ -1091,15 +1091,15 @@ const Transaction = memo(function Transaction(props) {
                     ? theme.warningText
                     : selected
                     ? theme.formLabelText
-                    : theme.tableTextLight,
+                    : theme.upcomingText,
                 backgroundColor:
                   notes === 'missed'
                     ? theme.errorBackground
                     : notes === 'due'
                     ? theme.warningBackground
                     : selected
                     ? theme.formLabelBackground
-                    : theme.pageBackground,
+                    : theme.upcomingBackground,
                 margin: '0 5px',
                 padding: '3px 7px',
                 borderRadius: 4,

diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
@@ -23,7 +23,7 @@ export const tableBackground = colorPalette.navy800;
 export const tableRowBackgroundHover = colorPalette.navy700;
 export const tableText = colorPalette.navy150;
 export const tableTextLight = tableText;
-export const tableTextSubdued = colorPalette.navy150;
+export const tableTextSubdued = colorPalette.navy500;
 export const tableTextSelected = colorPalette.navy150;
 export const tableTextHover = colorPalette.navy400;
 export const tableTextInactive = colorPalette.navy500;
@@ -56,10 +56,10 @@ export const menuItemTextHeader = colorPalette.purple500;
 export const menuBorder = colorPalette.navy800;
 export const menuBorderHover = colorPalette.purple400;
 export const menuKeybindingText = colorPalette.navy500;
-export const menuAutoCompleteBackground = colorPalette.navy400;
-export const menuAutoCompleteBackgroundHover = colorPalette.navy300;
-export const menuAutoCompleteText = colorPalette.navy900;
-export const menuAutoCompleteTextHeader = menuItemTextHeader;
+export const menuAutoCompleteBackground = colorPalette.navy900;
+export const menuAutoCompleteBackgroundHover = colorPalette.navy600;
+export const menuAutoCompleteText = colorPalette.navy200;
+export const menuAutoCompleteTextHeader = colorPalette.purple200;
 
 export const modalBackground = colorPalette.gray800;
 export const modalBorder = colorPalette.navy600;
@@ -85,7 +85,7 @@ export const markdownDark = colorPalette.purple500;
 export const markdownLight = colorPalette.purple800;
 
 // Button
-export const buttonMenuText = colorPalette.navy900;
+export const buttonMenuText = colorPalette.navy200;
 export const buttonMenuTextHover = buttonMenuText;
 export const buttonMenuBackground = 'transparent';
 export const buttonMenuBackgroundHover = 'rgba(200, 200, 200, .25)';
@@ -138,15 +138,15 @@ export const noticeBackgroundDark = colorPalette.green500;
 export const noticeText = colorPalette.green300;
 export const noticeTextLight = colorPalette.green500;
 export const noticeTextDark = colorPalette.green150;
-export const noticeTextMenu = colorPalette.green800;
+export const noticeTextMenu = colorPalette.green500;
 export const noticeBorder = colorPalette.green800;
 export const warningBackground = colorPalette.orange800;
 export const warningText = colorPalette.orange300;
 export const warningTextLight = colorPalette.orange500;
 export const warningTextDark = colorPalette.orange100;
 export const warningBorder = colorPalette.orange500;
 export const errorBackground = colorPalette.red800;
-export const errorText = colorPalette.red300;
+export const errorText = colorPalette.red200;
 export const errorTextDark = colorPalette.red150;
 export const errorTextDarker = errorTextDark;
 export const errorTextMenu = colorPalette.red500;
@@ -176,9 +176,9 @@ export const checkboxBorderSelected = colorPalette.purple300;
 export const checkboxShadowSelected = colorPalette.purple500;
 
 export const pillBackground = colorPalette.navy800;
-export const pillBackgroundLight = colorPalette.navy600;
+export const pillBackgroundLight = colorPalette.navy900;
 export const pillText = colorPalette.navy200;
-export const pillTextHighlighted = colorPalette.purple300;
+export const pillTextHighlighted = colorPalette.purple200;
 export const pillBorder = colorPalette.navy700;
 export const pillBorderDark = pillBorder;
 export const pillBackgroundSelected = colorPalette.purple600;

diff --git a/upcoming-release-notes/2048.md b/upcoming-release-notes/2048.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [carkom]
+---
+
+Fixes and updates to dark theme colors.