diff --git a/packages/loot-design/src/components/budget/rollover/rollover-components.js b/packages/loot-design/src/components/budget/rollover/rollover-components.js index ecd82108b7c8b0796b9ca9d88503995a6e0583df..62f37e3bb39f4499d3cd40c604807777a7c1ef13 100644 --- a/packages/loot-design/src/components/budget/rollover/rollover-components.js +++ b/packages/loot-design/src/components/budget/rollover/rollover-components.js @@ -426,7 +426,6 @@ export function IncomeCategoryMonth({ name="received" width="flex" borderColor={colors.border} - textAlign="right" style={[ { paddingRight: MONTH_RIGHT_PADDING, textAlign: 'right' }, isLast && { borderBottomWidth: 0 } diff --git a/packages/loot-design/src/components/common.js b/packages/loot-design/src/components/common.js index 7403dcf98d1f3e5998b947a02fd48da9502c6a0b..3c69be92d8e0a9551fb4605cc192681871ab199c 100644 --- a/packages/loot-design/src/components/common.js +++ b/packages/loot-design/src/components/common.js @@ -111,18 +111,27 @@ export function AnchorLink({ ); } -export const ExternalLink = React.forwardRef((props, ref) => { - function onClick(e) { - e.preventDefault(); - window.Actual.openURLInBrowser(props.href); - } +export const ExternalLink = React.forwardRef( + ({ asAnchor, children, ...props }, ref) => { + function onClick(e) { + e.preventDefault(); + window.Actual.openURLInBrowser(props.href); + } - if (props.asAnchor) { - // eslint-disable-next-line - return <a ref={ref} {...props} onClick={onClick} />; + if (asAnchor) { + return ( + <a ref={ref} {...props} onClick={onClick}> + {children} + </a> + ); + } + return ( + <Button ref={ref} bare {...props} onClick={onClick}> + {children} + </Button> + ); } - return <Button ref={ref} bare {...props} onClick={onClick} />; -}); +); function ButtonLink_({ history,