Fix broken fontawesome references

3 files changed, 30 insertions, 34 deletions

diff --git a/components/base/ItemStackModal.vue b/components/base/ItemStackModal.vue
index 9a1e2b5..7a8aae2 100644
--- a/components/base/ItemStackModal.vue
+++ b/components/base/ItemStackModal.vue
@@ -68,21 +68,21 @@ const confirm = () => {
       <div id="type">
         <span class="option" @click="setSelectedType('questitem')" :class="{ selected: selectedType === 'questitem' }">
           <span>
-            <font-awesome-icon :icon="['fas', 'fa-tag']" />
+            <font-awesome-icon :icon="['fas', 'tag']" />
             Quest Item
           </span>
           <p v-if="noTypeSelected">Re-use a quest item.</p>
         </span>
         <span class="option" @click="setSelectedType('itemstack')" :class="{ selected: selectedType === 'itemstack' }">
           <span>
-            <font-awesome-icon :icon="['fas', 'fa-cube']" />
+            <font-awesome-icon :icon="['fas', 'cube']" />
             ItemStack
           </span>
           <p v-if="noTypeSelected">Define a new item stack.</p>
         </span>
         <span class="option" @click="setSelectedType('material')" :class="{ selected: selectedType === 'material' }">
           <span>
-            <font-awesome-icon :icon="['fas', 'fa-apple-whole']" />
+            <font-awesome-icon :icon="['fas', 'apple-whole']" />
             Material
           </span>
           <p v-if="noTypeSelected">Define a specific item type.</p>
@@ -100,8 +100,8 @@ const confirm = () => {
 
 
       <div id="confirm" class="control-group">
-        <Button :icon="['fas', 'fa-times']" :label="'Cancel'" @click="model = false"></Button>
-        <Button type="solid" :icon="['fas', 'fa-check']" :label="'Confirm'" @click="confirm"></Button>
+        <Button :icon="['fas', 'times']" :label="'Cancel'" @click="model = false"></Button>
+        <Button type="solid" :icon="['fas', 'check']" :label="'Confirm'" @click="confirm"></Button>
         <!-- :disabled="noTypeSelected || noValue" -->
       </div>
     </template>
diff --git a/components/base/ItemStackPicker.vue b/components/base/ItemStackPicker.vue
index d16090e..66b665f 100644
--- a/components/base/ItemStackPicker.vue
+++ b/components/base/ItemStackPicker.vue
@@ -14,9 +14,9 @@ const showItemStackModal = ref(false);
 
 //TODO unshitify
 const empty = computed(() => {
-  return value.value === undefined 
-    || value.value === null 
-    || value.value === '' 
+  return value.value === undefined
+    || value.value === null
+    || value.value === ''
     || (Array.isArray(value.value) && value.value.length === 0)
     || (typeof value.value === 'object' && Object.keys(value.value).length === 0);
 });
@@ -28,12 +28,12 @@ const isItemStack = computed(() => {
     return false;
   }
 
-  const key = 'item' in value.value 
-    ? 'item' 
-    : 'type' in value.value 
-      ? 'type' 
+  const key = 'item' in value.value
+    ? 'item'
+    : 'type' in value.value
+      ? 'type'
       : 'material'
-  
+
   return (!!value.value[key]);
 });
 const isMaterial = computed(() => {
@@ -50,17 +50,15 @@ const update = (newValue: any) => {
 <template>
   <div class="itemstack" @click="showItemStackModal = true">
     <span v-if="empty" class="empty">ItemStack...</span>
-    <span v-if="isQuestItem" class="item"><font-awesome-icon :icon="['fas', 'fa-tag']" /> Quest Item</span>
-    <span v-if="isItemStack" class="item"><font-awesome-icon :icon="['fas', 'fa-cube']" /> ItemStack of '{{ value.type || value.item || value.material }}'</span>
-    <span v-if="isMaterial" class="item"><font-awesome-icon :icon="['fas', 'fa-apple-whole']" /> {{ value }}</span>
-    <span v-if="!empty && !isQuestItem && !isItemStack && !isMaterial" class="invalid"><font-awesome-icon :icon="['fas', 'fa-triangle-exclamation']" /> Invalid ItemStack</span>
+    <span v-if="isQuestItem" class="item"><font-awesome-icon :icon="['fas', 'tag']" /> Quest Item</span>
+    <span v-if="isItemStack" class="item"><font-awesome-icon :icon="['fas', 'cube']" /> ItemStack of '{{ value.type ||
+    value.item || value.material }}'</span>
+    <span v-if="isMaterial" class="item"><font-awesome-icon :icon="['fas', 'apple-whole']" /> {{ value }}</span>
+    <span v-if="!empty && !isQuestItem && !isItemStack && !isMaterial" class="invalid"><font-awesome-icon
+        :icon="['fas', 'triangle-exclamation']" /> Invalid ItemStack</span>
   </div>
-  
-  <ItemStackModal
-    v-model="showItemStackModal"
-    :value="value"
-    @confirm="update"
-    />
+
+  <ItemStackModal v-model="showItemStackModal" :value="value" @confirm="update" />
 </template>
 
 <style scoped>
@@ -74,12 +72,12 @@ const update = (newValue: any) => {
   user-select: none;
   transition: background-color 0.3s;
   background-color: var(--color-background-soft);
-  
+
   span {
     font-family: monospace;
     font-size: 0.8rem;
   }
-  
+
   .empty {
     color: var(--color-text-mute);
   }
@@ -87,14 +85,13 @@ const update = (newValue: any) => {
   .item {
     color: var(--color-primary);
   }
-  
+
   .invalid {
     color: var(--color-false);
   }
-  
+
   &:hover {
     background-color: var(--color-hover);
   }
 }
-
 </style>
\ No newline at end of file
diff --git a/components/base/TrueFalseSwitch.vue b/components/base/TrueFalseSwitch.vue
index a0a3392..152efa3 100644
--- a/components/base/TrueFalseSwitch.vue
+++ b/components/base/TrueFalseSwitch.vue
@@ -16,8 +16,8 @@ const invert = () => {
 
 <template>
   <div class="switch" @click="invert">
-    <span v-if="value" class="true"><font-awesome-icon :icon="['fas', 'fa-check']" /> True</span>
-    <span v-else class="false"><font-awesome-icon :icon="['fas', 'fa-xmark']" /> False</span>
+    <span v-if="value" class="true"><font-awesome-icon :icon="['fas', 'check']" /> True</span>
+    <span v-else class="false"><font-awesome-icon :icon="['fas', 'xmark']" /> False</span>
   </div>
 </template>
 
@@ -32,12 +32,12 @@ const invert = () => {
   user-select: none;
   transition: background-color 0.3s;
   background-color: var(--color-background-soft);
-  
+
   span {
     font-family: monospace;
     font-size: 0.8rem;
   }
-  
+
   .true {
     color: var(--color-text-primary);
   }
@@ -45,10 +45,9 @@ const invert = () => {
   .false {
     color: var(--color-false);
   }
-  
+
   &:hover {
     background-color: var(--color-hover);
   }
 }
-
 </style>
\ No newline at end of file