Skip to content

Commit 708d07e

Browse files
authored
Merge pull request #858 from Ablahgad/dev
Fixed spacing of bottom of about page, altered game view design to better match the Figma
2 parents c271df7 + a527b63 commit 708d07e

4 files changed

Lines changed: 54 additions & 34 deletions

File tree

client/src/components/OtherEventsCard/EventCard.jsx

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,13 @@ const EventCard = ({ title, content, photoUrl, bgColorClass, textColorClass }) =
99
<div className="text-section">
1010
<h2>{title}</h2>
1111
<p>{content}</p>
12-
<button className="learn-more-btn">Learn More</button>
12+
<button
13+
className={`learn-more-btn ${
14+
textColorClass == 'bg-white' ? 'button-white' : 'button-black'
15+
}`}
16+
>
17+
Learn More
18+
</button>
1319
</div>
1420
<div className="triangle" />
1521
<div className="image-section">
@@ -30,7 +36,7 @@ EventCard.propTypes = {
3036
textColorClass: PropTypes.string,
3137
};
3238

33-
EventCard.defaultProps = {
34-
bgColorClass: 'bg-yellow',
35-
textColorClass: 'text-black',
36-
};
39+
// EventCard.defaultProps = {
40+
// bgColorClass: 'bg-yellow',
41+
// textColorClass: 'text-black',
42+
// };

client/src/components/OtherEventsCard/EventCard.scss

Lines changed: 39 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
88
margin: 1rem;
99
padding: 0;
10-
background-color: #ffcf00;
1110

1211
.card-content {
1312
display: flex;
@@ -22,13 +21,15 @@
2221
}
2322

2423
.text-section {
25-
padding: 1.5rem;
24+
padding: 50px 50px;
2625
flex: 1;
2726
z-index: 2;
2827

2928
h2 {
30-
font-size: 1.8rem;
29+
font-size: 48px;
30+
width: 80%;
3131
margin-bottom: 0.8rem;
32+
font-weight: 900;
3233
}
3334

3435
p {
@@ -38,17 +39,20 @@
3839
}
3940

4041
.learn-more-btn {
41-
background-color: white;
42-
color: black;
42+
background-color: transparent;
43+
// color: var(--text-primary);
4344
border: none;
4445
padding: 0.6rem 1.2rem;
46+
border: var(--text-primary) 2px solid;
4547
border-radius: 25px;
4648
font-weight: bold;
47-
cursor: pointer;
48-
transition: background-color 0.2s ease;
49+
cursor: url('../assets/cursor/pointer.png');
50+
transition: all 150ms ease-in-out;
4951

5052
&:hover {
51-
background-color: #f0f0f0;
53+
transition: all 150ms ease-in-out;
54+
background-color: #ffffff20;
55+
scale: 103%;
5256
}
5357
}
5458
}
@@ -70,32 +74,42 @@
7074
}
7175
}
7276

73-
.triangle {
74-
position: absolute;
75-
right: 300px; // same as image width
76-
top: 0;
77-
bottom: 0;
78-
width: 80px;
79-
clip-path: polygon(0 0, 100% 0, 0 100%);
80-
z-index: 1;
81-
background-color: inherit;
77+
// .triangle {
78+
// position: absolute;
79+
// right: 300px; // same as image width
80+
// top: 0;
81+
// bottom: 0;
82+
// width: 80px;
83+
// clip-path: polygon(0 0, 100% 0, 0 100%);
84+
// z-index: 1;
85+
// background-color: inherit;
8286

83-
@media (max-width: 768px) {
84-
display: none;
85-
}
86-
}
87+
// @media (max-width: 768px) {
88+
// display: none;
89+
// }
90+
// }
8791
}
8892

8993
/* === COLOR UTILITIES === */
9094
.bg-yellow {
91-
background-color: #ffcf00;
95+
background-color: var(--mikado);
9296
}
9397
.bg-purple {
94-
background-color: #662e9b;
98+
background-color: var(--jam);
9599
}
96100
.text-black {
97-
color: #000;
101+
color: black;
98102
}
99103
.text-white {
100-
color: #fff;
104+
color: white;
105+
}
106+
107+
.button-white {
108+
border: white 2px solid;
109+
color: white;
110+
}
111+
112+
.button-black {
113+
border: black 2px solid;
114+
color: black;
101115
}

client/src/pages/Home/Home.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -271,8 +271,8 @@ const AboutUsSection = () => {
271271
title={info.title}
272272
content={info.description}
273273
photoUrl={slideshow1}
274-
bgColor="bg-yellow"
275-
textColor="text-black"
274+
bgColorClass={index == 1 ? 'bg-purple' : 'bg-yellow'}
275+
textColorClass={index == 1 ? 'text-white' : 'text-black'}
276276
/>
277277
// <div className="otherevents-subsubcontainer" key={info.title}>
278278
// <div className="otherevents-image-container">

client/src/pages/Home/otherevents.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
export const otherEventsData = [
22
{
3-
title: 'BLACK STUDENT ORIENTATION',
3+
title: 'Black Student Orientation',
44
description:
55
"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>.",
66
image: '../../assets/misc/blackstudentorientationlogo.png',
77
},
88
{
9-
title: 'FACULTY ORIENTATION EVENTS',
9+
title: 'Faculty Orientation Events',
1010
description:
1111
"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>!",
1212
image: '../../assets/misc/facultylogo.png',

0 commit comments

Comments
 (0)