12 files changed, 46 insertions, 51 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
diff --git a/components/editor/SidebarCategory.vue b/components/editor/SidebarCategory.vue
index 3e0db9b..9dedf33 100644
--- a/components/editor/SidebarCategory.vue
+++ b/components/editor/SidebarCategory.vue
@@ -35,7 +35,7 @@ const selected = computed(() => {
   <div id="category-container" :class="{ selected: selected }">
     <span id="category-title" @click="setSelectedCategory">
       <font-awesome-icon @click.stop="expandCategory" class="category-icon"
-        :icon="expanded ? ['fas', 'fa-caret-down'] : ['fas', 'fa-caret-up']" />
+        :icon="expanded ? ['fas', 'caret-down'] : ['fas', 'caret-up']" />
       <span id="category-name">
         <span id="category-display-name">{{ stripColorCodes(category.display.name) }}</span>
         <code id="category-display-id">{{ category.id }}</code>
diff --git a/components/editor/SidebarQuest.vue b/components/editor/SidebarQuest.vue
index a7b3e3f..422e8c6 100644
--- a/components/editor/SidebarQuest.vue
+++ b/components/editor/SidebarQuest.vue
@@ -23,7 +23,7 @@ const selected = computed(() => {
 <template>
   <div id="quest-container" @click.stop="setSelectedQuest" :class="{ selected: selected }">
     <span id="quest-title">
-      <font-awesome-icon class="quest-icon" :icon="['far', 'fa-compass']" />
+      <font-awesome-icon class="quest-icon" :icon="['far', 'compass']" />
       <span id="quest-name">
         <span id="quest-display-name">{{ stripColorCodes(quest.display.name) }}</span>
         <code id="quest-display-id">{{ quest.id }}</code>
diff --git a/components/editor/quest/TasksOptionsPanel.vue b/components/editor/quest/TasksOptionsPanel.vue
index 7742408..034089d 100644
--- a/components/editor/quest/TasksOptionsPanel.vue
+++ b/components/editor/quest/TasksOptionsPanel.vue
@@ -36,8 +36,7 @@ const addTask = (newId: string, newType: string) => {
         :quest="quest" />
 
       <div id="controls">
-        <Button id="add-task" :icon="['fas', 'fa-plus']" type="solid" label="Add task"
-          @click="showAddTaskModal = true" />
+        <Button id="add-task" :icon="['fas', 'plus']" type="solid" label="Add task" @click="showAddTaskModal = true" />
       </div>
     </div>
   </EditorOptionsPanel>
diff --git a/components/editor/quest/modal/Delete.vue b/components/editor/quest/modal/Delete.vue
index 47c6388..e81bcc7 100644
--- a/components/editor/quest/modal/Delete.vue
+++ b/components/editor/quest/modal/Delete.vue
@@ -15,8 +15,8 @@ defineProps({
     </template>
     <p>Are you sure you want to delete this quest? The quests editor does not have undo functionality (yet)! </p>
     <div id="confirm" class="control-group">
-      <Button :icon="['fas', 'fa-times']" :label="'Cancel'" @click="model = false"></Button>
-      <Button type="solid" :icon="['fas', 'fa-trash']" :label="'Delete'" @click="emit('delete')"></Button>
+      <Button :icon="['fas', 'times']" :label="'Cancel'" @click="model = false"></Button>
+      <Button type="solid" :icon="['fas', 'trash']" :label="'Delete'" @click="emit('delete')"></Button>
     </div>
   </Modal>
 </template>
diff --git a/components/editor/quest/modal/Duplicate.vue b/components/editor/quest/modal/Duplicate.vue
index e089222..73a2fd0 100644
--- a/components/editor/quest/modal/Duplicate.vue
+++ b/components/editor/quest/modal/Duplicate.vue
@@ -35,8 +35,8 @@ const isDuplicate = computed(() => {
         <p v-if="isDuplicate" class="error-text">Name is not unique.</p>
         <p>A Quest ID must be unique, alphanumeric, and not contain any spaces.</p>
         <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="'Duplicate'" :disabled="isDuplicate"
+          <Button :icon="['fas', 'times']" :label="'Cancel'" @click="model = false"></Button>
+          <Button type="solid" :icon="['fas', 'check']" :label="'Duplicate'" :disabled="isDuplicate"
             @click="emit('duplicate', newQuestId)"></Button>
         </div>
       </div>
diff --git a/components/editor/quest/modal/Rename.vue b/components/editor/quest/modal/Rename.vue
index 7339219..3d846aa 100644
--- a/components/editor/quest/modal/Rename.vue
+++ b/components/editor/quest/modal/Rename.vue
@@ -35,8 +35,8 @@ const isDuplicate = computed(() => {
         <p v-if="isDuplicate" class="error-text">Name is not unique.</p>
         <p>A Quest ID must be unique, alphanumeric, and not contain any spaces.</p>
         <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="'Rename'" :disabled="isDuplicate"
+          <Button :icon="['fas', 'times']" :label="'Cancel'" @click="model = false"></Button>
+          <Button type="solid" :icon="['fas', 'check']" :label="'Rename'" :disabled="isDuplicate"
             @click="emit('update', newQuestId)"></Button>
         </div>
       </div>
diff --git a/components/editor/task/Configuration.vue b/components/editor/task/Configuration.vue
index 9cb55d1..0355383 100644
--- a/components/editor/task/Configuration.vue
+++ b/components/editor/task/Configuration.vue
@@ -86,13 +86,13 @@ const deleteTaskType = (taskId: string) => {
         </code>
       </p>
       <div id="task-controls" class="control-group">
-        <Button :icon="['fas', 'fa-pen']" :label="'Change'" @click="showChangeModal = true"></Button>
-        <Button :icon="['fas', 'fa-trash']" :label="'Delete'" @click="deleteTaskType(props.taskId)"></Button>
+        <Button :icon="['fas', 'pen']" :label="'Change'" @click="showChangeModal = true"></Button>
+        <Button :icon="['fas', 'trash']" :label="'Delete'" @click="deleteTaskType(props.taskId)"></Button>
       </div>
     </div>
     <div id="task-configuration">
       <div v-if="!taskDefintion" class="error">
-        <font-awesome-icon id="error-icon" :icon="['fas', 'fa-triangle-exclamation']" />
+        <font-awesome-icon id="error-icon" :icon="['fas', 'triangle-exclamation']" />
         <p id="error-message">
           Unable to edit task <code>{{ props.taskId }}</code>.
         </p>
diff --git a/components/editor/task/modal/Change.vue b/components/editor/task/modal/Change.vue
index db7d96b..8ab5dbc 100644
--- a/components/editor/task/modal/Change.vue
+++ b/components/editor/task/modal/Change.vue
@@ -38,8 +38,8 @@ const newTypeDescription = computed(() => session.getTaskDefinitionByTaskType(ne
         <p v-if="newTypeDescription">{{ newTypeDescription }}</p>
         <p>Any configured options for this task will be overwritten.</p>
         <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="'Change'" :disabled="unknownTaskType || noChange"
+          <Button :icon="['fas', 'times']" :label="'Cancel'" @click="model = false"></Button>
+          <Button type="solid" :icon="['fas', 'check']" :label="'Change'" :disabled="unknownTaskType || noChange"
             @click="emit('update', newType)"></Button>
         </div>
       </div>
diff --git a/components/editor/task/modal/Create.vue b/components/editor/task/modal/Create.vue
index d286759..e3867b6 100644
--- a/components/editor/task/modal/Create.vue
+++ b/components/editor/task/modal/Create.vue
@@ -51,8 +51,8 @@ const newTypeDescription = computed(() => session.getTaskDefinitionByTaskType(ne
         <p v-if="newTypeDescription">{{ newTypeDescription }}</p>
         <p>A task ID must be unique, alphanumeric, and not contain any spaces.</p>
         <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'"
+          <Button :icon="['fas', 'times']" :label="'Cancel'" @click="model = false"></Button>
+          <Button type="solid" :icon="['fas', 'check']" :label="'Confirm'"
             :disabled="unknownTaskType || invalidTaskId || duplicateTaskId"
             @click="emit('add', newId, newType)"></Button>
         </div>