From b0ab01ef6b715cafb12ecb2aa844a29c59c8a027 Mon Sep 17 00:00:00 2001
From: Leonardo Bishop <me@leonardobishop.com>
Date: Mon, 11 Mar 2024 22:54:22 +0000
Subject: Update styles, add task type icons

---
 components/base/Button.vue                  | 21 ++++++++++-----------
 components/editor/quest/OptionsPanel.vue    |  2 --
 components/editor/task/Configuration.vue    | 15 +++++++++------
 components/editor/task/ConfigurationRow.vue |  4 ++--
 4 files changed, 21 insertions(+), 21 deletions(-)

(limited to 'components')

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
-- 
cgit v1.2.3-70-g09d2