From 542596949bfd7acccb0222a4fa804106b58c2043 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Mon, 23 Sep 2024 00:31:42 -0700 Subject: [PATCH 1/9] Fix button2 styles --- .../src/components/common/Button2.tsx | 89 ++++++++++--------- .../components/mobile/MobileBackButton.tsx | 4 +- .../src/components/mobile/MobileNavTabs.tsx | 2 +- .../mobile/accounts/AccountTransactions.jsx | 33 +++++-- .../components/mobile/accounts/Accounts.jsx | 4 +- .../components/mobile/budget/BudgetTable.jsx | 66 +++++++------- .../transactions/AddTransactionButton.tsx | 4 +- .../transactions/FocusableAmountInput.tsx | 2 +- 8 files changed, 116 insertions(+), 88 deletions(-) diff --git a/packages/desktop-client/src/components/common/Button2.tsx b/packages/desktop-client/src/components/common/Button2.tsx index 7921dbccb69..cd4bf5aeb63 100644 --- a/packages/desktop-client/src/components/common/Button2.tsx +++ b/packages/desktop-client/src/components/common/Button2.tsx @@ -1,5 +1,6 @@ import React, { forwardRef, + useCallback, type ComponentPropsWithoutRef, type ComponentType, type ReactNode, @@ -104,6 +105,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, @@ -146,47 +154,48 @@ export const Button = forwardRef( 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: ReactAriaButtonClassNameFn = useCallback( + 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]': _getHoveredStyles(variant), + '&[data-pressed]': _getActiveStyles(variant, bounce), + }), + ...(Icon ? { paddingLeft: 0 } : {}), + }), + ), + [Icon, bounce, variant, variantWithDisabled], + ); - const buttonClassName: ReactAriaButtonClassNameFn = renderProps => - typeof props.className === 'function' - ? props.className(renderProps) - : props.className || ''; + const className = props.className; + const buttonClassName: ReactAriaButtonClassNameFn = useCallback( + ( + renderProps: ReactAriaButtonRenderProps & { + defaultClassName: string | undefined; + }, + ) => + typeof className === 'function' + ? className(renderProps) + : className || '', + [className], + ); return (
)} - - {`${account.closed ? 'Closed: ' : ''}${account.name}`} - + + {`${account.closed ? 'Closed: ' : ''}${account.name}`} + + ); } diff --git a/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx b/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx index 2649951427c..2b8f5664d81 100644 --- a/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx +++ b/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx @@ -177,9 +177,9 @@ function AccountList({ justifyContent: 'center', color: theme.mobileHeaderText, margin: 10, - ':hover': { + '&[data-pressed]': { color: theme.mobileHeaderText, - background: theme.mobileHeaderTextHover, + backgroundColor: theme.mobileHeaderTextHover, }, }), )} diff --git a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx index ebe158289ac..b230560dbcf 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({ - + - { - e.stopPropagation(); + From a2b097cbfad21f98269578a3c5a4041926f90c55 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Mon, 23 Sep 2024 10:08:08 -0700 Subject: [PATCH 7/9] Fix lint errors --- .../desktop-client/src/components/mobile/MobileBackButton.tsx | 4 +--- .../src/components/mobile/accounts/AccountTransactions.jsx | 1 - .../src/components/mobile/accounts/Accounts.jsx | 2 -- .../components/mobile/transactions/AddTransactionButton.tsx | 3 --- 4 files changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/desktop-client/src/components/mobile/MobileBackButton.tsx b/packages/desktop-client/src/components/mobile/MobileBackButton.tsx index a450745d0cf..7e1c5bd6387 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'; diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx index 0fd1fb31622..594025e3577 100644 --- a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx +++ b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx @@ -7,7 +7,6 @@ import React, { } from 'react'; import { useDispatch } from 'react-redux'; -import { css } from 'glamor'; import { useDebounceCallback } from 'usehooks-ts'; import { diff --git a/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx b/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx index 7a1591eb0f9..56bde3b8331 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'; diff --git a/packages/desktop-client/src/components/mobile/transactions/AddTransactionButton.tsx b/packages/desktop-client/src/components/mobile/transactions/AddTransactionButton.tsx index b3c58e2b9c1..edaefb73e14 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 = { From 8d8e46b736428b729d30a3749333f9ef0498b290 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Mon, 23 Sep 2024 10:19:09 -0700 Subject: [PATCH 8/9] [chore] Update README --- upcoming-release-notes/3491.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/upcoming-release-notes/3491.md b/upcoming-release-notes/3491.md index 6eb3f1276c4..bdd9b38b7ee 100644 --- a/upcoming-release-notes/3491.md +++ b/upcoming-release-notes/3491.md @@ -3,4 +3,4 @@ category: Bugfix authors: [joel-jeremy] --- -Fix Button2 styles. +Fix mobile page header button styles. From fd54c52e01b6c1597d9d95c2010e2c5a40756ef1 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Tue, 24 Sep 2024 12:43:53 -0700 Subject: [PATCH 9/9] Remove Icon --- .../src/components/common/Button2.tsx | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/packages/desktop-client/src/components/common/Button2.tsx b/packages/desktop-client/src/components/common/Button2.tsx index b78ed71597d..694429d573c 100644 --- a/packages/desktop-client/src/components/common/Button2.tsx +++ b/packages/desktop-client/src/components/common/Button2.tsx @@ -2,9 +2,7 @@ import React, { forwardRef, useMemo, type ComponentPropsWithoutRef, - type ComponentType, type ReactNode, - type SVGProps, } from 'react'; import { type ButtonRenderProps as ReactAriaButtonRenderProps, @@ -135,7 +133,6 @@ const _getActiveStyles = ( type ButtonProps = ComponentPropsWithoutRef & { variant?: ButtonVariant; bounce?: boolean; - Icon?: ComponentType>; children?: ReactNode; }; @@ -143,13 +140,7 @@ type ButtonVariant = 'normal' | 'primary' | 'bare' | 'menu' | 'menuSelected'; export const Button = forwardRef( (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; @@ -174,10 +165,9 @@ export const Button = forwardRef( ...styles.smallText, '&[data-hovered]': _getHoveredStyles(variant), '&[data-pressed]': _getActiveStyles(variant, bounce), - ...(Icon ? { paddingLeft: 0 } : {}), }), ), - [Icon, bounce, variant, variantWithDisabled], + [bounce, variant, variantWithDisabled], ); const className = restProps.className;