Filled vs Unfilled Bookmarks

[ChristopherChudzicki]

What are the relevant tickets?

https://github.com/mitodl/hq/issues/4712

Description (What does it do?)

Makes userlist bookmark and learningpath icon filled vs unfilled based on membership in at least 1 list.

Screenshots (if appropriate):

Cards

List Cards

List Cards, Mobile

How can this be tested?

1. As a logged in user, click the bookmark button on a card to change its membership in "userlists".
   • try this throughout the app, particularly for horizontal "ListCard" (search page) and vertical cards
2. When the resource belongs to at least one list, the bookmark should be filled.
3. When the resource belongs to zero lists, the bookmark should be unfilled.
4. The stafflist button should behave similarly.
5. Try adding/removing featured courses (homepage "Featured Courses" carousel) to a userlist.
   • in contrast to RC, the carousel resources should maintain their order.

[abeglova]

You should add a little more padding around the list icon, it overlaps the learning format on smaller mobile screens (chrome iphone SE screen shown) this doesn't happen on main

[ChristopherChudzicki]

@abeglova One thing to keep in mind is that normal users only have a single icon—the list icon is only visible to staff.

But even for normal users, this exacerbates the overlap issue more than it should. I'll adjust a bit.

E.g.,

[ChristopherChudzicki]

@abeglova I've tweaked the button positioning to account for button paddings. The cards should look good at 375px with one button, and may look good with 2 buttons depending on date length.

[ChristopherChudzicki]

pre-commit.ci run

[ChristopherChudzicki]

Since github says this is mergable, and pre-commit just says

timeout waiting for merge ref

I'm going to merge this.