Improve review UI (a sequel to #545: Fix rating review overflow)

[charlieweinberger]

Improved several aspects of PeterPortal reviews.

Description

This pull request is a continuation of pull request #545: Fix rating review overflow. As you’ll see, I made a lot more changes than just fixing the rating overflow, so I figured it’d be better to make a new branch. I do apologize in advance for the mess that I’ve caused, creating multiple pull requests and whatnot. Hopefully, it all works out in the end, with the best possible code being the output. In the future, I'll try to stick more closely with the corresponding pull request I'm fixing, and just create more issues whenever I find things that I think could be improved. I already have more ideas of how to improve reviews, but I didn't want to implement anything TOO drastic.

After pushing code to pull request #545 a few hours ago, I continued to work on the UI/UX for reviews, because while working I noticed many things that could be improved, and I was in the mood to fix them. I will admit, I got carried away with it, and many of the changes I made are not related to the original issue. However, I do believe that these changes are an improvement to the current UI/UX, and I hope you agree with me. Let me know your thoughts.

Note that this version that I’m committing is not ready to be merged. As you’ll see when you check it out, it has many red boxes, although they may be commented out. I use these to help me identify both the boundaries of elements, and what needs fixing. The latter will apply to you - anything that has a box around it still either needs to be fixed, or at least has a question corresponding to it. I’m mainly looking for feedback on my changes, which I can then implement, and THEN merge to main.

Things I fixed

• Fixed responsiveness issues from the previous commit (pull request Fix rating review overflow #545).
• Fixed/improved many responsiveness issues by largely replacing the use of margin w/ flexboxes.
• Moved review date into 2nd subreview details element, above the now-named “quarter” and “grade” labels, to match the Figma design.
• Updated the color of review tags to be peterportal-primary-color-1, to match the Figma design.
• Turned the report and add review buttons into react-bootstrap buttons.
• Improved the report button UI by fixing the text color when in light mode and adding rounded edges
• Removed a bug where the horizontal spacing between the sort/filter dropdowns changed when the height of the window changed.
• Vertically centered the voting elements, to align with the report button.
• Updated the “show verified reviewers only” checkbox from the semantic-ui component to the react-bootstrap component, vertically centered it to align with the dropdowns, and fixed the coloring issues that followed.
• Below 600px, the sorting menu is now 3 rows, one for each dropdown/checkbox.
• Renamed and reordered CSS classes for clarity.

Screenshots

Before:

After:

Test Plan

• Take a look at my changes and compare them to current PeterPortal reviews.
• Test reviews in both light & dark mode.
• Test reviews anywhere they can appear (courses, professors, and the 'unverified reviews' tab).
• Test reviews for all window sizes (anywhere from 1600px to 400px), with a focus on the breakpoints of 1300px and 600px.

Issues

Closes issue #304 and pull request #545

[laggycomputer]

Note that this version that I’m committing is not ready to be merged.

Should this be marked as a draft?

[charlieweinberger]

Note that this version that I’m committing is not ready to be merged.

Should this be marked as a draft?

I didn't know that was something you could do for pull requests, but yes, that would seem to apply.

[charlieweinberger]

Just converted this to a draft, thanks for the heads up. However, I'd still like others (mainly @Awesome-E) to review this pr and let me kow their feedback.

[Awesome-E]

the check box should be inside the label, otherwise clicking on the text to select the checkbox no longer works