Update styles, add task type icons

9 files changed, 86 insertions, 75 deletions

diff --git a/.gitignore b/.gitignore
index 0b2fd4f..936b6b7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,4 +27,5 @@ coverage
 *.sw?
 
 *.tsbuildinfo
-.nuxt
\ No newline at end of file
+.nuxt
+.output
\ No newline at end of file
diff --git a/assets/base.css b/assets/base.css
index 9dc14ce..7d525a2 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -10,8 +10,8 @@
 
   --c-indigo: #2c3e50;
 
-  --c-divider-light-1: rgba(60, 60, 60, 0.2);
-  --c-divider-light-2: rgba(60, 60, 60, 0.4);
+  --c-divider-light-1: rgba(60, 60, 60, 0.1);
+  --c-divider-light-2: rgba(60, 60, 60, 0.2);
   --c-divider-dark-1: rgba(84, 84, 84, 0.2);
   --c-divider-dark-2: rgba(84, 84, 84, 0.4);
 
@@ -43,6 +43,7 @@
   --color-text: var(--c-text-dark-1);
   --color-text-mute: var(--c-text-dark-2);
   --color-text-primary: var(--c-brand-dark);
+  --color-text-on-primary: var(--c-text-light-1);
 
   --color-primary: var(--c-brand);
   --color-primary-light: var(--c-brand-light);
@@ -55,6 +56,9 @@
   --color-false: var(--c-false);
 
   --section-gap: 160px;
+  
+  --ff-sans-serif: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --ff-monospace: monospace;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -69,7 +73,7 @@
     --color-heading: var(--c-text-light-1);
     --color-text: var(--c-text-light-1);
     --color-text-mute: var(--c-text-light-2);
-  --color-text-primary: var(--c-brand-light);
+    --color-text-primary: var(--c-brand-light);
   }
 }
 
