changed schedule styling more + added new event descriptions

Author: nrakhshan

client/src/assets/OtherEvents/bso.jpg

@@ -4645,7 +4645,7 @@ export const dataZeta = {
 
 // for home page
 export const data = {
-  'MONDAY AUGUST 25': [
+  'Monday August 25': [
     {
       'Event Name': 'Meet your F!rosh Group',
       'Start Time': '8:00 AM',
@@ -4657,7 +4657,7 @@ export const data = {
       'Event Name': 'Matriculation',
       'Event Location': 'Convocation Hall',
       'Event Description':
-        'Our kickoff to F!rosh Week, and an introduction to all things Skule! Hear from clubs, design teams, and other student groups about all the amazing opportunities waiting for you here at UofT Engineering, while also learning about some of our many Skule traditions!',
+        'F!rosh Week Level 1, your introduction to all things Skule™. The Frosh, faculty, and upper years all gather in Convocation Hall for the Frosh’s teaser trailer at the community and all of the traditions, culture and opportunities offered at UofT Engineering.',
       'Start Time': '9:00 AM',
       'End Time': '11:00 AM',
       Color: 'long',
@@ -4671,15 +4671,15 @@ export const data = {
     {
       'Event Name': 'F!rosh Games + D!ye Station',
       'Event Description':
-        '<b>F!rosh Games:</b> Compete against other frosh groups in the craziest competitions imaginable.<br /><b>D!ye:</b> When I say purple you say purple! Where F!rosh and Leedurs alike dye their bodies (or parts thereof) purple. The colour purple represents great significance in the traditions of engineering schools across Canada.',
+        '<b>F!rosh Games:</b> A series of fun, physical challenges that allows students to let loose, compete against other F!rosh groups and get to know each other in a dynamic fashion. These competitions can range from an obstacle course to a classic sport with an engineering twist.<br /><b>D!ye:</b> A 40+ year tradition where F!rosh and Leedurs dye their bodies purple. This player cosmetic represents great significance in the traditions of engineering schools across Canada, as it honours the engineers that came before us.',
       'Start Time': '12:00 PM',
       'End Time': '3:00 PM',
       Color: 'long',
     },
     {
       'Event Name': 'Downtown Walkaround',
       'Event Description':
-        'Join us for a lovely tour of Toronto’s downtown with 1000 of your newest friends and classmates!',
+        'A tour of downtown Toronto where thousands of students display their Skule™ spirit by parading and emoting from the St. George campus to Nathan Phillips Square.',
       'Start Time': '3:00 PM',
       'End Time': '5:00 PM',
       Color: 'long',
@@ -4693,13 +4693,15 @@ export const data = {
     },
     {
       'Event Name': 'Nitelife',
+      'Event Description':
+        'F!rosh Week goes dark mode with various games and activities run in the evening hours to continue the fun, offering Frosh more experiences to connect. Activities are high and low energy.',
       'Event Location': 'The Pit',
       'Start Time': '6:00 PM',
       'End Time': 'Late',
       Color: 'night',
     },
   ],
-  'TUESDAY AUGUST 26': [
+  'Tuesday August 26': [
     {
       'Event Name': 'Academic Success Seminar',
       // 'Event Location': 'Front Campus',
@@ -4712,7 +4714,7 @@ export const data = {
     {
       'Event Name': 'Campus Tours + Build Battle',
       'Event Description':
-        "<b>Campus Tour:</b> Be guided by your F!rosh Leedurs on a tour of our gorgeous campus, showing you all the best places to study, grab food, participate in extracurriculars, and nap! <br /><b>Build Battle:</b> Your first of many design challenges at UofT Engineering, except its probably the one of the coolest ones you do! Work with your frosh group to tackle your piece of the puzzle for this year's unique design challenge, coming together to build something truly amazing as a 2T9 class!",
+        '<b>Campus Tour:</b> F!rosh Leedurs guide Frosh through a tour of campus to find the best places to study, socialize and share stories about their time across campus. Take your minimap into the real world and find those secret levels. <br /><b>Build Battle:</b> First we mine, now you CRAFT! Put your skills to the test with a *POWER DRILL* *WOOD* *MARKERS* and whatever scraps your inventory picked up to create an epic build!',
       'Start Time': '10:00 AM',
       'End Time': '12:00 PM',
       Color: 'long',
@@ -4726,13 +4728,14 @@ export const data = {
     {
       'Event Name': 'Campus Tours + Build Battle',
       'Event Description':
-        "<b>Campus Tour:</b> Be guided by your F!rosh Leedurs on a tour of our gorgeous campus, showing you all the best places to study, grab food, participate in extracurriculars, and nap! <br /><b>Build Battle:</b> Your first of many design challenges at UofT Engineering, except its probably the one of the coolest ones you do! Work with your frosh group to tackle your piece of the puzzle for this year's unique design challenge, coming together to build something truly amazing as a 2T9 class!",
+        '<b>Campus Tour:</b> F!rosh Leedurs guide Frosh through a tour of campus to find the best places to study, socialize and share stories about their time across campus. Take your minimap into the real world and find those secret levels. <br /><b>Build Battle:</b> First we mine, now you CRAFT! Put your skills to the test with a *POWER DRILL* *WOOD* *MARKERS* and whatever scraps your inventory picked up to create an epic build!',
       'Start Time': '1:00 PM',
       'End Time': '5:00 PM',
       Color: 'long',
     },
     {
       'Event Name': 'Cheer-Off!',
+      'Event Description': 'The Final Boss: AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH',
       'Start Time': '5:00 PM',
       'End Time': '6:00 PM',
       Color: 'general',
@@ -4746,13 +4749,15 @@ export const data = {
     },
     {
       'Event Name': 'Nitelife',
+      'Event Description':
+        'F!rosh Week goes dark mode with various games and activities run in the evening hours to continue the fun, offering Frosh more experiences to connect. Activities are high and low energy.',
       'Event Location': 'The Pit',
       'Start Time': '7:00 PM',
       'End Time': 'Late',
       Color: 'night',
     },
   ],
-  'WEDNESDAY AUGUST 27': [
+  'Wednesday August 27': [
     {
       'Event Name': 'Consent Seminar',
       'Event Description': `Attend the consent workshop and be entered to win some amazing prizes!`,
@@ -4779,29 +4784,31 @@ export const data = {
     {
       'Event Name': 'Skule™ Hunt',
       'Event Description':
-        'SKULE™ HUNT: The longest items list you’ve ever seen. Join us for a full fledged scavenger hunt all over the city of Toronto!',
+        'The Skule™ twist on a traditional Scavenger Hunt, where students search for unique items and hidden easter eggs, collect powerups and points through side quests all across the city of Toronto to bring your team to the top of the leaderboard. The world is your arcade!',
       'Start Time': '6:00 PM',
       'End Time': 'Late',
       Color: 'night',
     },
   ],
-  'THURSDAY AUGUST 28': [
+  'Thursday August 28': [
     {
       'Event Name': 'Faculty Events',
-      'Event Description': `Check out more information about Faculty Events here: <a href='https://undergrad.engineering.utoronto.ca/event/faculty-orientation-events/'>Faculty Events</a>`,
+      'Event Description': `More information on Faculty Events will be added soon!`,
       'Start Time': '9:00 AM',
       'End Time': '5:00 PM',
       Color: 'other',
     },
     {
       'Event Name': 'Nitelife',
+      'Event Description':
+        'F!rosh Week goes dark mode with various games and activities run in the evening hours to continue the fun, offering Frosh more experiences to connect. Activities are high and low energy.',
       'Event Location': 'The Pit',
       'Start Time': '6:00 PM',
       'End Time': 'Late',
       Color: 'night',
     },
   ],
-  'FRIDAY AUGUST 29': [
+  'Friday August 29': [
     {
       'Event Name': 'F!rosh Olympiks',
       'Start Time': '10:00 AM',
@@ -4810,29 +4817,31 @@ export const data = {
     },
     {
       'Event Name': 'Nitelife',
+      'Event Description':
+        'F!rosh Week goes dark mode with various games and activities run in the evening hours to continue the fun, offering Frosh more experiences to connect. Activities are high and low energy.',
       'Event Location': 'The Pit',
       'Start Time': '6:00 PM',
       'End Time': 'Late',
       Color: 'night',
     },
   ],
-  'SATURDAY AUGUST 30': [
+  'Saturday August 30': [
     {
       'Event Name': 'F!rosh Retreat',
       'Event Location': 'Hart House Farm',
       'Event Description':
-        'Come with us out of the concrete jungle to enjoy a weekend of camp nostalgia, filled with swimming, games, campfires and more!',
+        'F!rosh can join Leedurs for a weekend camping trip to touch grass that caps off F!rosh Week, full of swimming, campfires, games, and other fun activities to connect F!rosh.',
       'Start Time': '10:00 AM',
       'End Time': 'Late',
       Color: 'long',
     },
   ],
-  'SUNDAY AUGUST 31': [
+  'Sunday August 31': [
     {
       'Event Name': 'F!rosh Retreat',
       'Event Location': 'Hart House Farm',
       'Event Description':
-        'Come with us out of the concrete jungle to enjoy a weekend of camp nostalgia, filled with swimming, games, campfires and more!',
+        'F!rosh can join Leedurs for a weekend camping trip to touch grass that caps off F!rosh Week, full of swimming, campfires, games, and other fun activities to connect F!rosh.',
       'Start Time': 'Early',
       'End Time': '2:00 PM',
       Color: 'long',

client/src/assets/OtherEvents/campus.webp

@@ -2,20 +2,23 @@ import React from 'react';
 import './EventCard.scss';
 import PropTypes from 'prop-types';
 
-const EventCard = ({ title, content, photoUrl, bgColorClass, textColorClass }) => {
+const EventCard = ({ title, content, photoUrl, bgColorClass, textColorClass, link }) => {
+  console.log('textColorClass:', textColorClass);
   return (
     <div className={`event-card ${bgColorClass} ${textColorClass}`}>
       <div className="card-content">
         <div className="text-section">
           <h2>{title}</h2>
           <p>{content}</p>
-          <button
-            className={`learn-more-btn ${
-              textColorClass == 'bg-white' ? 'button-white' : 'button-black'
-            }`}
-          >
-            Learn More
-          </button>
+          <a href={link} target="_blank" rel="noopener noreferrer" className="no-link-style">
+            <button
+              className={`learn-more-btn ${
+                textColorClass == 'text-white' ? 'button-white' : 'button-black'
+              }`}
+            >
+              Learn More
+            </button>
+          </a>
         </div>
         <div className="triangle" />
         <div className="image-section">
@@ -34,6 +37,7 @@ EventCard.propTypes = {
   photoUrl: PropTypes.string.isRequired,
   bgColorClass: PropTypes.string,
   textColorClass: PropTypes.string,
+  link: PropTypes.string,
 };
 
 // EventCard.defaultProps = {

client/src/assets/accordion/accordian-pixel-border-black.png

@@ -1,11 +1,16 @@
 @import '../../scssStyles/mixins';
 @import url('https://fonts.googleapis.com/css2?family=Jersey+10&family=Jersey+15&family=Jersey+20&family=Jersey+25&display=swap');
 
+a.no-link-style {
+  all: unset;
+  display: inline-block;
+}
+
 .event-card {
-  border-radius: 12px;
+  border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  margin: 1rem;
+  margin: 1rem 1rem;
   padding: 0;
 
   .card-content {
@@ -25,6 +30,10 @@
     flex: 1;
     z-index: 2;
 
+    @media (max-width: 1000px) {
+      padding-bottom: 5%;
+    }
+
     h2 {
       font-size: 48px;
       width: 80%;
@@ -33,20 +42,25 @@
     }
 
     p {
-      font-size: 1rem;
-      margin-bottom: 1rem;
+      font-size: 18px;
+      margin-bottom: 40px;
       line-height: 1.5;
+      width: 80%;
+
+      @media (max-width: 1000px) {
+        width: 100%;
+        margin-bottom: 20px;
+      }
     }
 
     .learn-more-btn {
       background-color: transparent;
       // color: var(--text-primary);
-      border: none;
       padding: 0.6rem 1.2rem;
-      border: var(--text-primary) 2px solid;
+      // border: var(--text-primary) 2px solid;
       border-radius: 25px;
       font-weight: bold;
-      cursor: url('../assets/cursor/pointer.png');
+      cursor: url('../../../assets/cursor/pointer.png'), auto;
       transition: all 150ms ease-in-out;
 
       &:hover {
@@ -55,11 +69,21 @@
         scale: 103%;
       }
     }
+
+    .button-white {
+      border: white 2px solid;
+      color: white;
+    }
+
+    .button-black {
+      border: black 2px solid;
+      color: black;
+    }
   }
 
   .image-section {
     position: relative;
-    width: 300px;
+    width: 40%;
     flex-shrink: 0;
     overflow: hidden;
 
@@ -69,9 +93,13 @@
       object-fit: cover;
     }
 
-    @media (max-width: 768px) {
-      width: 100%;
+    @media (max-width: 1000px) {
+      width: 0%;
     }
+
+    // @media (max-width: 800px) {
+    //   width: 100%;
+    // }
   }
 
   // .triangle {
@@ -103,13 +131,3 @@
 .text-white {
   color: white;
 }
-
-.button-white {
-  border: white 2px solid;
-  color: white;
-}
-
-.button-black {
-  border: black 2px solid;
-  color: black;
-}

client/src/assets/accordion/accordian-pixel-border-white.png

@@ -4,7 +4,8 @@ import { ButtonSelector } from '../../buttonSelector/buttonSelector/ButtonSelect
 import { SingleAccordion } from '../../text/Accordion/SingleAccordion/SingleAccordion';
 import './ScheduleHome.scss';
 import { data } from '../../../assets/schedule/data';
-import location from '../../../assets/misc/location.png';
+import location from '../../../assets/misc/loc.svg';
+import locationdark from '../../../assets/misc/locdark.svg';
 import { DarkModeContext } from '../../../util/DarkModeProvider';
 import LilyDesign from '../../../assets/schedule/lily.svg';
 
@@ -34,9 +35,9 @@ const ScheduleComponent = () => {
 
   return (
     <div className="schedule-container">
-      <div className="schedule-left-container desktop-only">
-        {/* <img src={LilyDesign} alt="Lily Design" className="lily-design" /> */}
-      </div>
+      {/* <div className="schedule-left-container desktop-only">
+        <img src={LilyDesign} alt="Lily Design" className="lily-design" />
+      </div> */}
       <div className="schedule-middle-container">
         <div className="mobile-only">
           <ButtonSelector
@@ -132,8 +133,12 @@ export const ScheduleComponentAccordion = ({ scheduleDay, closeAll }) => {
               {scheduleDay['Event Location'] ? (
                 <div className="schedule-accordion-header-location-container">
                   <img
-                    style={{ filter: darkMode ? 'invert(0.8)' : 'invert(0.6)' }}
-                    src={location}
+                    // style={{ filter: scheduleDay['Color'] == 'night' ? 'invert(1)' : '' }}
+                    src={
+                      scheduleDay['Color'] == 'night' || scheduleDay['Color'] == 'general'
+                        ? locationdark
+                        : location
+                    }
                     className="schedule-accordion-header-location-icon"
                   ></img>
                   <h3 className="schedule-accordion-location">{scheduleDay['Event Location']}</h3>