FIX: Update Sidebar Icons for "Learning Path" and "Trending Content"

[chrissantillan]

Description:

Replace the current icons for Learning Path and Trending Content in the Resident's left-hand sidebar navigation with the new icons provided:

• Trending Content: Replace the current icon with the graph-like icon (first image).
• Learning Path: Replace the current icon with the road-like icon (second image).

Ensure the updated icons match the existing design style, size, and spacing of the sidebar navigation.

Tasks:

• Asset Updates:

  • Add the new Trending Content (graph-like) and Learning Path (road-like) icons to the project assets.

• Frontend Implementation:

  • Replace the existing Learning Path icon with the new road-like icon.
  • Replace the existing Trending Content icon with the new graph-like icon.
  • Ensure the icons are properly aligned and scaled within the sidebar navigation.

• Testing:

  • Verify that the new icons display correctly in the left-hand sidebar.
  • Check for consistent alignment and spacing with other icons.
  • Ensure the sidebar remains responsive and visually appealing across all screen sizes.

Sample Screenshot (Before):

**Icons (After):

• Learning Path (rocket-launch icon)
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" /> </svg>

• Trending Content (arrow-trending-up icon)
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18 9 11.25l4.306 4.306a11.95 11.95 0 0 1 5.814-5.518l2.74-1.22m0 0-5.94-2.281m5.94 2.28-2.28 5.941" /> </svg>

Acceptance Criteria:

• The Learning Path icon is updated to the road-like icon.
• The Trending Content icon is updated to the graph-like icon.
• Icons are properly aligned and scaled in the sidebar.
• Clicking the icons navigates correctly to their respective pages.
• Sidebar navigation remains responsive and visually consistent.

[jtucholski]

@chrissantillan Do you know if the icons are listed here on https://heroicons.com/?

[chrissantillan]

@jtucholski those particular ones are not in heroicons. The closest one in heroicons is arrow-trending-up (there is no road icon).

[chrissantillan]

Changed the icons to heroicons:
Trending Content: arrow-trending-up

Learning Path: rocket-launch