diff --git a/src/app/components/Account/AccountHeader/index.test.tsx b/src/app/components/Account/AccountHeader/index.test.tsx index 442d386d7e9..21be09c88a0 100644 --- a/src/app/components/Account/AccountHeader/index.test.tsx +++ b/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'), diff --git a/src/app/components/Account/AccountPromotionalBanner/index.styles.tsx b/src/app/components/Account/AccountPromotionalBanner/index.styles.tsx index 3a960530cba..f01188dc1a1 100644 --- a/src/app/components/Account/AccountPromotionalBanner/index.styles.tsx +++ b/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, }, }), }; diff --git a/src/app/components/Account/AccountPromotionalBanner/index.tsx b/src/app/components/Account/AccountPromotionalBanner/index.tsx index e3105fc3583..0897eba4d8a 100644 --- a/src/app/components/Account/AccountPromotionalBanner/index.tsx +++ b/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]} > + {signInText} - @@ -111,7 +112,6 @@ const AccountPromotionalBanner = () => { {registerText} - diff --git a/src/app/components/PromotionalBanner/index.styles.ts b/src/app/components/PromotionalBanner/index.styles.ts index 00ac6378ab8..f7c0e4ce2e7 100644 --- a/src/app/components/PromotionalBanner/index.styles.ts +++ b/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`, }, diff --git a/src/app/components/ThemeProvider/getThemeConfig.ts b/src/app/components/ThemeProvider/getThemeConfig.ts index 885311f41e3..e0fbda30ccc 100644 --- a/src/app/components/ThemeProvider/getThemeConfig.ts +++ b/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, diff --git a/src/app/components/ThemeProvider/palette.ts b/src/app/components/ThemeProvider/palette.ts index 2f6463ea23b..6a17f18072b 100644 --- a/src/app/components/ThemeProvider/palette.ts +++ b/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'; diff --git a/src/app/components/icons/index.tsx b/src/app/components/icons/index.tsx index ff7dcd82cff..8f306f45881 100644 --- a/src/app/components/icons/index.tsx +++ b/src/app/components/icons/index.tsx @@ -258,14 +258,17 @@ export const DownArrowIcon = () => ( export const AccountIcon = ({ className }: { className?: string }) => ( ); diff --git a/src/app/lib/config/services/hindi.ts b/src/app/lib/config/services/hindi.ts index a581ead87b4..fada5ad8a44 100644 --- a/src/app/lib/config/services/hindi.ts +++ b/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: { diff --git a/src/app/models/types/theming.ts b/src/app/models/types/theming.ts index e74ad5096b2..ff08c6291a8 100644 --- a/src/app/models/types/theming.ts +++ b/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;