diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-1-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-1-chromium-linux.png
index c8e0b47f5278f7b6f1f48e80b10734b3a58a7907..db0ea1066d0b6ca80ff1fdf0b130428db79c05f8 100644
Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-1-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png
index 59bb41b121d02313d95529fe811ede8c18e45407..52423795d8b5c5f29812fed50096ad87cbcf8437 100644
Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-3-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-3-chromium-linux.png
index 49df0e1a1d09676e154906bcd86f29bd2bbbe5f5..fadeb6b42741f45ec06a977d4713696a6c31a3d3 100644
Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-3-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-3-chromium-linux.png differ
diff --git a/packages/desktop-client/src/components/Page.tsx b/packages/desktop-client/src/components/Page.tsx
index c93c095b60dcbcd7dd1dc80c0c59195e29c9dadc..d3c287ded0fd989df137bf7879c283ee19dc5a88 100644
--- a/packages/desktop-client/src/components/Page.tsx
+++ b/packages/desktop-client/src/components/Page.tsx
@@ -54,11 +54,16 @@ export function MobilePageHeader({
<View
style={{
alignItems: 'center',
- backgroundColor: theme.mobileHeaderBackground,
- color: theme.mobileHeaderText,
flexDirection: 'row',
flexShrink: 0,
height: HEADER_HEIGHT,
+ backgroundColor: theme.mobileHeaderBackground,
+ '& *': {
+ color: theme.mobileHeaderText,
+ },
+ '& button[data-pressed]': {
+ backgroundColor: theme.mobileHeaderTextHover,
+ },
...style,
}}
>
diff --git a/packages/desktop-client/src/components/common/Button2.tsx b/packages/desktop-client/src/components/common/Button2.tsx
index 7921dbccb690ca712281eb742554cf4656581a5b..694429d573ca2c53e2a4ee98577009e5e165d34b 100644
--- a/packages/desktop-client/src/components/common/Button2.tsx
+++ b/packages/desktop-client/src/components/common/Button2.tsx
@@ -1,9 +1,8 @@
import React, {
forwardRef,
+ useMemo,
type ComponentPropsWithoutRef,
- type ComponentType,
type ReactNode,
- type SVGProps,
} from 'react';
import {
type ButtonRenderProps as ReactAriaButtonRenderProps,
@@ -104,6 +103,13 @@ const _getPadding = (variant: ButtonVariant): string => {
}
};
+const _getHoveredStyles = (variant: ButtonVariant): CSSProperties => ({
+ ...(variant !== 'bare' && styles.shadow),
+ backgroundColor: backgroundColorHover[variant],
+ color: textColorHover[variant],
+ cursor: 'pointer',
+});
+
const _getActiveStyles = (
variant: ButtonVariant,
bounce: boolean,
@@ -127,7 +133,6 @@ const _getActiveStyles = (
type ButtonProps = ComponentPropsWithoutRef<typeof ReactAriaButton> & {
variant?: ButtonVariant;
bounce?: boolean;
- Icon?: ComponentType<SVGProps<SVGSVGElement>>;
children?: ReactNode;
};
@@ -135,70 +140,49 @@ type ButtonVariant = 'normal' | 'primary' | 'bare' | 'menu' | 'menuSelected';
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
(props, ref) => {
- const {
- children,
- variant = 'normal',
- bounce = true,
- Icon,
- ...restProps
- } = props;
+ const { children, variant = 'normal', bounce = true, ...restProps } = props;
const variantWithDisabled: ButtonVariant | `${ButtonVariant}Disabled` =
props.isDisabled ? `${variant}Disabled` : variant;
- const hoveredStyle = {
- ...(variant !== 'bare' && styles.shadow),
- backgroundColor: backgroundColorHover[variant],
- color: textColorHover[variant],
- cursor: 'pointer',
- };
- const activeStyle = {
- ..._getActiveStyles(variant, bounce),
- };
-
- const defaultButtonClassName: ReactAriaButtonClassNameFn = renderProps =>
- String(
- css({
- alignItems: 'center',
- justifyContent: 'center',
- flexShrink: 0,
- padding: _getPadding(variant),
- margin: 0,
- overflow: 'hidden',
- display: 'flex',
- borderRadius: 4,
- backgroundColor: backgroundColor[variantWithDisabled],
- border: _getBorder(variant, variantWithDisabled),
- color: textColor[variantWithDisabled],
- transition: 'box-shadow .25s',
- WebkitAppRegion: 'no-drag',
- ...styles.smallText,
- ...(renderProps.isDisabled
- ? {}
- : {
- '&[data-hovered]': hoveredStyle,
- '&[data-pressed]': activeStyle,
- }),
- ...(Icon ? { paddingLeft: 0 } : {}),
- }),
- );
+ const defaultButtonClassName: string = useMemo(
+ () =>
+ String(
+ css({
+ alignItems: 'center',
+ justifyContent: 'center',
+ flexShrink: 0,
+ padding: _getPadding(variant),
+ margin: 0,
+ overflow: 'hidden',
+ display: 'flex',
+ borderRadius: 4,
+ backgroundColor: backgroundColor[variantWithDisabled],
+ border: _getBorder(variant, variantWithDisabled),
+ color: textColor[variantWithDisabled],
+ transition: 'box-shadow .25s',
+ WebkitAppRegion: 'no-drag',
+ ...styles.smallText,
+ '&[data-hovered]': _getHoveredStyles(variant),
+ '&[data-pressed]': _getActiveStyles(variant, bounce),
+ }),
+ ),
+ [bounce, variant, variantWithDisabled],
+ );
- const buttonClassName: ReactAriaButtonClassNameFn = renderProps =>
- typeof props.className === 'function'
- ? props.className(renderProps)
- : props.className || '';
+ const className = restProps.className;
return (
<ReactAriaButton
ref={ref}
{...restProps}
- className={renderProps =>
- `${renderProps.defaultClassName} ${defaultButtonClassName(renderProps)} ${buttonClassName(renderProps)}`
+ className={
+ typeof className === 'function'
+ ? renderProps =>
+ `${defaultButtonClassName} ${className(renderProps)}`
+ : `${defaultButtonClassName} ${className || ''}`
}
>
- {Icon && (
- <Icon style={{ height: 15, paddingLeft: 5, paddingRight: 3 }} />
- )}
{children}
</ReactAriaButton>
);
@@ -254,10 +238,3 @@ export const ButtonWithLoading = forwardRef<
});
ButtonWithLoading.displayName = 'ButtonWithLoading';
-
-type ReactAriaButtonClassNameFn = Extract<
- ComponentPropsWithoutRef<typeof ReactAriaButton>['className'],
- (
- renderProps: ReactAriaButtonRenderProps & { defaultClassName: string },
- ) => string
->;
diff --git a/packages/desktop-client/src/components/mobile/MobileBackButton.tsx b/packages/desktop-client/src/components/mobile/MobileBackButton.tsx
index b0b69f9b43f2716dcec24e5d5335ca703b2826ea..7e1c5bd6387de6a58e50ce1889020f1ef888b3a5 100644
--- a/packages/desktop-client/src/components/mobile/MobileBackButton.tsx
+++ b/packages/desktop-client/src/components/mobile/MobileBackButton.tsx
@@ -1,10 +1,8 @@
import React, { type ComponentPropsWithoutRef } from 'react';
-import { css } from 'glamor';
-
import { useNavigate } from '../../hooks/useNavigate';
import { SvgCheveronLeft } from '../../icons/v1';
-import { styles, theme } from '../../style';
+import { styles } from '../../style';
import { Button } from '../common/Button2';
import { Text } from '../common/Text';
@@ -19,20 +17,10 @@ export function MobileBackButton({
return (
<Button
variant="bare"
- className={String(
- css({
- color: theme.mobileHeaderText,
- justifyContent: 'center',
- margin: 10,
- paddingLeft: 5,
- paddingRight: 3,
- '&[data-hovered]': {
- color: theme.mobileHeaderText,
- background: theme.mobileHeaderTextHover,
- },
- ...style,
- }),
- )}
+ style={{
+ margin: 10,
+ ...style,
+ }}
onPress={onPress || (() => navigate(-1))}
{...props}
>
diff --git a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx
index 4290d265813b9925a0a99296cf90151ef3bb8f58..98a91445a069cd2b38c0910169f8cc6515dbecb4 100644
--- a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx
+++ b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx
@@ -199,7 +199,7 @@ export function MobileNavTabs() {
<View>
<div
style={{
- background: theme.pillBorder,
+ backgroundColor: theme.pillBorder,
borderRadius: 10,
width: 30,
marginTop: 5,
diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx
index 1ab45cdd8c8f8d7155caa9f3e870e0ae222b4f6c..594025e357716082d3ce2b2d746825b840e91bce 100644
--- a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx
+++ b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx
@@ -32,6 +32,7 @@ import { useDateFormat } from '../../../hooks/useDateFormat';
import { useNavigate } from '../../../hooks/useNavigate';
import { usePreviewTransactions } from '../../../hooks/usePreviewTransactions';
import { styles, theme } from '../../../style';
+import { Button } from '../../common/Button2';
import { Text } from '../../common/Text';
import { View } from '../../common/View';
import { MobilePageHeader, Page } from '../../Page';
@@ -125,16 +126,18 @@ function AccountName({ account, pending, failed }) {
}}
/>
)}
- <Text
- style={{
- userSelect: 'none',
- ...styles.underlinedText,
- ...styles.lineClamp(2),
- }}
- onClick={onClick}
- >
- {`${account.closed ? 'Closed: ' : ''}${account.name}`}
- </Text>
+ <Button variant="bare" onPress={onClick}>
+ <Text
+ style={{
+ fontSize: 17,
+ fontWeight: 500,
+ ...styles.underlinedText,
+ ...styles.lineClamp(2),
+ }}
+ >
+ {`${account.closed ? 'Closed: ' : ''}${account.name}`}
+ </Text>
+ </Button>
</View>
);
}
diff --git a/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx b/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx
index 2649951427ce4898a389e33583460cda4ab92134..56bde3b83314e5995337df9d323c5354e479e79a 100644
--- a/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx
+++ b/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx
@@ -1,8 +1,6 @@
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
-import { css } from 'glamor';
-
import { replaceModal, syncAndDownload } from 'loot-core/src/client/actions';
import * as queries from 'loot-core/src/client/queries';
@@ -172,17 +170,7 @@ function AccountList({
<Button
variant="bare"
aria-label="Add account"
- className={String(
- css({
- justifyContent: 'center',
- color: theme.mobileHeaderText,
- margin: 10,
- ':hover': {
- color: theme.mobileHeaderText,
- background: theme.mobileHeaderTextHover,
- },
- }),
- )}
+ style={{ margin: 10 }}
onPress={onAddAccount}
>
<SvgAdd width={20} height={20} />
diff --git a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
index ebe158289ac06f9b2b7775d3be5385c244bc5136..d9b6a2da6c9c2ceea5b9a79ec8b06e1e6959370a 100644
--- a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
+++ b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
@@ -628,7 +628,6 @@ const ExpenseCategory = memo(function ExpenseCategory({
</View>
<View
style={{
- ...styles.noTapHighlight,
width: columnWidth,
justifyContent: 'center',
alignItems: 'flex-end',
@@ -789,8 +788,7 @@ const ExpenseGroupHeader = memo(function ExpenseGroupHeader({
css({
flexShrink: 0,
color: theme.pageTextSubdued,
- ...styles.noTapHighlight,
- '&[data-hovered], &[data-pressed]': {
+ '&[data-pressed]': {
backgroundColor: 'transparent',
},
}),
@@ -985,8 +983,7 @@ const IncomeGroupHeader = memo(function IncomeGroupHeader({
css({
flexShrink: 0,
color: theme.pageTextSubdued,
- ...styles.noTapHighlight,
- '&[data-hovered], &[data-pressed]': {
+ '&[data-pressed]': {
backgroundColor: 'transparent',
},
}),
@@ -1587,10 +1584,6 @@ export function BudgetTable({
const [showHiddenCategories = false] = useLocalPref(
'budget.showHiddenCategories',
);
- const noBackgroundColorStyle = {
- backgroundColor: 'transparent',
- color: 'white',
- };
return (
<Page
@@ -1609,16 +1602,14 @@ export function BudgetTable({
leftContent={
<Button
variant="bare"
- className={String(
- css({
- color: theme.mobileHeaderText,
- margin: 10,
- '&[data-hovered], &[data-pressed]': noBackgroundColorStyle,
- }),
- )}
+ style={{ margin: 10 }}
onPress={onOpenBudgetPageMenu}
>
- <SvgLogo width="20" height="20" />
+ <SvgLogo
+ style={{ color: theme.mobileHeaderText }}
+ width="20"
+ height="20"
+ />
<SvgCheveronRight
style={{ flexShrink: 0, color: theme.mobileHeaderTextSubdued }}
width="14"
@@ -1924,38 +1915,26 @@ function MonthSelector({
onPrevMonth();
}
}}
- className={String(
- css({
- ...styles.noTapHighlight,
- ...arrowButtonStyle,
- opacity: prevEnabled ? 1 : 0.6,
- color: theme.mobileHeaderText,
- '&[data-hovered]': {
- color: theme.mobileHeaderText,
- background: theme.mobileHeaderTextHover,
- },
- }),
- )}
+ style={{ ...arrowButtonStyle, opacity: prevEnabled ? 1 : 0.6 }}
>
<SvgArrowThinLeft width="15" height="15" style={{ margin: -5 }} />
</Button>
- <Text
+ <Button
+ variant="bare"
style={{
- color: theme.mobileHeaderText,
textAlign: 'center',
fontSize: 16,
fontWeight: 500,
margin: '0 5px',
- userSelect: 'none',
- ...styles.underlinedText,
}}
- onPointerUp={e => {
- e.stopPropagation();
+ onPress={() => {
onOpenMonthMenu?.(month);
}}
>
- {monthUtils.format(month, 'MMMM ‘yy')}
- </Text>
+ <Text style={styles.underlinedText}>
+ {monthUtils.format(month, 'MMMM ‘yy')}
+ </Text>
+ </Button>
<Button
variant="bare"
onPress={() => {
@@ -1963,18 +1942,7 @@ function MonthSelector({
onNextMonth();
}
}}
- className={String(
- css({
- ...styles.noTapHighlight,
- ...arrowButtonStyle,
- opacity: nextEnabled ? 1 : 0.6,
- color: theme.mobileHeaderText,
- '&[data-hovered]': {
- color: theme.mobileHeaderText,
- background: theme.mobileHeaderTextHover,
- },
- }),
- )}
+ style={{ ...arrowButtonStyle, opacity: nextEnabled ? 1 : 0.6 }}
>
<SvgArrowThinRight width="15" height="15" style={{ margin: -5 }} />
</Button>
diff --git a/packages/desktop-client/src/components/mobile/transactions/AddTransactionButton.tsx b/packages/desktop-client/src/components/mobile/transactions/AddTransactionButton.tsx
index f77817a2e09057400dba04183cdfd76e82255524..edaefb73e14d104b2eaffa5211be3dce185ba7f1 100644
--- a/packages/desktop-client/src/components/mobile/transactions/AddTransactionButton.tsx
+++ b/packages/desktop-client/src/components/mobile/transactions/AddTransactionButton.tsx
@@ -1,10 +1,7 @@
import React from 'react';
-import { css } from 'glamor';
-
import { useNavigate } from '../../../hooks/useNavigate';
import { SvgAdd } from '../../../icons/v1';
-import { theme } from '../../../style';
import { Button } from '../../common/Button2';
type AddTransactionButtonProps = {
@@ -23,17 +20,7 @@ export function AddTransactionButton({
<Button
variant="bare"
aria-label="Add transaction"
- className={String(
- css({
- justifyContent: 'center',
- color: theme.mobileHeaderText,
- margin: 10,
- ':hover': {
- color: theme.mobileHeaderText,
- background: theme.mobileHeaderTextHover,
- },
- }),
- )}
+ style={{ margin: 10 }}
onPress={() => {
navigate(to, { state: { accountId, categoryId } });
}}
diff --git a/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx b/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx
index bc4b67b637dad45308b958c3cb00f2e60b756b62..d00d43b097e1d449ad5f934b3a1d70af55a8c378 100644
--- a/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx
+++ b/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx
@@ -256,7 +256,7 @@ export const FocusableAmountInput = memo(function FocusableAmountInput({
css({
...(buttonProps && buttonProps.style),
...(focused && { display: 'none' }),
- ':hover': {
+ '&[data-pressed]': {
backgroundColor: 'transparent',
},
}),
diff --git a/upcoming-release-notes/3491.md b/upcoming-release-notes/3491.md
new file mode 100644
index 0000000000000000000000000000000000000000..bdd9b38b7eef8bf651e815acca9e4d13b7fa1a76
--- /dev/null
+++ b/upcoming-release-notes/3491.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix mobile page header button styles.