style(ModelInfoPanel): improve source link styling with Civitai logo

Amp-Thread-ID: https://ampcode.com/threads/T-019bc49a-df5a-7708-8fc2-da5cb1c686d1
Co-authored-by: Amp <amp@ampcode.com>

src/platform/assets/components/modelInfo/ModelInfoField.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col gap-1 px-4 py-2">
-    <span class="text-xs text-muted-foreground">{{ label }}</span>
+  <div class="flex flex-col gap-1 px-4 py-2 text-sm text-muted-foreground">
+    <span>{{ label }}</span>
     <slot />
   </div>
 </template>

src/platform/assets/components/modelInfo/ModelInfoPanel.vue

@@ -10,10 +10,10 @@
         </span>
       </template>
       <ModelInfoField :label="$t('assetBrowser.modelInfo.displayName')">
-        <span class="text-sm break-all">{{ displayName }}</span>
+        <span class="break-all">{{ displayName }}</span>
       </ModelInfoField>
       <ModelInfoField :label="$t('assetBrowser.modelInfo.fileName')">
-        <span class="text-sm break-all">{{ asset.name }}</span>
+        <span class="break-all">{{ asset.name }}</span>
       </ModelInfoField>
       <ModelInfoField
         v-if="sourceUrl"
@@ -23,11 +23,18 @@
           :href="sourceUrl"
           target="_blank"
           rel="noopener noreferrer"
-          class="text-sm text-link hover:underline"
+          class="inline-flex items-center gap-1.5 text-muted-foreground no-underline transition-colors hover:text-foreground"
         >
+          <img
+            v-if="sourceName === 'Civitai'"
+            src="/assets/images/civitai.svg"
+            alt=""
+            class="size-4 shrink-0"
+          />
           {{
             $t('assetBrowser.modelInfo.viewOnSource', { source: sourceName })
           }}
+          <i class="icon-[lucide--external-link] size-4 shrink-0" />
         </a>
       </ModelInfoField>
     </PropertiesAccordionItem>