diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
index 4fe464a3e03acbc130e829008b0dd2cdbfb4da21..6e65af40eca34626cb7ea6228dddca630fff617e 100644
--- a/packages/desktop-client/src/components/Notifications.tsx
+++ b/packages/desktop-client/src/components/Notifications.tsx
@@ -7,6 +7,8 @@ import React, {
} from 'react';
import { useDispatch, useSelector } from 'react-redux';
+import { css } from 'glamor';
+
import { removeNotification } from 'loot-core/client/actions';
import { type State } from 'loot-core/src/client/state-types';
import type { NotificationWithId } from 'loot-core/src/client/state-types/notifications';
@@ -200,29 +202,29 @@ function Notification({
onRemove();
setLoading(false);
}}
- style={({ isHovered, isPressed }) => ({
- backgroundColor: 'transparent',
- border: `1px solid ${
- positive
- ? theme.noticeBorder
- : error
- ? theme.errorBorder
- : theme.warningBorder
- }`,
- color: 'currentColor',
- ...styles.mediumText,
- flexShrink: 0,
- ...(isHovered || isPressed
- ? {
- backgroundColor: positive
- ? theme.noticeBackground
- : error
- ? theme.errorBackground
- : theme.warningBackground,
- }
- : {}),
- ...narrowStyle,
- })}
+ className={String(
+ css({
+ backgroundColor: 'transparent',
+ border: `1px solid ${
+ positive
+ ? theme.noticeBorder
+ : error
+ ? theme.errorBorder
+ : theme.warningBorder
+ }`,
+ color: 'currentColor',
+ ...styles.mediumText,
+ flexShrink: 0,
+ '&[data-hovered], &[data-pressed]': {
+ backgroundColor: positive
+ ? theme.noticeBackground
+ : error
+ ? theme.errorBackground
+ : theme.warningBackground,
+ },
+ ...narrowStyle,
+ }),
+ )}
>
{button.title}
</ButtonWithLoading>
diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
index c283886eaa1d02a687de46063efe1443910cc30c..7ef7ad41d8d5afb3c427caab9baa74d2d3ab54ac 100644
--- a/packages/desktop-client/src/components/Titlebar.tsx
+++ b/packages/desktop-client/src/components/Titlebar.tsx
@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { Routes, Route, useLocation } from 'react-router-dom';
+import { css } from 'glamor';
+
import * as Platform from 'loot-core/src/client/platform';
import * as queries from 'loot-core/src/client/queries';
import { listen } from 'loot-core/src/platform/client/fetch';
@@ -200,21 +202,23 @@ function SyncButton({ style, isMobile = false }: SyncButtonProps) {
<Button
variant="bare"
aria-label="Sync"
- style={({ isHovered, isPressed }) => ({
- ...(isMobile
- ? {
- ...style,
- WebkitAppRegion: 'none',
- ...mobileIconStyle,
- }
- : {
- ...style,
- WebkitAppRegion: 'none',
- color: desktopColor,
- }),
- ...(isHovered ? hoveredStyle : {}),
- ...(isPressed ? activeStyle : {}),
- })}
+ className={String(
+ css({
+ ...(isMobile
+ ? {
+ ...style,
+ WebkitAppRegion: 'none',
+ ...mobileIconStyle,
+ }
+ : {
+ ...style,
+ WebkitAppRegion: 'none',
+ color: desktopColor,
+ }),
+ '&[data-hovered]': hoveredStyle,
+ '&[data-pressed]': activeStyle,
+ }),
+ )}
onPress={sync}
>
{isMobile ? (
diff --git a/packages/desktop-client/src/components/common/Button2.tsx b/packages/desktop-client/src/components/common/Button2.tsx
index 0fb4860fff6c98eca467771f6d2ab9ec9c81a4fc..7921dbccb690ca712281eb742554cf4656581a5b 100644
--- a/packages/desktop-client/src/components/common/Button2.tsx
+++ b/packages/desktop-client/src/components/common/Button2.tsx
@@ -173,8 +173,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
transition: 'box-shadow .25s',
WebkitAppRegion: 'no-drag',
...styles.smallText,
- ...(renderProps.isDisabled ? {} : { ':hover': hoveredStyle }),
- ...(renderProps.isDisabled ? {} : { ':active': activeStyle }),
+ ...(renderProps.isDisabled
+ ? {}
+ : {
+ '&[data-hovered]': hoveredStyle,
+ '&[data-pressed]': activeStyle,
+ }),
...(Icon ? { paddingLeft: 0 } : {}),
}),
);
diff --git a/packages/desktop-client/src/components/common/Link.tsx b/packages/desktop-client/src/components/common/Link.tsx
index a945e95570b0c09dbe26ab749e9c6240aef09aa3..ebe1f355210b4658f25079c0791503cff68a4219 100644
--- a/packages/desktop-client/src/components/common/Link.tsx
+++ b/packages/desktop-client/src/components/common/Link.tsx
@@ -95,10 +95,13 @@ const ButtonLink = ({ to, style, activeStyle, ...props }: ButtonLinkProps) => {
const match = useMatch({ path });
return (
<Button
- style={({ isPressed }) => ({
- ...style,
- ...(match || isPressed ? activeStyle : {}),
- })}
+ className={String(
+ css({
+ ...style,
+ '&[data-pressed]': activeStyle,
+ ...(match ? activeStyle : {}),
+ }),
+ )}
{...props}
variant={props.buttonVariant}
onPress={e => {
diff --git a/packages/desktop-client/src/components/common/Select.tsx b/packages/desktop-client/src/components/common/Select.tsx
index 27b6747914a54bd80956b6905198114534664d12..c9fc00b411d06dba0827a1b25619bde9572b7be9 100644
--- a/packages/desktop-client/src/components/common/Select.tsx
+++ b/packages/desktop-client/src/components/common/Select.tsx
@@ -1,5 +1,7 @@
import { useRef, useState } from 'react';
+import { css } from 'glamor';
+
import { SvgExpandArrow } from '../../icons/v0';
import { type CSSProperties } from '../../style';
@@ -25,7 +27,7 @@ type SelectProps<Value> = {
onChange?: (newValue: Value) => void;
disabled?: boolean;
disabledKeys?: Value[];
- buttonStyle?: CSSProperties;
+ style?: CSSProperties;
};
/**
@@ -50,7 +52,7 @@ export function Select<const Value = string>({
onChange,
disabled = false,
disabledKeys = [],
- buttonStyle = {},
+ style = {},
}: SelectProps<Value>) {
const targetOption = options
.filter(isValueOption)
@@ -69,12 +71,7 @@ export function Select<const Value = string>({
onPress={() => {
setIsOpen(true);
}}
- style={({ isHovered }) => ({
- ...buttonStyle,
- ...(isHovered
- ? { backgroundColor: bare ? 'transparent' : undefined }
- : {}),
- })}
+ className={String(css(style))}
>
<View
style={{
diff --git a/packages/desktop-client/src/components/mobile/MobileBackButton.tsx b/packages/desktop-client/src/components/mobile/MobileBackButton.tsx
index aa1604bb6a2bfaae847c2f3f289c38953c671c8a..b0b69f9b43f2716dcec24e5d5335ca703b2826ea 100644
--- a/packages/desktop-client/src/components/mobile/MobileBackButton.tsx
+++ b/packages/desktop-client/src/components/mobile/MobileBackButton.tsx
@@ -1,5 +1,7 @@
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';
@@ -17,20 +19,20 @@ export function MobileBackButton({
return (
<Button
variant="bare"
- style={({ isHovered }) => ({
- color: theme.mobileHeaderText,
- justifyContent: 'center',
- margin: 10,
- paddingLeft: 5,
- paddingRight: 3,
- ...(isHovered
- ? {
- color: theme.mobileHeaderText,
- background: theme.mobileHeaderTextHover,
- }
- : {}),
- ...style,
- })}
+ className={String(
+ css({
+ color: theme.mobileHeaderText,
+ justifyContent: 'center',
+ margin: 10,
+ paddingLeft: 5,
+ paddingRight: 3,
+ '&[data-hovered]': {
+ color: theme.mobileHeaderText,
+ background: theme.mobileHeaderTextHover,
+ },
+ ...style,
+ }),
+ )}
onPress={onPress || (() => navigate(-1))}
{...props}
>
diff --git a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
index 6ecc225e7691223af1c1acf83ceec334b999de6f..0bee9e2d02123b081560d89c17da1e9d2cebb698 100644
--- a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
+++ b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
@@ -2,6 +2,7 @@ import React, { memo, useCallback, useRef } from 'react';
import { useDispatch } from 'react-redux';
import { AutoTextSize } from 'auto-text-size';
+import { css } from 'glamor';
import memoizeOne from 'memoize-one';
import { collapseModals, pushModal } from 'loot-core/client/actions';
@@ -780,14 +781,16 @@ const ExpenseGroupHeader = memo(function ExpenseGroupHeader({
>
<Button
variant="bare"
- style={({ isPressed, isHovered }) => ({
- flexShrink: 0,
- color: theme.pageTextSubdued,
- ...styles.noTapHighlight,
- ...(isPressed || isHovered
- ? { backgroundColor: 'transparent' }
- : {}),
- })}
+ className={String(
+ css({
+ flexShrink: 0,
+ color: theme.pageTextSubdued,
+ ...styles.noTapHighlight,
+ '&[data-hovered], &[data-pressed]': {
+ backgroundColor: 'transparent',
+ },
+ }),
+ )}
onPress={() => onToggleCollapse?.(group.id)}
>
<SvgExpandArrow
@@ -974,14 +977,16 @@ const IncomeGroupHeader = memo(function IncomeGroupHeader({
>
<Button
variant="bare"
- style={({ isPressed, isHovered }) => ({
- flexShrink: 0,
- color: theme.pageTextSubdued,
- ...styles.noTapHighlight,
- ...(isPressed || isHovered
- ? { backgroundColor: 'transparent' }
- : {}),
- })}
+ className={String(
+ css({
+ flexShrink: 0,
+ color: theme.pageTextSubdued,
+ ...styles.noTapHighlight,
+ '&[data-hovered], &[data-pressed]': {
+ backgroundColor: 'transparent',
+ },
+ }),
+ )}
onPress={() => onToggleCollapse?.(group.id)}
>
<SvgExpandArrow
@@ -1600,11 +1605,13 @@ export function BudgetTable({
leftContent={
<Button
variant="bare"
- style={({ isPressed, isHovered }) => ({
- color: theme.mobileHeaderText,
- margin: 10,
- ...(isPressed || isHovered ? noBackgroundColorStyle : {}),
- })}
+ className={String(
+ css({
+ color: theme.mobileHeaderText,
+ margin: 10,
+ '&[data-hovered], &[data-pressed]': noBackgroundColorStyle,
+ }),
+ )}
onPress={onOpenBudgetPageMenu}
>
<SvgLogo width="20" height="20" />
@@ -1913,18 +1920,18 @@ function MonthSelector({
onPrevMonth();
}
}}
- style={({ isHovered }) => ({
- ...styles.noTapHighlight,
- ...arrowButtonStyle,
- opacity: prevEnabled ? 1 : 0.6,
- color: theme.mobileHeaderText,
- ...(isHovered
- ? {
- color: theme.mobileHeaderText,
- background: theme.mobileHeaderTextHover,
- }
- : {}),
- })}
+ className={String(
+ css({
+ ...styles.noTapHighlight,
+ ...arrowButtonStyle,
+ opacity: prevEnabled ? 1 : 0.6,
+ color: theme.mobileHeaderText,
+ '&[data-hovered]': {
+ color: theme.mobileHeaderText,
+ background: theme.mobileHeaderTextHover,
+ },
+ }),
+ )}
>
<SvgArrowThinLeft width="15" height="15" style={{ margin: -5 }} />
</Button>
@@ -1952,18 +1959,18 @@ function MonthSelector({
onNextMonth();
}
}}
- style={({ isHovered }) => ({
- ...styles.noTapHighlight,
- ...arrowButtonStyle,
- opacity: nextEnabled ? 1 : 0.6,
- color: theme.mobileHeaderText,
- ...(isHovered
- ? {
- color: theme.mobileHeaderText,
- background: theme.mobileHeaderTextHover,
- }
- : {}),
- })}
+ className={String(
+ css({
+ ...styles.noTapHighlight,
+ ...arrowButtonStyle,
+ opacity: nextEnabled ? 1 : 0.6,
+ color: theme.mobileHeaderText,
+ '&[data-hovered]': {
+ color: theme.mobileHeaderText,
+ background: theme.mobileHeaderTextHover,
+ },
+ }),
+ )}
>
<SvgArrowThinRight width="15" height="15" style={{ margin: -5 }} />
</Button>
diff --git a/packages/desktop-client/src/components/modals/EditRuleModal.jsx b/packages/desktop-client/src/components/modals/EditRuleModal.jsx
index 51a46ef54ebd1d5265bd5dfdee64a86e169cfdca..ea6a8827935aabfc3a12ae29fe8d1893bfce8558 100644
--- a/packages/desktop-client/src/components/modals/EditRuleModal.jsx
+++ b/packages/desktop-client/src/components/modals/EditRuleModal.jsx
@@ -95,7 +95,10 @@ export function FieldSelect({ fields, style, value, onChange }) {
options={fields}
value={value}
onChange={onChange}
- buttonStyle={{ color: theme.pageTextPositive }}
+ style={{
+ color: theme.pageTextPositive,
+ '&[data-hovered]': { color: theme.pageTextPositive },
+ }}
/>
</View>
);
@@ -135,7 +138,7 @@ export function OpSelect({
options={opOptions}
value={value}
onChange={value => onChange('op', value)}
- buttonStyle={style}
+ style={style}
/>
</View>
);
diff --git a/packages/desktop-client/src/components/modals/ImportTransactionsModal.jsx b/packages/desktop-client/src/components/modals/ImportTransactionsModal.jsx
index 00ffdc971ed06a96d427b3aed98e3a23e59bf24c..feaf188bffcb40a582bdec1d102368d3bbf893af 100644
--- a/packages/desktop-client/src/components/modals/ImportTransactionsModal.jsx
+++ b/packages/desktop-client/src/components/modals/ImportTransactionsModal.jsx
@@ -590,7 +590,7 @@ function SelectField({
]}
value={value === null ? 'choose-field' : value}
onChange={onChange}
- buttonStyle={style}
+ style={style}
/>
);
}
diff --git a/packages/desktop-client/src/components/modals/ReportBudgetMonthMenuModal.tsx b/packages/desktop-client/src/components/modals/ReportBudgetMonthMenuModal.tsx
index ae5e9b6458410b4c5a753f200c0ce12cb114bc14..9ee19db9459163eed9d391854710fa023edad277 100644
--- a/packages/desktop-client/src/components/modals/ReportBudgetMonthMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/ReportBudgetMonthMenuModal.tsx
@@ -1,6 +1,8 @@
// @ts-strict-ignore
import React, { useState } from 'react';
+import { css } from 'glamor';
+
import * as monthUtils from 'loot-core/src/shared/months';
import { useNotes } from '../../hooks/useNotes';
@@ -117,15 +119,15 @@ export function ReportBudgetMonthMenuModal({
<View>
<Button
variant="bare"
- style={({ isPressed, isHovered }) => ({
- ...buttonStyle,
- ...(isPressed || isHovered
- ? {
- backgroundColor: 'transparent',
- color: buttonStyle.color,
- }
- : {}),
- })}
+ className={String(
+ css({
+ ...buttonStyle,
+ '&[data-pressed], &[data-hovered]': {
+ backgroundColor: 'transparent',
+ color: buttonStyle.color,
+ },
+ }),
+ )}
onPress={onShowMore}
>
{!showMore ? (
diff --git a/packages/desktop-client/src/components/modals/RolloverBudgetMonthMenuModal.tsx b/packages/desktop-client/src/components/modals/RolloverBudgetMonthMenuModal.tsx
index a8b34852ce7ff3c472d385bb330b432cf03b2ac7..c35ea9ab57d7cf278cea201bb525d27819cdeff4 100644
--- a/packages/desktop-client/src/components/modals/RolloverBudgetMonthMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/RolloverBudgetMonthMenuModal.tsx
@@ -1,6 +1,8 @@
// @ts-strict-ignore
import React, { useState } from 'react';
+import { css } from 'glamor';
+
import * as monthUtils from 'loot-core/src/shared/months';
import { useNotes } from '../../hooks/useNotes';
@@ -117,15 +119,15 @@ export function RolloverBudgetMonthMenuModal({
<View>
<Button
variant="bare"
- style={({ isPressed, isHovered }) => ({
- ...buttonStyle,
- ...(isPressed || isHovered
- ? {
- backgroundColor: 'transparent',
- color: buttonStyle.color,
- }
- : {}),
- })}
+ className={String(
+ css({
+ ...buttonStyle,
+ '&[data-pressed], &[data-hovered]': {
+ backgroundColor: 'transparent',
+ color: buttonStyle.color,
+ },
+ }),
+ )}
onPress={onShowMore}
>
{!showMore ? (
diff --git a/packages/desktop-client/src/components/reports/Header.tsx b/packages/desktop-client/src/components/reports/Header.tsx
index 1eb9fe0ab520b54ce04506598e0497b0cf8b02e9..b1aad0805f81fa36486573a535bcda7cca6e5884 100644
--- a/packages/desktop-client/src/components/reports/Header.tsx
+++ b/packages/desktop-client/src/components/reports/Header.tsx
@@ -134,7 +134,7 @@ export function Header({
}
value={end}
options={allMonths.map(({ name, pretty }) => [name, pretty])}
- buttonStyle={{ marginRight: 10 }}
+ style={{ marginRight: 10 }}
/>
</View>
diff --git a/packages/desktop-client/src/components/select/RecurringSchedulePicker.tsx b/packages/desktop-client/src/components/select/RecurringSchedulePicker.tsx
index eb7c282289a86d106f249c38145a0c20da091cee..72eb555597fb6ec088446d59a43a9a0a1f1ce258 100644
--- a/packages/desktop-client/src/components/select/RecurringSchedulePicker.tsx
+++ b/packages/desktop-client/src/components/select/RecurringSchedulePicker.tsx
@@ -294,7 +294,7 @@ function MonthlyPatterns({
value: parsePatternValue(value),
})
}
- buttonStyle={{ flex: 1, marginRight: 10 }}
+ style={{ flex: 1, marginRight: 10 }}
/>
<Select
options={[
@@ -311,7 +311,7 @@ function MonthlyPatterns({
value,
});
}}
- buttonStyle={{ flex: 1, marginRight: 10 }}
+ style={{ flex: 1, marginRight: 10 }}
/>
<Button
variant="bare"
@@ -457,7 +457,7 @@ function RecurringScheduleTooltip({
options={FREQUENCY_OPTIONS.map(opt => [opt.id, opt.name])}
value={config.frequency}
onChange={value => updateField('frequency', value)}
- buttonStyle={{ marginRight: 5 }}
+ style={{ marginRight: 5 }}
/>
{config.frequency === 'monthly' &&
(config.patterns == null || config.patterns.length === 0) ? (
diff --git a/packages/desktop-client/src/components/settings/Format.tsx b/packages/desktop-client/src/components/settings/Format.tsx
index d3cbfd8f83398b2d073989e5afd9f831d256d000..dda0ca35092fbac698edf1605f2dc1aa1e725f83 100644
--- a/packages/desktop-client/src/components/settings/Format.tsx
+++ b/packages/desktop-client/src/components/settings/Format.tsx
@@ -96,7 +96,7 @@ export function FormatSettings() {
f.value,
String(hideFraction) === 'true' ? f.labelNoFraction : f.label,
])}
- buttonStyle={selectButtonStyle}
+ style={selectButtonStyle}
/>
<Text style={{ display: 'flex' }}>
@@ -116,7 +116,7 @@ export function FormatSettings() {
value={dateFormat}
onChange={format => setDateFormatPref(format)}
options={dateFormats.map(f => [f.value, f.label])}
- buttonStyle={selectButtonStyle}
+ style={selectButtonStyle}
/>
</Column>
@@ -125,7 +125,7 @@ export function FormatSettings() {
value={firstDayOfWeekIdx}
onChange={idx => setFirstDayOfWeekIdxPref(idx)}
options={daysOfWeek.map(f => [f.value, f.label])}
- buttonStyle={selectButtonStyle}
+ style={selectButtonStyle}
/>
</Column>
</View>
diff --git a/packages/desktop-client/src/components/settings/Themes.tsx b/packages/desktop-client/src/components/settings/Themes.tsx
index 10fff9480f041ef4c9b9016831cd6d4014841ac7..3eeebfb538060c3f28633bc1d9eaa0bdf26abf15 100644
--- a/packages/desktop-client/src/components/settings/Themes.tsx
+++ b/packages/desktop-client/src/components/settings/Themes.tsx
@@ -62,8 +62,8 @@ export function ThemeSettings() {
}}
value={theme}
options={themeOptions}
- buttonStyle={{
- ':hover': {
+ style={{
+ '&[data-hovered]': {
backgroundColor: themeStyle.buttonNormalBackgroundHover,
},
}}
@@ -77,8 +77,8 @@ export function ThemeSettings() {
}}
value={darkTheme}
options={darkThemeOptions}
- buttonStyle={{
- ':hover': {
+ style={{
+ '&[data-hovered]': {
backgroundColor: themeStyle.buttonNormalBackgroundHover,
},
}}
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
index d205eb85d8f5d81148a9de54659e0895638bf08e..36423d2b52f92fd1ef0e237c0625156d105ea84f 100644
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
+++ b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
@@ -18,6 +18,7 @@ import {
parseISO,
isValid as isDateValid,
} from 'date-fns';
+import { css } from 'glamor';
import { pushModal } from 'loot-core/client/actions';
import { useCachedSchedules } from 'loot-core/src/client/data-hooks/schedules';
@@ -2528,18 +2529,20 @@ function notesTagFormatter(notes, onNotesTagClick) {
<Button
variant="bare"
key={i}
- style={({ isHovered }) => ({
- display: 'inline-flex',
- padding: '3px 7px',
- borderRadius: 16,
- userSelect: 'none',
- backgroundColor: theme.noteTagBackground,
- color: theme.noteTagText,
- cursor: 'pointer',
- ...(isHovered
- ? { backgroundColor: theme.noteTagBackgroundHover }
- : {}),
- })}
+ className={String(
+ css({
+ display: 'inline-flex',
+ padding: '3px 7px',
+ borderRadius: 16,
+ userSelect: 'none',
+ backgroundColor: theme.noteTagBackground,
+ color: theme.noteTagText,
+ cursor: 'pointer',
+ '&[data-hovered]': {
+ backgroundColor: theme.noteTagBackgroundHover,
+ },
+ }),
+ )}
onPress={() => {
onNotesTagClick?.(validTag);
}}
diff --git a/upcoming-release-notes/3453.md b/upcoming-release-notes/3453.md
new file mode 100644
index 0000000000000000000000000000000000000000..42a848f2a4a381eecb4622f8b158fd19a476209c
--- /dev/null
+++ b/upcoming-release-notes/3453.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix react-aria-components Button hover styles