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

app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue

@@ -14,7 +14,13 @@
       class="account-selector"
     >
       <a :href="`/app/accounts/${account.id}/dashboard`">
-        <i v-if="account.id === accountId" class="ion ion-ios-checkmark" />
+        <fluent-icon
+          v-if="account.id === accountId"
+          class="selected--account"
+          icon="checkmark-circle"
+          type="solid"
+          size="24"
+        />
         <label :for="account.name" class="account--details">
           <div class="account--name">{{ account.name }}</div>
           <div class="account--role">{{ account.role }}</div>

app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue

@@ -12,7 +12,7 @@
       <div v-if="!hasAccounts" class="alert-wrap">
         <div class="callout alert">
           <div class="icon-wrap">
-            <i class="ion-alert-circled"></i>
+            <fluent-icon icon="warning" />
           </div>
           {{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
         </div>
@@ -102,18 +102,19 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .alert-wrap {
-  margin: var(--space-zero) var(--space-large);
-  margin-top: var(--space-medium);
+  font-size: var(--font-size-small);
+  margin: var(--space-medium) var(--space-large) var(--space-zero);
+
   .callout {
+    align-items: center;
+    border-radius: var(--border-radius-normal);
     display: flex;
-    justify-content: center;
   }
 }
 
 .icon-wrap {
-  font-size: var(--font-size-big);
   margin-left: var(--space-smaller);
   margin-right: var(--space-slab);
 }

app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue

@@ -1,10 +1,12 @@
 <template>
-  <span class="notifications icon ion-ios-bell" @click.stop="showNotification">
+  <span class="notifications" @click.stop="showNotification">
+    <fluent-icon icon="alert" />
     <span v-if="unreadCount" class="unread-badge">{{ unreadCount }}</span>
   </span>
 </template>
 <script>
 import { mapGetters } from 'vuex';
+
 export default {
   computed: {
     ...mapGetters({

app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js

@@ -7,10 +7,12 @@ import i18n from 'dashboard/i18n';
 
 import WootModal from 'dashboard/components/Modal';
 import WootModalHeader from 'dashboard/components/ModalHeader';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 
 const localVue = createLocalVue();
 localVue.component('woot-modal', WootModal);
 localVue.component('woot-modal-header', WootModalHeader);
+localVue.component('fluent-icon', FluentIcon);
 
 localVue.use(Vuex);
 localVue.use(VueI18n);
@@ -84,7 +86,7 @@ describe('accountSelctor', () => {
   });
 
   it('first account item is checked', () => {
-    const accountFirstItem = accountSelector.find('.account-selector .ion');
+    const accountFirstItem = accountSelector.find('.account-selector svg');
     expect(accountFirstItem.exists()).toBe(true);
   });
 });