diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 8a2e64f7bf5..26920869bec 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -120,6 +120,7 @@ $gl-text-color-quaternary: #d6d6d6; $gl-text-color-inverted: rgba(255, 255, 255, 1.0); $gl-text-color-secondary-inverted: rgba(255, 255, 255, .85); $gl-text-green: $green-600; +$gl-text-green-hover: $green-700; $gl-text-red: $red-500; $gl-text-orange: $orange-600; $gl-link-color: $blue-600; diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 0a194f3707f..fbfe5d3c682 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -766,17 +766,25 @@ ul.notes { background-color: transparent; border: none; outline: 0; + transition: color $general-hover-transition-duration $general-hover-transition-curve; &.is-disabled { cursor: default; } - &:not(.is-disabled):hover, + &:not(.is-disabled) { + &:hover, + &:focus { + color: $gl-text-green; + } + } + &.is-active { color: $gl-text-green; - svg { - fill: $gl-text-green; + &:hover, + &:focus { + color: $gl-text-green-hover; } } diff --git a/app/views/projects/notes/_actions.html.haml b/app/views/projects/notes/_actions.html.haml index cb737d129f0..b04f5efe1f9 100644 --- a/app/views/projects/notes/_actions.html.haml +++ b/app/views/projects/notes/_actions.html.haml @@ -26,8 +26,12 @@ ":title" => "buttonText", ":ref" => "'button'" } - = icon('spin spinner', 'v-show' => 'loading', class: 'loading', 'aria-hidden' => 'true', 'aria-label' => 'Loading') - %div{ 'v-show' => '!loading' }= render 'shared/icons/icon_status_success.svg' + = icon('spin spinner', 'v-if' => 'loading', class: 'loading', 'aria-hidden' => 'true', 'aria-label' => 'Loading') + %div{ 'v-else' => '' } + %template{ 'v-if' => 'isResolved' } + = render 'shared/icons/icon_status_success_solid.svg' + %template{ 'v-else' => '' } + = render 'shared/icons/icon_status_success.svg' - if current_user - if note.emoji_awardable? diff --git a/app/views/shared/icons/_icon_status_success.svg b/app/views/shared/icons/_icon_status_success.svg index eed5006bebe..845562e9320 100755 --- a/app/views/shared/icons/_icon_status_success.svg +++ b/app/views/shared/icons/_icon_status_success.svg @@ -1 +1 @@ - + diff --git a/app/views/shared/icons/_icon_status_success_solid.svg b/app/views/shared/icons/_icon_status_success_solid.svg new file mode 100644 index 00000000000..0aac6d933e1 --- /dev/null +++ b/app/views/shared/icons/_icon_status_success_solid.svg @@ -0,0 +1 @@ + diff --git a/changelogs/unreleased/36582-fix-note-resolved-icon.yml b/changelogs/unreleased/36582-fix-note-resolved-icon.yml new file mode 100644 index 00000000000..758c0ecd212 --- /dev/null +++ b/changelogs/unreleased/36582-fix-note-resolved-icon.yml @@ -0,0 +1,5 @@ +--- +title: Update and fix resolvable note icons for easier recognition +merge_request: +author: +type: changed