From 38142182774ea772aacc88f26586512d6279267f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Oct 2020 19:38:49 +0300
Subject: Some initial work on replacing icons with FA5

---
 src/components/favorite_button/favorite_button.vue | 33 +++++++++++++---------
 1 file changed, 20 insertions(+), 13 deletions(-)

(limited to 'src/components/favorite_button/favorite_button.vue')

diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index fbc90f84..6c7bfdab 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -1,18 +1,23 @@
 <template>
   <div v-if="loggedIn">
-    <i
+    <FAIcon
       :class="classes"
-      class="button-icon favorite-button fav-active"
+      class="FavoriteButton button-icon -interactive"
       :title="$t('tool_tip.favorite')"
+      :icon="[status.favorited ? 'fas' : 'far', 'star']"
+      :spin="animated"
+      size="lg"
       @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 button-icon"
       :title="$t('tool_tip.favorite')"
+      :icon="['far', 'star']"
+      size="lg"
     />
     <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
   </div>
@@ -23,18 +28,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>
-- 
cgit v1.2.3-70-g09d2

