AC-570 courseware search contrast enhancement

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

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

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>

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

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

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>