From fe70843fae01a36fd8102a9e8f052aa62e753283 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <webofnithin@gmail.com>
Date: Sun, 22 Mar 2020 11:44:40 +0530
Subject: [PATCH] Feature: Improve Dashboard UI (#630)

---
 .../dashboard/assets/scss/_typography.scss    |  6 ++-
 .../assets/scss/widgets/_conv-header.scss     | 17 +++---
 .../scss/widgets/_conversation-card.scss      |  5 ++
 .../scss/widgets/_conversation-view.scss      |  8 +--
 .../assets/scss/widgets/_sidemenu.scss        | 11 +++-
 .../dashboard/assets/scss/widgets/_tabs.scss  | 22 +++++++-
 .../dashboard/components/ChatList.vue         |  2 +-
 .../components/layout/SidebarItem.vue         | 29 ++++++----
 .../dashboard/components/ui/Tabs/TabsItem.js  |  3 +-
 .../dashboard/components/widgets/Avatar.vue   |  1 +
 .../components/widgets/Thumbnail.vue          |  1 -
 .../widgets/conversation/ConversationCard.vue |  2 +-
 .../conversation/ConversationHeader.vue       |  2 +-
 .../dashboard/i18n/locale/en/chatlist.json    | 53 +++++++++++++------
 14 files changed, 111 insertions(+), 51 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_typography.scss b/app/javascript/dashboard/assets/scss/_typography.scss
index 40d1c5a29..8c6d2e0f2 100644
--- a/app/javascript/dashboard/assets/scss/_typography.scss
+++ b/app/javascript/dashboard/assets/scss/_typography.scss
@@ -18,10 +18,14 @@
   font-size: $font-size-small;
 }
 
+.text-muted {
+  color: $color-gray;
+}
+
 a {
   font-size: $font-size-small;
 }
 
 p {
   font-size: $font-size-small;
-}
\ No newline at end of file
+}
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
index f4a037886..0122ba96b 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
@@ -20,12 +20,12 @@
     border-radius: $space-smaller;
     margin-right: $space-normal;
 
-    &:before {
-      line-height: 3.8rem;
+    &::before {
+      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;
     }
   }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
index 649b3b31b..c331492d2 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
+++ b/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 {
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index cf625423b..e179d156d 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/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;
-
-    &:hover {
-      background: $color-background;
-    }
+    width: 100%;
   }
 
   .end-of-list-text {
-    font-style: italic;
     padding: $space-normal;
   }
 
diff --git a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
index ef5e1dea9..2d1fd7511 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
+++ b/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;
     }
   }
 }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
index 0e76ffde9..e7d261954 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
+++ b/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;
+    }
   }
 }
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 83e1766b5..c0ddb1987 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/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') }}
diff --git a/app/javascript/dashboard/components/layout/SidebarItem.vue b/app/javascript/dashboard/components/layout/SidebarItem.vue
index 2340d1f7f..66ce6b399 100644
--- a/app/javascript/dashboard/components/layout/SidebarItem.vue
+++ b/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>
diff --git a/app/javascript/dashboard/components/ui/Tabs/TabsItem.js b/app/javascript/dashboard/components/ui/Tabs/TabsItem.js
index 929d7897d..3c57abdc3 100644
--- a/app/javascript/dashboard/components/ui/Tabs/TabsItem.js
+++ b/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>
     );
diff --git a/app/javascript/dashboard/components/widgets/Avatar.vue b/app/javascript/dashboard/components/widgets/Avatar.vue
index b23b5a737..5489278d5 100644
--- a/app/javascript/dashboard/components/widgets/Avatar.vue
+++ b/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>
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index 2d9b31fdd..01cd7f76b 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -11,7 +11,6 @@
       v-else
       :username="username"
       :class="thumbnailClass"
-      background-color="#1f93ff"
       color="white"
       :size="avatarSize"
     />
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 1c432bc5e..7292344f8 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/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`)}
       `;
     },
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 1833bd095..29215362f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/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 }}
diff --git a/app/javascript/dashboard/i18n/locale/en/chatlist.json b/app/javascript/dashboard/i18n/locale/en/chatlist.json
index 2f2469d09..7b63efade 100644
--- a/app/javascript/dashboard/i18n/locale/en/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/en/chatlist.json
@@ -1,34 +1,55 @@
 {
   "CHAT_LIST": {
     "LOADING": "Fetching conversations",
-    "LOAD_MORE_CONVERSATIONS": "Load more conversations...",
-    "EOF": "You have reached the end of the list",
+    "LOAD_MORE_CONVERSATIONS": "Load more conversations",
+    "EOF": "All conversations loaded 🎉",
     "LIST": {
       "404": "There are no active conversations in this group."
     },
     "TAB_HEADING": "Conversations",
-  	"SEARCH": {
-  		"INPUT": "Search for People, Chats, Saved Replies .."
-  	},
-    "STATUS_TABS": [
-      { "NAME": "Open", "KEY": "openCount" },
-      { "NAME": "Resolved", "KEY": "allConvCount" }
+    "SEARCH": {
+      "INPUT": "Search for People, Chats, Saved Replies .."
+    },
+    "STATUS_TABS": [{
+        "NAME": "Open",
+        "KEY": "openCount"
+      },
+      {
+        "NAME": "Resolved",
+        "KEY": "allConvCount"
+      }
     ],
 
-    "ASSIGNEE_TYPE_TABS": [
-      { "NAME": "Mine", "KEY": "me", "COUNT_KEY": "mineCount" },
-      { "NAME": "Unassigned", "KEY": "unassigned", "COUNT_KEY": "unAssignedCount"},
-      { "NAME": "All", "KEY": "all", "COUNT_KEY": "allCount" }
+    "ASSIGNEE_TYPE_TABS": [{
+        "NAME": "Mine",
+        "KEY": "me",
+        "COUNT_KEY": "mineCount"
+      },
+      {
+        "NAME": "Unassigned",
+        "KEY": "unassigned",
+        "COUNT_KEY": "unAssignedCount"
+      },
+      {
+        "NAME": "All",
+        "KEY": "all",
+        "COUNT_KEY": "allCount"
+      }
     ],
 
-    "CHAT_STATUS_ITEMS": [
-      { "TEXT": "Open", "VALUE": "open" },
-      { "TEXT": "Resolved", "VALUE": "resolved" }
+    "CHAT_STATUS_ITEMS": [{
+        "TEXT": "Open",
+        "VALUE": "open"
+      },
+      {
+        "TEXT": "Resolved",
+        "VALUE": "resolved"
+      }
     ],
 
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-camera",
+        "ICON": "ion-image",
         "CONTENT": "Picture message"
       },
       "audio": {