diff --git a/common/test/acceptance/pages/lms/learner_profile.py b/common/test/acceptance/pages/lms/learner_profile.py index 848a1f4759..2b22bcbd3e 100644 --- a/common/test/acceptance/pages/lms/learner_profile.py +++ b/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() diff --git a/common/test/acceptance/tests/lms/test_learner_profile.py b/common/test/acceptance/tests/lms/test_learner_profile.py index 1b27c1b8b6..03f4f8c4ec 100644 --- a/common/test/acceptance/tests/lms/test_learner_profile.py +++ b/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 ], diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss index 05521a2124..cb47af092b 100644 --- a/lms/static/sass/base/_mixins.scss +++ b/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) { diff --git a/lms/static/sass/shared/_fields.scss b/lms/static/sass/shared/_fields.scss index 921f45eaf0..02e51ac95c 100644 --- a/lms/static/sass/shared/_fields.scss +++ b/lms/static/sass/shared/_fields.scss @@ -12,7 +12,7 @@ border-radius: 3px; span { - color: $gray-l1; + color: $gray; } &:hover { diff --git a/lms/static/sass/views/_learner-profile.scss b/lms/static/sass/views/_learner-profile.scss index 92c91b1342..b7b1160a53 100644 --- a/lms/static/sass/views/_learner-profile.scss +++ b/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 { + position: absolute; + top: -($profile-image-dimension); + @include left(0); width: $profile-image-dimension; height: 100%; - position: absolute; - top: 0; - @include left(0); - opacity: 0; 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(); - } } } }