feat: Update button component (#10362)

app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue

@@ -3,8 +3,6 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { removeEmoji } from 'shared/helpers/emoji';
 
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-
 const props = defineProps({
   author: {
     type: Object,
@@ -58,7 +56,7 @@ const fontSize = computed(() => {
 });
 
 const iconSize = computed(() => {
-  return props.size / 2;
+  return Math.round(props.size / 1.8);
 });
 
 const shouldShowImage = computed(() => {
@@ -76,7 +74,7 @@ const onImgLoad = () => {
 
 <template>
   <div
-    class="flex items-center justify-center rounded-full bg-slate-100 dark:bg-slate-700/50"
+    class="flex items-center justify-center rounded-full bg-n-slate-3 dark:bg-n-slate-4"
     :style="{ width: `${size}px`, height: `${size}px` }"
   >
     <div v-if="author">
@@ -91,7 +89,7 @@ const onImgLoad = () => {
       <template v-else>
         <span
           v-if="showAuthorName"
-          class="flex items-center justify-center font-medium text-slate-500 dark:text-slate-400"
+          class="flex items-center justify-center font-medium text-n-slate-11"
           :style="{ fontSize: `${fontSize}px` }"
         >
           {{ authorInitial }}
@@ -100,12 +98,10 @@ const onImgLoad = () => {
           v-else
           class="flex items-center justify-center w-full h-full rounded-xl"
         >
-          <FluentIcon
+          <span
             v-if="iconName"
-            :icon="iconName"
-            icon-lib="lucide"
-            :size="iconSize"
-            class="text-n-brand"
+            :class="`${iconName} text-n-brand/70`"
+            :style="{ width: `${iconSize}px`, height: `${iconSize}px` }"
           />
         </div>
       </template>
@@ -113,14 +109,9 @@ const onImgLoad = () => {
     <div
       v-else
       v-tooltip.top-start="t('THUMBNAIL.AUTHOR.NOT_AVAILABLE')"
-      class="flex items-center justify-center w-4 h-4 rounded-full bg-slate-100 dark:bg-slate-700/50"
+      class="flex items-center justify-center w-4 h-4 rounded-full bg-n-slate-3 dark:bg-n-slate-4"
     >
-      <FluentIcon
-        icon="person"
-        type="filled"
-        size="10"
-        class="text-woot-500 dark:text-woot-400"
-      />
+      <span class="i-lucide-user size-2.5 text-n-brand" />
     </div>
   </div>
 </template>