resolve unexpected visual differences with share button and contribut…

…ions epic buttons
guardian · Aug 27, 2024 · 77f86f7 · 77f86f7
1 parent 6283ec1
commit 77f86f7
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 33 deletions.
diff --git 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 ? <SvgCheckmark /> : <SvgShare />}
-			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={<SvgShare />}
-			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
@@ -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<Props> = (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 (
-			<ThemeProvider theme={contributionsTheme}>
-				<LinkButton
-					href={onClickAction}
-					icon={icon ?? <SvgArrowRightStraight />}
-					iconSide="right"
-					onClick={onButtonCtaClick}
-					target="_blank"
-					rel="noopener noreferrer"
-					priority={isTertiary ? 'primary' : priority}
-					css={
-						isTertiary
-							? [tertiaryButtonOverrides, cssOverrides]
-							: cssOverrides
-					}
-					{...props}
-				>
-					{children}
-				</LinkButton>
-			</ThemeProvider>
-		);
-	}
-	return (
-		<ThemeProvider theme={contributionsTheme}>
-			<DSButton
+			<LinkButton
+				href={onClickAction}
+				icon={icon ?? <SvgArrowRightStraight />}
 				iconSide="right"
-				icon={showArrow ? <SvgArrowRightStraight /> : 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<Props> = (allProps: Props) => {
 				{...props}
 			>
 				{children}
-			</DSButton>
-		</ThemeProvider>
+			</LinkButton>
+		);
+	}
+	return (
+		<DSButton
+			iconSide="right"
+			icon={showArrow ? <SvgArrowRightStraight /> : undefined}
+			onClick={(): void => onClickAction()}
+			priority={isTertiary ? 'primary' : priority}
+			theme={contributionsTheme.button}
+			css={
+				isTertiary
+					? [tertiaryButtonOverrides, cssOverrides]
+					: cssOverrides
+			}
+			{...props}
+		>
+			{children}
+		</DSButton>
 	);
 };