Design refinements

[ROlearyPro]

Type of Change

• styling 🎨
• refactor 🧑‍💻
• testing 🧪

Description

Adds various styling details to menu bar and mobile menu bar, standardizes colors and design to match the design doc specifications more closely, and adds Aria labeling for Mobile and Menu bar. Additionally, there were minor test changes, to ensure they worked with the Aria and styling changes.

Please note that despite the branch name, this is not purely a mobile design update, as Aria among other things required changes to both the Desktop and the Mobile menus.

Motivation and Context

This allows people who are handicapped or who would otherwise have difficulty accessing the websites content to do so more easily, and brings the design of the site closer towards the design specified at the outset.

#50

Related Tickets

#50

Screenshots (if appropriate):

## Added Test? - - [x] No 🙅 - [x] All previous tests still pass 🥳 ## Checklist: - [x] My code follows the code style of this project.

[ROlearyPro]

Just making sure I'm as up to date as possible.

[reneemes]

Hey Ryan, It looks like you might not have the current updates to main, the menu bar specifically, that was just merged in.

[reneemes]

Looks like in your photos, the spacing changed on the mobile menu bar, something Candice and I just fixed and merged into main. Additionally, the words were removed from the mobile menu bar to become more uniform with the rest of the application, and I noticed they are still on your branch.

[reneemes]

Excellent work adding the Aria tags, as this will definitely make the application more accessible.

[reneemes]

It also looks like the icon color changing on your branch is also outdated, which is something Candice and I just changed in our most recent PR that was merged.

[ROlearyPro]

This should bring things into line with the other branch. I'm not sure why I didn't see any merge conflicts when I pulled down from main, but I manually resolved things. Some colors are slightly different, due to the previous colors pinging as accessibility concerns. I tried to keep them as close as possible to the previous colors, so let me know if this works for everyone.

[ROlearyPro]

Saw that circleAi failed, so I changed something that should fix it up. It means we can't quite get the nice sliding look, but tests should work, which is more important. Currently testing it all now.

[reneemes]

Seems like you added words back to the mobile menu bar after Candice and I just changed it and took them out. Additionally, the styling of the account button at the bottom of the desktop does not mach the PR we just implemented, though maybe this was just an oversight, as the icon is supposed to change color and not the area around it.

[ROlearyPro]

As I told Candice, I was specifically told to include the words, as the icons were described to me by other members of the group as not being enough to identify each button's functionality. The latter was primarily a result of accessibility testing causing issues otherwise.

[jphill19]

@reneemes

"> Seems like you added words back to the mobile menu bar after Candice and I just changed it and took them out.

Thanks for the feedback about removing the text from our mobile menu bar, but I’m not sure I understand why. The text implemented in there was feedback from both from me and Charles to have it added in there. Could you share more about your reasoning? From my perspective, text labels alongside icons are common in mobile menus and improve clarity. I’d love to hear your thoughts so we can decide the best direction.

I was unaware that there were two groups working on the menu bar at the same time.

[CCirbo]

Ryan, thank you for making the requested changes to the slide-out menu bar, the profile picture is now in a good spot.
I also appreciate the new gif that you made for the readme for the mobile menu bar.

I wish the work that Renee and I did on the menu bar, especially in the menubar.tsx file wasn't being extensively changed by this PR, the code was moved around after we specifically and significantly rewrote it for better readability, and this PR undoes that I believe unnecessarily. However, in the interest of time, and for the good of the project overall, I am approving this PR and merging it because the aria tags and accessibility are a needed change.