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

app/javascript/dashboard/modules/contact/components/ContactAttribute.vue

@@ -36,7 +36,7 @@
         variant="clear link"
         size="small"
         color-scheme="secondary"
-        icon="ion-compose"
+        icon="edit"
         class-names="edit-button"
         @click="onEdit"
       />

app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue

@@ -10,10 +10,11 @@
       </h5>
       <p class="option__body">
         <span v-if="email" class="email-icon-wrap">
-          <i class="icon ion-email" />{{ email }}
+          <fluent-icon class="merge-contact--icon" icon="mail" size="12" />
+          {{ email }}
         </span>
         <span v-if="phoneNumber" class="phone-icon-wrap">
-          <i class="icon ion-ios-telephone" />
+          <fluent-icon class="merge-contact--icon" icon="call" size="12" />
           {{ phoneNumber }}
         </span>
         <span v-if="!phoneNumber && !email">{{ '---' }}</span>
@@ -102,4 +103,9 @@ export default {
     width: auto;
   }
 }
+
+.merge-contact--icon {
+  margin-bottom: var(--space-minus-micro);
+  margin-right: var(--space-micro);
+}
 </style>

app/javascript/dashboard/modules/contact/components/ContactFields.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="contact-fields">
-    <h3 class="block-title title">{{ $t('CONTACTS_PAGE.FIELDS') }}</h3>
+    <h3 class="block-title title">
+      {{ $t('CONTACTS_PAGE.FIELDS') }}
+    </h3>
     <attribute
       :label="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
-      icon="ion-email"
+      icon="mail"
       emoji=""
       :value="contact.email"
       :show-edit="true"
@@ -11,7 +13,7 @@
     />
     <attribute
       :label="$t('CONTACT_PANEL.PHONE_NUMBER')"
-      icon="ion-ios-telephone"
+      icon="call"
       emoji=""
       :value="contact.phone_number"
       :show-edit="true"
@@ -20,7 +22,7 @@
     <attribute
       v-if="additionalAttributes.location"
       :label="$t('CONTACT_PANEL.LOCATION')"
-      icon="ion-map"
+      icon="map"
       emoji="🌍"
       :value="additionalAttributes.location"
       :show-edit="true"
@@ -33,7 +35,7 @@
     >
       <attribute
         :label="attribute"
-        icon="ion-arrow-right-c"
+        icon="chevron-right"
         :value="customAttributes[attribute]"
         :show-edit="true"
         @update="value => onCustomAttributeUpdate(attribute, value)"
@@ -42,7 +44,7 @@
     <woot-button
       size="small"
       variant="link"
-      icon="ion-plus"
+      icon="add"
       @click="handleCustomCreate"
     >
       {{ $t('CUSTOM_ATTRIBUTES.ADD.TITLE') }}

app/javascript/dashboard/modules/contact/components/ContactIntro.vue

@@ -33,7 +33,7 @@
       <woot-button
         variant="hollow"
         size="small expanded"
-        icon="ion-compose"
+        icon="edit"
         @click="onEditClick"
       >
         {{ $t('EDIT_CONTACT.BUTTON_LABEL') }}

app/javascript/dashboard/modules/contact/components/MergeContact.vue

@@ -33,7 +33,7 @@
 
       <div class="child-contact-wrap">
         <div class="child-arrow">
-          <i class="ion-ios-arrow-up up" />
+          <fluent-icon icon="arrow-up" class="up" size="17" />
         </div>
         <div
           class="child-contact multiselect-wrap--medium"
@@ -213,8 +213,8 @@ export default {
 
 .up {
   position: absolute;
-  top: -11px;
-  left: var(--space-normal);
+  top: var(--space-minus-smaller);
+  left: var(--space-slab);
 }
 
 .footer {

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="context-menu">
     <woot-button
-      icon="ion-more"
-      size="large"
+      icon="more-vertical"
       class="button--delete-message"
       color-scheme="secondary"
       variant="link"
@@ -19,7 +18,8 @@
           <woot-button
             variant="clear"
             size="small"
-            icon="ion-ios-copy-outline"
+            icon="clipboard"
+            icon-size="16"
             @click="handleCopy"
           >
             {{ $t('CONVERSATION.CONTEXT_MENU.COPY') }}
@@ -30,7 +30,8 @@
             variant="clear"
             color-scheme="alert"
             size="small"
-            icon="ion-trash-a"
+            icon="delete"
+            icon-size="16"
             @click="handleDelete"
           >
             {{ $t('CONVERSATION.CONTEXT_MENU.DELETE') }}

app/javascript/dashboard/modules/notes/components/ContactNote.vue

@@ -19,7 +19,8 @@
           v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
           variant="smooth"
           size="tiny"
-          icon="ion-trash-b"
+          icon="delete"
+          icon-size="16"
           color-scheme="secondary"
           @click="onDelete"
         />