improving category spending side-nav style (#1548)

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

@@ -26,30 +26,29 @@ export default function CategorySelector({
   return (
     <>
       <div>
-        <Button
-          type="bare"
-          style={{ padding: 4 }}
-          onClick={e => setUncheckedHidden(!uncheckedHidden)}
-        >
+        <Button onClick={() => setUncheckedHidden(state => !state)}>
           {uncheckedHidden ? (
             <>
               <Eye width={20} height={20} />
-              {'Checked'}
+              Show unchecked
             </>
           ) : (
             <>
               <EyeSlashed width={20} height={20} />
-              {'All'}
+              Hide unchecked
             </>
           )}
         </Button>
       </div>
+
       <ul
         style={{
           listStyle: 'none',
           marginLeft: 0,
           paddingLeft: 0,
           paddingRight: 10,
+          height: 320,
+          overflowY: 'scroll',
         }}
       >
         {categoryGroups &&
@@ -72,7 +71,7 @@ export default function CategorySelector({
                   style={{
                     display:
                       noCategorySelected && uncheckedHidden ? 'none' : 'flex',
-                    marginBottom: 4,
+                    marginBottom: 8,
                     flexDirection: 'row',
                   }}
                 >
@@ -128,7 +127,7 @@ export default function CategorySelector({
                             display:
                               !isChecked && uncheckedHidden ? 'none' : 'flex',
                             flexDirection: 'row',
-                            marginBottom: 2,
+                            marginBottom: 4,
                           }}
                         >
                           <Checkbox

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

@@ -6,9 +6,7 @@ import { send } from 'loot-core/src/platform/client/fetch';
 import * as monthUtils from 'loot-core/src/shared/months';
 
 import useCategories from '../../hooks/useCategories';
-import Filter from '../../icons/v2/Filter2';
 import { styles } from '../../style';
-import Button from '../common/Button';
 import Select from '../common/Select';
 import View from '../common/View';
 
@@ -23,7 +21,6 @@ function CategoryAverage() {
   const categories = useCategories();
 
   const [selectedCategories, setSelectedCategories] = useState(null);
-  const [categorySelectorVisible, setCategorySelectorVisible] = useState(false);
 
   const [allMonths, setAllMonths] = useState(null);
 
@@ -106,38 +103,25 @@ function CategoryAverage() {
   const numberOfMonthsLine = numberOfMonthsOptions.length - 1;
 
   const headerPrefixItems = (
-    <>
-      <Button
-        type="bare"
-        onClick={() => setCategorySelectorVisible(!categorySelectorVisible)}
-      >
-        <Filter
-          width={14}
-          height={14}
-          style={{ opacity: categorySelectorVisible ? 0.6 : 1 }}
-        />
-      </Button>
-
-      <View
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: 5,
-        }}
-      >
-        <View>Average: </View>
-        <Select
-          style={{ backgroundColor: 'white' }}
-          onChange={setNumberOfMonthsAverage}
-          value={numberOfMonthsAverage}
-          options={numberOfMonthsOptions.map(number => [
-            number.value,
-            number.description,
-          ])}
-          line={numberOfMonthsLine}
-        />
-      </View>
-    </>
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+      }}
+    >
+      <View>Average: </View>
+      <Select
+        style={{ backgroundColor: 'white' }}
+        onChange={setNumberOfMonthsAverage}
+        value={numberOfMonthsAverage}
+        options={numberOfMonthsOptions.map(number => [
+          number.value,
+          number.description,
+        ])}
+        line={numberOfMonthsLine}
+      />
+    </View>
   );
 
   return (
@@ -153,13 +137,7 @@ function CategoryAverage() {
       <View
         style={{ display: 'flex', flexDirection: 'row', padding: 15, gap: 15 }}
       >
-        <View
-          style={{
-            height: '360',
-            overflowY: 'scroll',
-            width: !categorySelectorVisible ? 0 : 'auto',
-          }}
-        >
+        <View style={{ width: 200 }}>
           <CategorySelector
             categoryGroups={categories.grouped.filter(
               categoryGroup => !categoryGroup.is_income,

upcoming-release-notes/1548.md

+---
+category: Enhancements
+authors: [MatissJanis]
+---
+
+Category spending: improving the visual style of the side-nav