tweaks

guardian · Sep 23, 2021 · f48a505 · f48a505
1 parent 8df6777
commit f48a505
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 9 deletions.
diff --git a/packages/modules/src/modules/banners/investigationsMoment/InvestigationsMomentBanner.tsx b/packages/modules/src/modules/banners/investigationsMoment/InvestigationsMomentBanner.tsx
@@ -34,15 +34,20 @@ const styles = {
         top: 0;
         right: 0;
         width: 100px;
+        height: 80px;
 
         ${from.tablet} {
             bottom: 0;
             width: auto;
+            height: auto;
         }
 
         svg {
             display: block;
-            height: 90%;
+
+            ${from.tablet} {
+                height: 90%;
+            }
 
             ${from.desktop} {
                 height: 95%;
@@ -65,8 +70,8 @@ const styles = {
         }
 
         ${from.wide} {
-            height: 120px;
-            width: 1200px;
+            height: 125px;
+            width: 1250px;
             right: auto;
         }
     `,
@@ -159,8 +164,8 @@ function InvestigationsMomentBanner({
 
             <Hide above="tablet">
                 <div css={styles.desktopShadowRight}>
-                    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-                        <polygon points="0 0, 130 0, 130 100" />
+                    <svg viewBox="0 0 100 80" xmlns="http://www.w3.org/2000/svg">
+                        <polygon points="0 0, 100 0, 100 80" />
                     </svg>
                 </div>
             </Hide>

diff --git a/...modules/banners/investigationsMoment/components/InvestigationsMomentBannerCloseButton.tsx b/...modules/banners/investigationsMoment/components/InvestigationsMomentBannerCloseButton.tsx
@@ -20,13 +20,23 @@ const styles = {
         }
     `,
     closeButton: css`
+        border: 1px solid ${neutral[100]};
         background-color: ${neutral[100]};
         color: ${neutral[0]};
 
+        &:hover {
+            background-color: ${neutral[0]};
+            color: ${neutral[100]};
+        }
+
         ${from.tablet} {
             background-color: ${neutral[0]};
             color: ${neutral[100]};
-            border: 1px solid ${neutral[100]};
+
+            &:hover {
+                background-color: ${neutral[100]};
+                color: ${neutral[0]};
+            }
         }
     `,
 };

diff --git a/...es/src/modules/banners/investigationsMoment/components/InvestigationsMomentBannerCtas.tsx b/...es/src/modules/banners/investigationsMoment/components/InvestigationsMomentBannerCtas.tsx
@@ -26,13 +26,37 @@ const styles = {
             }
         }
     `,
+    mobilePrimaryCta: css`
+        color: ${neutral[0]};
+
+        &:hover {
+            background-color: ${neutral[100]};
+        }
+    `,
     desktopPrimaryCta: css`
+        border: 1px solid ${news[400]};
         background-color: ${news[400]};
         color: ${neutral[100]};
+
+        ${from.tablet} {
+            &:hover {
+                background-color: ${neutral[100]};
+                color: ${news[400]};
+            }
+        }
     `,
     secondaryCta: css`
         background-color: ${neutral[0]};
         border: 1px solid ${neutral[100]};
+
+        &:hover {
+            background-color: ${neutral[100]};
+            color: ${neutral[0]};
+        }
+
+        ${from.tablet} {
+            border: 1px solid ${neutral[0]};
+        }
     `,
 };
 
@@ -67,6 +91,7 @@ export function InvestigationsMomentBannerCtas({
                                     <LinkButton
                                         href={mobilePrimaryCta.ctaUrl}
                                         onClick={onPrimaryCtaClick}
+                                        cssOverrides={styles.mobilePrimaryCta}
                                         size="small"
                                         priority="primary"
                                     >
@@ -165,9 +190,9 @@ function ButtonWithPaymentIcons({ button }: ButtonWithPaymentIconProps) {
 
             <div css={buttonWithPaymentIconStyles.paymentIconsContainer}>
                 <img
-                    width={422}
-                    height={60}
-                    src="https://assets.guim.co.uk/images/acquisitions/2db3a266287f452355b68d4240df8087/payment-methods.png"
+                    width={497}
+                    height={88}
+                    src="https://media.guim.co.uk/40745a456b9da26eccca15a615dd0e406839ceb6/0_0_1549_274/500.png"
                     alt="Accepted payment methods: Visa, Mastercard, American Express and PayPal"
                 />
             </div>