Add colors to ReportTable "Totals" row (#5104)

* add colors to ReportTable

* Update VRT

* use default color for zero values

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx

@@ -132,6 +132,7 @@ export function ReportTable({
           handleScroll={handleScroll}
           height={32 + scrollWidthTotals}
           interval={interval}
+          colorized={true}
         />
       );
     },

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

@@ -46,6 +46,12 @@ type ReportTableRowProps = {
   totalScrollRef?: RefObject<HTMLDivElement | null>;
   handleScroll?: UIEventHandler<HTMLDivElement>;
   height?: number;
+  colorized?: boolean;
+};
+
+const getAmountColor = (amount: number) => {
+  if (amount === 0) return undefined;
+  return amount > 0 ? theme.noticeText : theme.errorText;
 };
 
 export const ReportTableRow = memo(
@@ -68,6 +74,7 @@ export const ReportTableRow = memo(
     handleScroll,
     height,
     interval,
+    colorized,
   }: ReportTableRowProps) => {
     const average = amountToInteger(item[balanceTypeOp]) / intervalsCount;
     const groupByItem = groupBy === 'Interval' ? 'date' : 'name';
@@ -135,6 +142,9 @@ export const ReportTableRow = memo(
                     key={index}
                     style={{
                       minWidth: compact ? 50 : 85,
+                      ...(colorized && {
+                        color: getAmountColor(intervalItem[balanceTypeOp]),
+                      }),
                     }}
                     unexposedContent={({ value }) => (
                       <Text style={hoverUnderline}>{value}</Text>
@@ -185,6 +195,9 @@ export const ReportTableRow = memo(
                     privacyFilter
                     style={{
                       minWidth: compact ? 50 : 85,
+                      ...(colorized && {
+                        color: getAmountColor(item.totalAssets),
+                      }),
                     }}
                     unexposedContent={({ value }) => (
                       <Text style={hoverUnderline}>{value}</Text>
@@ -222,6 +235,9 @@ export const ReportTableRow = memo(
                     privacyFilter
                     style={{
                       minWidth: compact ? 50 : 85,
+                      ...(colorized && {
+                        color: getAmountColor(item.totalDebts),
+                      }),
                     }}
                     unexposedContent={({ value }) => (
                       <Text style={hoverUnderline}>{value}</Text>
@@ -260,6 +276,7 @@ export const ReportTableRow = memo(
             style={{
               fontWeight: 600,
               minWidth: compact ? 50 : 85,
+              ...(colorized && { color: getAmountColor(item[balanceTypeOp]) }),
             }}
             unexposedContent={({ value }) => (
               <Text style={hoverUnderline}>{value}</Text>
@@ -298,6 +315,7 @@ export const ReportTableRow = memo(
             style={{
               fontWeight: 600,
               minWidth: compact ? 50 : 85,
+              ...(colorized && { color: getAmountColor(average) }),
             }}
             valueStyle={compactStyle}
             width="flex"

packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx

@@ -93,8 +93,8 @@ export function ReportTableTotals({
     borderTopWidth: 1,
     borderColor: theme.tableBorder,
     justifyContent: 'center',
-    color: theme.tableHeaderText,
-    backgroundColor: theme.tableHeaderBackground,
+    color: theme.tableRowHeaderText,
+    backgroundColor: theme.tableRowHeaderBackground,
     fontWeight: 600,
     ...style,
   };

upcoming-release-notes/5104.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [pogman-code]
+---
+
+Add colors to ReportTable "Totals" row