fix conflict, keep the touchable button big

1 files changed, 18 insertions, 13 deletions

diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index fbc90f84..dfe12f86 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -1,18 +1,21 @@
 <template>
   <div v-if="loggedIn">
-    <i
+    <FAIcon
       :class="classes"
-      class="button-icon favorite-button fav-active"
+      class="FavoriteButton fa-scale-110 fa-old-padding -interactive"
       :title="$t('tool_tip.favorite')"
+      :icon="[status.favorited ? 'fas' : 'far', 'star']"
+      :spin="animated"
       @click.prevent="favorite()"
     />
     <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
   </div>
   <div v-else>
-    <i
+    <FAIcon
       :class="classes"
-      class="button-icon favorite-button"
+      class="FavoriteButton fa-scale-110 fa-old-padding"
       :title="$t('tool_tip.favorite')"
+      :icon="['far', 'star']"
     />
     <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
   </div>
@@ -23,18 +26,20 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.fav-active {
-  cursor: pointer;
-  animation-duration: 0.6s;
+.FavoriteButton {
+  &.-interactive {
+    cursor: pointer;
+    animation-duration: 0.6s;
 
-  &:hover {
+    &:hover {
+      color: $fallback--cOrange;
+      color: var(--cOrange, $fallback--cOrange);
+    }
+  }
+
+  &.-favorited {
     color: $fallback--cOrange;
     color: var(--cOrange, $fallback--cOrange);
   }
 }
-
-.favorite-button.icon-star {
-  color: $fallback--cOrange;
-  color: var(--cOrange, $fallback--cOrange);
-}
 </style>