chore(style): small improvements (colors and spacings)

front/src/views/auth/ManageUploads.vue

@@ -416,6 +416,13 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
 
       <Pill
         :title="t('components.manage.library.UploadsTable.table.upload.header.importStatus')"
+        v-bind="{ [{
+          draft: 'yellow',
+          pending: 'blue',
+          finished: 'green',
+          errored: 'red',
+          skipped: 'purple'
+        }[item.import_status]]: true }"
         @click="addSearchToken('import_status', item.import_status)"
       >
         {{ item.import_status }}
@@ -424,6 +431,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
             ghost
             primary
             round
+            icon="bi-info-circle-fill"
             :title="sharedLabels.fields.import_status.label"
             @click="detailedUpload = item; showUploadDetailModal = true"
           />

front/ui-docs/components/ui/pill.md

@@ -3,6 +3,8 @@ import { computed, ref } from 'vue'
 
 import Pill from '~/components/ui/Pill.vue'
 import Button from '~/components/ui/Button.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Layout from '~/components/ui/Layout.vue'
 
 const current = ref({ type: 'custom', label: 'I-am-custom.-Change-me!' })
 const others = ref([
@@ -158,6 +160,28 @@ Image pills contain a small circular image on their left. These can be used for
   Awesome artist
 </Pill>
 
+### Reduce space between image/icon and text
+
+```vue-html{5}
+<Pill>
+  <template #image>
+    <div style="background-color: currentcolor; width: 8px; height: 8px; margin: 8px;" />
+  </template>
+  <span style="margin-left: -12px;">
+    Awesome artist
+  </span>
+</Pill>
+```
+
+<Pill>
+  <template #image>
+    <div style="background-color: currentcolor; width: 8px; height: 8px; margin: 8px;" />
+  </template>
+  <span style="margin-left: -12px;">
+    Awesome artist
+  </span>
+</Pill>
+
 ## Editable pill
 
 Add `v-model="..."` to link the pill content to a `ref` with one `current` item and zero or more `others`. Set each item's `type` to `preset` or `custom`.