Merge course popovers

[CadenLee2]

Merge the course info popover and the missing prerequisites popover into one, merge their icons, refactor this into a new component, update styles

Description

Currently, there are two popovers for a course: the course information popover, and the warning popover for missing prerequisites.

• This PR merges the two popovers into one, which displays course information and a warning for missing prerequisites if they exist
• The two hoverable icons (info circle and warning triangle) are also merged into one, which is a warning triangle if missing prerequisites exist and a blue info circle otherwise
• The popover explicitly opens to the left in the search results and to the right in the roadmap so as not to go off screen
  • A note about code: in any Course where we want the popover to open to the left, the prop openPopoverLeft={true} must be explicitly set, because Boostrap's auto placement was broken and it often went off screen. If openPopoverLeft is not included, the popover will open to the right.
  • On mobile, the popover always opens to the bottom, regardless of whether it was set to open on the left
• The merged course popover is now a new component, CoursePopover
• The popover styles/organization mostly conform to those in the Figma design (note that certain features shown in the Figma like the quarter offerings list are not yet added, and that the list of all prerequisites is currently still included because it is easy to remove later if wanted)
• ppc-popover is now an available CSS class in App.scss for such popovers (React Bootstrap popovers)

Screenshots

Before:


After:

Dark mode, and opening on the left side (from the roadmap search) (note that the hoverable icon looks small due to the quarter offerings and small width, which will be fixed later when the Roadmap Search Redesign PR is merged):

Opening on the bottom in mobile:

Test Plan

Check the above changes in the staging instance:

• On desktop and mobile
• In light and dark mode
• For normal courses and courses with missing prerequisites
• With a small screen

Verify successful deployment

Issues

Closes #526

[Awesome-E]

wrapped a couple elements in braces {} and tweaked some styles. just check it, make any fixes, and feel free to merge

[CadenLee2]

After updating from main (the Roadmap Search Redesign), there is now a problem with the popover positions, currently unpredictable, and it should be resolved before this is merged because it can severely impact the usage of the website.

Description

• Sometimes (reason/exact conditions unknown), the popovers for courses in the roadmap open in the top-left corner of the page rather than their correct positions
• Their "placement" direction is correct still (arrow is on the correct side), they just have the wrong location

Steps to replicate (potentially):

• Open the staging instance on a desktop browser
• In the Roadmap search, search for ICS 33; drag it into Fall of Year 1. Notice the popover for the warning icon opens correctly (to the right).
• Search for ICS 31; drag it into the Fall of Year 1, before ICS 33. Hover the info icon. The popover opens in the top-left corner of the page, in the correct "placement" direction (arrow on the correct side), but entirely in the wrong place. The ICS 33 popover should still be correct.
• Now try exchanging their positions (dragging the 33 up to above the 31). Both of their popovers should be in the wrong place now.
• After various exchanges, adding of courses, and so on, certain course popovers will, seemingly arbitrarily and inconsistently, open in the wrong place.

Notes

• This problem only started happening after updating the from main.
• An inconsistency potentially related to this issue seems to exist on the current production deployment, though it's not noticeable at all because the popovers keep a relatively expected position:
  • Search for any course in the roadmap in production on desktop
  • Hover over its info icon. Notice that the info popover's arrow ends exactly in the middle of the icon. Now move the mouse then re-hover over the same icon. The popover has moved slightly to the left.
  • To my knowledge, this did not exist before
• Using developer tools to inspect, the mispositioned popovers in this branch all seem to have transform: translate(7px) set (as opposed to the correct value of the transform)
• This affects mobile as well
• This does not affect courses in the search results

[CadenLee2]

The above problem is now fixed by wrapping the conditional icon in a div

[timobraz]

LGTM, works on mobile and dark/light mode