fix conflict, keep the touchable button big

1 files changed, 33 insertions, 8 deletions

diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 9d984659..3174fd7c 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -39,21 +39,29 @@
             </i18n>
 
             <div class="icons">
-              <i
+              <FAIcon
+                fixed-width
                 style="color: var(--cBlue)"
-                class="button-icon icon-reply"
+                class="fa-scale-110 fa-old-padding"
+                icon="reply"
               />
-              <i
+              <FAIcon
+                fixed-width
                 style="color: var(--cGreen)"
-                class="button-icon icon-retweet"
+                class="fa-scale-110 fa-old-padding"
+                icon="retweet"
               />
-              <i
+              <FAIcon
+                fixed-width
                 style="color: var(--cOrange)"
-                class="button-icon icon-star"
+                class="fa-scale-110 fa-old-padding"
+                icon="star"
               />
-              <i
+              <FAIcon
+                fixed-width
                 style="color: var(--cRed)"
-                class="button-icon icon-cancel"
+                class="fa-scale-110 fa-old-padding"
+                icon="times"
               />
             </div>
           </div>
@@ -103,6 +111,23 @@
   </div>
 </template>
 
+<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes,
+  faStar,
+  faRetweet,
+  faReply
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes,
+  faStar,
+  faRetweet,
+  faReply
+)
+</script>
+
 <style lang="scss">
 .preview-container {
   position: relative;