From 5b63c784b4b031325546a647b9cba2acbc70f1b8 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sat, 15 Aug 2026 12:12:19 +0100
Subject: [PATCH] fix(course): use distinct shield-check icon for Compliance
 nav (#906)

* fix(course): use shield-check icon for compliance nav

Certificates and Compliance both used CertificateIcon in the course
sidebar; point Compliance at Lucide's shield-check instead.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(ui): add ShieldCheckIcon moving icon for compliance nav

Replace the Lucide shield-check import with a moving-icons component
matching sibling hover-animation patterns, and use it for Compliance.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(course): use moving BotIcon for AI tutor nav

Switch the course sidebar AI Assistant item from Lucide bot to the
shared moving-icons BotIcon so hover animation matches other nav items.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>
---
 .../sidebar/course-sidebar-navigation.svelte  |  5 +-
 packages/ui/src/custom/moving-icons/index.ts  |  1 +
 .../custom/moving-icons/shield-check.svelte   | 77 +++++++++++++++++++
 3 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 packages/ui/src/custom/moving-icons/shield-check.svelte

diff --git a/apps/dashboard/src/lib/features/course/components/sidebar/course-sidebar-navigation.svelte b/apps/dashboard/src/lib/features/course/components/sidebar/course-sidebar-navigation.svelte
index b7e91784..86de0ee4 100644
--- a/apps/dashboard/src/lib/features/course/components/sidebar/course-sidebar-navigation.svelte
+++ b/apps/dashboard/src/lib/features/course/components/sidebar/course-sidebar-navigation.svelte
@@ -8,10 +8,10 @@
   import { BackButton } from '@cio/ui';
 
   import TableOfContentsIcon from '@lucide/svelte/icons/table-of-contents';
-  import BotIcon from '@lucide/svelte/icons/bot';
   import {
     AnalyticsIcon,
     AttendanceIcon,
+    BotIcon,
     CertificateIcon,
     ContentIcon,
     HoverableItem,
@@ -21,6 +21,7 @@
     PeopleIcon,
     PremiumIcon,
     SettingsIcon,
+    ShieldCheckIcon,
     SubmissionIcon
   } from '@cio/ui/custom/moving-icons';
   import { ContentType } from '@cio/utils/constants/content';
@@ -248,7 +249,7 @@
     } else if (id === NAV_IDS.MARKS) {
       return MarksIcon;
     } else if (id === NAV_IDS.COMPLIANCE) {
-      return CertificateIcon;
+      return ShieldCheckIcon;
     } else if (id === NAV_IDS.PEOPLE) {
       return PeopleIcon;
     } else if (id === NAV_IDS.ANALYTICS) {
diff --git a/packages/ui/src/custom/moving-icons/index.ts b/packages/ui/src/custom/moving-icons/index.ts
index 567f9818..1f53f08f 100644
--- a/packages/ui/src/custom/moving-icons/index.ts
+++ b/packages/ui/src/custom/moving-icons/index.ts
@@ -31,6 +31,7 @@ export { default as RadioIcon } from './radio.svelte';
 export { default as ReviewIcon } from './review.svelte';
 export { default as SettingsIcon } from './settings.svelte';
 export { default as SetupIcon } from './setup.svelte';
+export { default as ShieldCheckIcon } from './shield-check.svelte';
 export { default as SubmissionIcon } from './submission.svelte';
 export { default as TagIcon } from './tag.svelte';
 export { default as UploadIcon } from './upload.svelte';
diff --git a/packages/ui/src/custom/moving-icons/shield-check.svelte b/packages/ui/src/custom/moving-icons/shield-check.svelte
new file mode 100644
index 00000000..aa5f7065
--- /dev/null
+++ b/packages/ui/src/custom/moving-icons/shield-check.svelte
@@ -0,0 +1,77 @@
+<script>
+  /**
+   * @typedef {Object} Props
+   * @property {string} [color]
+   * @property {number} [size]
+   * @property {number} [strokeWidth]
+   * @property {boolean} [isHovered]
+   * @property {string} [class]
+   */
+
+  /** @type {Props} */
+  let { color = 'currentColor', size = 24, strokeWidth = 2, isHovered = false, class: className = '' } = $props();
+
+  function handleMouseEnter() {
+    isHovered = true;
+    setTimeout(() => {
+      isHovered = false;
+    }, 500);
+  }
+</script>
+
+<div class={className} aria-label="shield-check" role="img" onmouseenter={handleMouseEnter}>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    stroke-width={strokeWidth}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="shield-check-icon"
+    class:animate={isHovered}
+  >
+    <path
+      d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+    />
+    <path d="m9 12 2 2 4-4" class="check-path" />
+  </svg>
+</div>
+
+<style>
+  div {
+    display: inline-block;
+  }
+  .shield-check-icon {
+    overflow: visible;
+  }
+
+  .check-path {
+    stroke-dasharray: 9;
+    stroke-dashoffset: 0;
+    transition:
+      stroke-dashoffset 0.125s ease-out,
+      opacity 0.125s ease-out;
+  }
+
+  .shield-check-icon.animate .check-path {
+    animation: checkAnimation 0.5s ease-out backwards;
+  }
+
+  @keyframes checkAnimation {
+    0% {
+      stroke-dashoffset: 9;
+      opacity: 0;
+    }
+    33% {
+      stroke-dashoffset: 9;
+      opacity: 0;
+    }
+    100% {
+      stroke-dashoffset: 0;
+      opacity: 1;
+    }
+  }
+</style>