Refactoring colors: better defining variable names, extracting hard-coded hex codes, normalizing link styles, organizing _colors files.

4 files changed, 38 insertions, 23 deletions

diff --git a/web-ui/app/scss/_colors.scss b/web-ui/app/scss/_colors.scss
index 22897ac0..7e90d6ae 100644
--- a/web-ui/app/scss/_colors.scss
+++ b/web-ui/app/scss/_colors.scss
@@ -1,19 +1,24 @@
-$warning: #F7E8AF;
-$search-highlight: #FFEF29;
+/* Side nav background color */
+$navigation_background: #3E3A37;
 
-$total_count_bg: #C0B9B9;
+/* Action buttons and links */
+$action_buttons: #3dabc4;
 
-$error: #D72A25;
-$attention: #F6A40A;
-$success: #2DAB49;
+/* Unread count dialog bubble background color */
+$secondary_callout: #FF7902;
 
+/* Grayscale */
 $contrast: #EEE;
 $top_pane: #EAEAEA;
-$secondary: #3E3A37;
-$primary_color: #EF4E2F;
-$action_buttons: #2ba6cb;
+$total_count_bg: #C0B9B9;
 
-$secondary_callout: #FF7902;
+/* Feedback to Users */
+$warning: #F7E8AF;
+$search-highlight: #FFEF29;
+
+$error: #D72A25;
+$attention: #F6A40A;
+$success: #2DAB49;
 
 $will_be_encrypted: #41cd60;
 $wont_be_encrypted: #F6A40A;
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 2d1f8f23..5b59cad6 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -76,7 +76,7 @@
     position: absolute;
     bottom: -2px;
     left: 1px;
-    color: $secondary;
+    color: $navigation_background;
   }
 }
 
diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss
index bd30552c..34d7993c 100644
--- a/web-ui/app/scss/_read.scss
+++ b/web-ui/app/scss/_read.scss
@@ -64,6 +64,16 @@
   .attachmentsArea {
     border-top: 1px solid #DDD;
     padding: 10px 0 0;
+
+    a {
+      color: $action_buttons;
+      text-decoration: none;
+      line-height: inherit;
+      &:hover, &:focus {
+      color: lighten($action_buttons, 10);
+      outline: none;
+      }
+    }
   }
 }
 
diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss
index e1186cef..71427af5 100644
--- a/web-ui/app/scss/styles.scss
+++ b/web-ui/app/scss/styles.scss
@@ -223,7 +223,7 @@ section {
       input {
         margin: 0;
         padding: 8px 30px;
-        color: $secondary;
+        color: $navigation_background;
         background: white;
         border: none;
         transition: background-color 150ms ease-out;
@@ -246,10 +246,10 @@ section {
   }
 
   &#left-pane {
-    background-color: $secondary;
+    background-color: $navigation_background;
     color: white;
     nav {
-      border-right: 1px solid lighten($secondary, 10%);
+      border-right: 1px solid lighten($navigation_background, 10%);
       ul#default-tag-list, #custom-tag-list {
         li {
           transition: background-color 150ms ease-out;
@@ -257,12 +257,12 @@ section {
           cursor: pointer;
           &:hover {
             background: #CCC;
-            color: $secondary;
+            color: $navigation_background;
           }
           &.selected {
             font-weight: bold;
             background: $contrast;
-            color: $secondary;
+            color: $navigation_background;
           }
         }
       }
@@ -370,14 +370,14 @@ section {
       ul#logout {
         li {
           color: $action_buttons;
-          background-color: $secondary;
+          background-color: $navigation_background;
           padding: 5px 10px;
           position: relative;
           @include searching(4px, 19px, #333, 0.7em);
 
           &:hover {
           background-color: $action_buttons;
-          color: $secondary;
+          color: $navigation_background;
           }
 
           div {
@@ -401,7 +401,7 @@ section {
         padding: 5px;
         font-weight: 600;
         margin: 0 10px;
-        border-bottom: 1px dotted lighten($secondary, 10%);
+        border-bottom: 1px dotted lighten($navigation_background, 10%);
       }
     }
   }
@@ -524,7 +524,7 @@ button {
   &:hover, &:focus {
     color: white;
   }
-  background: $secondary;
+  background: $navigation_background;
   &.logout {
     color: $action_buttons;
   }
@@ -550,7 +550,7 @@ button {
   width: 50px;
   position: absolute;
   height: 100vh;
-  background: $secondary;
+  background: $navigation_background;
 
   ul.shortcuts {
     li {
@@ -562,7 +562,7 @@ button {
         opacity: 1;
         cursor: default;
         a {
-          color: $secondary;
+          color: $navigation_background;
           }
         }
       @include searching(6px, 26px, #666, 0.9em);
@@ -575,7 +575,7 @@ button {
         text-align: center;
         &:hover {
           background: darken($contrast, 10%);
-          color: $secondary;
+          color: $navigation_background;
           @include btn-transition;
           &.logout{
             color: #000000;