Refactor/code-reivew (#7893)

## Summary

<!-- One sentence describing what changed and why. -->
https://github.com/Comfy-Org/ComfyUI_frontend/pull/7871
https://github.com/Comfy-Org/ComfyUI_frontend/pull/7858
I refactored the code based on the reviews I received on those two PRs.

## Changes

- **What**: 

1. Updated IconGroup to address the backgroundClass handling.
2. Replaced text-gold-600 with a semantic color token.
3. Replaced PrimeVue Icon with a lucide icon.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7893-Refactor-code-reivew-2e26d73d365081e68a44e89ed1163062)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: GitHub Action <action@github.com>

src/components/button/IconGroup.vue

@@ -2,8 +2,8 @@
   <div
     :class="
       cn(
-        'flex justify-center items-center shrink-0 outline-hidden border-none p-0 rounded-lg shadow-sm transition-all duration-200 cursor-pointer',
-        backgroundClass || 'bg-secondary-background'
+        'flex justify-center items-center shrink-0 outline-hidden border-none p-0 rounded-lg shadow-sm transition-all duration-200 cursor-pointer bg-secondary-background',
+        backgroundClass
       )
     "
   >

src/components/dialog/content/MissingNodesHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex w-full items-center justify-between p-4">
     <div class="flex items-center gap-2">
-      <i class="icon-[lucide--triangle-alert] text-gold-600"></i>
+      <i class="icon-[lucide--triangle-alert] text-warning-background"></i>
       <p class="m-0 text-sm">
         {{
           isCloud

src/components/topbar/TopbarBadge.test.ts

@@ -161,7 +161,7 @@ describe('TopbarBadge', () => {
       )
 
       expect(wrapper.find('.bg-gold-600').exists()).toBe(true)
-      expect(wrapper.find('.text-gold-600').exists()).toBe(true)
+      expect(wrapper.find('.text-warning-background').exists()).toBe(true)
     })
 
     it('uses default error icon for error variant', () => {
@@ -185,7 +185,9 @@ describe('TopbarBadge', () => {
         'full'
       )
 
-      expect(wrapper.find('.pi-exclamation-triangle').exists()).toBe(true)
+      expect(wrapper.find('.icon-\\[lucide--triangle-alert\\]').exists()).toBe(
+        true
+      )
     })
   })
 

src/components/topbar/TopbarBadge.vue

@@ -174,7 +174,7 @@ const textClasses = computed(() => {
     case 'error':
       return 'text-danger-100'
     case 'warning':
-      return 'text-gold-600'
+      return 'text-warning-background'
     case 'info':
     default:
       return 'text-text-primary'
@@ -191,7 +191,7 @@ const iconClass = computed(() => {
     case 'error':
       return 'pi pi-exclamation-circle'
     case 'warning':
-      return 'pi pi-exclamation-triangle'
+      return 'icon-[lucide--triangle-alert]'
     case 'info':
     default:
       return undefined