From 7ee48e4c1d9ceb84ab904301714b392a37aa3dc6 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Mon, 1 Apr 2024 05:43:30 -0700
Subject: [PATCH] Fix mobile autocomplete colors (#2530)
* Fix mobile autocomplete colors
* Release notes
* Remove narrow specific autocomplete colors
* Update upcoming-release-notes/2530.md
Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>
---------
Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>
---
.../components/autocomplete/AccountAutocomplete.tsx | 5 +----
.../components/autocomplete/CategoryAutocomplete.tsx | 10 ++--------
.../src/components/autocomplete/PayeeAutocomplete.tsx | 9 ++-------
upcoming-release-notes/2530.md | 6 ++++++
4 files changed, 11 insertions(+), 19 deletions(-)
create mode 100644 upcoming-release-notes/2530.md
diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
index 1dad100b3..e6efee159 100644
--- a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
@@ -177,7 +177,6 @@ export function AccountItem({
const narrowStyle = isNarrowWidth
? {
...styles.mobileMenuItem,
- color: theme.menuItemText,
borderRadius: 0,
borderTop: `1px solid ${theme.pillBorder}`,
}
@@ -211,9 +210,7 @@ export function AccountItem({
className={`${className} ${css([
{
backgroundColor: highlighted
- ? embedded && isNarrowWidth
- ? theme.menuItemBackgroundHover
- : theme.menuAutoCompleteBackgroundHover
+ ? theme.menuAutoCompleteBackgroundHover
: 'transparent',
padding: 4,
paddingLeft: 20,
diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
index 91d542c11..fc2617b93 100644
--- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -227,7 +227,6 @@ function SplitTransactionButton({
style,
...props
}: SplitTransactionButtonProps) {
- const { isNarrowWidth } = useResponsive();
return (
<View
// Downshift calls `setTimeout(..., 250)` in the `onMouseMove`
@@ -254,9 +253,7 @@ function SplitTransactionButton({
role="button"
style={{
backgroundColor: highlighted
- ? embedded && isNarrowWidth
- ? theme.menuItemBackgroundHover
- : theme.menuAutoCompleteBackgroundHover
+ ? theme.menuAutoCompleteBackgroundHover
: 'transparent',
borderRadius: embedded ? 4 : 0,
flexShrink: 0,
@@ -312,7 +309,6 @@ export function CategoryItem({
const narrowStyle = isNarrowWidth
? {
...styles.mobileMenuItem,
- color: theme.menuItemText,
borderRadius: 0,
borderTop: `1px solid ${theme.pillBorder}`,
}
@@ -326,9 +322,7 @@ export function CategoryItem({
className={`${className} ${css([
{
backgroundColor: highlighted
- ? embedded && isNarrowWidth
- ? theme.menuItemBackgroundHover
- : theme.menuAutoCompleteBackgroundHover
+ ? theme.menuAutoCompleteBackgroundHover
: 'transparent',
padding: 4,
paddingLeft: 20,
diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
index 540125eb7..5d660aab8 100644
--- a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
@@ -427,9 +427,7 @@ export function CreatePayeeButton({
fontWeight: 500,
padding: '6px 9px',
backgroundColor: highlighted
- ? embedded && isNarrowWidth
- ? theme.menuItemBackgroundHover
- : theme.menuAutoCompleteBackgroundHover
+ ? theme.menuAutoCompleteBackgroundHover
: 'transparent',
':active': {
backgroundColor: 'rgba(100, 100, 100, .25)',
@@ -484,7 +482,6 @@ export function PayeeItem({
const narrowStyle = isNarrowWidth
? {
...styles.mobileMenuItem,
- color: theme.menuItemText,
borderRadius: 0,
borderTop: `1px solid ${theme.pillBorder}`,
}
@@ -517,9 +514,7 @@ export function PayeeItem({
className={`${className} ${css([
{
backgroundColor: highlighted
- ? embedded && isNarrowWidth
- ? theme.menuItemBackgroundHover
- : theme.menuAutoCompleteBackgroundHover
+ ? theme.menuAutoCompleteBackgroundHover
: 'transparent',
borderRadius: embedded ? 4 : 0,
padding: 4,
diff --git a/upcoming-release-notes/2530.md b/upcoming-release-notes/2530.md
new file mode 100644
index 000000000..6871ef77e
--- /dev/null
+++ b/upcoming-release-notes/2530.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix mobile autocomplete colors.
--
GitLab