Merge remote-tracking branch 'origin/develop' into scrolltotop

* origin/develop: (47 commits)
  Update dependency eslint-plugin-vue to v9.4.0
  Update dependency opn to v5
  fix notices being under the navbar, also change offset to use variable
  fix modals not having proper z index
  reduce indexes to be below 9999 so that develop error messages appear above
  Fix react & extra buttons not styled on tab-focus
  Fix popover not popping up
  Fix styling on Safari
  Use :focus-visible instead of :focus for focus markers
  Optimize Reply badge position
  Add badges to status interacting buttons
  Update dependency nightwatch to v2
  Update dependency eslint-plugin-n to v15.2.5
  Update dependency mocha to v10
  Update dependency karma-coverage to v2
  Update dependency sass to v1.54.5
  Update dependency karma-firefox-launcher to v2
  Update dependency vue-template-compiler to v2.7.9
  Pin dependencies
  Refresh yarn.lock
  ...

1 files changed, 46 insertions, 5 deletions

diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index d5c4c61e..74a1dfbb 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -7,11 +7,31 @@
       :title="$t('tool_tip.favorite')"
       @click.prevent="favorite()"
     >
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        :icon="[status.favorited ? 'fas' : 'far', 'star']"
-        :spin="animated"
-      />
+      <FALayers class="fa-scale-110 fa-old-padding-layer">
+        <FAIcon
+          class="fa-scale-110"
+          :icon="[status.favorited ? 'fas' : 'far', 'star']"
+          :spin="animated"
+        />
+        <FAIcon
+          v-if="status.favorited"
+          class="active-marker"
+          transform="shrink-6 up-9 right-12"
+          icon="check"
+        />
+        <FAIcon
+          v-if="!status.favorited"
+          class="focus-marker"
+          transform="shrink-6 up-9 right-12"
+          icon="plus"
+        />
+        <FAIcon
+          v-else
+          class="focus-marker"
+          transform="shrink-6 up-9 right-12"
+          icon="minus"
+        />
+      </FALayers>
     </button>
     <span v-else>
       <FAIcon
@@ -33,6 +53,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .FavoriteButton {
   display: flex;
@@ -57,6 +78,26 @@
       color: $fallback--cOrange;
       color: var(--cOrange, $fallback--cOrange);
     }
+
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
+
+      .active-marker {
+        visibility: visible;
+      }
+    }
+
+    @include focused-style {
+      .focus-marker {
+        visibility: visible;
+      }
+
+      .active-marker {
+        visibility: hidden;
+      }
+    }
   }
 }
 </style>