From 37b42941f85c93f834851c44c4868e9681fe2d6d Mon Sep 17 00:00:00 2001
From: Chris Rodriguez <github@chrisrodriguez.me>
Date: Thu, 25 Aug 2016 14:04:06 -0400
Subject: [PATCH] AC-570 courseware search contrast enhancement

---
 cms/static/sass/partials/_variables.scss      |  2 +-
 .../cms/static/sass/partials/_variables.scss  |  2 +-
 .../fixtures/search/course_search_form.html   |  4 +--
 lms/static/sass/partials/base/_variables.scss |  2 +-
 lms/static/sass/search/_search.scss           | 34 ++++++++++++-------
 lms/templates/courseware/courseware.html      |  4 +--
 6 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/cms/static/sass/partials/_variables.scss b/cms/static/sass/partials/_variables.scss
index 1bc0923178..933c377ed5 100644
--- a/cms/static/sass/partials/_variables.scss
+++ b/cms/static/sass/partials/_variables.scss
@@ -42,7 +42,7 @@ $transparent: rgba(0,0,0,0); // used when color value is needed for UI width/tra
 // +Colors - UXPL new pattern library colors
 // ====================
 $uxpl-blue-base: rgb(0, 117, 180); // wcag2a compliant
-$uxpl-blue-hover-active: rgb(41, 145, 195); // wcag2a compliant
+$uxpl-blue-hover-active: rgb(6, 86, 131); // wcag2a compliant
 
 $uxpl-green-base: rgb(0, 129, 0); // wcag2a compliant
 $uxpl-green-hover-active: rgb(0, 155, 0); // wcag2a compliant
diff --git a/common/test/test-theme/cms/static/sass/partials/_variables.scss b/common/test/test-theme/cms/static/sass/partials/_variables.scss
index e51b5a4cd6..96cfadb354 100644
--- a/common/test/test-theme/cms/static/sass/partials/_variables.scss
+++ b/common/test/test-theme/cms/static/sass/partials/_variables.scss
@@ -88,7 +88,7 @@ $blue-t2: rgba($blue, 0.50);
 $blue-t3: rgba($blue, 0.75);
 
 $uxpl-blue-base: rgb(0, 117, 180); // wcag2a compliant
-$uxpl-blue-hover-active: rgb(41, 145, 195); // wcag2a compliant
+$uxpl-blue-hover-active: rgb(6, 86, 131); // wcag2a compliant
 
 $uxpl-green-base: rgb(0, 129, 0); // wcag2a compliant
 $uxpl-green-hover-active: rgb(0, 155, 0); // wcag2a compliant
diff --git a/lms/static/js/fixtures/search/course_search_form.html b/lms/static/js/fixtures/search/course_search_form.html
index 258a644f46..b18ca0cbf0 100644
--- a/lms/static/js/fixtures/search/course_search_form.html
+++ b/lms/static/js/fixtures/search/course_search_form.html
@@ -2,9 +2,7 @@
     <form>
         <label for="course-search-input" class="sr">Course Search</label>
         <input id="course-search-input" type="text" class="search-field"/>
-        <button type="submit" class="search-button">
-          search <span class="icon fa fa-search" aria-hidden="true"></span>
-        </button>
+        <button type="submit" class="search-button">Search</button>
         <button type="button" class="cancel-button" title="Clear search">
           <span class="icon fa fa-remove" aria-hidden="true"></span>
         </button>
diff --git a/lms/static/sass/partials/base/_variables.scss b/lms/static/sass/partials/base/_variables.scss
index da1d276752..4d9d7b8734 100644
--- a/lms/static/sass/partials/base/_variables.scss
+++ b/lms/static/sass/partials/base/_variables.scss
@@ -160,7 +160,7 @@ $blue-t2: rgba($blue, 0.50);
 $blue-t3: rgba($blue, 0.75);
 
 $uxpl-blue-base: rgb(0, 117, 180); // wcag2a compliant
-$uxpl-blue-hover-active: rgb(41, 145, 195); // wcag2a compliant
+$uxpl-blue-hover-active: rgb(6, 86, 131); // wcag2a compliant
 
 $uxpl-green-base: rgb(0, 129, 0); // wcag2a compliant
 $uxpl-green-hover-active: rgb(0, 155, 0); // wcag2a compliant
diff --git a/lms/static/sass/search/_search.scss b/lms/static/sass/search/_search.scss
index d3b669f9e7..e6ad472c8e 100644
--- a/lms/static/sass/search/_search.scss
+++ b/lms/static/sass/search/_search.scss
@@ -13,30 +13,39 @@
     top: 5px;
     width: 100%;
     border-radius: 4px;
-    background: $white-t1;
-    &.is-active {
-      background: $white;
-    }
+    background: $white;
   }
 
-  .search-button, .cancel-button,
-  .search-button:hover, .cancel-button:hover {
-    @extend %t-icon6;
+  .search-button,
+  .cancel-button,
+  .search-button:hover,
+  .cancel-button:hover {
     @extend %t-regular;
     @include box-sizing(border-box);
-    @include right(12px);
+    @include right(0);
     display: block;
     position: absolute;
     top: 0;
     border: none;
-    background: transparent;
-    padding: 0;
+    border-radius: 0;
+    @include border-top-right-radius(3px);
+    @include border-bottom-right-radius(3px);
+    background: $uxpl-blue-base;
+    padding: 0 10px;
     height: 35px;
-    color: $gray-l1;
+    color: $white;
     box-shadow: none;
-    line-height: 35px;
+    line-height: 33px;
     text-shadow: none;
     text-transform: none;
+    
+    &:hover,
+    &:focus,
+    &:active {
+        background: $uxpl-blue-hover-active;
+        box-shadow: none;
+        border: none;
+    }
   }
 
   .cancel-button {
@@ -171,4 +180,3 @@
     }
   }
 }
-
diff --git a/lms/templates/courseware/courseware.html b/lms/templates/courseware/courseware.html
index 46cfb6549b..615cc01eb6 100644
--- a/lms/templates/courseware/courseware.html
+++ b/lms/templates/courseware/courseware.html
@@ -126,9 +126,7 @@ ${HTML(fragment.foot_html())}
                 <label for="course-search-input" class="sr">${_('Course Search')}</label>
                 <div class="search-field-wrapper">
                   <input id="course-search-input" type="text" class="search-field"/>
-                  <button type="submit" class="search-button">
-                    ${_('search')} <span class="icon fa fa-search" aria-hidden="true"></span>
-                  </button>
+                  <button type="submit" class="search-button">${_('Search')}</button>
                   <button type="button" class="cancel-button" title="${_('Clear search')}">
                     <span class="icon fa fa-remove" aria-hidden="true"></span>
                   </button>