Merge pull request #11805 from nocodb/nc-fix/badge-issue

Nc fix: use crown icon istead of star

packages/nc-gui/assets/nc-icons-v2/crown.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M13 11H3L2 6L5.5 7.5L8 2L10.5 7.5L14 6L13 11Z" stroke="currentColor" stroke-width="1.33" stroke-linejoin="round"/>
+  <path d="M4 13H12" stroke="currentColor" stroke-width="1.33" stroke-linecap="round"/>
+</svg>

packages/nc-gui/components/workspace/CollaboratorsList.vue

@@ -277,13 +277,13 @@ const handleScroll = (e) => {
               "
             >
               <div class="flex items-center text-nc-content-gray-default text-sm whitespace-nowrap">
-                <GeneralIcon icon="star" class="flex-none h-4 w-4 mr-1" />
+                <GeneralIcon icon="ncCrown" class="flex-none h-4 w-4 mr-1" />
 
                 {{ paidUsersCount }} {{ paidUsersCount === 1 ? $t('labels.editorSeat') : $t('labels.editorSeats') }}
               </div>
             </NcTooltip>
             <div v-else class="flex items-center text-nc-content-gray-default text-sm whitespace-nowrap">
-              <GeneralIcon icon="star" class="flex-none h-4 w-4 mr-1" />
+              <GeneralIcon icon="ncCrown" class="flex-none h-4 w-4 mr-1" />
 
               {{ paidUsersCount }} {{ $t('general.paid') }}
               {{ paidUsersCount === 1 ? $t('general.seat').toLowerCase() : $t('general.seats').toLowerCase() }}
@@ -382,7 +382,7 @@ const handleScroll = (e) => {
                     :overlay-inner-style="{ width: '180px' }"
                   >
                     <div v-if="activePlanTitle === PlanTitles.FREE" class="text-nc-content-gray-default">
-                      <GeneralIcon icon="star" class="flex-none mb-0.5" />
+                      <GeneralIcon icon="ncCrown" class="flex-none mb-0.5" />
                     </div>
                     <NcBadge
                       v-else
@@ -390,7 +390,7 @@ const handleScroll = (e) => {
                       color="green"
                       class="text-nc-content-green-dark text-[10px] leading-[14px] !h-[18px] font-semibold"
                     >
-                      {{ $t('general.paid') }}
+                      <GeneralIcon icon="ncCrown" class="flex-none mb-0.5" />
                     </NcBadge>
                   </NcTooltip>
                 </div>

packages/nc-gui/utils/iconUtils.ts

@@ -759,6 +759,7 @@ import MdiNcFlagOutline from '~icons/nc-icons/mdi-flag-outline'
 import MdiNcAttachFile from '~icons/nc-icons/mdi-attach'
 import MdiCloudKeyOutline from '~icons/mdi/cloud-key-outline'
 import NcDiscordForum from '~icons/nc-icons/discord-forum'
+import NcCrown from '~icons/nc-icons-v2/crown'
 
 // keep it for reference
 // todo: remove it after all icons are migrated
@@ -1725,6 +1726,7 @@ export const iconMap = {
   'ncPlusCircleSolid': h(NcPlusCircleSolid, { stroke: 'transparent' }),
   'ncDiscordForum': NcDiscordForum,
   'ncHeadphone': NcHeadphone,
+  'ncCrown': NcCrown,
 }
 
 export const getMdiIcon = (type: string): any => {
@@ -4322,6 +4324,10 @@ export const searchableMap = {
     icon: NcConditions,
     keywords: ['conditions', 'filter', 'rule'],
   },
+  ncCrown: {
+    icon: NcCrown,
+    keywords: ['crown', 'badge', 'award', 'achievement', 'honor', 'paid'],
+  },
 }
 
 export const searchIcons = (searchTerm: string) => {