[#722] Changed color for the email list and action buttons

5 files changed, 35 insertions, 7 deletions

diff --git a/web-ui/app/scss/_others.scss b/web-ui/app/scss/_others.scss
index a5796ebe..039d94bd 100644
--- a/web-ui/app/scss/_others.scss
+++ b/web-ui/app/scss/_others.scss
@@ -59,7 +59,7 @@ section {
     }
 
     &#middle-pane {
-        background: $contrast;
+        background: $white;
     }
 
     &#right-pane {
diff --git a/web-ui/app/scss/base/_colors.scss b/web-ui/app/scss/base/_colors.scss
index b95a02f6..17333ff9 100644
--- a/web-ui/app/scss/base/_colors.scss
+++ b/web-ui/app/scss/base/_colors.scss
@@ -4,6 +4,7 @@ $light_gray: #C2C2C2;
 $lighter_blue: #91C2D1;
 $light_blue: #3DABC4;
 $dark_blue: #178CA6;
+$bullet-blue: #5cacde;
 $light_orange: #FF9C00;
 $dark_orange: #FF7902;
 
diff --git a/web-ui/app/scss/views/_action-bar.scss b/web-ui/app/scss/views/_action-bar.scss
index 8de07876..40e677b0 100644
--- a/web-ui/app/scss/views/_action-bar.scss
+++ b/web-ui/app/scss/views/_action-bar.scss
@@ -10,9 +10,10 @@
         margin: 0;
         border-top: 1px solid $white;
         border-bottom: 2px solid lighten($top_pane, 30%);
-        background: $top_pane;
+        background: $white;
         clear: both;
         overflow: hidden;
+        padding-left: 10px;
 
         li {
             display: inline-block;
@@ -33,7 +34,7 @@
             input[type=button] {
                 margin: 2px;
                 padding: 4px 10px;
-                background: lighten($contrast, 70%);
+                background: $background_light_grey;
                 color: $dark_grey;
                 text-transform: uppercase;
                 font-weight: 400;
diff --git a/web-ui/app/scss/views/_compose-view.scss b/web-ui/app/scss/views/_compose-view.scss
index d4de5fa4..9e120357 100644
--- a/web-ui/app/scss/views/_compose-view.scss
+++ b/web-ui/app/scss/views/_compose-view.scss
@@ -44,7 +44,7 @@
                 padding: 5px;
                 border: 1px solid $border_light_grey;
                 border-radius: 2px;
-                background-color: $background_light_grey;
+                background-color: $contrast;
 
                 &-label {
                     color: $attachment_text;
diff --git a/web-ui/app/scss/views/_mail-list.scss b/web-ui/app/scss/views/_mail-list.scss
index 66bcabbe..f5c4c60f 100644
--- a/web-ui/app/scss/views/_mail-list.scss
+++ b/web-ui/app/scss/views/_mail-list.scss
@@ -15,11 +15,24 @@
     &.status-read {
         font-weight: normal;
         color: $attachment_text;
+
+        .mail-list-entry__checkbox::after {
+          display: none;
+        }
     }
 
+
     &.selected {
-        background: $white;
+        background: $light_blue;
         z-index: 10; // overlay the box-shadow of the right page (z-index: 2)
+
+        &:hover {
+            background: $light_blue;
+        }
+
+        a {
+          color: $white;
+        }
     }
 
     &:hover {
@@ -35,6 +48,20 @@
           left: 20px;
         }
 
+        &::after {
+          content: '';
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          -moz-border-radius: 15px;
+          -webkit-border-radius: 15px;
+          border-radius: 15px;
+          background-color: $bullet-blue;
+          position: absolute;
+          left: 48px;
+          top: 13px;
+        }
+
         & > input[type=checkbox] {
             @include check-box;
         }
@@ -43,7 +70,7 @@
     &__item {
         display: block;
         color: $dark_grey;
-        padding: 8px 10px 10px 34px;
+        padding: 8px 10px 10px 67px;
         height: 100%;
 
         &-from {
@@ -95,4 +122,3 @@
         }
     }
 }
-