Switch to AppButton button in notification banner action button

3 files changed, 38 insertions, 29 deletions

diff --git a/gui/src/renderer/components/AppButton.tsx b/gui/src/renderer/components/AppButton.tsx
index f35f7b2049..d99d1494f5 100644
--- a/gui/src/renderer/components/AppButton.tsx
+++ b/gui/src/renderer/components/AppButton.tsx
@@ -3,12 +3,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState }
 import styled from 'styled-components';
 import { colors } from '../../config.json';
 import { useMounted } from '../lib/utilityHooks';
-import {
-  StyledButton,
-  StyledButtonContent,
-  StyledLabel,
-  StyledLabelContainer,
-} from './AppButtonStyles';
+import { StyledButtonContent, StyledLabel, StyledLabelContainer } from './AppButtonStyles';
 import ImageView from './ImageView';
 
 interface IButtonContext {
@@ -52,9 +47,8 @@ export interface IProps extends React.HTMLAttributes<HTMLButtonElement> {
 }
 
 const BaseButton = React.memo(function BaseButtonT(props: IProps) {
-  const { children, disabled, onClick, ...otherProps } = props;
+  const { children, ...otherProps } = props;
 
-  const blockingContext = useContext(BlockingContext);
   const [textAdjustment, setTextAdjustment] = useState(0);
   const buttonRef = useRef() as React.RefObject<HTMLButtonElement>;
   const textRef = useRef() as React.RefObject<HTMLDivElement>;
@@ -82,21 +76,47 @@ const BaseButton = React.memo(function BaseButtonT(props: IProps) {
 
   return (
     <ButtonContext.Provider value={contextValue}>
-      <StyledButton
-        ref={buttonRef}
-        disabled={blockingContext.disabled || disabled}
-        onClick={blockingContext.onClick ?? onClick}
-        {...otherProps}>
+      <StyledSimpleButton ref={buttonRef} {...otherProps}>
         <StyledButtonContent>
           {React.Children.map(children, (child) =>
             typeof child === 'string' ? <Label>{child as string}</Label> : child,
           )}
         </StyledButtonContent>
-      </StyledButton>
+      </StyledSimpleButton>
     </ButtonContext.Provider>
   );
 });
 
+function SimpleButtonT(
+  props: React.ButtonHTMLAttributes<HTMLButtonElement>,
+  ref: React.Ref<HTMLButtonElement>,
+) {
+  const blockingContext = useContext(BlockingContext);
+
+  return (
+    <button
+      ref={ref}
+      {...props}
+      disabled={props.disabled || blockingContext.disabled}
+      onClick={blockingContext.onClick ?? props.onClick}>
+      {props.children}
+    </button>
+  );
+}
+
+export const SimpleButton = React.memo(React.forwardRef(SimpleButtonT));
+
+const StyledSimpleButton = styled(SimpleButton)({
+  display: 'flex',
+  cursor: 'default',
+  borderRadius: 4,
+  border: 'none',
+  padding: 0,
+  ':disabled': {
+    opacity: 0.5,
+  },
+});
+
 interface IBlockingContext {
   disabled?: boolean;
   onClick?: () => Promise<void>;
diff --git a/gui/src/renderer/components/AppButtonStyles.tsx b/gui/src/renderer/components/AppButtonStyles.tsx
index fd77e231d8..f851bf69c5 100644
--- a/gui/src/renderer/components/AppButtonStyles.tsx
+++ b/gui/src/renderer/components/AppButtonStyles.tsx
@@ -13,17 +13,6 @@ export const StyledLabel = styled.span(buttonText, {
   textAlign: 'center',
 });
 
-export const StyledButton = styled.button({
-  display: 'flex',
-  cursor: 'default',
-  borderRadius: 4,
-  border: 'none',
-  padding: 0,
-  ':disabled': {
-    opacity: 0.5,
-  },
-});
-
 export const StyledButtonContent = styled.div({
   display: 'flex',
   flex: 1,
diff --git a/gui/src/renderer/components/NotificationBanner.tsx b/gui/src/renderer/components/NotificationBanner.tsx
index 235ab6de2e..c9354be7ac 100644
--- a/gui/src/renderer/components/NotificationBanner.tsx
+++ b/gui/src/renderer/components/NotificationBanner.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { InAppNotificationIndicatorType } from '../../shared/notifications/notification';
-import { BlockingButton } from './AppButton';
+import * as AppButton from './AppButton';
 import ImageView from './ImageView';
 
 const NOTIFICATION_AREA_ID = 'notification-area';
@@ -32,7 +32,7 @@ export function NotificationSubtitle(props: INotificationSubtitleProps) {
   return React.Children.count(props.children) > 0 ? <NotificationSubtitleText {...props} /> : null;
 }
 
-export const NotificationOpenLinkActionButton = styled.button({
+export const NotificationOpenLinkActionButton = styled(AppButton.SimpleButton)({
   flex: 1,
   justifyContent: 'center',
   cursor: 'default',
@@ -54,7 +54,7 @@ interface INotifcationOpenLinkActionProps {
 
 export function NotificationOpenLinkAction(props: INotifcationOpenLinkActionProps) {
   return (
-    <BlockingButton onClick={props.onClick}>
+    <AppButton.BlockingButton onClick={props.onClick}>
       <NotificationOpenLinkActionButton
         aria-describedby={NOTIFICATION_AREA_ID}
         aria-label={messages.gettext('Open URL')}>
@@ -65,7 +65,7 @@ export function NotificationOpenLinkAction(props: INotifcationOpenLinkActionProp
           source="icon-extLink"
         />
       </NotificationOpenLinkActionButton>
-    </BlockingButton>
+    </AppButton.BlockingButton>
   );
 }