[Enhancement] Use thumbnail component

app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss

@@ -92,16 +92,11 @@
 }
 
 .current-user {
+  align-items: center;
   @include flex;
   flex-direction: row;
   cursor: pointer;
 
-  .current-user--thumbnail {
-    @include round-corner();
-    height: $space-large;
-    width: $space-large;
-  }
-
   .current-user--data {
     @include flex;
     flex-direction: column;
@@ -120,6 +115,7 @@
       font-size: $font-size-mini;
       margin-bottom: $zero;
       margin-left: $space-one;
+      text-transform: capitalize;
     }
   }
 

app/javascript/dashboard/components/Thumbnail.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="profile-card">
-    <div class="profile-image" v-bind:style="{ height: size, width: size }">
-      <img v-bind:src="src">
-    </div>
-    <img class="source-badge" src="../assets/images/fb-badge.png" v-if="badge === 'fb'">
-  </div>
-</template>
-<script>
-/**
- * Thumbnail Component
- * Src - source for round image
- * Size - Size of the thumbnail
- * Badge - Chat source indication { fb / telegram }
- */
-export default {
-  props: ['src', 'size', 'badge'],
-};
-</script>

app/javascript/dashboard/components/index.js

@@ -2,7 +2,6 @@
 /* eslint-env browser */
 
 import Modal from './Modal';
-import Thumbnail from './Thumbnail';
 import Spinner from './Spinner';
 import SubmitButton from './buttons/FormSubmitButton';
 import Tabs from './ui/Tabs/Tabs';
@@ -14,7 +13,6 @@ import ModalHeader from './ModalHeader';
 
 const WootUIKit = {
   Modal,
-  Thumbnail,
   Spinner,
   SubmitButton,
   Tabs,

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -39,7 +39,10 @@
         </div>
       </transition>
       <div class="current-user" @click.prevent="showOptions()">
-        <img class="current-user--thumbnail" :src="gravatarUrl()" />
+        <thumbnail
+          :src="gravatarUrl()"
+          :username="currentUser.name"
+        ></thumbnail>
         <div class="current-user--data">
           <h3 class="current-user--name">
             {{ currentUser.name }}
@@ -67,6 +70,7 @@ import Auth from '../../api/auth';
 import SidebarItem from './SidebarItem';
 import WootStatusBar from '../widgets/StatusBar';
 import { frontendURL } from '../../helper/URLHelper';
+import Thumbnail from '../widgets/Thumbnail';
 
 export default {
   mixins: [clickaway, adminMixin],
@@ -144,7 +148,7 @@ export default {
     },
     gravatarUrl() {
       const hash = md5(this.currentUser.email);
-      return `${window.WootConstants.GRAVATAR_URL}${hash}?d=monsterid`;
+      return `${window.WootConstants.GRAVATAR_URL}${hash}?default=404`;
     },
     showOptions() {
       this.showOptionsMenu = !this.showOptionsMenu;
@@ -154,6 +158,7 @@ export default {
   components: {
     SidebarItem,
     WootStatusBar,
+    Thumbnail,
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue

@@ -23,8 +23,14 @@
           <tbody>
             <tr v-for="(agent, index) in agentList" :key="agent.email">
               <!-- Gravtar Image -->
+
               <td>
-                <img class="woot-thumbnail" :src="gravatarUrl(agent.email)" />
+                <thumbnail
+                  :src="gravatarUrl(agent.email)"
+                  class="columns"
+                  :username="agent.name"
+                  size="40px"
+                />
               </td>
               <!-- Agent Name + Email -->
               <td>
@@ -105,6 +111,7 @@
 
 import { mapGetters } from 'vuex';
 import md5 from 'md5';
+import Thumbnail from '../../../../components/widgets/Thumbnail';
 
 import AddAgent from './AddAgent';
 import EditAgent from './EditAgent';
@@ -115,6 +122,7 @@ export default {
     AddAgent,
     EditAgent,
     DeleteAgent,
+    Thumbnail,
   },
   data() {
     return {
@@ -166,7 +174,7 @@ export default {
     // Gravatar URL
     gravatarUrl(email) {
       const hash = md5(email);
-      return `${window.WootConstants.GRAVATAR_URL}${hash}?d=monsterid`;
+      return `${window.WootConstants.GRAVATAR_URL}${hash}?default=404`;
     },
     // Edit Function
     openAddPopup() {