Merge pull request #10314 from edx/clrux/ac-21

LMS: Fixing contrast issues in the forums

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

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

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;

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;