@openeventkit/event-site 1.0.44 → 2.0.1

package/gatsby-browser.js

@@ -11,6 +11,7 @@ import "./src/styles/bulma.scss";
 import "./src/styles/style.scss";
 
 import colors from "data/colors.json";
+import marketingSettings from "data/marketing-settings.json";
 
 // smooth scroll polyfill needed for Safari
 smoothscroll.polyfill();
@@ -20,10 +21,15 @@ export const wrapRootElement = ReduxWrapper;
 export const onClientEntry = () => {
   // var set at document level
   // prevents widget color flashing from defaults to fetched by widget from marketing api
-  Object.entries(colors).forEach(color => {
-    document.documentElement.style.setProperty(`--${color[0]}`, color[1]);
-    document.documentElement.style.setProperty(`--${color[0]}50`, `${color[1]}50`);
-  })
+  Object.entries(colors).forEach(([key, value]) => {
+    document.documentElement.style.setProperty(`--${key}`, value);
+    document.documentElement.style.setProperty(`--${key}50`, `${value}50`);
+  });
+  // set theme
+  const themeSetting = marketingSettings.find(ms => ms.key === 'EVENT_SITE_COLOR_SCHEME');
+  const theme = themeSetting?.value || 'LIGHT';
+  document.documentElement.setAttribute('data-theme', theme);
+
   // init sentry
   const GATSBY_SENTRY_DSN = process.env.GATSBY_SENTRY_DSN;
   if(GATSBY_SENTRY_DSN) {

package/gatsby-node.js

@@ -17,7 +17,6 @@ const {
   REQUIRED_DIR_PATHS,
   DEFAULT_COLORS_FILE_PATH,
   COLORS_FILE_PATH,
-  COLORS_SASS_FILE_PATH,
   SITE_SETTINGS_FILE_PATH,
   LOBBY_PAGE_FILE_PATH,
   SUMMIT_FILE_PATH,
@@ -261,10 +260,6 @@ exports.onPreBootstrap = async () => {
   fs.writeFileSync(COLORS_FILE_PATH, JSON.stringify(colorSettings), "utf8");
   fs.writeFileSync(LOBBY_PAGE_FILE_PATH, JSON.stringify(lobbyPageSettings), "utf8");
 
-  let sassColors = "";
-  Object.entries(colorSettings).forEach(([key, value]) => sassColors += `$${key} : ${value};\n`);
-  fs.writeFileSync(COLORS_SASS_FILE_PATH, sassColors, "utf8");
-
   // summit
   const summit = await SSR_getSummit(summitApiBaseUrl, summitId);
   fileBuildTimes.push({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "1.0.44",
+  "version": "2.0.1",
   "author": "Tipit LLC",
   "dependencies": {
     "@mui/base": "^5.0.0-alpha.114",
@@ -42,7 +42,7 @@
     "font-awesome": "^4.7.0",
     "formik": "^2.2.9",
     "fs-extra": "^9.0.1",
-    "full-schedule-widget": "^2.0.35",
+    "full-schedule-widget": "3.0.0",
     "gatsby": "^5.8.1",
     "gatsby-alias-imports": "^1.0.6",
     "gatsby-plugin-image": "^3.8.0",
@@ -120,7 +120,7 @@
     "summit-registration-lite": "^4.0.17",
     "superagent": "8.0.9",
     "sweetalert2": "^9.17.0",
-    "upcoming-events-widget": "2.0.8",
+    "upcoming-events-widget": "3.0.1",
     "urijs": "^1.19.2",
     "use-fit-text": "^2.4.0",
     "uuid": "^7.0.0",

package/src/reducers/setting-reducer.js

@@ -40,7 +40,7 @@ const settingReducer = (state = DEFAULT_STATE, action) => {
         lastDataSync: Date.now(),
         lastCheckForNovelties: state.lastCheckForNovelties,
       };
-    case  UPDATE_LAST_CHECK_FOR_NOVELTIES:{
+    case UPDATE_LAST_CHECK_FOR_NOVELTIES:{
       let newLastCheckForNovelties = payload;
       if(newLastCheckForNovelties < state.lastCheckForNovelties)
         newLastCheckForNovelties = state.lastCheckForNovelties;

package/src/styles/advertise.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/colors.scss';
+@import 'colors.scss';
 
 .link {
   width: 80%;
@@ -15,7 +15,7 @@
 .sponsor-container-center {
   margin-top: 3rem;
   height: 250px;
-  background-color: $color_secondary_contrast;
+  background-color: var(--color_secondary_contrast);
   display: flex;
 
   .container-text {
@@ -28,7 +28,7 @@
 
     .ad-text {
       display: inline-flex;
-      color: $color_text_light;
+      color: var(--color_text_light);
       font-size: 24px;
       text-align: center;
     }

package/src/styles/bulma.scss

@@ -1,9 +1,9 @@
 @charset "utf-8";
 @import "bulma/sass/utilities/_all.sass";
-@import 'styles/colors.scss';
+@import 'colors.scss';
 
-$footer-background-color: $color-primary !important;
-$footer-color: $color-text-light !important;
+$footer-background-color: var(--color-primary) !important;
+$footer-color: var(--color-text-light) !important;
 $footer-padding: 2rem !important;
 
 $font-family-base: 'Nunito Sans', sans-serif;

package/src/styles/change-password.module.scss

@@ -2,7 +2,7 @@
 @import "bulma/sass/elements/button.sass";
 @import "bulma/sass/form/_all.sass";
 
-@import "styles/colors.scss";
+@import "colors.scss";
 
 .change-passoword-container {
   margin: 15px -20px;
@@ -63,7 +63,7 @@
         button {
           color: #ffffff;
           border-color: #ffffff;
-          background-color: $color_primary;
+          background-color: var(--color_primary);
         }
       }
     }

package/src/styles/colors.scss

@@ -3,6 +3,8 @@ $color_primary_contrast : #f1f2f2;
 $color_secondary : #00CEC4;
 $color_secondary_contrast : #ff5e32;
 $color_accent : #ff5e32;
+$color_background_light: #ffffff;
+$color_background_dark: #000000;
 $color_text_dark : #333333;
 $color_text_med : #828282;
 $color_text_light : #ffffff;
@@ -11,3 +13,26 @@ $color_gray_dark : #999999;
 $color_gray_light : #DFDFDF;
 $color_gray_lighter : #F2F2F2;
 $color_text_input_hints : #c4c4c4;
+
+:root {
+  --color_primary: #{$color_primary};
+  --color_primary_contrast: #{$color_primary_contrast};
+  --color_secondary: #{$color_secondary};
+  --color_secondary_contrast: #{$color_secondary_contrast};
+  --color_text_dark: #{$color_text_dark};
+  --color_text_med: #{$color_text_med};
+  --color_text_light: #{$color_text_light};
+  --color_background_light: #{$color_background_light};
+  --color_background_dark: #{$color_background_dark};
+  --color_gray_darker: #{$color_gray_darker};
+  --color_gray_dark: #{$color_gray_dark};
+  --color_gray_light: #{$color_gray_light};
+  --color_gray_lighter: #{$color_gray_lighter};
+}
+
+html[data-theme="DARK"] {
+  --color_text_dark: #{$color_text_light} !important;
+  --color_text_light: #{$color_text_dark} !important;
+  --color_background_light: #{$color_background_dark} !important;
+  --color_background_dark: #{$color_background_light} !important;
+}

package/src/styles/countdown.module.scss

@@ -1,9 +1,11 @@
-@import 'styles/colors.scss';
+@import 'colors.scss';
+
+$color_secondary_loc: #00CEC4;
 
 .countdown {
   height: 150px;
-  background-color: $color_secondary;
-  color: $color_text_light;
+  background-color: var(--color_secondary);
+  color: var(--color_text_light);
 
   .countdown-columns {
     height: 100%;
@@ -22,11 +24,11 @@
       align-items: center;
 
       & div:first-of-type {
-        background-color: darken($color: $color_secondary, $amount: 20%);
+        background-color: rgba(0,0,0,0.5);
       }
 
       & div:nth-of-type(2) {
-        background-color: darken($color: $color_secondary, $amount: 10%);
+        background-color: rgba(0,0,0,0.3);
       }
 
       div {

package/src/styles/documents.module.scss

@@ -1,8 +1,8 @@
-@import 'styles/colors.scss';
+@import 'colors.scss';
 
 .docs-container {  
   border: 1px solid #d3d3d3;
-  color: $color_text_dark;
+  color: var(--color_text_dark);
   display: flex;
   flex-direction: column;
 
@@ -39,7 +39,7 @@
   }
 
   a {
-    color: $color_text_dark;
+    color: var(--color_text_dark);
   }
 
   i {

package/src/styles/error.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/colors.scss';
+@import 'colors.scss';
 
 .wrapper {
   width: 350px;

package/src/styles/event-hero.module.scss

@@ -1,7 +1,7 @@
-@import "styles/colors.scss";
+@import "colors.scss";
 
 div.column:first-of-type {
-  background-color: $color_secondary_contrast;
+  background-color: var(--color_secondary_contrast);
 }
 
 .hero-events {
@@ -21,7 +21,7 @@ div.column:first-of-type {
 
     .title {
       font-size: 48px;
-      color: $color_text_light;
+      color: var(--color_text_light);
       font-weight: bold;
       letter-spacing: 0.5rem;
       padding-left: 1rem;
@@ -29,13 +29,13 @@ div.column:first-of-type {
 
     .subtitle {
       font-size: 38px;
-      color: $color_text_light;
+      color: var(--color_text_light);
       padding-left: 1rem;
     }
 
     .date {
-      background-color: $color_secondary;
-      color: $color_text_light;
+      background-color: var(--color_secondary);
+      color: var(--color_text_light);
       font-size: 32px;
       letter-spacing: 0.5rem;
       padding: 0.5rem 0;

package/src/styles/expo-hero.module.scss

@@ -1,4 +1,4 @@
-@import "styles/colors.scss";
+@import "colors.scss";
 
 .hero-container {
   display: flex;
@@ -7,14 +7,14 @@
 
 .title {
   font-size: 102px;
-  color: $color_primary_contrast;
+  color: var(--color_primary_contrast);
   font-weight: bold;
   text-align: center;
 }
 
 .subtitle {
   font-size: 32px;
-  color: $color_primary_contrast;
+  color: var(--color_primary_contrast);
   text-align: center;
   max-width: 800px;
   margin: auto;

package/src/styles/extra-questions.module.scss

@@ -2,7 +2,7 @@
 @import "bulma/sass/elements/button.sass";
 @import "bulma/sass/form/_all.sass";
 
-@import "styles/colors.scss";
+@import "colors.scss";
 
 .extra-question {
   label {

package/src/styles/footer.module.scss

@@ -1,21 +1,21 @@
-@import 'styles/colors.scss';
+@import 'colors.scss';
 
 .footer-colummns {
   text-align: left;
 
   h4 {
-    border-bottom: 2px solid $color_text_light;
+    border-bottom: 2px solid var(--color_text_light);
     text-transform: uppercase;
     padding-bottom: 1rem;
     margin-bottom: 2rem;
   }
 
   .link {
-    color: $color_text_light;
+    color: var(--color_text_light);
 
     :hover,
     :visited {
-      color: $color_text_light;
+      color: var(--color_text_light);
     }
   }
 
@@ -31,18 +31,18 @@
 }
 
 .legals-bar {
-  color: $color_text_light;
+  color: var(--color_text_light);
   background-color: #494a4c;
   padding: 1rem 2rem;
   display: flex;
 
   .link {
-    color: $color_text_light;
+    color: var(--color_text_light);
   }
 
   a:hover.link,
   a:visited.link {
-    color: $color_text_light;
+    color: var(--color_text_light);
     text-decoration: none;
   }
 

package/src/styles/full-profile.module.scss

@@ -1,8 +1,7 @@
 @import "bulma/sass/utilities/_all.sass";
 @import "bulma/sass/elements/button.sass";
 @import "bulma/sass/form/_all.sass";
-
-@import 'styles/colors.scss';
+@import 'colors.scss';
 
 .full-profile {
     align-items: flex-start;
@@ -59,7 +58,7 @@
         .header {
             font-size: 18px;
             line-height: 22px;
-            color: $color_text_dark;
+            color: var(--color_text_dark);
             font-weight: bold;
             margin: 0 -20px;
             padding: 0 15px 10px;
@@ -122,7 +121,7 @@
                     button {
                         color: #ffffff;
                         border-color: #ffffff;
-                        background-color: $color_primary;
+                        background-color: var(--color-primary);
                     }
                 }
             }

package/src/styles/full-schedule.module.scss

@@ -1,4 +1,4 @@
-@import "styles/colors.scss";
+@import "colors.scss";
 
 .container {
   position: inherit;

package/src/styles/global-classes.scss

@@ -4,8 +4,8 @@
 %button-big {
   border-radius: 4px;
   height: 56px;
-  color: $color_text_light;
-  background-color: $color_secondary;
+  color: var(--color_text_light);
+  background-color: var(--color_secondary);
   font-size: 15px;
 
   @extend %font-regular;
@@ -14,7 +14,7 @@
 %title-huge {
   font-size: 46px;
   line-height: 46px;
-  color: $color_text_dark;
+  color: var(--color_text_dark);
 
   @extend %font-bold;
 }
@@ -22,7 +22,7 @@
 %title-big {
   font-size: 32px;
   line-height: 32px;
-  color: $color_text_dark;
+  color: var(--color_text_dark);
 
   @extend %font-bold;
 }
@@ -30,7 +30,7 @@
 %title {
   font-size: 28px;
   line-height: 28px;
-  color: $color_text_dark;
+  color: var(--color_text_dark);
 
   @extend %font-semi;
 }
@@ -38,21 +38,21 @@
 %title-med {
   font-size: 24px;
   line-height: 24px;
-  color: $color_text_dark;
+  color: var(--color_text_dark);
 
   @extend %font-bold;
 }
 
 %title-small {
   font-size: 18px;
-  color: $color_text_dark;
+  color: var(--color_text_dark);
 
   @extend %font-bold;
 }
 
 %title-tiny {
   font-size: 14px;
-  color: $color_text_dark;
+  color: var(--color_text_dark);
 
   @extend %font-semi;
 }
@@ -60,7 +60,7 @@
 %text-big {
   font-size: 20px;
   line-height: 24px;
-  color: $color_text_med;
+  color: var(--color_text_dark);
 
   @extend %font-semi;
 }
@@ -68,7 +68,7 @@
 %text-med {
   font-size: 15px;
   line-height: 20px;
-  color: $color_text_med;
+  color: var(--color_text_dark);
 
   @extend %font-regular;
 }
@@ -84,7 +84,7 @@
 %text-tiny {
   font-size: 12px;
   line-height: 16px;
-  color: $color_text_med;
+  color: var(--color_text_med);
 
   @extend %font-regular;
 }
@@ -92,8 +92,8 @@
 %button-small-primary {
   border-radius: 4px;
   height: 39px;
-  color: $color_text_light;
-  background-color: $color_secondary;
+  color: var(--color_text_light);
+  background-color: var(--color_secondary);
   font-size: 15px;
 
   @extend %font-regular;
@@ -102,8 +102,8 @@
 %button-small-secondary {
   border-radius: 4px;
   height: 39px;
-  color: $color_text_med;
-  background-color: $color_gray_light;
+  color: var(--color_text_med);
+  background-color: var(--color_gray_light);
   font-size: 15px;
 
   @extend %font-regular;
@@ -114,8 +114,8 @@
   height: 39px;
   background-color: white;
   font-size: 15px;
-  border: 1px solid $color_gray_dark;
-  color: $color_text_dark;
+  border: 1px solid var(--color_gray_dark);
+  color: var(--color_text_dark);
 
 
   @extend %font-regular;
@@ -126,8 +126,8 @@
   height: 39px;
   background-color: white;
   font-size: 15px;
-  border: 1px solid $color_gray_light;
-  color: $color_text_dark;
+  border: 1px solid var(--color_gray_light);
+  color: var(--color_text_dark);
 
 
   @extend %font-regular;

package/src/styles/login-button.module.scss

@@ -1,4 +1,4 @@
-@import "styles/colors.scss";
+@import "colors.scss";
 
 .login-button-wrapper {
   :first-of-type.button {

package/src/styles/marketing-hero.module.scss

@@ -1,4 +1,4 @@
-@import "styles/colors.scss";
+@import "colors.scss";
 
 .hero-marketing {
   .hero-marketing-container {
@@ -107,7 +107,7 @@
         transform: skew(25deg);
         font-size: 3rem;
         font-weight: bold;
-        color: $color_text_light;
+        color: var(--color_text_light);
         letter-spacing: 0.1rem;
       }
 

package/src/styles/marketing.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/colors.scss';
+@import 'colors.scss';
 
 .masonry {
   .image-slider {

package/src/styles/navbar.module.scss

@@ -2,10 +2,10 @@
 @import "bulma/sass/elements/button.sass";
 @import "bulma/sass/components/navbar";
 
-@import 'styles/colors.scss';
+@import 'colors.scss';
 
 .navbar {
-  background-color: $color_primary;
+  background-color: var(--color_primary);
   min-height: 7.25rem;
 
   .navbar-brand {
@@ -27,12 +27,12 @@
   }
 
   .user-icon {
-    color: $color_text_light;
+    color: var(--color_text_light);
     padding-left: 10px;
   }
 
   .navbar-item {
-    color: $color_text_light;
+    color: var(--color_text_light);
   }
 
   .navbar-menu {
@@ -40,22 +40,22 @@
       font-weight: 300;
 
       .link {
-        color: $color_text_light;
+        color: var(--color_text_light);
         padding: 6px;
         margin: -6px;
 
         &:hover {
-          color: $color_text_light;
+          color: var(--color_text_light);
           text-decoration: none;
         }
 
         &:active {
-          color: $color_text_light;
+          color: var(--color_text_light);
           text-decoration: underline;
         }
 
         &:visited {
-          color: $color_text_light;
+          color: var(--color_text_light);
         }
       }      
 
@@ -101,11 +101,11 @@
 
   .user-burger {
     display: block;
-    color: $color_text_light;
+    color: var(--color_text_light);
   }
 
   .user-icon {
-    color: $color_text_light;
+    color: var(--color_text_light);
     padding-left: 10px;
   }
 }
@@ -131,25 +131,25 @@
     }
 
     .navbar-burger {
-      color: $color_text_light;
+      color: var(--color_text_light);
       margin-right: 15px;
     }
 
     .navbar-menu {
       .navbar-item {
         .link {
-          color: $color_primary;
+          color: var(--color_primary);
 
           &:hover {
-            color: $color_primary;
+            color: var(--color_primary);
           }
 
           &:active {
-            color: $color_primary;
+            color: var(--color_primary);
           }
 
           &:visited {
-            color: $color_primary;
+            color: var(--color_primary);
           }
         }
       }
@@ -160,7 +160,7 @@
       }
 
       .user-icon {
-        color: $color_primary;
+        color: var(--color_primary);
         padding-bottom: 5px;
       }
     }

package/src/styles/profile.module.scss

@@ -3,7 +3,7 @@
 @import "bulma/sass/components/modal.sass";
 @import "bulma/sass/form/_all.sass";
 
-@import 'styles/colors.scss';
+@import 'colors.scss';
 
 .modal-card {
   color: #363636;
@@ -23,7 +23,7 @@
     }
 
     .close-icon {
-      color: $color_text_dark;
+      color: var(--color_text_dark);
       font-size: 16px;
       cursor: pointer;
     }
@@ -127,7 +127,7 @@
       &:last-of-type {
         color: #ffffff;
         border-color: #ffffff;
-        background-color: $color_primary;
+        background-color: var(--color_primary);
       }
     }
   }
@@ -167,7 +167,7 @@
           &:last-of-type {
             color: #ffffff;
             border-color: #ffffff;
-            background-color: $color_primary;
+            background-color: var(--color_primary);
             margin-top: 1rem;
           }
         }

package/src/styles/sponsor-page.module.scss

@@ -1,4 +1,4 @@
-@import "styles/colors.scss";
+@import "colors.scss";
 
 .disqus-container-sponsor {
   position: relative;
@@ -10,7 +10,7 @@
   display: flex;
   justify-content: space-between;
   .button {
-    background-color: $color_secondary_contrast;
+    background-color: var(--color_secondary_contrast);
     align-items: center;
     border: none;
     color: #fff;
@@ -50,7 +50,7 @@
 
 .hero {
   background-color: black;
-  color: $color_text_light;
+  color: var(--color_text_light);
 
   .hero-sponsor-image-bg {
     background-size: cover;
@@ -60,7 +60,7 @@
   .hero-sponsor {
     position: relative;
     overflow: hidden;
-    background-color: $color_secondary_contrast;
+    background-color: var(--color_secondary_contrast);
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
@@ -89,7 +89,7 @@
           align-self: flex-end;
 
           .link {
-            color: $color_text_light;
+            color: var(--color_text_light);
 
             i {
               font-size: 2.5rem;
@@ -122,7 +122,7 @@
 
             .link {
               .button {
-                background-color: $color_secondary_contrast;
+                background-color: var(--color_secondary_contrast);
                 border: none;
                 color: #fff;
                 height: 5rem;
@@ -170,7 +170,7 @@
 
               .link {
                 .button {
-                  background-color: $color_secondary_contrast;
+                  background-color: var(--color_secondary_contrast);
                   border: none;
                   color: #fff;
                   height: 3.5rem;
@@ -253,7 +253,7 @@
 
   .link {
     .button {
-      background-color: $color_secondary_contrast;
+      background-color: var(--color_secondary_contrast);
       border: none;
       color: #fff;
       height: 5rem;
@@ -307,8 +307,8 @@
 }
 
 .bottom-bar {
-  background-color: $color_secondary_contrast;
-  color: $color_text_light;
+  background-color: var(--color_secondary_contrast);
+  color: var(--color_text_light);
   font-size: 30px;
   padding: 6px 10px;
   position: relative;
@@ -350,11 +350,11 @@
   justify-content: space-evenly;
   padding: 3rem;
   margin-top: 2rem;
-  background-color: $color_secondary_contrast;
+  background-color: var(--color_secondary_contrast);
 
   .container-text {
     font-size: 32px;
-    color: $color_text_light;
+    color: var(--color_text_light);
   }
 
   .container-buttons {
@@ -462,7 +462,7 @@
             flex-direction: column;
 
             .link {
-              color: $color_text_light;
+              color: var(--color_text_light);
 
               i {
                 font-size: 2.5rem;
@@ -498,8 +498,8 @@
 
               .link {
                 .button {
-                  background-color: $color_secondary_contrast;
-                  border-color: $color_secondary_contrast;
+                  background-color: var(--color_secondary_contrast);
+                  border-color: var(--color_secondary_contrast);
                   color: #fff;
                   height: 5rem;
                   width: 5rem;
@@ -550,8 +550,8 @@
 
                 .link {
                   .button {
-                    background-color: $color_secondary_contrast;
-                    border-color: $color_secondary_contrast;
+                    background-color: var(--color_secondary_contrast);
+                    border-color: var(--color_secondary_contrast);
                     color: #fff;
                     height: 4rem;
                     width: 4rem;

package/src/styles/sponsor.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/colors.scss';
+@import 'colors.scss';
 
 .first-container {
   margin-top: 0px !important;
@@ -59,8 +59,8 @@
 
   .button {
     width: 100%;
-    background-color: $color_secondary;
-    color: $color_text_light;
+    background-color: var(--color_secondary);
+    color: var(--color_text_light);
     border: 0px;
     margin-bottom: 2em;
   }
@@ -93,7 +93,7 @@
   .image-box {
     box-sizing: border-box;
     padding: 20px;
-    background-color: $color_primary_contrast;
+    background-color: var(--color_primary_contrast);
     margin: 10px;
     display: flex;
     justify-content: center;

package/src/styles/style.scss

@@ -1,4 +1,4 @@
-@import 'styles/colors.scss';
+@import './colors.scss';
 @import './global-classes';
 
 html,
@@ -7,6 +7,7 @@ body {
   margin: 0;
   padding: 0;
   height: 100%;
+  background-color: var(--color_background_light) !important;
 }
 
 
@@ -53,7 +54,7 @@ html:not([data-whatintent=keyboard]) .focus {
 
 /* overrides Bulma focus style */
 .button:focus {
-  color: $color_text_light !important;
+  color: var(--color_text_light) !important;
 }
 
 label {
@@ -162,7 +163,7 @@ h2 {
     width: 100%;
 
     .hero {
-      background-color: $color_secondary;
+      background-color: var(--color_secondary);
       align-self: center;
       width: 100%;
       height: 100%;
@@ -235,14 +236,14 @@ h2 {
 
 .talk {
   &__break {
-    background-color: $color_secondary;
+    background-color: var(--color_secondary);
     min-height: 92vh !important;
     width: 100%;
     padding: 0 3rem;
 
     h1,
     h2 {
-      color: $color_text_light;
+      color: var(--color_text_light);
       font-size: 42px;
     }
   }
@@ -304,8 +305,8 @@ h2 {
 
 .join-zoom-container {
   align-items: center;
-  background-color: $color_secondary;
-  color: $color_text_light;
+  background-color: var(--color_secondary);
+  color: var(--color_text_light);
   display: flex;
   height: 110px;
   justify-content: space-around;
@@ -327,7 +328,7 @@ h2 {
     padding-right: 4em;
     text-transform: uppercase;
     &:focus,&:active {
-      color: $color_secondary !important;
+      color: var(--color_secondary) !important;
     }
   }
 }