LMS: darkening a gray on the profile page

common/test/acceptance/pages/lms/learner_profile.py

@@ -253,10 +253,6 @@ class LearnerProfilePage(FieldsMixin, PageObject):
         self.wait_for_ajax()
 
         self.wait_for_element_visibility('.image-wrapper', "remove button is visible")
-        self.browser.execute_script('$(".u-field-remove-button").css("opacity",1);')
-        self.mouse_hover(self.browser.find_element_by_css_selector('.image-wrapper'))
-
-        self.wait_for_element_visibility('.u-field-remove-button', "remove button is visible")
         self.q(css='.u-field-remove-button').first.click()
 
         self.wait_for_ajax()

common/test/acceptance/tests/lms/test_learner_profile.py

@@ -767,7 +767,6 @@ class LearnerProfileA11yTest(LearnerProfileTestMixin, WebAppTest):
 
         profile_page.a11y_audit.config.set_rules({
             "ignore": [
-                'color-contrast',  # TODO: AC-232
                 'skip-link',  # TODO: AC-179
                 'link-href',  # TODO: AC-231
             ],

lms/static/sass/base/_mixins.scss

@@ -39,8 +39,6 @@
 
 @mixin show-hover-state() {
     opacity: 1;
-    background-color: $shadow-d2;
-    border-radius: ($baseline/4);
 }
 
 @function em($pxval, $base: 16) {

lms/static/sass/shared/_fields.scss

@@ -12,7 +12,7 @@
         border-radius: 3px;
 
         span {
-            color: $gray-l1;
+            color: $gray;
         }
 
         &:hover {

lms/static/sass/views/_learner-profile.scss

@@ -43,6 +43,7 @@
             position: relative;
 
             .image-frame {
+                display: block;
                 position: relative;
                 width: $profile-image-dimension;
                 height: $profile-image-dimension;
@@ -50,19 +51,27 @@
             }
 
             .u-field-upload-button {
-                width: $profile-image-dimension;
-                height: $profile-image-dimension;
                 position: absolute;
                 top: 0;
-                opacity: 0;
+                width: $profile-image-dimension;
+                height: $profile-image-dimension;
+                border-radius: ($baseline/4);
+                border: 2px dashed transparent;
+                background: rgba(229,241,247, .8);
+                color: $link-color;
+                text-shadow: none;
                 @include transition(all $tmg-f1 ease-in-out 0s);
+                opacity: 0;
+                z-index: 6;
 
                 i {
-                    color: $white;
+                    color: $link-color;
                 }
 
-                &:focus {
+                &:focus,
+                &:hover {
                     @include show-hover-state();
+                    border-color: $link-color;
                 }
             }
 
@@ -70,50 +79,34 @@
                 @include show-hover-state();
             }
 
-            .upload-button-icon, .upload-button-title {
-                text-align: center;
-                transform: translateY(35px);
-                -webkit-transform: translateY(35px);
+            .upload-button-icon,
+            .upload-button-title {
                 display: block;
-                color: $white;
                 margin-bottom: ($baseline/4);
+                @include transform(translateY(35px));
                 line-height: 1.3em;
+                text-align: center;
+                z-index: 7;
             }
 
             .upload-button-input {
-                width: $profile-image-dimension;
-                height: 100%;
                 position: absolute;
-                top: 0;
+                top: -($profile-image-dimension);
                 @include left(0);
-                opacity: 0;
+                width: $profile-image-dimension;
+                height: 100%;
                 cursor: pointer;
+                z-index: 5;
+                outline: 0;
             }
 
             .u-field-remove-button {
-                width: $profile-image-dimension;
-                height: $baseline;
-                opacity: 0;
                 position: relative;
-                margin-top: 2px;
+                display: block;
+                width: $profile-image-dimension;
+                margin-top: ($baseline / 4);
+                padding: ($baseline / 5);
                 text-align: center;
-
-                &:active {
-                    box-shadow: none;
-                    outline: 0;
-                }
-                &:focus {
-                    @include show-hover-state();
-                    box-shadow: none;
-                    outline: 0;
-                    border: 2px dashed $link-color !important;
-                }
-            }
-
-            &:hover, &:focus {
-                .u-field-upload-button, .u-field-remove-button {
-                    @include show-hover-state();
-                }
             }
         }
     }