UI/UX: Helpful Link card UI isn't consistent with Library Card Component

[jtucholski]

Issues:

1. Horizontal Alignment of Image and Title:

   • Current Behavior: Library Cards display the image and title horizontally aligned, while Helpful Links stack the favicon image above the title.
   • Expected Behavior: Helpful Link cards should align the image and title horizontally, like Library Cards.

2. Bottom Border Below Title:

   • Current Behavior: Library Cards include a bottom border below the title, but Helpful Link cards do not.
   • Expected Behavior: Helpful Link cards should include the same bottom border as Library Cards.

3. Description Text Font Size:

   • Current Behavior: Library Cards use a description text font size of 12px, while Helpful Link cards use 14px.
   • Expected Behavior: Helpful Link cards should use the same description text font size (12px) as Library Cards.

4. Favorite Icon Tooltip:

   • Current Behavior: The Library Card favorite icon includes a tooltip on hover, but the Helpful Link favorite icon does not.
   • Expected Behavior: Helpful Link cards should include tooltips when hovering over the favorite icon, consistent with Library Cards.

5. Clickable Cursor Icon:

   • Current Behavior: Helpful Link cards do not display a cursor icon on hover to indicate that they are clickable.
   • Expected Behavior: Helpful Link cards should display a cursor icon on hover to signal clickability.

6. Pager Component Missing:

   • Current Behavior: The Helpful Link tab does not include a pager component.
   • Expected Behavior: Add a pager component to the Helpful Link tab to match the behavior of other tabs in the Knowledge Center.

Library Card (seen in Knowledge Center)

Helpful Link Card (seen in Knowledge Center)

[jtucholski]

It looks like the Helpful Links pagination control is visible on the Admin View but I didn't see it in the Student View.