From 2cdd0a98a1ec5b4b63d88548ccbbb223a9604d81 Mon Sep 17 00:00:00 2001
From: Chris Rodriguez <github@chrisrodriguez.me>
Date: Thu, 22 Oct 2015 12:33:18 -0400
Subject: [PATCH] Fixing contrast issues in the forums

---
 .../sass/discussion/elements/_navigation.scss | 55 +++++++++++--------
 .../sass/discussion/utilities/_shame.scss     |  5 --
 .../sass/discussion/utilities/_variables.scss |  2 +-
 lms/static/sass/discussion/views/_thread.scss |  6 +-
 4 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss
index 6c55735865..56b972db09 100644
--- a/lms/static/sass/discussion/elements/_navigation.scss
+++ b/lms/static/sass/discussion/elements/_navigation.scss
@@ -172,11 +172,19 @@
 }
 
 .forum-nav-thread {
-  border-bottom: 1px solid $gray-l3;
-  background-color: $gray-l5;
+  border-bottom: 1px solid $gray-l4;
+  background-color: $gray-l6;
 
   &.is-unread {
-    background-color: $white;
+
+    .forum-nav-thread-comments-count {
+      background-color: $blue-d1;
+      color: $white;
+
+      &:after {
+        border-right-color: $blue-d1;
+      }
+    }
   }
 }
 
@@ -184,9 +192,24 @@
   display: block;
   padding: ($baseline/4) ($baseline/2);
 
-  &.is-active, &:hover, &:focus {
+  &.is-active,
+  &:hover,
+  &:focus {
     background-color: $forum-color-active-thread;
   }
+
+  &.is-active {
+    color: $base-font-color;
+
+    .forum-nav-thread-comments-count {
+      background-color: $gray-l4;
+      color: $base-font-color;
+
+      &:after {
+        border-right-color: $gray-l4;
+      }
+    }
+  }
 }
 
 %forum-nav-thread-wrapper {
@@ -263,7 +286,7 @@
   border-radius: 2px;
   padding: ($baseline/10) ($baseline/5);
   min-width: 2em; // Fit most comment counts but allow expansion if necessary
-  background-color: $gray-l3;
+  background-color: $gray-l4;
 
   // Speech bubble tail
   &:after {
@@ -276,24 +299,7 @@
     height: 0;
     border-style: solid;
     @include border-width(0, ($baseline/4), ($baseline/4), 0);
-    @include border-color(transparent, $gray-l3, transparent, transparent);
-  }
-
-  &.is-unread {
-    background-color: $white;
-
-    &:after {
-      border-right-color: $white
-    }
-  }
-}
-
-.forum-nav-thread.is-unread .forum-nav-thread-comments-count {
-  background-color: $blue;
-  color: $white;
-
-  &:after {
-    border-right-color: $blue;
+    @include border-color(transparent, $gray-l4, transparent, transparent);
   }
 }
 
@@ -312,7 +318,8 @@
   @extend %forum-nav-load-more-content;
   color: $link-color;
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     color: $link-color;
     background-color: $forum-color-active-thread;
   }
diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss
index f590494dc6..8dc6aae812 100644
--- a/lms/static/sass/discussion/utilities/_shame.scss
+++ b/lms/static/sass/discussion/utilities/_shame.scss
@@ -164,9 +164,4 @@ li[class*=forum-nav-thread-label-] {
   .wrapper-post-header .post-title {
     margin-bottom: 0 !important; // overrides "#seq_content h1" styling
   }
-
-  .posted-details {
-    font-size: 12px !important;
-    color: #919191 !important;
-  }
 }
diff --git a/lms/static/sass/discussion/utilities/_variables.scss b/lms/static/sass/discussion/utilities/_variables.scss
index bb9654af65..bac482ba7f 100644
--- a/lms/static/sass/discussion/utilities/_variables.scss
+++ b/lms/static/sass/discussion/utilities/_variables.scss
@@ -2,7 +2,7 @@
 // ====================
 
 // color variables
-$forum-color-active-thread: tint($blue, 85%);
+$forum-color-active-thread: $white;
 $forum-color-pinned: $pink;
 $forum-color-reported: $pink;
 $forum-color-closed: $black;
diff --git a/lms/static/sass/discussion/views/_thread.scss b/lms/static/sass/discussion/views/_thread.scss
index 6ef5e9fcbe..e75e747c6a 100644
--- a/lms/static/sass/discussion/views/_thread.scss
+++ b/lms/static/sass/discussion/views/_thread.scss
@@ -32,6 +32,10 @@ body.discussion, .discussion-module {
       @include float(right);
       width: flex-grid(3,12);
     }
+
+    .posted-details {
+      color: $gray-d1;
+    }
   }
 
   // response layout
@@ -127,7 +131,7 @@ body.discussion {
     .posted-details {
       @extend %t-copy-sub2;
       margin-top: ($baseline/5);
-      color: $gray-l1;
+      color: $gray-d1;
 
       .username {
         @extend %t-strong;