Fix bulk edit field modal in desktop

actualbudget · Dec 2, 2023 · f5227ae · f5227ae
1 parent 5f52801
commit f5227ae
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 79 deletions.
diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
@@ -5,6 +5,7 @@ import { css } from 'glamor';
 import { useCachedAccounts } from 'loot-core/src/client/data-hooks/accounts';
 import { type AccountEntity } from 'loot-core/src/types/models';
 
+import { useResponsive } from '../../ResponsiveProvider';
 import { type CSSProperties, theme } from '../../style';
 import View from '../common/View';
 
@@ -168,6 +169,7 @@ export function AccountItem({
   embedded,
   ...props
 }: AccountItemProps) {
+  const { isNarrowWidth } = useResponsive();
   return (
     <div
       // List each account up to a max
@@ -196,7 +198,7 @@ export function AccountItem({
       className={`${className} ${css([
         {
           backgroundColor: highlighted
-            ? embedded
+            ? embedded && isNarrowWidth
               ? theme.menuItemBackgroundHover
               : theme.menuAutoCompleteBackgroundHover
             : 'transparent',

diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -15,6 +15,7 @@ import {
 } from 'loot-core/src/types/models';
 
 import Split from '../../icons/v0/Split';
+import { useResponsive } from '../../ResponsiveProvider';
 import { type CSSProperties, theme } from '../../style';
 import Text from '../common/Text';
 import View from '../common/View';
@@ -220,6 +221,7 @@ export function SplitTransactionButton({
   style,
   ...props
 }: SplitTransactionButtonProps) {
+  const { isNarrowWidth } = useResponsive();
   return (
     <View
       // Downshift calls `setTimeout(..., 250)` in the `onMouseMove`
@@ -246,7 +248,7 @@ export function SplitTransactionButton({
       role="button"
       style={{
         backgroundColor: highlighted
-          ? embedded
+          ? embedded && isNarrowWidth
             ? theme.menuItemBackgroundHover
             : theme.menuAutoCompleteBackgroundHover
           : 'transparent',
@@ -299,14 +301,15 @@ export function CategoryItem({
   embedded,
   ...props
 }: CategoryItemProps) {
+  const { isNarrowWidth } = useResponsive();
   return (
     <div
       // See comment above.
       role="button"
       className={`${className} ${css([
         {
           backgroundColor: highlighted
-            ? embedded
+            ? embedded && isNarrowWidth
               ? theme.menuItemBackgroundHover
               : theme.menuAutoCompleteBackgroundHover
             : 'transparent',

diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
@@ -21,6 +21,7 @@ import {
 } from 'loot-core/src/types/models';
 
 import Add from '../../icons/v1/Add';
+import { useResponsive } from '../../ResponsiveProvider';
 import { type CSSProperties, theme } from '../../style';
 import Button from '../common/Button';
 import View from '../common/View';
@@ -373,19 +374,21 @@ export function CreatePayeeButton({
   style,
   ...props
 }: CreatePayeeButtonProps) {
+  const { isNarrowWidth } = useResponsive();
   return (
     <View
       data-testid="create-payee-button"
       style={{
         display: 'block',
         flexShrink: 0,
-        color: embedded ? theme.menuItemText : theme.noticeTextMenu,
+        color:
+          embedded && isNarrowWidth ? theme.menuItemText : theme.noticeTextMenu,
         borderRadius: embedded ? 4 : 0,
         fontSize: 11,
         fontWeight: 500,
         padding: '6px 9px',
         backgroundColor: highlighted
-          ? embedded
+          ? embedded && isNarrowWidth
             ? theme.menuItemBackgroundHover
             : theme.menuAutoCompleteBackgroundHover
           : 'transparent',
@@ -462,6 +465,7 @@ export function PayeeItem({
   embedded,
   ...props
 }: PayeeItemProps) {
+  const { isNarrowWidth } = useResponsive();
   return (
     <div
       // Downshift calls `setTimeout(..., 250)` in the `onMouseMove`
@@ -489,7 +493,7 @@ export function PayeeItem({
       className={`${className} ${css([
         {
           backgroundColor: highlighted
-            ? embedded
+            ? embedded && isNarrowWidth
               ? theme.menuItemBackgroundHover
               : theme.menuAutoCompleteBackgroundHover
             : 'transparent',

diff --git a/packages/desktop-client/src/components/modals/EditField.js b/packages/desktop-client/src/components/modals/EditField.js
@@ -108,28 +108,30 @@ export default function EditField({ modalProps, name, onSubmit }) {
               onSelect(value);
             }
           }}
-          renderAccountItemGroupHeader={props => (
-            <AccountItemGroupHeader
-              {...props}
-              style={{
-                ...styles.largeText,
-                color: theme.menuItemTextHeader,
-                paddingTop: 10,
-                paddingBottom: 10,
-              }}
-            />
-          )}
-          renderAccountItem={props => (
-            <AccountItem
-              {...props}
-              style={{
-                ...itemStyle,
-                color: theme.menuItemText,
-                borderRadius: 0,
-                borderTop: `1px solid ${theme.pillBorder}`,
-              }}
-            />
-          )}
+          {...(isNarrowWidth && {
+            renderAccountItemGroupHeader: props => (
+              <AccountItemGroupHeader
+                {...props}
+                style={{
+                  ...styles.largeText,
+                  color: theme.menuItemTextHeader,
+                  paddingTop: 10,
+                  paddingBottom: 10,
+                }}
+              />
+            ),
+            renderAccountItem: props => (
+              <AccountItem
+                {...props}
+                style={{
+                  ...itemStyle,
+                  color: theme.menuItemText,
+                  borderRadius: 0,
+                  borderTop: `1px solid ${theme.pillBorder}`,
+                }}
+              />
+            ),
+          })}
           {...autocompleteProps}
         />
       );
@@ -155,35 +157,37 @@ export default function EditField({ modalProps, name, onSubmit }) {
             onSelect(value);
           }}
           isCreatable
-          renderCreatePayeeButton={props => (
-            <CreatePayeeButton
-              {...props}
-              Icon={CreatePayeeIcon}
-              style={itemStyle}
-            />
-          )}
-          renderPayeeItemGroupHeader={props => (
-            <PayeeItemGroupHeader
-              {...props}
-              style={{
-                ...styles.largeText,
-                color: theme.menuItemTextHeader,
-                paddingTop: 10,
-                paddingBottom: 10,
-              }}
-            />
-          )}
-          renderPayeeItem={props => (
-            <PayeeItem
-              {...props}
-              style={{
-                ...itemStyle,
-                color: theme.menuItemText,
-                borderRadius: 0,
-                borderTop: `1px solid ${theme.pillBorder}`,
-              }}
-            />
-          )}
+          {...(isNarrowWidth && {
+            renderCreatePayeeButton: props => (
+              <CreatePayeeButton
+                {...props}
+                Icon={CreatePayeeIcon}
+                style={itemStyle}
+              />
+            ),
+            renderPayeeItemGroupHeader: props => (
+              <PayeeItemGroupHeader
+                {...props}
+                style={{
+                  ...styles.largeText,
+                  color: theme.menuItemTextHeader,
+                  paddingTop: 10,
+                  paddingBottom: 10,
+                }}
+              />
+            ),
+            renderPayeeItem: props => (
+              <PayeeItem
+                {...props}
+                style={{
+                  ...itemStyle,
+                  color: theme.menuItemText,
+                  borderRadius: 0,
+                  borderTop: `1px solid ${theme.pillBorder}`,
+                }}
+              />
+            ),
+          })}
           {...autocompleteProps}
         />
       );
@@ -214,28 +218,30 @@ export default function EditField({ modalProps, name, onSubmit }) {
           onSelect={value => {
             onSelect(value);
           }}
-          renderCategoryItemGroupHeader={props => (
-            <CategoryItemGroupHeader
-              {...props}
-              style={{
-                ...styles.largeText,
-                color: theme.menuItemTextHeader,
-                paddingTop: 10,
-                paddingBottom: 10,
-              }}
-            />
-          )}
-          renderCategoryItem={props => (
-            <CategoryItem
-              {...props}
-              style={{
-                ...itemStyle,
-                color: theme.menuItemText,
-                borderRadius: 0,
-                borderTop: `1px solid ${theme.pillBorder}`,
-              }}
-            />
-          )}
+          {...(isNarrowWidth && {
+            renderCategoryItemGroupHeader: props => (
+              <CategoryItemGroupHeader
+                {...props}
+                style={{
+                  ...styles.largeText,
+                  color: theme.menuItemTextHeader,
+                  paddingTop: 10,
+                  paddingBottom: 10,
+                }}
+              />
+            ),
+            renderCategoryItem: props => (
+              <CategoryItem
+                {...props}
+                style={{
+                  ...itemStyle,
+                  color: theme.menuItemText,
+                  borderRadius: 0,
+                  borderTop: `1px solid ${theme.pillBorder}`,
+                }}
+              />
+            ),
+          })}
           {...autocompleteProps}
         />
       );