Merge pull request #858 from Ablahgad/dev

Fixed spacing of bottom of about page, altered game view design to better match the Figma

Author: nrakhshan

client/src/components/OtherEventsCard/EventCard.jsx

@@ -9,7 +9,13 @@ const EventCard = ({ title, content, photoUrl, bgColorClass, textColorClass }) =
         <div className="text-section">
           <h2>{title}</h2>
           <p>{content}</p>
-          <button className="learn-more-btn">Learn More</button>
+          <button
+            className={`learn-more-btn ${
+              textColorClass == 'bg-white' ? 'button-white' : 'button-black'
+            }`}
+          >
+            Learn More
+          </button>
         </div>
         <div className="triangle" />
         <div className="image-section">
@@ -30,7 +36,7 @@ EventCard.propTypes = {
   textColorClass: PropTypes.string,
 };
 
-EventCard.defaultProps = {
-  bgColorClass: 'bg-yellow',
-  textColorClass: 'text-black',
-};
+// EventCard.defaultProps = {
+//   bgColorClass: 'bg-yellow',
+//   textColorClass: 'text-black',
+// };

client/src/components/OtherEventsCard/EventCard.scss

@@ -7,7 +7,6 @@
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   margin: 1rem;
   padding: 0;
-  background-color: #ffcf00;
 
   .card-content {
     display: flex;
@@ -22,13 +21,15 @@
   }
 
   .text-section {
-    padding: 1.5rem;
+    padding: 50px 50px;
     flex: 1;
     z-index: 2;
 
     h2 {
-      font-size: 1.8rem;
+      font-size: 48px;
+      width: 80%;
       margin-bottom: 0.8rem;
+      font-weight: 900;
     }
 
     p {
@@ -38,17 +39,20 @@
     }
 
     .learn-more-btn {
-      background-color: white;
-      color: black;
+      background-color: transparent;
+      // color: var(--text-primary);
       border: none;
       padding: 0.6rem 1.2rem;
+      border: var(--text-primary) 2px solid;
       border-radius: 25px;
       font-weight: bold;
-      cursor: pointer;
-      transition: background-color 0.2s ease;
+      cursor: url('../assets/cursor/pointer.png');
+      transition: all 150ms ease-in-out;
 
       &:hover {
-        background-color: #f0f0f0;
+        transition: all 150ms ease-in-out;
+        background-color: #ffffff20;
+        scale: 103%;
       }
     }
   }
@@ -70,32 +74,42 @@
     }
   }
 
-  .triangle {
-    position: absolute;
-    right: 300px; // same as image width
-    top: 0;
-    bottom: 0;
-    width: 80px;
-    clip-path: polygon(0 0, 100% 0, 0 100%);
-    z-index: 1;
-    background-color: inherit;
+  // .triangle {
+  //   position: absolute;
+  //   right: 300px; // same as image width
+  //   top: 0;
+  //   bottom: 0;
+  //   width: 80px;
+  //   clip-path: polygon(0 0, 100% 0, 0 100%);
+  //   z-index: 1;
+  //   background-color: inherit;
 
-    @media (max-width: 768px) {
-      display: none;
-    }
-  }
+  //   @media (max-width: 768px) {
+  //     display: none;
+  //   }
+  // }
 }
 
 /* === COLOR UTILITIES === */
 .bg-yellow {
-  background-color: #ffcf00;
+  background-color: var(--mikado);
 }
 .bg-purple {
-  background-color: #662e9b;
+  background-color: var(--jam);
 }
 .text-black {
-  color: #000;
+  color: black;
 }
 .text-white {
-  color: #fff;
+  color: white;
+}
+
+.button-white {
+  border: white 2px solid;
+  color: white;
+}
+
+.button-black {
+  border: black 2px solid;
+  color: black;
 }

client/src/pages/Home/Home.jsx

@@ -271,8 +271,8 @@ const AboutUsSection = () => {
               title={info.title}
               content={info.description}
               photoUrl={slideshow1}
-              bgColor="bg-yellow"
-              textColor="text-black"
+              bgColorClass={index == 1 ? 'bg-purple' : 'bg-yellow'}
+              textColorClass={index == 1 ? 'text-white' : 'text-black'}
             />
             // <div className="otherevents-subsubcontainer" key={info.title}>
             //   <div className="otherevents-image-container">

client/src/pages/Home/otherevents.jsx

@@ -1,12 +1,12 @@
 export const otherEventsData = [
   {
-    title: 'BLACK STUDENT ORIENTATION',
+    title: 'Black Student Orientation',
     description:
       "Want to celebrate Black culture, embrace the community at the University of Toronto, and prepare yourself for the UofT experience? Black Student Orientation, organized by Black Students for Black students, is an opportunity to make a smooth transition into university life, make new friends, and start the year on a positive note!<br />Registration for this FREE orientation is open! Stay up to date and Learn more about Black Student Orientation 2025 <a href='https://www.instagram.com/uoftbso/'>here</a>. You can also learn more about the Black Hub and events <a href='https://studentlife.utoronto.ca/service/black-hub/'>here</a>.",
     image: '../../assets/misc/blackstudentorientationlogo.png',
   },
   {
-    title: 'FACULTY ORIENTATION EVENTS',
+    title: 'Faculty Orientation Events',
     description:
       "Check out the schedule for Faculty Orientation Events happening on August 28th <a href='https://undergrad.engineering.utoronto.ca/event/faculty-orientation-events/'>here</a>!",
     image: '../../assets/misc/facultylogo.png',