Feature: Improve Dashboard UI (#630)

app/javascript/dashboard/assets/scss/_typography.scss

@@ -18,6 +18,10 @@
   font-size: $font-size-small;
 }
 
+.text-muted {
+  color: $color-gray;
+}
+
 a {
   font-size: $font-size-small;
 }

app/javascript/dashboard/assets/scss/widgets/_conv-header.scss

@@ -20,12 +20,12 @@
     border-radius: $space-smaller;
     margin-right: $space-normal;
 
-    &:before {
+    &::before {
-      line-height: 3.8rem;
+      color: $medium-gray;
       font-size: $font-size-default;
+      line-height: 3.8rem;
       padding-left: $space-slab;
       padding-right: $space-smaller;
-      color: $medium-gray;
     }
 
     .multiselect {
@@ -49,33 +49,32 @@
     }
 
     .user--profile__meta {
+      align-items: flex-start;
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
       justify-content: center;
       margin-left: $space-slab;
     }
 
     .user--profile__button {
-      color: $color-woot;
       font-size: $font-size-mini;
       margin-top: $space-micro;
-      cursor: pointer;
+      padding: 0;
     }
   }
 }
 
 .button.resolve--button {
   >.icon {
-    padding-right: $space-small;
     font-size: $font-size-default;
+    padding-right: $space-small;
   }
 
   .spinner {
-    padding: 0 $space-one;
     margin-right: $space-smaller;
+    padding: 0 $space-one;
 
-    &:before {
+    &::before {
       border-top-color: $color-white;
     }
   }

app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss

@@ -43,6 +43,11 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 27rem;
+
+    .small-icon {
+      font-size: $font-size-mini;
+      vertical-align: top;
+    }
   }
 
   .conversation--meta {

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -83,18 +83,12 @@
   flex-direction: column;
 
   .load-more-conversations {
-    color: $color-woot;
-    cursor: pointer;
     font-size: $font-size-small;
     padding: $space-normal;
-
+    width: 100%;
-    &:hover {
-      background: $color-background;
-    }
   }
 
   .end-of-list-text {
-    font-style: italic;
     padding: $space-normal;
   }
 

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

@@ -28,9 +28,16 @@
       color: $color-gray;
       font-size: $font-size-default;
       font-weight: $font-weight-medium;
+
+      .wrap,
+      .child-icon {
+        &:hover {
+          color: $color-woot;
+        }
+      }
     }
 
-    .active a {
+    .active a .wrap {
       color: $color-woot;
     }
   }
@@ -100,7 +107,7 @@
     margin-top: $space-medium;
 
     >span {
-      margin-left: auto;
+      margin-left: $space-one;
     }
   }
 }

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

@@ -21,7 +21,17 @@
 }
 
 .tabs-title {
-  @include margin($zero $space-one);
+  @include margin($zero $space-slab);
+
+  .badge {
+    background: $color-background;
+    border-radius: $space-small;
+    color: $color-gray;
+    font-size: $font-size-micro;
+    font-weight: $font-weight-black;
+    margin-left: $space-smaller;
+    padding: $space-smaller;
+  }
 
   &:first-child {
     margin-left: 0;
@@ -40,10 +50,13 @@
 
   a {
     @include position(relative, 1px null null null);
-    transition: all .15s $ease-in-out-cubic;
+    align-items: center;
     border-bottom: 2px solid transparent;
     color: $medium-gray;
+    display: flex;
+    flex-direction: row;
     font-size: $font-size-small;
+    transition: all .15s $ease-in-out-cubic;
   }
 
   &.is-active {
@@ -51,5 +64,10 @@
       border-bottom-color: $color-woot;
       color: $color-woot;
     }
+
+    .badge {
+      background: $color-extra-light-blue;
+      color: $color-woot;
+    }
   }
 }

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" />
+      <div class="wrap">
-      {{ menuItem.label }}
+        <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
+          <div class="wrap">
-            v-if="computedInboxClass(child)"
+            <i
-            class="inbox-icon"
+              v-if="computedInboxClass(child)"
-            :class="computedInboxClass(child)"
+              class="inbox-icon"
-          ></i>
+              :class="computedInboxClass(child)"
-          {{ child.label }}
+            ></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 }}

app/javascript/dashboard/i18n/locale/en/chatlist.json

@@ -1,34 +1,55 @@
 {
   "CHAT_LIST": {
     "LOADING": "Fetching conversations",
-    "LOAD_MORE_CONVERSATIONS": "Load more conversations...",
+    "LOAD_MORE_CONVERSATIONS": "Load more conversations",
-    "EOF": "You have reached the end of the list",
+    "EOF": "All conversations loaded 🎉",
     "LIST": {
       "404": "There are no active conversations in this group."
     },
     "TAB_HEADING": "Conversations",
-  	"SEARCH": {
+    "SEARCH": {
-  		"INPUT": "Search for People, Chats, Saved Replies .."
+      "INPUT": "Search for People, Chats, Saved Replies .."
-  	},
+    },
-    "STATUS_TABS": [
+    "STATUS_TABS": [{
-      { "NAME": "Open", "KEY": "openCount" },
+        "NAME": "Open",
-      { "NAME": "Resolved", "KEY": "allConvCount" }
+        "KEY": "openCount"
+      },
+      {
+        "NAME": "Resolved",
+        "KEY": "allConvCount"
+      }
     ],
 
-    "ASSIGNEE_TYPE_TABS": [
+    "ASSIGNEE_TYPE_TABS": [{
-      { "NAME": "Mine", "KEY": "me", "COUNT_KEY": "mineCount" },
+        "NAME": "Mine",
-      { "NAME": "Unassigned", "KEY": "unassigned", "COUNT_KEY": "unAssignedCount"},
+        "KEY": "me",
-      { "NAME": "All", "KEY": "all", "COUNT_KEY": "allCount" }
+        "COUNT_KEY": "mineCount"
+      },
+      {
+        "NAME": "Unassigned",
+        "KEY": "unassigned",
+        "COUNT_KEY": "unAssignedCount"
+      },
+      {
+        "NAME": "All",
+        "KEY": "all",
+        "COUNT_KEY": "allCount"
+      }
     ],
 
-    "CHAT_STATUS_ITEMS": [
+    "CHAT_STATUS_ITEMS": [{
-      { "TEXT": "Open", "VALUE": "open" },
+        "TEXT": "Open",
-      { "TEXT": "Resolved", "VALUE": "resolved" }
+        "VALUE": "open"
+      },
+      {
+        "TEXT": "Resolved",
+        "VALUE": "resolved"
+      }
     ],
 
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-camera",
+        "ICON": "ion-image",
         "CONTENT": "Picture message"
       },
       "audio": {