added jw- prefix to css class names

UofT-Frosh-Orientation · Jun 11, 2024 · ff00bbd · ff00bbd
1 parent a8b9dba
commit ff00bbd
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 44 deletions.
diff --git a/client/src/pages/Initial/WilliamLanding/WilliamLanding.jsx b/client/src/pages/Initial/WilliamLanding/WilliamLanding.jsx
@@ -4,10 +4,10 @@ import './WilliamLanding.scss';
 import InstagramIcon from '../../../assets/social/instagram-brands-dark-purple.svg';
 
 const InstagramButton = ({ link, text }) => (
-  <a href={link} target="_blank" rel="noreferrer" className="no-link-style">
-    <div className="button">
-      <img src={InstagramIcon} alt="Instagram Icon" className="button-icon" />
-      <span className="button-text">{text}</span>
+  <a href={link} target="_blank" rel="noreferrer" className="jw-no-link-style">
+    <div className="jw-button">
+      <img src={InstagramIcon} alt="Instagram Icon" className="jw-button-icon" />
+      <span className="jw-button-text">{text}</span>
     </div>
   </a>
 );
@@ -47,27 +47,27 @@ const WilliamLanding = () => {
   Object.keys(timeLeft).forEach((interval) => {
     if (!timeLeft[interval]) return;
     timerComponents.push(
-      <span key={interval} className="timer-interval">
+      <span key={interval} className="jw-timer-interval">
         {timeLeft[interval]} {interval}{' '}
       </span>,
     );
   });
 
   return (
-    <div className="landing-page">
-      <div className="container">
-        <div className="title-section animate-fadeIn">
-          <h1 className="title-text">COMING SOON!</h1>
-          <p className="subtitle">
+    <div className="jw-landing-page">
+      <div className="jw-container">
+        <div className="jw-title-section jw-animate-fadeIn">
+          <h1 className="jw-title-text">COMING SOON!</h1>
+          <p className="jw-subtitle">
             Hey F!rosh! Our website is currently under construction. Check back soon!
           </p>
-          <div className="countdown">
+          <div className="jw-countdown">
             {timerComponents.length ? timerComponents : <span>Time is up!</span>}
           </div>
-          <p className="stay-tuned">Stay Tuned</p>
+          <p className="jw-stay-tuned">Stay Tuned</p>
         </div>
-        <div className="info-section">
-          <div className="button-container">
+        <div className="jw-info-section">
+          <div className="jw-button-container">
             <InstagramButton
               link="https://www.instagram.com/froshweek/"
               text="Follow @froshweek for updates"
@@ -78,8 +78,8 @@ const WilliamLanding = () => {
             />
           </div>
         </div>
-        <div className="footer-section">
-          <h2 className="footer-text">Made with 💜 by the F!rosh Week 2T4 Tech Team</h2>
+        <div className="jw-footer-section">
+          <h2 className="jw-footer-text">Made with 💜 by the F!rosh Week 2T4 Tech Team</h2>
         </div>
       </div>
     </div>

diff --git a/client/src/pages/Initial/WilliamLanding/WilliamLanding.scss b/client/src/pages/Initial/WilliamLanding/WilliamLanding.scss
@@ -6,7 +6,7 @@ $highlight-yellow: #ffeb3b;
 $white: #ffffff;
 $muted-purple: #9575cd;
 
-.landing-page {
+.jw-landing-page {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16,56 +16,56 @@ $muted-purple: #9575cd;
   text-align: center;
   padding: 20px;
   overflow: hidden;
-  animation: enchantedBackground 10s infinite alternate;
+  animation: jw-enchantedBackground 10s infinite alternate;
 }
 
-.container {
+.jw-container {
   max-width: 1200px;
   width: 100%;
 }
 
-.title-section {
+.jw-title-section {
   margin-bottom: 50px;
 }
 
-.title-text {
+.jw-title-text {
   font-size: 64px;
   font-weight: bold;
   margin-bottom: 20px;
   text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
 }
 
-.subtitle {
+.jw-subtitle {
   font-size: 20px;
   margin-bottom: 30px;
 }
 
-.countdown {
+.jw-countdown {
   font-size: 24px;
   margin-bottom: 20px;
   color: $highlight-yellow;
 }
 
-.stay-tuned {
+.jw-stay-tuned {
   font-size: 24px;
   margin-top: 10px;
   color: $white;
   text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
-  animation: glow 1.5s infinite alternate;
+  animation: jw-glow 1.5s infinite alternate;
 }
 
-.info-section {
+.jw-info-section {
   margin-bottom: 50px;
 }
 
-.button-container {
+.jw-button-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
 }
 
-.button {
+.jw-button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -83,33 +83,33 @@ $muted-purple: #9575cd;
     transform: translateY(-5px);
   }
 
-  .button-icon {
+  .jw-button-icon {
     width: 24px;
     height: 24px;
     margin-right: 10px;
   }
 
-  .button-text {
+  .jw-button-text {
     font-size: 16px;
     font-weight: bold;
   }
 }
 
-.footer-section {
+.jw-footer-section {
   position: absolute;
   bottom: 20px;
   width: 100%;
   text-align: center;
   color: $white;
 }
 
-.footer-text {
+.jw-footer-text {
   font-size: 18px;
   font-weight: bold;
 }
 
 // Animations
-@keyframes fadeIn {
+@keyframes jw-fadeIn {
   0% {
     opacity: 0;
   }
@@ -118,7 +118,7 @@ $muted-purple: #9575cd;
   }
 }
 
-@keyframes glow {
+@keyframes jw-glow {
   0% {
     text-shadow: 0 0 5px $highlight-yellow, 0 0 10px $highlight-yellow, 0 0 15px $highlight-yellow,
       0 0 20px $highlight-yellow;
@@ -129,7 +129,7 @@ $muted-purple: #9575cd;
   }
 }
 
-@keyframes enchantedBackground {
+@keyframes jw-enchantedBackground {
   0% {
     background-position: 0% 50%;
   }
@@ -138,37 +138,37 @@ $muted-purple: #9575cd;
   }
 }
 
-.animate-fadeIn {
-  animation: fadeIn 1s ease-in-out;
+.jw-animate-fadeIn {
+  animation: jw-fadeIn 1s ease-in-out;
 }
 
 // Mobile View
 @media screen and (max-width: 768px) {
-  .title-text {
+  .jw-title-text {
     font-size: 36px;
   }
 
-  .subtitle {
+  .jw-subtitle {
     font-size: 16px;
   }
 
-  .countdown {
+  .jw-countdown {
     font-size: 18px;
   }
 
-  .stay-tuned {
+  .jw-stay-tuned {
     font-size: 18px;
   }
 
-  .button {
+  .jw-button {
     width: 200px;
     padding: 10px;
-    .button-text {
+    .jw-button-text {
       font-size: 14px;
     }
   }
 
-  .footer-text {
+  .jw-footer-text {
     font-size: 14px;
   }
 }