changes

app/components/media/UploadProgress.vue

@@ -1,33 +1,43 @@
 <template>
-  <div class="has-text-left">
+  <div class="fs-14 has-text-left is-flex is-flex-direction-column is-gap-1">
     <p
-      class="py-1 border-bottom"
-      v-for="v in vfiles"
+      v-for="(v, i) in vfiles"
+      :key="i"
     >
-      <span class="icon-text">
-        <span class="mr-5">{{ v.name }}</span>
-        <SvgIcon
-          v-bind="{ name: 'check2.svg', type: 'primary', size: 22 }"
-          v-if="v.status === 'success'"
-        ></SvgIcon>
-        <SvgIcon
-          v-bind="{ name: 'error.svg', type: 'danger', size: 22 }"
-          v-else-if="v.status === 'error'"
-        ></SvgIcon>
+      <span class="icon-text is-gap-1 is-align-items-center">
+        <span class="icon">
+          <Icon
+            name="svg-spinners:90-ring"
+            :size="22"
+            class="has-text-primary"
+            v-if="v.status === 'uploading'"
+          />
+          <Icon
+            name="material-symbols:check-circle-rounded"
+            :size="22"
+            class="has-text-primary"
+            v-else-if="v.status === 'success'"
+          />
+          <Icon
+            name="material-symbols:cancel-rounded"
+            :size="22"
+            class="has-text-danger"
+            v-else-if="v.status === 'error'"
+          />
+        </span>
+        <span>{{ v.name }}</span>
       </span>
       <span
-        class="icon-text has-text-danger ml-6"
+        class="icon-text is-gap-1 has-text-danger ml-6"
         v-if="v.error"
       >
-        <SvgIcon v-bind="{ name: 'error.svg', type: 'danger', size: 22 }"></SvgIcon>
-        <span class="ml-1">{{ v.text }}</span>
+        <Icon
+          name="material-symbols:cancel-rounded"
+          :size="22"
+          class="has-text-danger"
+        />
+        <span>{{ v.text }}</span>
       </span>
-      <button
-        class="button is-small is-white is-loading px-0 ml-4"
-        v-if="v.status === 'uploading'"
-      >
-        Loading
-      </button>
     </p>
   </div>
 </template>