feature/event-page by JotinderBhamra · Pull Request #42 · UoaWDCC/ssa

JotinderBhamra · 2026-04-28T04:44:57Z

What does this PR do?

Implemented the initial Events listing page including the Ice Kachang hero section, search functionality, and category filters. Added necessary SVG and PNG assets

Type of change

Feature
Bug fix
Chore / config
Hotfix

Checklist

My branch follows the naming convention (feature/, fix/, chore/, hotfix/)
My commit messages follow the conventional commits format
CI checks pass

oorjagandhi

Overall good start on the events page! It's clear you've put a lot of effort into it. Remember to run prettier to get the CI checks passing.

I’ve left some specific comments inline but here are some broader thoughts:

In React, generally you want to avoid putting all the code in a single file for a page (component based architecture, read more: https://www.geeksforgeeks.org/reactjs/react-component-based-architecture/). Could you extract code into smaller components. i.e. having a UpcomingEventCard, RSVP button, SearchBar, EventCategories, etc. This will make the code more readable and maintainable.
In regards to the images, can you please move some images into different folders for more accuracy, i.e. clock/location icons are not specific to only events so should be put in an ‘icon’ folder or similar
A lot of the TailwindCSS seems to have quite oddly specific values with no justification, and the overall mobile responsiveness could be improved. In general, if you write code that may not be obvious to the code reviewer, you should write some justification either in the comments (if it’s short) or in the PR description.
Here are some good videos to watch on responsive design with TailwindCSS: https://www.youtube.com/watch?v=PuovsjZN11Y and https://www.youtube.com/watch?v=l04dDYW-QaI

Looking forward to see you implement the changes!!!

joengy · 2026-05-02T14:57:18Z

+              <button
+                type="button"
+                className="inline-flex min-h-10 w-full items-center justify-between rounded-full border-2 border-ssa-red bg-ssa-pink px-4 py-2 text-left font-averia text-xs font-bold uppercase tracking-[0.04em] text-ssa-red transition-colors duration-200 hover:bg-ssa-red hover:text-ssa-pink md:min-h-14 md:px-8 md:text-2xl"
+              >
+                <span>RSVP Now</span>
+                <span
+                  aria-hidden="true"
+                  className="text-base leading-none md:text-3xl"
+                >
+                  →
+                </span>
+              </button>


bug: As you can see the RSVP button follows the same style as the "All" button to show that its been selected (light pink), but I assume the button should be showing the darker red colour to show that the user can interact with the button right?

joengy · 2026-05-02T15:03:59Z

+                      key={category}
+                      type="button"
+                      onClick={() => setSelectedPastEventCategory(category)}
+                      className={`rounded-full border-2 px-3 py-1 font-averia text-[10px] font-bold transition-colors duration-200 md:min-h-[62px] md:px-8 md:text-[25px] ${


nitpick: Right now the Inactive button hover (hover:bg-ssa-pink hover:text-ssa-red) renders identically to the active state (bg-ssa-pink text-ssa-red). So if a user mouses over an inactive category, it looks selected so they can't tell which one actually is. Might be worth bringing this up with Sydney to have a more distinct way of differentiating them (e.g. lighter pink, or just darken the red bg) so the active state stays visually unique or maybe not apply it to all by default at all.

you can see from my screenshot I'm hovering over the game option without having clicked it yet, could be a little confusing.

Updated the button

joengy

Hey Jotinder, great improvement and it's really clear you took the feedback from the meeting, as you broke the page into smaller components (EventCategoryButton, EventCategoryFilters, EventSearchInput, HighlightCard).

I've left some inline comments below, the main things to address are swapping the CTA <a> to a Next.js <Link>, moving the clock/location icons to a shared folder (Oorja's carry-over from last review). There are a few minor token and sizing inconsistencies too, but nothing too complex. Once those are sorted this is looking close to mergeable, really happy with your stuff, good work!

joengy · 2026-05-09T07:27:14Z

+        <a
+          href={ctaHref}
+          className="mt-8 inline-flex min-h-14 w-full max-w-[553px] items-center justify-between gap-4 rounded-full bg-ssa-card-cta px-6 font-averia text-xl font-bold text-ssa-muted-gold transition-colors hover:bg-ssa-card-cta-hover focus:outline-none focus:ring-2 focus:ring-ssa-muted-gold focus:ring-offset-2 focus:ring-offset-ssa-card lg:mt-auto lg:h-[68px] lg:text-[25px]"


The CTA uses <a href={ctaHref}> but it's called with ctaHref="/events", which is an internal route. In Next.js, internal links should use <Link> to avoid a full page reload and get prefetching.

Suggested change

<a

href={ctaHref}

className="mt-8 inline-flex min-h-14 w-full max-w-[553px] items-center justify-between gap-4 rounded-full bg-ssa-card-cta px-6 font-averia text-xl font-bold text-ssa-muted-gold transition-colors hover:bg-ssa-card-cta-hover focus:outline-none focus:ring-2 focus:ring-ssa-muted-gold focus:ring-offset-2 focus:ring-offset-ssa-card lg:mt-auto lg:h-[68px] lg:text-[25px]"

<Link

href={ctaHref}

className="mt-8 inline-flex min-h-14 w-full max-w-[553px] items-center justify-between gap-4 rounded-full bg-ssa-card-cta px-6 font-averia text-xl font-bold text-ssa-muted-gold transition-colors hover:bg-ssa-card-cta-hover focus:outline-none focus:ring-2 focus:ring-ssa-muted-gold focus:ring-offset-2 focus:ring-offset-ssa-card lg:mt-auto lg:h-[68px] lg:text-[25px]"

>

<span>{ctaLabel}</span>

<span aria-hidden="true">→</span>

</Link>

Remember to add import Link from 'next/link' at the top.

joengy · 2026-05-09T07:31:09Z

+}
+
+const categoryButtonBaseClassName = [
+  'rounded-full border-2 px-3 py-1 font-averia text-[10px] font-bold',


text-[10px] on mobile is very small for a button label, and md:text-[25px] / md:min-h-[62px] on line 12 are non-standard Tailwind values. I understand the mobile design is not finished yet so might be worth skipping for now and then coming back later to implement the mobile design for our app (probably something worth bringing up to with Oorja and or Sydney).

left in-line comment regarding mobile design and will discuss with sydney

joengy

Great work Jotinder, you've addressed all the blockers from last round the swap, the max-w consistency, the Figma value comments, the icon folder restructure, and the aria-label on the search input are all in. CI is green, the page renders, and the new HighlightCard component is nicely reusable.

oorjagandhi

Looks really good! Great work on the HighlightCard component :)
A few pieces of feedback:

Please use MaterialUI or React icons for the icons instead of svgs. Robin has used something similar in his PR so you can refer to how he uses that.
Overall the card looks a bit too large compared to other elements (like the hero). Could you resize the card to look smaller, could also tighten some of the padding in places / reduce font size. Have a play around and see what looks best, or ask Sydney for her opinion / advice in the meeting
the tags for prices should have a different font (screenshot below

There should be a bit more spacing between the card and the top of the hero
This isn't direct feedback, just making u aware that the image in the card will always be a 4:5 aspect ratio (same as Instagram) so the card should be styled knowing that the image will always be 4:5.

Overall really good changes! Seeing some great progress :)

oorjagandhi

Almost looks good to me!

Some of the TailwindCSS values are a bit too specific, i.e. lg-leading-[23.67] should be rounded up/down to an integer. Maybe talk to Joe about some alternatives to make it more clean?

Also minor nit: could you remove the comments that reference Figma? Comments like these can become stale, since the design will change but the comment won't (which can be misleading for future readers)

Overall good work though! Really impressed with the work you've done :)

oorjagandhi · 2026-05-13T03:31:13Z

      />
+
+      <section className="px-6 md:px-10 lg:px-16">
+        <div className="mx-auto w-full max-w-[1214px]">


The max-w-[1214px] here is redundant as this is defined in HighlightCard.tsx, you can remove it :)

oorjagandhi · 2026-05-13T03:38:21Z

      />
+
+      <section className="px-6 md:px-10 lg:px-16">
+        <div className="mx-auto w-full max-w-[1214px]">


Nice work on putting this on the home page too! Could you please make the text colour text-ssa-grey for this component like the event page?

oorjagandhi · 2026-05-13T03:43:01Z

        mascotAlt="SSA Merlion mascot"
      />
+
+      <section className="px-6 md:px-10 lg:px-16">


Nice work on putting this on the homepage!! Could you please make the paragraph text gray on the event card component like the events page :)

new colour named smoke-grey added and is already implimented on both pages

weird, I did a fresh checkout of your branch and it looks fine now. Sorry for the inconvenience

oorjagandhi

Looks good! Awesome work on this PR - thanks for taking on all the feedback :)

joengy

The event page is looking really good, thanks for implementing changes based on our feedback in such a fast manner. Great job Jotinder!!!

EVENT-01 - Top of events listing page

fc18f73

JotinderBhamra changed the title ~~EVENT-01 - Top of events listing page~~ feature/event-page Apr 28, 2026

oorjagandhi requested changes Apr 29, 2026

View reviewed changes

Comment thread web/src/app/events/page.tsx Outdated

Comment thread web/src/app/events/page.tsx Outdated

Comment thread web/src/app/events/page.tsx Outdated

Comment thread web/src/app/events/page.tsx Outdated

joengy reviewed Apr 29, 2026

View reviewed changes

Comment thread web/src/app/events/page.tsx Outdated

Refine events page layout and styles

d8be426

joengy reviewed May 2, 2026

View reviewed changes

JotinderBhamra added 3 commits May 5, 2026 13:35

Addressing joes comments

54b3c1b

Merge branch 'main' into feature/events-page

4a86e89

Made components and overall page

5259525

joengy requested changes May 9, 2026

View reviewed changes

addressed comments i think

1f0bbe7

joengy previously approved these changes May 11, 2026

View reviewed changes

oorjagandhi requested changes May 12, 2026

View reviewed changes

JotinderBhamra added 2 commits May 12, 2026 21:47

Merge branch 'main' into feature/events-page

1690e11

Addressing oorjas comments

1c63b89

JotinderBhamra dismissed joengy’s stale review via 1c63b89 May 13, 2026 01:13

oorjagandhi requested changes May 13, 2026

View reviewed changes

final comments?

9c1fe7e

oorjagandhi approved these changes May 13, 2026

View reviewed changes

joengy approved these changes May 13, 2026

View reviewed changes

joengy merged commit cdfb7e8 into main May 13, 2026
3 checks passed

joengy mentioned this pull request May 13, 2026

Feature/past events #72

Open

Conversation

JotinderBhamra commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Type of change

Checklist

Uh oh!

oorjagandhi left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joengy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

joengy left a comment

Choose a reason for hiding this comment

Uh oh!

oorjagandhi left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oorjagandhi left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oorjagandhi May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oorjagandhi left a comment

Choose a reason for hiding this comment

Uh oh!

joengy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

JotinderBhamra commented Apr 28, 2026 •

edited

Loading

oorjagandhi left a comment •

edited

Loading

oorjagandhi May 13, 2026 •

edited

Loading