Merge branch 'master' into api-hidden

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) {

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

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,

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' }}>

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>

packages/desktop-client/src/components/reports/ChooseGraph.tsx

@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 
 import View from '../common/View';
 
+import { type DataEntity, type Month } from './entities';
 import AreaGraph from './graphs/AreaGraph';
 import BarGraph from './graphs/BarGraph';
 import BarLineGraph from './graphs/BarLineGraph';
@@ -14,17 +15,28 @@ import ReportTableHeader from './ReportTableHeader';
 import ReportTableList from './ReportTableList';
 import ReportTableTotals from './ReportTableTotals';
 
+type ChooseGraphProps = {
+  data: DataEntity;
+  mode: string;
+  graphType: string;
+  balanceType: string;
+  groupBy: string;
+  showEmpty: boolean;
+  scrollWidth: number;
+  setScrollWidth: (value: number) => void;
+  months: Month[];
+};
 export function ChooseGraph({
   data,
   mode,
   graphType,
   balanceType,
   groupBy,
-  empty,
+  showEmpty,
   scrollWidth,
   setScrollWidth,
   months,
-}) {
+}: ChooseGraphProps) {
   const saveScrollWidth = value => {
     setScrollWidth(!value ? 0 : value);
   };
@@ -53,27 +65,25 @@ export function ChooseGraph({
         style={{ flexGrow: 1 }}
         data={data}
         groupBy={groupBy}
-        empty={empty}
         balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
       />
     );
   }
   if (graphType === 'BarLineGraph') {
-    return <BarLineGraph style={{ flexGrow: 1 }} graphData={data.graphData} />;
+    return <BarLineGraph style={{ flexGrow: 1 }} graphData={data} />;
   }
   if (graphType === 'DonutGraph') {
     return (
       <DonutGraph
         style={{ flexGrow: 1 }}
         data={data}
         groupBy={groupBy}
-        empty={empty}
         balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
       />
     );
   }
   if (graphType === 'LineGraph') {
-    return <LineGraph style={{ flexGrow: 1 }} graphData={data.graphData} />;
+    return <LineGraph style={{ flexGrow: 1 }} graphData={data} />;
   }
   if (graphType === 'StackedBarGraph') {
     return <StackedBarGraph style={{ flexGrow: 1 }} data={data} />;
@@ -94,7 +104,7 @@ export function ChooseGraph({
         >
           <ReportTableList
             data={data}
-            empty={empty}
+            empty={showEmpty}
             monthsCount={months.length}
             balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
             mode={mode}

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>

packages/desktop-client/src/components/reports/ReportOptions.tsx

@@ -6,8 +6,8 @@ import {
 } from 'loot-core/src/types/models';
 
 const balanceTypeOptions = [
-  { description: 'Expense', format: 'totalDebts' },
-  { description: 'Income', format: 'totalAssets' },
+  { description: 'Payment', format: 'totalDebts' },
+  { description: 'Deposit', format: 'totalAssets' },
   { description: 'Net', format: 'totalTotals' },
 ];
 
@@ -21,10 +21,11 @@ const groupByOptions = [
 ];
 
 const dateRangeOptions = [
-  { description: '1 month', name: 1 },
-  { description: '3 months', name: 2 },
-  { description: '6 months', name: 5 },
-  { description: '1 year', name: 11 },
+  { description: 'This month', name: 0 },
+  { description: 'Last month', name: 1 },
+  { description: 'Last 3 months', name: 2 },
+  { description: 'Last 6 months', name: 5 },
+  { description: 'Last 12 months', name: 11 },
   { description: 'Year to date', name: 'yearToDate' },
   { description: 'Last year', name: 'lastYear' },
   { description: 'All time', name: 'allMonths' },
@@ -108,7 +109,7 @@ type UncategorizedGroupEntity = CategoryGroupEntity & {
   categories?: UncategorizedEntity[];
 };
 
-const uncategouncatGrouprizedGroup: UncategorizedGroupEntity = {
+const uncategorizedGroup: UncategorizedGroupEntity = {
   name: 'Uncategorized & Off Budget',
   id: null,
   hidden: false,
@@ -122,7 +123,7 @@ export const categoryLists = (
 ) => {
   const categoryList = showUncategorized
     ? [
-        ...categories.list,
+        ...categories.list.filter(f => showOffBudgetHidden || !f.hidden),
         uncategorizedCategory,
         transferCategory,
         offBudgetCategory,
@@ -131,7 +132,7 @@ export const categoryLists = (
   const categoryGroup = showUncategorized
     ? [
         ...categories.grouped.filter(f => showOffBudgetHidden || !f.hidden),
-        uncategouncatGrouprizedGroup,
+        uncategorizedGroup,
       ]
     : categories.grouped;
   return [categoryList, categoryGroup] as const;

packages/desktop-client/src/components/reports/ReportSidebar.js

@@ -46,8 +46,8 @@ function ModeButton({ selected, children, style, onSelect }) {
 }
 
 export function ReportSidebar({
-  start,
-  end,
+  startDate,
+  endDate,
   onChangeDates,
   dateRange,
   setDateRange,
@@ -64,12 +64,12 @@ export function ReportSidebar({
   setBalanceType,
   mode,
   setMode,
-  empty,
-  setEmpty,
-  hidden,
-  setHidden,
-  uncat,
-  setUncat,
+  showEmpty,
+  setShowEmpty,
+  showOffBudgetHidden,
+  setShowOffBudgetHidden,
+  showUncategorized,
+  setShowUncategorized,
   categories,
   selectedCategories,
   setSelectedCategories,
@@ -114,7 +114,7 @@ export function ReportSidebar({
       } else {
         setTypeDisabled(['Net']);
         if (['Net'].includes(balanceType)) {
-          setBalanceType('Expense');
+          setBalanceType('Payment');
         }
       }
       if (graphType === 'BarGraph') {
@@ -144,7 +144,7 @@ export function ReportSidebar({
       }
     }
     if (['Net'].includes(balanceType) && graphType !== 'TableGraph') {
-      setBalanceType('Expense');
+      setBalanceType('Payment');
     }
   };
 
@@ -274,9 +274,9 @@ export function ReportSidebar({
 
           <Checkbox
             id="show-empty-columns"
-            checked={empty}
-            value={empty}
-            onChange={() => setEmpty(!empty)}
+            checked={showEmpty}
+            value={showEmpty}
+            onChange={() => setShowEmpty(!showEmpty)}
           />
           <label
             htmlFor="show-empty-columns"
@@ -297,9 +297,9 @@ export function ReportSidebar({
 
           <Checkbox
             id="show-hidden-columns"
-            checked={hidden}
-            value={hidden}
-            onChange={() => setHidden(!hidden)}
+            checked={showOffBudgetHidden}
+            value={showOffBudgetHidden}
+            onChange={() => setShowOffBudgetHidden(!showOffBudgetHidden)}
           />
           <label
             htmlFor="show-hidden-columns"
@@ -320,9 +320,9 @@ export function ReportSidebar({
 
           <Checkbox
             id="show-uncategorized"
-            checked={uncat}
-            value={uncat}
-            onChange={() => setUncat(!uncat)}
+            checked={showUncategorized}
+            value={showUncategorized}
+            onChange={() => setShowUncategorized(!showUncategorized)}
           />
           <label
             htmlFor="show-uncategorized"
@@ -387,10 +387,10 @@ export function ReportSidebar({
           </Text>
           <Select
             onChange={newValue =>
-              onChangeDates(...validateStart(allMonths, newValue, end))
+              onChangeDates(...validateStart(allMonths, newValue, endDate))
             }
-            value={start}
-            defaultLabel={monthUtils.format(start, 'MMMM, yyyy')}
+            value={startDate}
+            defaultLabel={monthUtils.format(startDate, 'MMMM, yyyy')}
             options={allMonths.map(({ name, pretty }) => [name, pretty])}
           />
         </View>
@@ -406,9 +406,9 @@ export function ReportSidebar({
           </Text>
           <Select
             onChange={newValue =>
-              onChangeDates(...validateEnd(allMonths, start, newValue))
+              onChangeDates(...validateEnd(allMonths, startDate, newValue))
             }
-            value={end}
+            value={endDate}
             options={allMonths.map(({ name, pretty }) => [name, pretty])}
           />
         </View>