Dark Theme color fixes (#2048)

* subdued fix

* notes

* fixes

* upcoming

* autocomplete menu

* make notes consistenet on budget page

* VRT updates

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/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/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

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,
         })}`}
       >

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,
         })}`}
       >

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,
         })}`}
       >

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,
         })}`}
       >

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,
         })}`}
       >

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,