github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-03-21 15:36:50 -05:00
Code Issues 250 Packages Projects Releases 53 Wiki Activity

make colours on reports page consistent (#6672)

Browse Source 
* add colour definitions

* chart theme definitions

* replace with new colour variables

* clean up chart-theme

* merge fixes

* note

* Update VRT screenshots

Auto-generated by VRT workflow

PR: #6672

* coderabbit

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Matt Fiddaman
2026-01-21 18:06:00 +00:00
committed by GitHub
parent d0a72f10b6
commit a35fdf4d18
31 changed files with 125 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-1-chromium-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 103 KiB

After

Width:  |  Height:  |  Size: 102 KiB

BIN
packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-2-chromium-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 103 KiB

After

Width:  |  Height:  |  Size: 102 KiB

BIN
packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-3-chromium-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 103 KiB

After

Width:  |  Height:  |  Size: 102 KiB

BIN
packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 103 KiB

BIN
packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 103 KiB

BIN
packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 104 KiB

2
packages/desktop-client/src/components/FinancialText.tsx
View File

@@ -6,7 +6,7 @@ import { Text } from '@actual-app/components/text';
type FinancialTextProps<T extends ElementType = typeof Text> = {
as?: T;
style?: CSSProperties;
} & Omit<ComponentPropsWithoutRef<T>, 'style'>;
} & Omit<ComponentPropsWithoutRef<T>, 'style' | 'as'>;
export function FinancialText<T extends ElementType = typeof Text>({
as,

14
packages/desktop-client/src/components/reports/Change.test.tsx
View File

@@ -9,7 +9,7 @@ import { Change } from './Change';
import { store } from '@desktop-client/redux/store';
describe('Change', () => {
it('renders a positive amount with a plus sign and green color', () => {
it('renders a positive amount with a plus sign and positive color', () => {
render(
<Provider store={store}>
<Change amount={12345} />
@@ -17,10 +17,10 @@ describe('Change', () => {
);
const el = screen.getByText('+123.45');
expect(el).toBeInTheDocument();
expect(el).toHaveStyle(`color: ${theme.noticeTextLight}`);
expect(el).toHaveStyle(`color: ${theme.reportsNumberPositive}`);
});
it('renders zero with a plus sign and green color', () => {
it('renders zero with a plus sign and neutral color', () => {
render(
<Provider store={store}>
<Change amount={0} />
@@ -28,10 +28,10 @@ describe('Change', () => {
);
const el = screen.getByText('+0.00');
expect(el).toBeInTheDocument();
expect(el).toHaveStyle(`color: ${theme.noticeTextLight}`);
expect(el).toHaveStyle(`color: ${theme.reportsNumberNeutral}`);
});
it('renders a negative amount with a minus sign and red color', () => {
it('renders a negative amount with a minus sign and negative color', () => {
render(
<Provider store={store}>
<Change amount={-9876} />
@@ -39,7 +39,7 @@ describe('Change', () => {
);
const el = screen.getByText('-98.76');
expect(el).toBeInTheDocument();
expect(el).toHaveStyle(`color: ${theme.errorText}`);
expect(el).toHaveStyle(`color: ${theme.reportsNumberNegative}`);
});
it('merges custom style prop', () => {
@@ -50,6 +50,6 @@ describe('Change', () => {
);
const el = screen.getByText('+10.00');
expect(el).toHaveStyle('font-weight: bold');
expect(el).toHaveStyle(`color: ${theme.noticeTextLight}`);
expect(el).toHaveStyle(`color: ${theme.reportsNumberPositive}`);
});
});

27
packages/desktop-client/src/components/reports/Change.tsx
View File

@@ -15,18 +15,23 @@ export function Change({
style?: CSSProperties;
}) {
const format = useFormat();
const textStyle = {
...styles.smallText,
color: amount < 0 ? theme.errorText : theme.noticeTextLight,
...style,
};
return (
<Block style={textStyle}>
<FinancialText style={textStyle}>
{amount >= 0 ? '+' : ''}
{format(amount, 'financial')}
</FinancialText>
</Block>
<FinancialText
as={Block}
style={{
...styles.smallText,
color:
amount === 0
? theme.reportsNumberNeutral
: amount < 0
? theme.reportsNumberNegative
: theme.reportsNumberPositive,
...style,
}}
>
{amount >= 0 ? '+' : ''}
{format(amount, 'financial')}
</FinancialText>
);
}

3
packages/desktop-client/src/components/reports/FormulaResult.tsx
View File

@@ -14,7 +14,6 @@ import debounce from 'lodash/debounce';
import { amountToInteger } from 'loot-core/shared/util';
import { chartTheme } from './chart-theme';
import { LoadingIndicator } from './LoadingIndicator';
import { PrivacyFilter } from '@desktop-client/components/PrivacyFilter';
@@ -152,7 +151,7 @@ export function FormulaResult({
const color = customColor
? customColor
: error
? chartTheme.colors.red
? theme.errorText
: theme.pageText;
return (

17
packages/desktop-client/src/components/reports/SummaryNumber.tsx
View File

@@ -1,10 +1,10 @@
import React, { useRef, useState, type Ref } from 'react';
import { useTranslation } from 'react-i18next';
import { theme } from '@actual-app/components/theme';
import { View } from '@actual-app/components/view';
import debounce from 'lodash/debounce';
import { chartTheme } from './chart-theme';
import { LoadingIndicator } from './LoadingIndicator';
import { FinancialText } from '@desktop-client/components/FinancialText';
@@ -76,9 +76,11 @@ export function SummaryNumber({
<View
ref={mergedRef as Ref<HTMLDivElement>}
aria-label={
value < 0
? t('Negative amount: {{amount}}', { amount: displayAmount })
: t('Positive amount: {{amount}}', { amount: displayAmount })
value === 0
? t('Zero amount')
: value < 0
? t('Negative amount: {{amount}}', { amount: displayAmount })
: t('Positive amount: {{amount}}', { amount: displayAmount })
}
style={{
alignItems: 'center',
@@ -92,7 +94,12 @@ export function SummaryNumber({
margin: `${CONTAINER_MARGIN}px 0`,
justifyContent: 'center',
transition: animate ? 'font-size 0.3s ease' : '',
color: value < 0 ? chartTheme.colors.red : chartTheme.colors.blue,
color:
value === 0
? theme.reportsNumberNeutral
: value < 0
? theme.reportsNumberNegative
: theme.reportsNumberPositive,
}}
>
<FinancialText aria-hidden="true">

114
packages/desktop-client/src/components/reports/chart-theme.ts
View File

@@ -1,119 +1,5 @@
import { theme } from '@actual-app/components/theme';
import { useIsTestEnv } from '@desktop-client/hooks/useIsTestEnv';
const colorFades = {
blueFadeStart: 'rgba(229, 245, 255, 1)',
blueFadeEnd: 'rgba(229, 245, 255, 0)',
redFadeStart: 'rgba(255, 243, 242, 1)',
redFadeEnd: 'rgba(255, 243, 242, 0)',
};
// Typography
const sansSerif =
'Inter Variable, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif';
const letterSpacing = 'normal';
const fontSize = 13;
// Labels
const baseLabelStyles = {
fontFamily: sansSerif,
fontSize,
letterSpacing,
fill: theme.reportsLabel,
stroke: 'transparent',
};
const axisBaseStyles = {
axis: {
fill: 'transparent',
stroke: 'none',
},
grid: {
fill: 'none',
stroke: 'none',
pointerEvents: 'none',
},
ticks: {
fill: 'transparent',
size: 1,
stroke: 'none',
},
axisLabel: baseLabelStyles,
tickLabels: baseLabelStyles,
};
export const chartTheme = {
colors: {
...colorFades,
red: theme.reportsRed,
blue: theme.reportsBlue,
},
area: {
style: {
labels: baseLabelStyles,
data: {
stroke: theme.reportsBlue,
strokeWidth: 2,
strokeLinejoin: 'round',
strokeLinecap: 'round',
},
},
},
axis: {
style: axisBaseStyles,
},
dependentAxis: {
style: {
...axisBaseStyles,
grid: {
...axisBaseStyles.grid,
stroke: theme.pageTextSubdued,
strokeDasharray: '1,1',
},
tickLabels: { ...baseLabelStyles, padding: 5 },
},
},
independentAxis: {
style: {
...axisBaseStyles,
axis: { ...axisBaseStyles.axis, stroke: theme.pageTextSubdued },
tickLabels: { ...baseLabelStyles, padding: 10 },
},
},
bar: {
style: {
labels: baseLabelStyles,
data: { fill: theme.reportsBlue, stroke: 'none' },
},
},
line: {
style: {
labels: baseLabelStyles,
data: {
fill: 'none',
stroke: theme.reportsBlue,
strokeWidth: 2,
strokeLinejoin: 'round',
strokeLinecap: 'round',
},
},
},
voronoi: {
style: {
labels: baseLabelStyles,
},
},
chart: {
padding: {
top: 20,
left: 65,
right: 20,
bottom: 50,
},
},
};
export function getColorScale(name: string): string[] {
const scales: Record<string, string[]> = {
grayscale: ['#cccccc', '#969696', '#636363', '#252525'],

8
packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
View File

@@ -289,12 +289,12 @@ export function AreaGraph({
>
<stop
offset={off}
stopColor={theme.reportsBlue}
stopColor={theme.reportsNumberPositive}
stopOpacity={0.2}
/>
<stop
offset={off}
stopColor={theme.reportsRed}
stopColor={theme.reportsNumberNegative}
stopOpacity={0.2}
/>
</linearGradient>
@@ -307,12 +307,12 @@ export function AreaGraph({
>
<stop
offset={off}
stopColor={theme.reportsBlue}
stopColor={theme.reportsNumberPositive}
stopOpacity={1}
/>
<stop
offset={off}
stopColor={theme.reportsRed}
stopColor={theme.reportsNumberNegative}
stopOpacity={1}
/>
</linearGradient>

13
packages/desktop-client/src/components/reports/graphs/CalendarGraph.tsx
View File

@@ -19,7 +19,6 @@ import { type SyncedPrefs } from 'loot-core/types/prefs';
import { FinancialText } from '@desktop-client/components/FinancialText';
import { PrivacyFilter } from '@desktop-client/components/PrivacyFilter';
import { chartTheme } from '@desktop-client/components/reports/chart-theme';
import { useFormat } from '@desktop-client/hooks/useFormat';
import { useResizeObserver } from '@desktop-client/hooks/useResizeObserver';
@@ -138,7 +137,7 @@ export function CalendarGraph({
</View>
<View
style={{
color: chartTheme.colors.blue,
color: theme.reportsNumberPositive,
flexDirection: 'row',
}}
>
@@ -169,7 +168,7 @@ export function CalendarGraph({
</View>
<View
style={{
color: chartTheme.colors.red,
color: theme.reportsNumberNegative,
flexDirection: 'row',
}}
>
@@ -271,7 +270,7 @@ function DayButton({ day, onPress, fontSize, resizeRef }: DayButtonProps) {
position: 'absolute',
width: '50%',
height: '100%',
background: chartTheme.colors.red,
background: theme.reportsNumberNegative,
opacity: 0.2,
right: 0,
}}
@@ -283,7 +282,7 @@ function DayButton({ day, onPress, fontSize, resizeRef }: DayButtonProps) {
position: 'absolute',
width: '50%',
height: '100%',
background: chartTheme.colors.blue,
background: theme.reportsNumberPositive,
opacity: 0.2,
left: 0,
}}
@@ -296,7 +295,7 @@ function DayButton({ day, onPress, fontSize, resizeRef }: DayButtonProps) {
bottom: 0,
opacity: 0.9,
height: `${Math.ceil(day.incomeSize)}%`,
backgroundColor: chartTheme.colors.blue,
backgroundColor: theme.reportsNumberPositive,
width: '50%',
transition: 'height 0.5s ease-out',
}}
@@ -309,7 +308,7 @@ function DayButton({ day, onPress, fontSize, resizeRef }: DayButtonProps) {
bottom: 0,
opacity: 0.9,
height: `${Math.ceil(day.expenseSize)}%`,
backgroundColor: chartTheme.colors.red,
backgroundColor: theme.reportsNumberNegative,
width: '50%',
transition: 'height 0.5s ease-out',
}}

9
packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
View File

@@ -17,10 +17,7 @@ import {
} from 'recharts';
import { FinancialText } from '@desktop-client/components/FinancialText';
import {
chartTheme,
useRechartsAnimation,
} from '@desktop-client/components/reports/chart-theme';
import { useRechartsAnimation } from '@desktop-client/components/reports/chart-theme';
import { Container } from '@desktop-client/components/reports/Container';
import { useFormat, type FormatType } from '@desktop-client/hooks/useFormat';
import { useLocale } from '@desktop-client/hooks/useLocale';
@@ -204,14 +201,14 @@ export function CashFlowGraph({
<Bar
dataKey="income"
stackId="a"
fill={chartTheme.colors.blue}
fill={theme.reportsNumberPositive}
maxBarSize={MAX_BAR_SIZE}
{...animationProps}
/>
<Bar
dataKey="expenses"
stackId="a"
fill={chartTheme.colors.red}
fill={theme.reportsNumberNegative}
maxBarSize={MAX_BAR_SIZE}
{...animationProps}
/>

6
packages/desktop-client/src/components/reports/graphs/CrossoverGraph.tsx
View File

@@ -219,7 +219,7 @@ export function CrossoverGraph({
type="monotone"
dataKey="investmentIncome"
dot={false}
stroke={theme.reportsBlue}
stroke={theme.reportsNumberPositive}
strokeWidth={2}
{...animationProps}
/>
@@ -227,7 +227,7 @@ export function CrossoverGraph({
type="monotone"
dataKey="expenses"
dot={false}
stroke={theme.reportsRed}
stroke={theme.reportsNumberNegative}
strokeWidth={2}
{...animationProps}
/>
@@ -235,7 +235,7 @@ export function CrossoverGraph({
type="monotone"
dataKey="adjustedExpenses"
dot={false}
stroke={theme.reportsRed}
stroke={theme.reportsNumberNegative}
strokeWidth={2}
strokeDasharray="5 5"
{...animationProps}

6
packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
View File

@@ -226,12 +226,12 @@ export function NetWorthGraph({
<linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
<stop
offset={off}
stopColor={theme.reportsBlue}
stopColor={theme.reportsChartFill}
stopOpacity={0.2}
/>
<stop
offset={off}
stopColor={theme.reportsRed}
stopColor={theme.reportsNumberNegative}
stopOpacity={0.2}
/>
</linearGradient>
@@ -243,7 +243,7 @@ export function NetWorthGraph({
activeDot={false}
{...animationProps}
dataKey="y"
stroke={theme.reportsBlue}
stroke={theme.reportsChartFill}
strokeWidth={2}
fill={`url(#${gradientId})`}
fillOpacity={1}

6
packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
View File

@@ -290,7 +290,7 @@ export function SpendingGraph({
>
<stop
offset={gradientOffset()}
stopColor={theme.reportsGreen}
stopColor={theme.reportsChartFill}
stopOpacity={0.2}
/>
</linearGradient>
@@ -303,7 +303,7 @@ export function SpendingGraph({
>
<stop
offset={gradientOffset()}
stopColor={theme.reportsGreen}
stopColor={theme.reportsChartFill}
stopOpacity={1}
/>
</linearGradient>
@@ -313,7 +313,7 @@ export function SpendingGraph({
type="linear"
dot={false}
activeDot={{
fill: theme.reportsGreen,
fill: theme.reportsChartFill,
fillOpacity: 1,
r: 10,
}}

4
packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
View File

@@ -46,8 +46,8 @@ type ReportTableRowProps = {
};
const getAmountColor = (amount: number) => {
if (amount === 0) return undefined;
return amount > 0 ? theme.noticeText : theme.errorText;
if (amount === 0) return theme.reportsNumberNeutral;
return amount > 0 ? theme.reportsNumberPositive : theme.reportsNumberNegative;
};
export const ReportTableRow = memo(

25
packages/desktop-client/src/components/reports/reports/Calendar.tsx
View File

@@ -46,7 +46,6 @@ import {
PageHeader,
} from '@desktop-client/components/Page';
import { PrivacyFilter } from '@desktop-client/components/PrivacyFilter';
import { chartTheme } from '@desktop-client/components/reports/chart-theme';
import { DateRange } from '@desktop-client/components/reports/DateRange';
import { CalendarGraph } from '@desktop-client/components/reports/graphs/CalendarGraph';
import { Header } from '@desktop-client/components/reports/Header';
@@ -860,11 +859,11 @@ function CalendarWithHeader({
<SvgArrowThickUp
width={16}
height={16}
style={{ color: chartTheme.colors.blue, flexShrink: 0 }}
style={{ color: theme.reportsNumberPositive, flexShrink: 0 }}
/>
<View
style={{
color: chartTheme.colors.blue,
color: theme.reportsNumberPositive,
flexDirection: 'row',
flexGrow: 1,
justifyContent: 'start',
@@ -880,11 +879,11 @@ function CalendarWithHeader({
<SvgArrowThickDown
width={16}
height={16}
style={{ color: chartTheme.colors.red, flexShrink: 0 }}
style={{ color: theme.reportsNumberNegative, flexShrink: 0 }}
/>
<View
style={{
color: chartTheme.colors.red,
color: theme.reportsNumberNegative,
flexDirection: 'row',
flexGrow: 1,
justifyContent: 'start',
@@ -986,12 +985,8 @@ function CalendarCardHeader({
>
<Trans>Income:</Trans>
</View>
<View style={{ color: chartTheme.colors.blue }}>
<PrivacyFilter>
<FinancialText>
{format(totalIncome, 'financial')}
</FinancialText>
</PrivacyFilter>
<View style={{ color: theme.reportsNumberPositive }}>
<PrivacyFilter>{format(totalIncome, 'financial')}</PrivacyFilter>
</View>
<View
@@ -1002,12 +997,8 @@ function CalendarCardHeader({
>
<Trans>Expenses:</Trans>
</View>
<View style={{ color: chartTheme.colors.red }}>
<PrivacyFilter>
<FinancialText>
{format(totalExpense, 'financial')}
</FinancialText>
</PrivacyFilter>
<View style={{ color: theme.reportsNumberNegative }}>
<PrivacyFilter>{format(totalExpense, 'financial')}</PrivacyFilter>
</View>
</View>
</View>

9
packages/desktop-client/src/components/reports/reports/CalendarCard.tsx
View File

@@ -31,7 +31,6 @@ import { type SyncedPrefs } from 'loot-core/types/prefs';
import { FinancialText } from '@desktop-client/components/FinancialText';
import { PrivacyFilter } from '@desktop-client/components/PrivacyFilter';
import { chartTheme } from '@desktop-client/components/reports/chart-theme';
import { DateRange } from '@desktop-client/components/reports/DateRange';
import { CalendarGraph } from '@desktop-client/components/reports/graphs/CalendarGraph';
import { LoadingIndicator } from '@desktop-client/components/reports/LoadingIndicator';
@@ -251,7 +250,7 @@ export function CalendarCard({
>
<Trans>Income:</Trans>
</View>
<View style={{ color: chartTheme.colors.blue }}>
<View style={{ color: theme.reportsNumberPositive }}>
{totalIncome !== 0 ? (
<PrivacyFilter>
<FinancialText>
@@ -274,7 +273,7 @@ export function CalendarCard({
>
<Trans>Expenses:</Trans>
</View>
<View style={{ color: chartTheme.colors.red }}>
<View style={{ color: theme.reportsNumberNegative }}>
{totalExpense !== 0 ? (
<PrivacyFilter>
<FinancialText>
@@ -508,7 +507,7 @@ function CalendarCardInner({
>
<View
style={{
color: chartTheme.colors.blue,
color: theme.reportsNumberPositive,
flexDirection: 'row',
fontSize: '10px',
marginRight: 10,
@@ -534,7 +533,7 @@ function CalendarCardInner({
</View>
<View
style={{
color: chartTheme.colors.red,
color: theme.reportsNumberNegative,
flexDirection: 'row',
fontSize: '10px',
}}

9
packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx
View File

@@ -20,10 +20,7 @@ import { defaultTimeFrame } from './CashFlow';
import { FinancialText } from '@desktop-client/components/FinancialText';
import { PrivacyFilter } from '@desktop-client/components/PrivacyFilter';
import { Change } from '@desktop-client/components/reports/Change';
import {
chartTheme,
useRechartsAnimation,
} from '@desktop-client/components/reports/chart-theme';
import { useRechartsAnimation } from '@desktop-client/components/reports/chart-theme';
import { Container } from '@desktop-client/components/reports/Container';
import { DateRange } from '@desktop-client/components/reports/DateRange';
import { LoadingIndicator } from '@desktop-client/components/reports/LoadingIndicator';
@@ -236,7 +233,7 @@ export function CashFlowCard({
>
<Bar
dataKey="income"
fill={chartTheme.colors.blue}
fill={theme.reportsNumberPositive}
barSize={14}
{...animationProps}
>
@@ -249,7 +246,7 @@ export function CashFlowCard({
<Bar
dataKey="expenses"
fill={chartTheme.colors.red}
fill={theme.reportsNumberNegative}
barSize={14}
{...animationProps}
>

11
packages/desktop-client/src/components/reports/reports/SpendingCard.tsx
View File

@@ -139,11 +139,12 @@ export function SpendingCard({
...styles.mediumText,
fontWeight: 500,
marginBottom: 5,
color: !difference
? 'inherit'
: difference <= 0
? theme.noticeTextLight
: theme.errorText,
color:
difference === 0 || difference == null
? theme.reportsNumberNeutral
: difference > 0
? theme.reportsNumberPositive
: theme.reportsNumberNegative,
}}
>
<PrivacyFilter activationFilters={[!isCardHovered]}>

9
packages/desktop-client/src/components/reports/reports/Summary.tsx
View File

@@ -35,7 +35,6 @@ import {
PageHeader,
} from '@desktop-client/components/Page';
import { PrivacyFilter } from '@desktop-client/components/PrivacyFilter';
import { chartTheme } from '@desktop-client/components/reports/chart-theme';
import { Header } from '@desktop-client/components/reports/Header';
import { LoadingIndicator } from '@desktop-client/components/reports/LoadingIndicator';
import { calculateTimeRange } from '@desktop-client/components/reports/reportRanges';
@@ -500,9 +499,11 @@ function SummaryInner({ widget }: SummaryInnerProps) {
fontSize: '50px',
justifyContent: 'center',
color:
(data?.total ?? 0) < 0
? chartTheme.colors.red
: chartTheme.colors.blue,
(data?.total ?? 0) === 0
? theme.reportsNumberNeutral
: (data?.total ?? 0) < 0
? theme.reportsNumberNegative
: theme.reportsNumberPositive,
}}
>
<PrivacyFilter>

16
packages/desktop-client/src/components/reports/spreadsheets/calculateLegend.ts
View File

@@ -33,18 +33,26 @@ export function calculateLegend(
if (groupBy === 'Interval') {
if (balanceTypeOp === 'totalDebts') {
return theme.reportsRed;
return theme.reportsNumberNegative;
}
if (balanceTypeOp === 'netDebts') {
return theme.reportsNumberNegative;
}
if (balanceTypeOp === 'totalTotals') {
if (data.totalTotals < 0) {
return theme.reportsRed;
return theme.reportsNumberNegative;
}
return theme.reportsBlue;
return theme.reportsNumberPositive;
}
return theme.reportsBlue;
if (balanceTypeOp === 'totalAssets' || balanceTypeOp === 'netAssets') {
return theme.reportsNumberPositive;
}
return theme.reportsChartFill;
}
return colorScale[index % colorScale.length];

4
packages/desktop-client/src/style/themes/dark.ts
View File

@@ -198,6 +198,10 @@ export const reportsGreen = colorPalette.green400;
export const reportsGray = colorPalette.gray400;
export const reportsLabel = pageText;
export const reportsInnerLabel = colorPalette.navy800;
export const reportsNumberNegative = reportsRed;
export const reportsNumberNeutral = pageText;
export const reportsNumberPositive = reportsGreen;
export const reportsChartFill = reportsNumberPositive;
export const noteTagBackground = colorPalette.purple700;
export const noteTagBackgroundHover = colorPalette.purple500;

4
packages/desktop-client/src/style/themes/development.ts
View File

@@ -198,6 +198,10 @@ export const reportsGreen = colorPalette.green400;
export const reportsGray = colorPalette.gray400;
export const reportsLabel = colorPalette.navy900;
export const reportsInnerLabel = colorPalette.navy800;
export const reportsNumberNegative = reportsRed;
export const reportsNumberNeutral = pageText;
export const reportsNumberPositive = reportsGreen;
export const reportsChartFill = reportsNumberPositive;
export const noteTagBackground = colorPalette.purple125;
export const noteTagBackgroundHover = colorPalette.purple150;

4
packages/desktop-client/src/style/themes/light.ts
View File

@@ -200,6 +200,10 @@ export const reportsGreen = colorPalette.green400;
export const reportsGray = colorPalette.gray400;
export const reportsLabel = colorPalette.navy900;
export const reportsInnerLabel = colorPalette.navy800;
export const reportsNumberNegative = reportsRed;
export const reportsNumberNeutral = pageText;
export const reportsNumberPositive = reportsGreen;
export const reportsChartFill = reportsNumberPositive;
export const noteTagBackground = colorPalette.purple125;
export const noteTagBackgroundHover = colorPalette.purple150;

4
packages/desktop-client/src/style/themes/midnight.ts
View File

@@ -200,6 +200,10 @@ export const reportsGreen = colorPalette.green400;
export const reportsGray = colorPalette.gray400;
export const reportsLabel = pageText;
export const reportsInnerLabel = colorPalette.navy800;
export const reportsNumberNegative = reportsRed;
export const reportsNumberNeutral = pageText;
export const reportsNumberPositive = reportsGreen;
export const reportsChartFill = reportsNumberPositive;
export const noteTagBackground = colorPalette.purple800;
export const noteTagBackgroundHover = colorPalette.purple600;