Merge branch '36582-fix-note-resolved-icon' into 'master'

Update and fix resolvable note icons for easier recognition

Closes #36582

See merge request !13821

app/assets/stylesheets/framework/variables.scss

@@ -118,6 +118,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;

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

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?

app/views/shared/icons/_icon_status_success.svg

-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M6.278 7.697L5.045 6.464a.296.296 0 0 0-.42-.002l-.613.614a.298.298 0 0 0 .002.42l1.91 1.909a.5.5 0 0 0 .703.005l.265-.265L9.997 6.04a.291.291 0 0 0-.009-.408l-.614-.614a.29.29 0 0 0-.408-.009L6.278 7.697z"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill-rule="evenodd"/><path d="M6.278 7.697L5.045 6.464a.296.296 0 0 0-.42-.002l-.613.614a.298.298 0 0 0 .002.42l1.91 1.909a.5.5 0 0 0 .703.005l.265-.265L9.997 6.04a.291.291 0 0 0-.009-.408l-.614-.614a.29.29 0 0 0-.408-.009L6.278 7.697z"/></svg>

app/views/shared/icons/_icon_status_success_solid.svg

+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z M6.278 7.697L5.045 6.464a.296.296 0 0 0-.42-.002l-.613.614a.298.298 0 0 0 .002.42l1.91 1.909a.5.5 0 0 0 .703.005l.265-.265L9.997 6.04a.291.291 0 0 0-.009-.408l-.614-.614a.29.29 0 0 0-.408-.009L6.278 7.697z" fill-rule="evenodd"/></svg>

changelogs/unreleased/36582-fix-note-resolved-icon.yml

+---
+title: Update and fix resolvable note icons for easier recognition
+merge_request:
+author:
+type: changed