feat: Use Fluent SVG icons on the dashboard (#3482)

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -24,7 +24,7 @@
           v-if="showAssignee && assignee.name"
           class="label assignee-label text-truncate"
         >
-          <i class="ion-person" />
+          <fluent-icon icon="person" size="12" />
           {{ assignee.name }}
         </span>
       </div>
@@ -32,25 +32,41 @@
         {{ currentContact.name }}
       </h4>
       <p v-if="lastMessageInChat" class="conversation--message">
-        <i v-if="isMessagePrivate" class="ion-locked last-message-icon" />
-        <i v-else-if="messageByAgent" class="ion-ios-undo last-message-icon" />
-        <i
+        <fluent-icon
+          v-if="isMessagePrivate"
+          size="16"
+          class="message--attachment-icon last-message-icon"
+          icon="lock-closed"
+        />
+        <fluent-icon
+          v-else-if="messageByAgent"
+          size="16"
+          class="message--attachment-icon last-message-icon"
+          icon="arrow-reply"
+        />
+        <fluent-icon
           v-else-if="isMessageAnActivity"
-          class="ion-information-circled last-message-icon"
+          size="16"
+          class="message--attachment-icon last-message-icon"
+          icon="info"
         />
         <span v-if="lastMessageInChat.content">
           {{ parsedLastMessage }}
         </span>
         <span v-else-if="lastMessageInChat.attachments">
-          <i :class="`small-icon ${this.$t(`${attachmentIconKey}.ICON`)}`"></i>
-          {{ this.$t(`${attachmentIconKey}.CONTENT`) }}
+          <fluent-icon
+            size="16"
+            class="message--attachment-icon"
+            :icon="attachmentIcon"
+          />
+          {{ this.$t(`${attachmentMessageContent}`) }}
         </span>
         <span v-else>
           {{ $t('CHAT_LIST.NO_CONTENT') }}
         </span>
       </p>
       <p v-else class="conversation--message">
-        <i class="ion-android-alert"></i>
+        <fluent-icon size="16" class="message--attachment-icon" icon="info" />
         <span>
           {{ this.$t(`CHAT_LIST.NO_MESSAGES`) }}
         </span>
@@ -76,6 +92,15 @@ import { frontendURL, conversationUrl } from '../../../helper/URLHelper';
 import InboxName from '../InboxName';
 import inboxMixin from 'shared/mixins/inboxMixin';
 
+const ATTACHMENT_ICONS = {
+  image: 'image',
+  audio: 'headphones-sound-wave',
+  video: 'video',
+  file: 'document',
+  location: 'location',
+  fallback: 'link',
+};
+
 export default {
   components: {
     InboxName,
@@ -133,10 +158,18 @@ export default {
       );
     },
 
-    attachmentIconKey() {
+    lastMessageFileType() {
       const lastMessage = this.lastMessageInChat;
       const [{ file_type: fileType } = {}] = lastMessage.attachments;
-      return `CHAT_LIST.ATTACHMENTS.${fileType}`;
+      return fileType;
+    },
+
+    attachmentIcon() {
+      return ATTACHMENT_ICONS[this.lastMessageFileType];
+    },
+
+    attachmentMessageContent() {
+      return `CHAT_LIST.ATTACHMENTS.${this.lastMessageFileType}.CONTENT`;
     },
 
     isActiveChat() {
@@ -243,14 +276,10 @@ export default {
     white-space: nowrap;
     width: 60%;
   }
-  .ion-earth {
-    font-size: var(--font-size-mini);
-  }
 }
 
 .last-message-icon {
   color: var(--s-600);
-  font-size: var(--font-size-mini);
 }
 
 .conversation--metadata {
@@ -259,16 +288,22 @@ export default {
   padding-right: var(--space-normal);
 
   .label {
-    padding: var(--space-micro) 0 var(--space-micro) 0;
-    line-height: var(--space-slab);
-    font-weight: var(--font-weight-medium);
     background: none;
     color: var(--s-500);
     font-size: var(--font-size-mini);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--space-slab);
+    padding: var(--space-micro) 0 var(--space-micro) 0;
   }
 
   .assignee-label {
+    display: inline-flex;
     max-width: 50%;
   }
 }
+
+.message--attachment-icon {
+  margin-top: var(--space-minus-micro);
+  vertical-align: middle;
+}
 </style>