Live page - Improve buttons UX (#1942)

* Change button text * Moved button to the top right * update button text * Created new button to include logo * upload youtube logo * next compiler * added logo in button * removed comment * update breadcrump to include Live * removed unused image
SSWConsulting · Dec 26, 2023 · b78a7f0 · b78a7f0
1 parent 247d210
commit b78a7f0
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 20 deletions.
diff --git a/.yarn/cache/@next-swc-win32-x64-msvc-npm-14.0.4-e7cf0df5d6-8.zip b/.yarn/cache/@next-swc-win32-x64-msvc-npm-14.0.4-e7cf0df5d6-8.zip
diff --git a/components/blocks/breadcrumbs.tsx b/components/blocks/breadcrumbs.tsx
@@ -36,6 +36,7 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = (props) => {
           { from: "partners", to: "Partners" },
           { from: "netug", to: ".NET User Group" },
           { from: "clients", to: "Clients" },
+          { from: "live", to: "Live" },
           { from: props.path, to: `${props.title}` },
         ]}
         activeItemClassName={listItemStyling}

diff --git a/content/live/index.mdx b/content/live/index.mdx
@@ -2,11 +2,11 @@
 title: SSW <span class="text-sswRed">Live</span> Stream Channel
 nextEvent: Upcoming Session Details
 sswTvButton:
-  name: Visit SSW TV Channel on Youtube
+  name: Visit SSW TV Channel
   channelId: UCBFgwtV9lIIhvoNh0xoQ7Pg
 pastEvents: Recent Broadcasts
 youtubePlaylistButton:
-  name: Watch more on SSW TV Channel on Youtube
+  name: View more on Youtube
   playlistId: PLpiOR7CBNvlpmhfwQeIVhbqZKxV-do0wY
 ---
 

diff --git a/pages/live.tsx b/pages/live.tsx
@@ -1,5 +1,6 @@
 import { InferGetStaticPropsType } from "next";
 import { BsArrowRightCircle } from "react-icons/bs";
+import { FaYoutube } from "react-icons/fa";
 import { useTina } from "tinacms/dist/react";
 import { client } from "../.tina/__generated__/client";
 import { Breadcrumbs } from "../components/blocks/breadcrumbs";
@@ -43,9 +44,24 @@ export default function LivePage(
         />
       </Section>
       <Container size="xsmall">
-        <span className="text-sswRed">
-          <h2 className="mt-0">{data.live.nextEvent}</h2>
-        </span>
+        <div className="flex items-center justify-between">
+          <h2 className="mt-0 text-sswRed">{data.live.nextEvent}</h2>
+          <UtilityButton
+            className="mx-20"
+            size="small"
+            uncentered={false}
+            removeTopMargin={true}
+            link={`https://www.youtube.com/channel/${data.live.sswTvButton.channelId}`}
+            buttonText={
+              <span className="flex flex-row items-center gap-2">
+                <FaYoutube size={25} />
+                {data.live.sswTvButton.name}
+              </span>
+            }
+            noAnimate
+            openInNewTab={true}
+          />
+        </div>
         <div>
           {props.event?.Title && (
             <div className="col-span-2">
@@ -94,21 +110,6 @@ export default function LivePage(
               ))}
           </div>
         </div>
-        <div className="flex justify-center">
-          <UtilityButton
-            size="small"
-            uncentered={false}
-            link={`https://www.youtube.com/channel/${data.live.sswTvButton.channelId}`}
-            buttonText={
-              <>
-                {data.live.sswTvButton.name}
-                <BsArrowRightCircle className="ml-1 inline" />
-              </>
-            }
-            noAnimate
-            openInNewTab={true}
-          />
-        </div>
       </Container>
       <Container size="xsmall">
         <span className="text-sswRed">