Feature: Improve Dashboard UI (#630)

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;
-}
+}

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;
     }
   }

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;
-
-    &:hover {
-      background: $color-background;
-    }
+    width: 100%;
   }
 
   .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;
+    }
   }
 }