docs: add youtube link to townhall button on docs (#9381)

datahub-project · Dec 6, 2023 · dc6f169 · dc6f169
1 parent 16fe22a
commit dc6f169
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 20 deletions.
diff --git 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
@@ -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;
+    }
+  }