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 (aka 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, to match the Figma design.
• Made the report and add review buttons actual button classes.
• 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.
• Replaced the course/professor dropdown with a multiple-select search dropdown.
• Below 600px, the sorting menu is now 3 rows, one for each dropdown/checkbox.
• Renamed and reordered CSS classes for clarity.

Things that still need to be fixed

• I was unable to vertically center multiple elements, listed below. I’m unsure if these are all caused by the same problem.
  • The author badge (and most likely verifier badge too).
  • The voting label, counter, and upvote/downvote buttons. Not sure if this needs to be centered, but I'd prefer it to be.
  • The “show verified reviewers only” checkbox. Not sure if this needs to be centered.
• I’m not sure which shades of blue to use for which elements. The main difference is between the darker blue see in react-bootstrap button elements, such as the "new review" button, and the peterportal primary color's slightly ligher shade of blue, seen for example when the quality of a rating is equal to 5.
• The sort/filter menu could be improved.
  • In dark mode, the label for the verified reviews checkbox doesn't look correct because it still has black text and a non-transparent background. There is a CSS class for these properties, but for a reason unknown to me, it's not being applied to this label.
  • In dark mode, both dropdowns have a light blue outline, which seems like an odd choice of design in my opinion.
  • I'm not sure how wide the dropdown menus and the checkbox should be (for greater than 600px).

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 appeat (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.