Merge pull request #11372 from bbc/WSTEAM1-807-live-label-alignment-b…

…ut-better WSTEAM1-807 Live label pulse vertical alignment for all fonts V2 new and improved
bbc · Mar 5, 2024 · 8c12c6d · 8c12c6d
2 parents 4143e79 + 88975cb
commit 8c12c6d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/LiveLabelHeader/index.styles.ts b/ws-nextjs-app/pages/[service]/live/[id]/Header/LiveLabelHeader/index.styles.ts
@@ -1,6 +1,5 @@
 import { css, Theme } from '@emotion/react';
 import { HALF, QUADRUPLE } from '#app/components/ThemeProvider/spacings';
-import pixelsToRem from '#app/utilities/pixelsToRem';
 
 const PULSE_END_MARGIN = HALF;
 const PULSE_SIZE_3_4 = QUADRUPLE;
@@ -12,15 +11,13 @@ const styles = {
       width: `${spacings.HALF + spacings.DOUBLE}rem`,
       height: `${spacings.HALF + spacings.DOUBLE}rem`,
       color: palette.LIVE_LIGHT,
-      verticalAlign: `${pixelsToRem(-5)}rem`,
+      verticalAlign: 'middle',
       marginInlineEnd: `${PULSE_END_MARGIN}rem`,
       [mq.GROUP_1_MIN_WIDTH]: {
-        verticalAlign: `${pixelsToRem(-7)}rem`,
         width: `${spacings.TRIPLE}rem`,
         height: `${spacings.TRIPLE}rem`,
       },
       [mq.GROUP_3_MIN_WIDTH]: {
-        verticalAlign: `${pixelsToRem(-8)}rem`,
         width: `${spacings.QUADRUPLE}rem`,
         height: `${spacings.QUADRUPLE}rem`,
       },
@@ -30,15 +27,23 @@ const styles = {
     }),
   liveLabelTextWithImage: ({ palette }: Theme) =>
     css({
-      'span:first-of-type': { color: palette.LIVE_LIGHT },
+      'span:first-of-type': {
+        color: palette.LIVE_LIGHT,
+        verticalAlign: 'middle',
+        display: 'inline',
+      },
     }),
   liveLabelTextWithoutImage: ({ mq, palette }: Theme) =>
     css({
       'span:first-of-type': {
         display: 'inline-flex',
         color: palette.LIVE_LIGHT,
+        verticalAlign: 'middle',
         'overflow-wrap': 'anywhere',
         marginInlineEnd: '0',
+        [mq.GROUP_0_MAX_WIDTH]: {
+          display: 'inline',
+        },
         [mq.GROUP_4_MIN_WIDTH]: {
           width: `calc(100% / 3  - ${PULSE_SIZE_TOTAL_WIDTH_3_MIN}rem)`,
         },

diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx
@@ -79,6 +79,9 @@ export default {
       display: 'block',
       color: palette.GREY_1,
       marginTop: `${spacings.DOUBLE}rem`,
+      [mq.GROUP_0_MAX_WIDTH]: {
+        marginTop: `${spacings.FULL}rem`,
+      },
       [mq.GROUP_4_MIN_WIDTH]: {
         width: 'calc(100% / 3 * 2)',
         display: 'inline-flex',

diff --git a/ws-nextjs-app/pages/[service]/live/[id]/__snapshots__/live.test.tsx.snap b/ws-nextjs-app/pages/[service]/live/[id]/__snapshots__/live.test.tsx.snap
@@ -111,22 +111,20 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   width: 1.25rem;
   height: 1.25rem;
   color: #00CCC7;
-  vertical-align: -0.3125rem;
+  vertical-align: middle;
   -webkit-margin-end: 0.25rem;
   margin-inline-end: 0.25rem;
 }
 
 @media (min-width: 15rem) {
   .emotion-6 {
-    vertical-align: -0.4375rem;
     width: 1.5rem;
     height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
   .emotion-6 {
-    vertical-align: -0.5rem;
     width: 2rem;
     height: 2rem;
   }
@@ -151,11 +149,18 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   color: #00CCC7;
+  vertical-align: middle;
   overflow-wrap: anywhere;
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
+@media (max-width: 14.9375rem) {
+  .emotion-8 span:first-of-type {
+    display: inline;
+  }
+}
+
 @media (min-width: 63rem) {
   .emotion-8 span:first-of-type {
     width: calc(100% / 3  - 2.25rem);
@@ -195,6 +200,12 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   margin-top: 1rem;
 }
 
+@media (max-width: 14.9375rem) {
+  .emotion-11 {
+    margin-top: 0.5rem;
+  }
+}
+
 @media (min-width: 63rem) {
   .emotion-11 {
     width: calc(100% / 3 * 2);