Chore: UI Cleanup in modals (#873)

* Chore: UI Cleanup in modals

* Fix review comments

app/javascript/dashboard/assets/scss/_variables.scss

@@ -59,6 +59,9 @@ $secondary-color: #35c5ff;
 $success-color: #44ce4b;
 $warning-color: #ffc532;
 $alert-color: #ff382d;
+
+$masked-bg: rgba(0, 0, 0, .4);
+
 // Color-palettes
 
 $color-primary-light: #c7e3ff;
@@ -70,8 +73,6 @@ $thumbnail-radius: 4rem;
 // chat-header
 $conv-header-height: 4rem;
 
-// login
-
 // Inbox List
 
 $inbox-thumb-size: 4.8rem;

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

@@ -1,4 +1,6 @@
 .button {
+  margin-bottom: 0;
+
   &.icon {
     padding-left: $space-normal;
     padding-right: $space-normal;

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

@@ -1,8 +1,10 @@
-.modal-mask {
+@import '~dashboard/assets/scss/variables';
+@import '~dashboard/assets/scss/mixins';
 
+.modal-mask {
   @include flex;
   @include flex-align(center, middle);
-  background-color: $color-white;
+  background-color: $masked-bg;
   height: 100%;
   left: 0;
   position: fixed;
@@ -19,8 +21,8 @@
   line-height: $space-normal;
   padding: $space-normal $space-two;
   position: absolute;
-  right: $space-large;
-  top: $space-large;
+  right: $space-micro;
+  top: $space-micro;
 
   &:hover {
     background: $color-background;
@@ -29,7 +31,7 @@
 
 
 .page-top-bar {
-  @include padding($zero $space-two);
+  @include padding($space-large $space-large $zero);
 
   img {
     max-height: 6rem;
@@ -37,8 +39,10 @@
 }
 
 .modal-container {
+  @include normal-shadow;
+
   background-color: $color-white;
-  border-radius: $space-small;
+  border-radius: $space-smaller;
   max-height: 100%;
   overflow: auto;
   position: relative;
@@ -52,21 +56,21 @@
 
 
   h2 {
+    color: $color-heading;
     font-size: $font-size-medium;
-    color: $color-woot;
-    font-weight: $font-weight-normal;
-    @include padding($space-small $zero $zero $zero);
+    font-weight: $font-weight-bold;
   }
 
   p {
-    font-size: $font-size-small;
-    @include padding($zero);
     @include margin($zero);
+    @include padding($zero);
+    font-size: $font-size-small;
   }
 
   form {
+    @include padding($space-large);
     align-self: center;
-    @include padding($space-two);
+
     a {
       @include padding($space-normal);
     }
@@ -74,15 +78,16 @@
 
   .modal-footer {
     @include flex;
-    @include flex-align($x: justify, $y: middle);
-    @include padding($space-small $zero $space-medium $zero);
+    @include flex-align($x: flex-start, $y: middle);
+    @include padding($space-small $zero);
+
     button {
       font-size: $font-size-small;
     }
   }
 
   .delete-item {
-    @include padding($space-normal);
+    @include padding($space-large);
     button {
       @include margin($zero);
     }
@@ -90,12 +95,12 @@
 
 }
 
-.modal-enter, .modal-leave {
-    opacity: 0;
+.modal-enter,
+.modal-leave {
+  opacity: 0;
 }
 
 .modal-enter .modal-container,
 .modal-leave .modal-container {
-    -webkit-transform: scale(1.1);
-    transform: scale(1.1);
+  transform: scale(1.1);
 }

app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss

@@ -1,6 +1,6 @@
 table {
-  font-size: $font-size-small;
   border-spacing: 0;
+  font-size: $font-size-small;
 
   thead {
     th {
@@ -10,9 +10,12 @@ table {
   }
 
   tbody {
+    tr {
+      border-bottom: 1px solid $color-border-light;
+    }
+
     td {
       @include padding($space-one $space-small);
-      border-bottom: 1px solid $color-border-light;
     }
   }
 }
@@ -32,22 +35,22 @@ table {
   }
 
   .agent-name {
-    font-weight: $font-weight-medium;
     display: block;
+    font-weight: $font-weight-medium;
     text-transform: capitalize;
   }
 
   .woot-thumbnail {
     border-radius: 50%;
-    width: 5rem;
     height: 5rem;
+    width: 5rem;
   }
 
   .button-wrapper {
-    min-width: 20rem;
-    @include flex;
     @include flex-align(left, null);
+    @include flex;
     flex-direction: row;
+    min-width: 20rem;
   }
 
   .button {