Frontend/i18n: Localize app store badges (#8673)

Author: tristanlabelle

app/web/components/Footer/Footer.tsx

@@ -257,7 +257,7 @@ export default function Footer({ bottomMargin }: { bottomMargin?: string }) {
                 rel="noopener noreferrer"
               >
                 <img
-                  src="/img/Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg"
+                  src={`/img/app-store-badge/${locale}.svg`}
                   alt={t("app_store_badge_a11y")}
                   style={{ height: "26px", width: "auto", display: "block" }}
                 />
@@ -267,26 +267,11 @@ export default function Footer({ bottomMargin }: { bottomMargin?: string }) {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <div
-                  style={{
-                    height: "26px",
-                    width: "87.75px",
-                    overflow: "hidden",
-                    position: "relative",
-                  }}
-                >
-                  <img
-                    src="/img/GetItOnGooglePlay_Badge_Web_color_English.svg"
-                    alt={t("google_play_badge_a11y")}
-                    style={{
-                      height: "39px",
-                      width: "auto",
-                      position: "absolute",
-                      top: "-6.5px",
-                      left: "-6.5px",
-                    }}
-                  />
-                </div>
+                <img
+                  src={`/img/google-play-badge/${locale}.svg`}
+                  alt={t("google_play_badge_a11y")}
+                  style={{ height: "26px", width: "auto", display: "block" }}
+                />
               </a>
             </Box>
             <StyledSocialIconsContainer>

app/web/features/auth/verification/StrongVerificationPage.tsx

@@ -24,7 +24,10 @@ import { service } from "service";
 import { theme } from "theme";
 
 export default function StrongVerificationInstructions() {
-  const { t } = useTranslation([GLOBAL, AUTH]);
+  const {
+    t,
+    i18n: { language: locale },
+  } = useTranslation([GLOBAL, AUTH]);
 
   const {
     error,
@@ -151,7 +154,7 @@ export default function StrongVerificationInstructions() {
                 rel="noopener noreferrer"
               >
                 <img
-                  src="/img/Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg"
+                  src={`/img/app-store-badge/${locale}.svg`}
                   alt={t(
                     "auth:strong_verification.instructions.download_app_store",
                   )}
@@ -164,11 +167,11 @@ export default function StrongVerificationInstructions() {
                 rel="noopener noreferrer"
               >
                 <img
-                  src="/img/GetItOnGooglePlay_Badge_Web_color_English.svg"
+                  src={`/img/google-play-badge/${locale}.svg`}
                   alt={t(
                     "auth:strong_verification.instructions.download_google_play",
                   )}
-                  style={{ height: "45px", width: "auto" }}
+                  style={{ height: "30px", width: "auto" }}
                 />
               </a>
             </Box>

app/web/features/landing/CouchersIntroduction.tsx

@@ -12,13 +12,10 @@ import {
 import { theme } from "theme";
 
 function AppStoreBadges({ appStoreHeight = 38 }: { appStoreHeight?: number }) {
-  const { t } = useTranslation(GLOBAL);
-  // Google Play SVG (viewBox 155×60) has 10px internal padding on all sides;
-  // content rect is x=10 y=10 w=135 h=40. Render at 1.5× so the content
-  // matches appStoreHeight, then clip the transparent padding with a wrapper.
-  const googlePlayHeight = appStoreHeight * 1.5;
-  const googlePlayPadding = appStoreHeight / 4; // 10/40 × appStoreHeight
-  const googlePlayContentWidth = appStoreHeight * 3.375; // 135/40 × appStoreHeight
+  const {
+    t,
+    i18n: { language: locale },
+  } = useTranslation(GLOBAL);
   return (
     <Stack
       direction="row"
@@ -31,7 +28,7 @@ function AppStoreBadges({ appStoreHeight = 38 }: { appStoreHeight?: number }) {
     >
       <a href={couchersAppStoreURL} target="_blank" rel="noopener noreferrer">
         <img
-          src="/img/Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg"
+          src={`/img/app-store-badge/${locale}.svg`}
           alt={t("app_store_badge_a11y")}
           style={{
             height: `${appStoreHeight}px`,
@@ -41,26 +38,15 @@ function AppStoreBadges({ appStoreHeight = 38 }: { appStoreHeight?: number }) {
         />
       </a>
       <a href={couchersGooglePlayURL} target="_blank" rel="noopener noreferrer">
-        <div
+        <img
+          src={`/img/google-play-badge/${locale}.svg`}
+          alt={t("google_play_badge_a11y")}
           style={{
             height: `${appStoreHeight}px`,
-            width: `${googlePlayContentWidth}px`,
-            overflow: "hidden",
-            position: "relative",
+            width: "auto",
+            display: "block",
           }}
-        >
-          <img
-            src="/img/GetItOnGooglePlay_Badge_Web_color_English.svg"
-            alt={t("google_play_badge_a11y")}
-            style={{
-              height: `${googlePlayHeight}px`,
-              width: "auto",
-              position: "absolute",
-              top: `-${googlePlayPadding}px`,
-              left: `-${googlePlayPadding}px`,
-            }}
-          />
-        </div>
+        />
       </a>
     </Stack>
   );