From 596b281668b223702bc214080f726c1fd2f2a898 Mon Sep 17 00:00:00 2001
From: Andrew Noblet <andrewbnoblet@gmail.com>
Date: Wed, 6 Mar 2024 11:10:10 -0500
Subject: [PATCH] feat: updates

---
 packages/ui-react/src/components/Card/Card.tsx       |  4 ++--
 .../src/components/Header/Header.module.scss         |  7 +++++++
 .../components/VideoDetails/VideoDetails.module.scss | 12 ++++++++++++
 packages/ui-react/src/containers/Layout/Layout.tsx   |  2 +-
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/ui-react/src/components/Card/Card.tsx b/packages/ui-react/src/components/Card/Card.tsx
index 1d9b7d497..0c5880846 100644
--- a/packages/ui-react/src/components/Card/Card.tsx
+++ b/packages/ui-react/src/components/Card/Card.tsx
@@ -50,7 +50,7 @@ function Card({
   url,
   tabIndex = 0,
 }: CardProps): JSX.Element {
-  const { title, duration, episodeNumber, seasonNumber, cardImage: image, mediaStatus, scheduledStart } = item;
+  const { title, duration, episodeNumber, seasonNumber, cardImage: image, mediaStatus, scheduledStart, series_label } = item;
   const {
     t,
     i18n: { language },
@@ -78,7 +78,7 @@ function Card({
     if (loading || disabled || !title) return null;
 
     if (isSeriesItem) {
-      return <div className={styles.tag}>{t('video:series')}</div>;
+      return <div className={styles.tag}>{(series_label as string) || t('video:series')}</div>;
     } else if (episodeNumber) {
       return <div className={styles.tag}>{formatSeriesMetaString(seasonNumber, episodeNumber)}</div>;
     } else if (duration) {
diff --git a/packages/ui-react/src/components/Header/Header.module.scss b/packages/ui-react/src/components/Header/Header.module.scss
index 18c5d00cc..27bfb89c8 100644
--- a/packages/ui-react/src/components/Header/Header.module.scss
+++ b/packages/ui-react/src/components/Header/Header.module.scss
@@ -255,3 +255,10 @@
     width: 80px;
   }
 }
+
+// Custom
+@include responsive.mobile-only() {
+  .customActions {
+    display: none;
+  }
+}
diff --git a/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss b/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss
index 4d406e36f..3c1ae1826 100644
--- a/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss
+++ b/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss
@@ -182,3 +182,15 @@
   border: 3px solid white;
   border-radius: 100%;
 }
+
+// Custom
+
+/* stylelint-disable no-duplicate-selectors */
+
+.buttonBar {
+  flex-wrap: wrap;
+
+  > a {
+    margin: 6px;
+  }
+}
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
index b609c9c8d..4f70584e5 100644
--- a/packages/ui-react/src/containers/Layout/Layout.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -241,7 +241,7 @@ const Layout = () => {
             </li>
           ))}
         {afterItems.map((item) => (
-          <Button key={item.key} label={item.label} to={item.url} variant="text" />
+          <MenuButton key={item.key} label={item.label} to={item.url} tabIndex={sideBarOpen ? 0 : -1} />
         ))}
         </ul>
         {rightItems.map((item) => (