Feature: Improve Dashboard UI (#630)

app/javascript/dashboard/components/ChatList.vue

@@ -32,7 +32,7 @@
 
       <div
         v-if="!hasCurrentPageEndReached && !chatListLoading"
-        class="text-center load-more-conversations"
+        class="clear button load-more-conversations"
         @click="fetchConversations"
       >
         {{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }}

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

@@ -6,16 +6,19 @@
     :class="computedClass"
   >
     <a
+      class="sub-menu-title"
       :class="getMenuItemClass"
       data-tooltip
       aria-haspopup="true"
       :title="menuItem.toolTip"
     >
-      <i :class="menuItem.icon" />
-      {{ menuItem.label }}
+      <div class="wrap">
+        <i :class="menuItem.icon" />
+        {{ menuItem.label }}
+      </div>
       <span
         v-if="showItem(menuItem)"
-        class="ion-ios-plus-outline"
+        class="child-icon ion-android-add-circle"
         @click.prevent="newLinkClick"
       />
     </a>
@@ -28,12 +31,14 @@
         :to="child.toState"
       >
         <a href="#">
-          <i
-            v-if="computedInboxClass(child)"
-            class="inbox-icon"
-            :class="computedInboxClass(child)"
-          ></i>
-          {{ child.label }}
+          <div class="wrap">
+            <i
+              v-if="computedInboxClass(child)"
+              class="inbox-icon"
+              :class="computedInboxClass(child)"
+            ></i>
+            {{ child.label }}
+          </div>
         </a>
       </router-link>
     </ul>
@@ -115,3 +120,9 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.sub-menu-title {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

app/javascript/dashboard/components/ui/Tabs/TabsItem.js

@@ -80,7 +80,8 @@ export default {
             }
           }}
         >
-          {`${this.name}  (${this.getItemCount})`}
+          {`${this.name}`}
+          <span class="badge">{this.getItemCount}</span>
         </a>
       </li>
     );

app/javascript/dashboard/components/widgets/Avatar.vue

@@ -81,5 +81,6 @@ export default {
   align-items: center;
   justify-content: center;
   text-align: center;
+  background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
 }
 </style>

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -11,7 +11,6 @@
       v-else
       :username="username"
       :class="thumbnailClass"
-      background-color="#1f93ff"
       color="white"
       :size="avatarSize"
     />

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

@@ -116,7 +116,7 @@ export default {
       }
       const key = `CHAT_LIST.ATTACHMENTS.${fileType}`;
       return `
-        <i class="${this.$t(`${key}.ICON`)}"></i>
+        <i class="small-icon ${this.$t(`${key}.ICON`)}"></i>
         ${this.$t(`${key}.CONTENT`)}
       `;
     },

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

@@ -12,7 +12,7 @@
           {{ chat.meta.sender.name }}
         </h3>
         <button
-          class="user--profile__button"
+          class="user--profile__button clear button small"
           @click="$emit('contactPanelToggle')"
         >
           {{ viewProfileButtonLabel }}