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 && (
-
- Join {currentMonth} Townhall! ✨
-
- )
+
+ {buttonText}
+
);
};
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