WSTEAM1-1567: Change padding for large breakpoint AND Add 16px after Live label

src/app/components/LiveHeaderMedia/index.styles.tsx

@@ -3,10 +3,9 @@ import pixelsToRem from '#app/utilities/pixelsToRem';
 import { css, Theme } from '@emotion/react';
 
 export default {
-  componentContainer: ({ spacings }: Theme) =>
+  componentContainer: () =>
     css({
       width: '100%',
-      marginTop: `${spacings.DOUBLE}rem`,
       [`.${NO_JS_CLASSNAME} &`]: {
         display: 'none',
       },
@@ -30,6 +29,7 @@ export default {
     }),
   mediaButton: () =>
     css({
+      width: '100%',
       position: 'relative',
       padding: 0,
     }),

src/app/components/MaskedImage/index.tsx

@@ -15,12 +15,14 @@ const MaskedImage = ({
   imageWidth,
   altText = '',
   showPlaceholder = true,
+  hideImage = false,
 }: {
   imageUrl: string;
   imageUrlTemplate: string;
   imageWidth: number;
   altText?: string;
   showPlaceholder?: boolean;
+  hideImage?: boolean;
 }) => {
   const { dir } = useContext(ServiceContext);
   const { isAmp } = useContext(RequestContext);
@@ -44,6 +46,7 @@ const MaskedImage = ({
       css={[
         styles.maskedImageWrapper,
         isRtl ? styles.linearGradientRtl : styles.linearGradientLtr,
+        hideImage && styles.hideImage,
       ]}
     >
       <Image

src/app/components/MaskedImage/styles.tsx

@@ -128,7 +128,12 @@ export default {
         insetInlineEnd: 0,
       },
     }),
-
+  hideImage: ({ mq }: Theme) =>
+    css({
+      [mq.GROUP_4_MIN_WIDTH]: {
+        opacity: 0,
+      },
+    }),
   linearGradientLtr: ({ mq }: Theme) =>
     css({
       [mq.GROUP_4_MIN_WIDTH]: {

ws-nextjs-app/pages/[service]/live/[id]/Header/LiveLabelHeader/index.styles.ts

@@ -25,7 +25,13 @@ const styles = {
         color: 'canvasText',
       },
     }),
-  liveLabelTextWithImage: ({ palette, fontSizes, fontVariants, mq }: Theme) =>
+  liveLabelTextWithImage: ({
+    palette,
+    spacings,
+    fontSizes,
+    fontVariants,
+    mq,
+  }: Theme) =>
     css({
       'span:first-of-type': {
         color: palette.LIVE_LIGHT,
@@ -36,6 +42,9 @@ const styles = {
           ...fontSizes.paragon,
         },
       },
+      'span:nth-of-type(3)': {
+        marginTop: `${spacings.DOUBLE}rem`,
+      },
     }),
   liveLabelTextWithoutImage: ({
     mq,

ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx

@@ -29,14 +29,15 @@ const Header = ({
 }) => {
   const [isMediaOpen, setLiveMediaOpen] = useState(false);
   const isHeaderImage = !!imageUrl && !!imageUrlTemplate && !!imageWidth;
+  const isWithImageLayout = isHeaderImage || !!mediaCollections;
 
   const watchVideoClickHandler = () => {
     setLiveMediaOpen(!isMediaOpen);
   };
 
   const Title = (
     <span
-      css={isHeaderImage ? styles.titleWithImage : styles.titleWithoutImage}
+      css={isWithImageLayout ? styles.titleWithImage : styles.titleWithoutImage}
     >
       {title}
     </span>
@@ -53,13 +54,16 @@ const Header = ({
             imageUrl={imageUrl}
             imageUrlTemplate={imageUrlTemplate}
             imageWidth={imageWidth}
+            hideImage={isMediaOpen}
           />
         ) : null}
         <div
           css={[
-            isHeaderImage && styles.textContainerWithImage,
-            !isHeaderImage && styles.textContainerWithoutImage,
-            isMediaOpen && styles.textContainerMediaOpen,
+            isWithImageLayout && styles.textContainerWithImage,
+            !isHeaderImage &&
+              !mediaCollections &&
+              styles.textContainerWithoutImage,
+            mediaCollections && styles.fixedHeight,
           ]}
         >
           <Heading
@@ -70,7 +74,7 @@ const Header = ({
             css={styles.heading}
           >
             {showLiveLabel ? (
-              <LiveLabelHeader isHeaderImage={isHeaderImage}>
+              <LiveLabelHeader isHeaderImage={isWithImageLayout}>
                 {Title}
               </LiveLabelHeader>
             ) : (
@@ -83,20 +87,24 @@ const Header = ({
               css={[
                 styles.description,
                 showLiveLabel &&
-                  !isHeaderImage &&
+                  !isWithImageLayout &&
                   styles.layoutWithLiveLabelNoImage,
               ]}
             >
               {description}
             </Text>
           )}
-          {mediaCollections && (
+        </div>
+        {mediaCollections && (
+          <div
+            css={[styles.liveMediaClose, isMediaOpen && styles.liveMediaOpen]}
+          >
             <LiveHeaderMedia
               mediaCollection={mediaCollections}
               clickCallback={watchVideoClickHandler}
             />
-          )}
-        </div>
+          </div>
+        )}
       </div>
     </div>
   );

ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx

@@ -42,12 +42,31 @@ export default {
         width: '100%',
       },
     }),
-  textContainerMediaOpen: ({ mq }: Theme) =>
+  liveMediaClose: ({ mq, spacings }: Theme) =>
+    css({
+      padding: `0rem ${spacings.FULL}rem ${spacings.DOUBLE}rem`,
+      [mq.GROUP_2_MIN_WIDTH]: {
+        padding: `0rem ${spacings.DOUBLE}rem ${spacings.DOUBLE}rem`,
+      },
+      [mq.GROUP_4_MIN_WIDTH]: {
+        padding: `${spacings.DOUBLE}rem  ${spacings.DOUBLE}rem ${pixelsToRem(40)}rem`,
+        maxWidth: '50%', // determines width of text overlay.
+      },
+    }),
+  liveMediaOpen: ({ mq }: Theme) =>
     css({
       [mq.GROUP_4_MIN_WIDTH]: {
         maxWidth: '100%',
       },
     }),
+  fixedHeight: ({ mq, spacings }: Theme) =>
+    css({
+      [mq.GROUP_4_MIN_WIDTH]: {
+        minHeight: '0',
+        padding: `${pixelsToRem(40)}rem ${spacings.DOUBLE}rem 0`,
+        maxWidth: '50%', // determines width of text overlay.
+      },
+    }),
   textContainerWithoutImage: ({ mq, gridWidths, spacings }: Theme) =>
     css({
       position: 'relative',
@@ -57,7 +76,6 @@ export default {
       [mq.GROUP_2_MIN_WIDTH]: {
         padding: `${spacings.DOUBLE}rem`,
       },
-
       [mq.GROUP_4_MIN_WIDTH]: {
         paddingTop: `${spacings.TRIPLE}rem`,
         paddingBottom: `${spacings.QUADRUPLE}rem`,