@@ -89,19 +93,7 @@ body {
     color 0.5s,
     background-color 0.5s;
   line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
+  font-family: var(--ff-sans-serif);
   font-size: 15px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -109,11 +101,11 @@ body {
 }
 
 code {
-  font-family: 'Fira Code', monospace;
+  font-family: var(--ff-monospace);
 }
 
 input, textarea {
-  font-family: inherit;
+  font-family: monospace;
   font-size: inherit;
   color: inherit;
   background: var(--color-background-soft);
@@ -123,6 +115,10 @@ input, textarea {
   transition: border-color 0.5s;
 }
 
+input::placeholder, textarea::placeholder {
+  font-family: var(--ff-sans-serif);
+}
+
 input:focus, textarea:focus {
   outline: none;
   border-color: var(--color-primary);
@@ -152,12 +148,13 @@ input[type="radio"] {
 }
 
 .multiselect__input {
-  background: var(--color-background-soft) !important ;
-  color: inherit !important;
+  background: var(--color-background-soft) !important;
+  color: var(--color-text) !important;
+  font-family: monospace !important;
+}
 
-  &::placeholder {
-    color: rgba(255, 255, 255, .2) !important;
-  }
+.multiselect__input::placeholder {
+  color: var(--color-text) !important;
 }
 
 .multiselect__tags {
@@ -167,6 +164,10 @@ input[type="radio"] {
   overflow-y: auto !important;
 }
 
+.multiselect__tag-icon::after {
+  color: var(--color-text) !important;
+}
+
 .multiselect__single {
   font-family: monospace !important;
   background: var(--color-background-soft) !important;
@@ -176,40 +177,34 @@ input[type="radio"] {
 
 .multiselect__content {
   font-family: monospace;
-
-  &-wrapper {
-    background: var(--color-background);
-    border: 0;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-    box-shadow: 0 -1rem 2rem rgba(0, 0, 0, .1);
-  }
+  font-size: 0.8rem;
 }
 
-.multiselect__element {
-  &:not(:first-child) {
-    border-top: 1px solid rgba(0, 0, 0, .2);
-  }
+.multiselect__content-wrapper {
+  background: var(--color-background) !important;
+  color: var(--color-text) !important;
+  border: 1px solid var(--color-border);
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  box-shadow: 0 -1rem 2rem rgba(0, 0, 0, .1);
 }
 
-.multiselect__option {
-  &--highlight {
-    background: rgba(255, 255, 255, .2);
-
-    &:after {
-      background: rgba(0, 0, 0, .2);
-    }
-  }
+.multiselect__element:not(:first-child) {
+  border-top: 1px solid var(--color-border);
+}
 
-  &--selected {
-    background: var(--color-primary);
-    color: white;
+.multiselect__option--highlight, .multiselect__option--highlight:after {
+  background: var(--color-hover) !important;
+}
 
-    &:after {
-      color: rgba(0, 0, 0, .5);
-    }
+.multiselect__option--selected, .multiselect__option--selected:after {
+  background: var(--color-primary-dark) !important;
+  color: var(--color-text) !important;
+}
 
-  }
+.multiselect__tag {
+  font-family: monospace;
+  background: var(--color-primary-dark) !important;
 }
 
 .control-group {
diff --git a/components/base/Button.vue b/components/base/Button.vue
index efd91c2..c7f7c50 100644
--- a/components/base/Button.vue
+++ b/components/base/Button.vue
@@ -2,7 +2,7 @@
 const props = defineProps({
   type: {
     type: String,
-    required: false,    
+    required: false,
     default: 'text',
   },
   label: String,
@@ -20,7 +20,7 @@ const onClick = (event: MouseEvent) => {
 </script>
 
 <template>
-  <a id="button" :class="{text: type === 'text', solid: type === 'solid', disabled: disabled}" @click.stop="onClick">
+  <a id="button" :class="{ text: type === 'text', solid: type === 'solid', disabled: disabled }" @click.stop="onClick">
     <font-awesome-icon :icon="icon" />
     {{ label }}
   </a>
@@ -33,23 +33,23 @@ const onClick = (event: MouseEvent) => {
   gap: 0.25rem;
   user-select: none;
 }
-    
+
 .text {
   background-color: transparent;
   color: var(--color-text-primary);
   transition: color 0.3s;
   font-weight: 700;
   cursor: pointer;
-  
+
   &.disabled {
     color: var(--color-text-mute);
     cursor: not-allowed;
   }
-  
+
   &:hover {
     color: var(--color-primary-dark);
   }
-  
+
   &.disabled:hover {
     color: var(--color-text-mute);
   }
@@ -58,25 +58,24 @@ const onClick = (event: MouseEvent) => {
 .solid {
   background-color: var(--color-primary);
   transition: background-color 0.3s;
-  color: var(--color-text);
+  color: var(--color-text-on-primary);
   padding: 0.25rem 0.5rem;
   border-radius: 4px;
   font-weight: 700;
   cursor: pointer;
-  
+
   &.disabled {
     background-color: var(--color-border);
     color: var(--color-text-mute);
     cursor: not-allowed;
   }
-  
+
   &:hover {
     background-color: var(--color-primary-dark);
   }
-  
+
   &.disabled:hover {
     background-color: var(--color-border);
   }
 }
-
 </style>
\ No newline at end of file
diff --git a/components/editor/quest/OptionsPanel.vue b/components/editor/quest/OptionsPanel.vue
index de32abb..5aaff23 100644
--- a/components/editor/quest/OptionsPanel.vue
+++ b/components/editor/quest/OptionsPanel.vue
@@ -112,8 +112,6 @@ const knownQuests = computed(() => {
   </EditorOptionsPanel>
 </template>
 
-<style src="vue-multiselect/dist/vue-multiselect.css" />
-
 <style>
 #options {
   display: flex;
diff --git a/components/editor/task/Configuration.vue b/components/editor/task/Configuration.vue
index 0355383..a209b58 100644
--- a/components/editor/task/Configuration.vue
+++ b/components/editor/task/Configuration.vue
@@ -82,7 +82,7 @@ const deleteTaskType = (taskId: string) => {
           {{ props.taskId }}
         </span>
         <code>
-          ({{ taskType }})
+          (<font-awesome-icon v-if="taskDefintion" id="task-icon" :icon="[taskDefintion.icon.style, taskDefintion.icon.name]" />{{ taskType }})
         </code>
       </p>
       <div id="task-controls" class="control-group">
@@ -155,6 +155,10 @@ const deleteTaskType = (taskId: string) => {
         font-weight: 700;
       }
 
+      #task-icon {
+        padding-right: 0.3rem;
+      }
+
       code {
         font-size: 0.8em;
         color: var(--color-text-mute);
@@ -169,13 +173,12 @@ const deleteTaskType = (taskId: string) => {
   border-top: 1px solid var(--color-border);
 }
 
-.multiselect::v-deep .multiselect__tags {
-  border: none !important;
+:deep(.multiselect) .multiselect__tags {
+  border: unset !important;
   border-radius: 0px !important;
-  background: transparent !important;
 }
 
-.multiselect::v-deep .multiselect__select {
-  background: transparent !important;
+:deep(.multiselect) .multiselect__select {
+  background: unset !important;
 }
 </style>
diff --git a/components/editor/task/ConfigurationRow.vue b/components/editor/task/ConfigurationRow.vue
index 8194dcd..98a644c 100644
--- a/components/editor/task/ConfigurationRow.vue
+++ b/components/editor/task/ConfigurationRow.vue
@@ -182,12 +182,12 @@ input {
   color: var(--color-false);
 }
 
-.multiselect::v-deep .multiselect__tags {
+:deep(.multiselect) .multiselect__tags {
   border: unset !important;
   border-radius: 0px !important;
 }
 
-.multiselect::v-deep .multiselect__select {
+:deep(.multiselect) .multiselect__select {
   background: unset !important;
 }
 </style>
\ No newline at end of file
diff --git a/data/taskDefinitions.json b/data/taskDefinitions.json
index 443493c..92b728f 100644
--- a/data/taskDefinitions.json
+++ b/data/taskDefinitions.json
@@ -2,6 +2,10 @@
   "taskTypes": {
     "blockbreak": {
       "description": "Break a set amount of blocks.",
+      "icon": {
+        "style": "fas",
+        "name": "trowel"
+      },
       "configuration": {
         "amount": {
           "type": "number",
@@ -61,6 +65,10 @@
     },
     "blockplace": {
       "description": "Place a set amount of blocks.",
+      "icon": {
+        "style": "fas",
+        "name": "building-columns"
+      },
       "configuration": {
         "amount": {
           "type": "number",
@@ -92,6 +100,10 @@
     },
     "inventory": {
       "description": "Obtain a set amount of items.",
+      "icon": {
+        "style": "fas",
+        "name": "boxes-stacked"
+      },
       "configuration": {
         "amount": {
           "type": "number",
diff --git a/layouts/default.vue b/layouts/default.vue
index c991ce9..80bf29e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import SiteHeader from '@/components/Header/SiteHeader.vue';
 </script>
 
 <template>
diff --git a/stores/session.ts b/stores/session.ts
index 1938b63..acd2c66 100644
--- a/stores/session.ts
+++ b/stores/session.ts
@@ -14,7 +14,7 @@ export interface EditorQuest {
   rewards: string[];
   startCommands?: string[];
   startString?: string[];
-  rewardString?: string[]; 
+  rewardString?: string[];
   placeholders?: { [key: string]: string };
   options: {
     category: string;
@@ -60,6 +60,10 @@ export interface EditorCategory {
 
 export interface TaskDefinition {
   description: string;
+  icon: {
+    style: string;
+    name: string;
+  }
   configuration: {
     [key: string]: {
       type: string | string[];
@@ -141,7 +145,7 @@ export const useSessionStore = defineStore('session', {
     changeQuestId(oldId: string, newId: string) {
       const quest = this.getQuestById(oldId);
       if (!quest) return;
-      
+
       quest.id = newId
     },
     deleteQuest(id: string) {