From dc6f16984673948f45d466db576eb74b2f45e6f8 Mon Sep 17 00:00:00 2001
From: Hyejin Yoon <0327jane@gmail.com>
Date: Thu, 7 Dec 2023 08:59:25 +0900
Subject: [PATCH] docs: add youtube link to townhall button on docs (#9381)

---
 .../_components/TownhallButton/index.jsx      | 24 +++++++-----
 .../TownhallButton/townhallbutton.module.scss | 37 +++++++++++++------
 2 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/docs-website/src/pages/_components/TownhallButton/index.jsx b/docs-website/src/pages/_components/TownhallButton/index.jsx
index 11dc2dc5c8..22643846f2 100644
--- a/docs-website/src/pages/_components/TownhallButton/index.jsx
+++ b/docs-website/src/pages/_components/TownhallButton/index.jsx
@@ -11,20 +11,26 @@ const TownhallButton = () => {
 
   const daysUntilLastThursday = lastThursday - currentDay;
 
-  let showButton = false;
-  let currentMonth = '';
+  let buttonText = '';
+  let buttonLink = '';
+  let townhallSeasonClass = '';
 
   if (daysUntilLastThursday > 0 && daysUntilLastThursday <= 14) {
-    showButton = true;
-    currentMonth = new Intl.DateTimeFormat('en-US', { month: 'long' }).format(today);
+    const currentMonth = new Intl.DateTimeFormat('en-US', { month: 'long' }).format(today);
+    buttonText = `Join ${currentMonth} Townhall! ✨`;
+    buttonLink = 'http://rsvp.datahubproject.io';
+    townhallSeasonClass = 'townhall-season'
+  } else {
+    buttonText = 'Watch Our Latest Townhall! 👀';
+    buttonLink = 'https://www.youtube.com/playlist?list=PLdCtLs64vZvHTXGqybmOfyxXbGDn2Reb9';
+    townhallSeasonClass = 'non-townhall-season'
   }
 
+
   return (
-    showButton && (
-      <Link to="http://rsvp.datahubproject.io" className={clsx('button button--primary button--md', styles.feature)}>
-        Join {currentMonth} Townhall!&nbsp;✨
-      </Link>
-    )
+    <Link to={buttonLink} className={clsx('button button--primary button--md', styles[townhallSeasonClass])}>
+      {buttonText}
+    </Link>
   );
 };
 
diff --git a/docs-website/src/pages/_components/TownhallButton/townhallbutton.module.scss b/docs-website/src/pages/_components/TownhallButton/townhallbutton.module.scss
index 951bc99015..3d30c65f89 100644
--- a/docs-website/src/pages/_components/TownhallButton/townhallbutton.module.scss
+++ b/docs-website/src/pages/_components/TownhallButton/townhallbutton.module.scss
@@ -1,14 +1,29 @@
-.feature {
-  color: white;
-  border: 1px solid transparent;
-  background-image: linear-gradient(to right, #1890ff 0%, #9c27b0 100%);
-  background-origin: border-box;
-  opacity: 90%;
-
-  &:hover {
-    opacity: 100%;
-    background: linear-gradient(to right, #1890ff 0%, #9c27b0 100%);
+  .townhall-season {
+    color: white;
+    border: 1px solid transparent;
     background-image: linear-gradient(to right, #1890ff 0%, #9c27b0 100%);
     background-origin: border-box;
+    opacity: 90%;
+
+    &:hover {
+      opacity: 100%;
+      background: linear-gradient(to right, #1890ff 0%, #9c27b0 100%);
+      background-image: linear-gradient(to right, #1890ff 0%, #9c27b0 100%);
+      background-origin: border-box;
+    }
   }
-}
+
+  .non-townhall-season {
+    color: white;
+    border: 1px solid transparent;
+    background-image: linear-gradient(to right, #1890ff 0%, #48DBFB 100%);
+    background-origin: border-box;
+    opacity: 90%;
+
+    &:hover {
+      opacity: 100%;
+      background: linear-gradient(to right, #1890ff 0%, #48DBFB 100%);
+      background-image: linear-gradient(to right, #1890ff 0%, #48DBFB 100%);
+      background-origin: border-box;
+    }
+  }
\ No newline at end of file