DR 26B Alignment SelectionPage (merged with develop)

[cheesehero112]

Summary of Changes

This branch has the same changes but merged with develop after @RubySpeeders 's last PR.

• Picture size to 150px (slightly smaller) to match Figma
• Buttons and return links are now on lower right
• “Return to -” links are white and underlined

---

Summary of Implementation Logic

• Created new stylings for Return links and Button container

---

Issue Link

Original Issue: Task 26

---

Screen shots / Videos

---

Acceptance Criteria

The goal of this ticket is to match the Figma design of the Selection Page, so it is not technically done yet, but I feel that these changes will improve the design a lot. We might want to create smaller tickets to continue the effort of implementing Figma design.

Checklist for PR Owner

• [x] Standardized PR Title
• [x] Included relevant videos and screen shots
• [x] Included Summary of Changes
• [x] Included Summary of Implementation Logic
• [ ] Acceptance Criteria are fufilled

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
drum-roulette	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 2, 2024 5:03am

[cheesehero112]

@RubySpeeders I fixed everything, except I'm not sure what the end result should look like with aligning <ItemCards /> to left. When I put flex-start to musicians makeStyles() function in SelectionContainer.tsx, the h2 titles (Select Musicians & Select Instruments) don't align with images as you change the window size. (see screenshot) Is this what you meant?

I see that our Figma design has the h2 titles aligned left, but the musicians & instruments images seem to be in an even grid. Perhaps this should be a different ticket if the goal is to match the figma design (minus the drop down filter menu).

[cheesehero112]

@RubySpeeders My last commit has all the changes requested including adding the "flex-start", but I forgot to merge with the recent develop. Looks like there shouldn't be any merge conflict, but just wanted to mention that here.

[RubySpeeders]

changes look really good! I think maybe align-items can be flex-start instead of center, which will get the h2 also left-aligned, and then some padding around the whole area so that it doesn't look so drastic? We could move this to another ticket if it makes you more comfortable!

I just merged with develop, and as you suspected, no merge conflicts :)

[cheesehero112]

@RubySpeeders Ok - let me know what you think. When I pulled develop, the font of h2 somehow became different, so I used and inline styling to match Figma font size and style. (I tried to first use makeStyles() but it didn't work)