diff --git a/dotcom-rendering/src/components/ShareButton.importable.tsx b/dotcom-rendering/src/components/ShareButton.importable.tsx index 2a67691e23..da0c6a9d1b 100644 --- a/dotcom-rendering/src/components/ShareButton.importable.tsx +++ b/dotcom-rendering/src/components/ShareButton.importable.tsx @@ -118,12 +118,12 @@ export const CopyNativeShareButton = ({ priority="tertiary" iconSide="left" icon={isCopied ? : } - css={[ + cssOverrides={[ ...(isCopied ? [copiedButtonStyles(sizeXSmall)] : [buttonStyles(sizeXSmall)]), sharedButtonStyles(sizeXSmall), - isLiveBlogMeta && liveBlogMobileMeta(isCopied), + isLiveBlogMeta ? liveBlogMobileMeta(isCopied) : css``, ]} > {isCopied ? 'Link copied' : 'Share'} @@ -149,10 +149,10 @@ export const EmailLink = ({ priority="tertiary" iconSide="left" icon={} - css={[ + cssOverrides={[ buttonStyles(sizeXSmall), sharedButtonStyles(sizeXSmall), - isLiveBlogMeta && liveBlogMobileMeta(false), + isLiveBlogMeta ? liveBlogMobileMeta(false) : css``, ]} > Share diff --git a/dotcom-rendering/src/components/marketing/epics/EpicButton.tsx b/dotcom-rendering/src/components/marketing/epics/EpicButton.tsx index 8db2b1eb86..f58a7befcc 100644 --- a/dotcom-rendering/src/components/marketing/epics/EpicButton.tsx +++ b/dotcom-rendering/src/components/marketing/epics/EpicButton.tsx @@ -5,7 +5,6 @@ */ import type { SerializedStyles } from '@emotion/react'; import { css } from '@emotion/react'; -import { ThemeProvider } from '@emotion/react'; import type { OphanComponentEvent } from '@guardian/libs'; import { palette } from '@guardian/source/foundations'; import { @@ -97,34 +96,15 @@ export const EpicButton: ReactComponent = (allProps: Props) => { // So we'll map that to 'primary' and apply a CSS override on both of // them so they get the same styles for 'tertiary' priority return ( - - } - iconSide="right" - onClick={onButtonCtaClick} - target="_blank" - rel="noopener noreferrer" - priority={isTertiary ? 'primary' : priority} - css={ - isTertiary - ? [tertiaryButtonOverrides, cssOverrides] - : cssOverrides - } - {...props} - > - {children} - - - ); - } - return ( - - } iconSide="right" - icon={showArrow ? : undefined} - onClick={(): void => onClickAction()} + onClick={onButtonCtaClick} + target="_blank" + rel="noopener noreferrer" priority={isTertiary ? 'primary' : priority} + theme={contributionsTheme.button} css={ isTertiary ? [tertiaryButtonOverrides, cssOverrides] @@ -133,7 +113,24 @@ export const EpicButton: ReactComponent = (allProps: Props) => { {...props} > {children} - - + + ); + } + return ( + : undefined} + onClick={(): void => onClickAction()} + priority={isTertiary ? 'primary' : priority} + theme={contributionsTheme.button} + css={ + isTertiary + ? [tertiaryButtonOverrides, cssOverrides] + : cssOverrides + } + {...props} + > + {children} + ); };