fix: ApplePaySvg unused styles removed, ButtonApplePay colors importa…

…nt specificity corrected
guardian · Nov 6, 2023 · f19d717 · f19d717
1 parent 8e16cfc
commit f19d717
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 18 deletions.
diff --git a/packages/modules/src/modules/epics/ApplePaySvg.tsx b/packages/modules/src/modules/epics/ApplePaySvg.tsx
@@ -8,10 +8,8 @@ const applePayStyles = css`
     height: 1.1rem;
     width: auto;
     margin-top: ${space[2]}px;
-    /* margin-left: ${space[1]}px; */
 
     ${from.tablet} {
-        /* margin-left: ${space[1]}px; */
         height: 1.25rem;
     }
 `;

diff --git a/packages/modules/src/modules/epics/ButtonApplePay.tsx b/packages/modules/src/modules/epics/ButtonApplePay.tsx
@@ -48,7 +48,7 @@ const linkButtonColorStyles = (buttonStyles: LinkButtonColourStyles): Serialized
     width: 100%;
     justify-content: center;
     padding: 0 10px;
-    border: 1px solid ${buttonStyles.border}!important;
+    border: 1px solid ${buttonStyles.border} !important;
     background-color: ${buttonStyles.background} !important;
     color: ${buttonStyles.text} !important;
 

diff --git a/packages/modules/src/modules/epics/ContributionsEpicButtons.tsx b/packages/modules/src/modules/epics/ContributionsEpicButtons.tsx
@@ -43,13 +43,6 @@ const svgPositionStyles = css`
     margin: ${space[1]}px -${space[2]}px;
 `;
 
-const buttonMarginApplePayStyles = (): SerializedStyles => css`
-    margin: ${space[1]}px;
-    ${from.desktop} {
-        width: 100%;
-    }
-`;
-
 const buttonMarginStyles = (showApplePay?: boolean): SerializedStyles => css`
     ${showApplePay
         ? `margin: ${space[1]}px; ${from.desktop} {width: 100%;}`
@@ -120,7 +113,6 @@ const SecondaryCtaButton = ({
     countryCode?: string;
     numArticles: number;
 }): JSX.Element | null => {
-    const buttonText = cta.text;
     const url = addRegionIdAndTrackingParamsToSupportUrl(
         cta.baseUrl,
         tracking,
@@ -130,13 +122,13 @@ const SecondaryCtaButton = ({
     return (
         <div css={buttonMarginStyles()}>
             <Button onClickAction={url} showArrow priority="secondary">
-                {buttonText}
+                {cta.text}
             </Button>
         </div>
     );
 };
 
-const PrimaryCtaButtonApple = ({
+const PrimaryCtaButtonApplePay = ({
     cta,
     tracking,
     countryCode,
@@ -167,7 +159,7 @@ const PrimaryCtaButtonApple = ({
     );
 
     return (
-        <div css={buttonMarginApplePayStyles()}>
+        <div css={buttonMarginStyles(true)}>
             <ButtonApplePay
                 onClickAction={urlWithRegionAndTracking}
                 icon={<ApplePaySvg cssOverrides={svgPositionStyles} />}
@@ -180,7 +172,7 @@ const PrimaryCtaButtonApple = ({
     );
 };
 
-const SecondaryCtaButtonApple = ({
+const SecondaryCtaButtonApplePay = ({
     cta,
     tracking,
     numArticles,
@@ -199,7 +191,7 @@ const SecondaryCtaButtonApple = ({
         countryCode,
     );
     return (
-        <div css={buttonMarginApplePayStyles()}>
+        <div css={buttonMarginStyles(true)}>
             <ButtonApplePay
                 onClickAction={url}
                 icon={<PaymentCardSvg cssOverrides={svgPositionStyles} />}
@@ -287,15 +279,15 @@ export const ContributionsEpicButtons = ({
                 <>
                     {showApplePayButton ? (
                         <>
-                            <PrimaryCtaButtonApple
+                            <PrimaryCtaButtonApplePay
                                 cta={getCta(cta)}
                                 tracking={tracking}
                                 numArticles={numArticles}
                                 amountsTestName={amountsTestName}
                                 amountsVariantName={amountsVariantName}
                                 countryCode={countryCode}
                             />
-                            <SecondaryCtaButtonApple
+                            <SecondaryCtaButtonApplePay
                                 cta={getCta(cta)}
                                 tracking={tracking}
                                 countryCode={countryCode}