[WS-2236] Upgrade Account Promotional Banner to Production‑Ready Version

src/app/components/Account/AccountHeader/index.test.tsx

@@ -32,7 +32,7 @@ describe('AccountHeader', () => {
   it('shows Sign in when signed out and account toggle is enabled for service', async () => {
     renderWithProviders();
 
-    const link = await screen.findByRole('link', { name: 'Sign In' });
+    const link = await screen.findByRole('link', { name: 'साइन‑इन' });
     expect(link).toHaveAttribute(
       'href',
       expect.stringContaining('https://example.com/signin'),

src/app/components/Account/AccountPromotionalBanner/index.styles.tsx

@@ -1,4 +1,5 @@
 import { Theme, css } from '@emotion/react';
+import pixelsToRem from '#app/utilities/pixelsToRem';
 
 export default {
   callToActionLink: ({ mq }) =>
@@ -15,27 +16,55 @@ export default {
       },
     }),
 
-  buttonSeparatorText: ({ palette }: Theme) =>
+  buttonSeparatorText: ({ palette, spacings }: Theme) =>
     css({
       color: palette.WHITE,
+      padding: `${spacings.HALF}rem`,
     }),
 
-  signInLink: ({ palette }: Theme) =>
+  signInLink: ({ palette, spacings }: Theme) =>
     css({
+      height: `${pixelsToRem(44)}rem`,
+      padding: `${spacings.HALF}rem`,
       color: palette.WHITE,
+      textDecorationThickness: `${pixelsToRem(1)}rem`,
       backgroundColor: palette.SERVICE_NEUTRAL_CORE,
       '&:hover, &:focus': {
         backgroundColor: palette.SERVICE_NEUTRAL_DARK,
         color: palette.WHITE,
+        textDecorationThickness: `${pixelsToRem(2)}rem`,
+      },
+      '&:visited': {
+        color: palette.WHITE,
+      },
+    }),
+
+  accountIcon: ({ mq, spacings }: Theme) =>
+    css({
+      fill: 'currentColor',
+      width: `${pixelsToRem(14)}rem`,
+      height: `${pixelsToRem(14)}rem`,
+      alignSelf: 'center',
+      marginInlineEnd: `${spacings.HALF}rem`,
+      [mq.FORCED_COLOURS]: {
+        fill: 'ButtonText',
       },
     }),
   registerLink: ({ palette }: Theme) =>
     css({
-      color: palette.BLACK,
-      backgroundColor: palette.WHITE,
-      '&:hover, &:focus': {
-        backgroundColor: palette.GREY_2,
-        color: palette.BLACK,
+      height: `${pixelsToRem(44)}rem`,
+      color: palette.WHITE,
+      textDecoration: 'underline',
+      textDecorationThickness: `${pixelsToRem(1)}rem`,
+      padding: 0,
+      cursor: 'pointer',
+      '&&:hover, &&:focus': {
+        textDecorationThickness: `${pixelsToRem(2)}rem`,
+        color: palette.NEUTRAL_LIGHT,
+        textDecorationColor: palette.NEUTRAL_LIGHT,
+      },
+      '&:visited': {
+        color: palette.WHITE,
       },
     }),
 };

src/app/components/Account/AccountPromotionalBanner/index.tsx

@@ -2,6 +2,7 @@ import { use, useState } from 'react';
 import Paragraph from '#app/components/Paragraph';
 import PromotionalBanner from '#app/components/PromotionalBanner';
 import CallToActionLink from '#app/components/CallToActionLink';
+import { AccountIcon } from '#app/components/icons';
 import { AccountContext } from '#contexts/AccountContext';
 import { ServiceContext } from '#app/contexts/ServiceContext';
 import useHydrationDetection from '#app/hooks/useHydrationDetection';
@@ -92,9 +93,9 @@ const AccountPromotionalBanner = () => {
         css={[styles.callToActionLink, styles.signInLink]}
       >
         <CallToActionLink.ButtonLikeWrapper>
+          <AccountIcon css={styles.accountIcon} />
           <CallToActionLink.Text shouldUnderlineOnHoverFocus>
             {signInText}
-            <CallToActionLink.Chevron />
           </CallToActionLink.Text>
         </CallToActionLink.ButtonLikeWrapper>
       </CallToActionLink>
@@ -111,7 +112,6 @@ const AccountPromotionalBanner = () => {
         <CallToActionLink.ButtonLikeWrapper>
           <CallToActionLink.Text shouldUnderlineOnHoverFocus>
             {registerText}
-            <CallToActionLink.Chevron />
           </CallToActionLink.Text>
         </CallToActionLink.ButtonLikeWrapper>
       </CallToActionLink>

src/app/components/PromotionalBanner/index.styles.ts

@@ -31,6 +31,10 @@ const styles = {
       paddingInlineStart: `${spacings.FULL}rem`,
       paddingInlineEnd: `${pixelsToRem(52)}rem`,
 
+      [mq.GROUP_1_MIN_WIDTH]: {
+        paddingBottom: `${spacings.TRIPLE}rem`,
+      },
+
       [mq.GROUP_2_MIN_WIDTH]: {
         paddingInlineStart: `${spacings.DOUBLE}rem`,
       },

src/app/components/ThemeProvider/getThemeConfig.ts

@@ -46,6 +46,7 @@ import {
   POSTBOX,
   POSTBOX_30,
   RHINO,
+  NEUTRAL_LIGHT,
   SERVICE_NEUTRAL_CORE,
   SERVICE_NEUTRAL_DARK,
   SHADOW,
@@ -253,6 +254,7 @@ export default ({
       POSTBOX,
       POSTBOX_30,
       RHINO,
+      NEUTRAL_LIGHT,
       SERVICE_NEUTRAL_CORE,
       SERVICE_NEUTRAL_DARK,
       SHADOW,

src/app/components/ThemeProvider/palette.ts

@@ -53,5 +53,6 @@ export const SPORT_YELLOW_30 = '#BB9A31';
 export const STONE = '#D5D0CD';
 export const STORM = '#404040';
 export const SUCCESS_CORE = '#148A00';
+export const NEUTRAL_LIGHT = '#73B5FF';
 export const WEATHER_BLUE = '#067EB3';
 export const WHITE = '#FFFFFF';

src/app/components/icons/index.tsx

@@ -258,14 +258,17 @@ export const DownArrowIcon = () => (
 
 export const AccountIcon = ({ className }: { className?: string }) => (
   <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
+    viewBox="0 0 32 32"
+    width="20"
+    height="18"
     xmlns="http://www.w3.org/2000/svg"
     className={className}
     focusable="false"
     aria-hidden="true"
   >
-    <path d="M12 17.2501C9.525 17.2501 7.65 15.3751 7.65 12.9001C7.65 10.4251 9.525 8.5501 12 8.5501C14.4 8.5501 16.35 10.4251 16.35 12.9001C16.35 15.3751 14.4 17.2501 12 17.2501ZM23.25 12.9751C23.25 6.6751 18.3 1.7251 12 1.7251C5.625 1.7251 0.75 6.6751 0.75 12.9751C0.75 16.8751 2.625 20.3251 5.55 22.2751C6.975 20.1751 9.3 18.8251 12 18.8251C14.7 18.8251 17.025 20.1751 18.45 22.2751C21.375 20.2501 23.25 16.8751 23.25 12.9751Z" />
+    <path
+      fillRule="evenodd"
+      d="M16 17.5a7.88 7.88 0 0 1-8-7.75A7.88 7.88 0 0 1 16 2a7.88 7.88 0 0 1 8 7.75 7.88 7.88 0 0 1-8 7.75M2 30c0-5.883 7.519-10 14.014-10C22.48 20 30 24.12 30 29.994c0 .005-28 .007-28 .005"
+    />
   </svg>
 );

src/app/lib/config/services/hindi.ts

@@ -109,16 +109,16 @@ export const service: DefaultServiceConfig = {
         title: 'File Download',
       },
       account: {
-        signIn: 'Sign In',
+        signIn: 'साइन‑इन',
         forYou: 'Your Account',
-        register: 'Register',
+        register: 'रजिस्टर करें',
       },
       accountPromoBanner: {
-        title: 'Discover your BBC',
+        title: 'अपना BBC खोजिए',
         description:
-          'Sign in or create an account to watch, listen and join in',
+          'देखने, सुनने और भाग लेने के लिए साइन‑इन करें या खाता बनाएं',
         closeLabel: 'Close',
-        buttonSeparatorText: 'or',
+        buttonSeparatorText: 'या',
       },
       gist: 'सारांश',
       error: {

src/app/models/types/theming.ts

@@ -52,6 +52,7 @@ interface Palette extends BrandPalette {
   LUNAR_LIGHT: string;
   METAL: string;
   MIDNIGHT_BLACK: string;
+  NEUTRAL_LIGHT: string;
   NEWSROUND_PURPLE: string;
   NEWSROUND_PURPLE_30: string;
   OAT_LHT: string;