From f93b4d757b1db30f461fdbc7da4b19a89e087543 Mon Sep 17 00:00:00 2001
From: "CHEN, TAI-LIN" <88068175+NeilChen0812@users.noreply.github.com>
Date: Fri, 3 Nov 2023 16:15:06 +0800
Subject: [PATCH] fix: ui revise (#56)

* fix: ui revise

* fix: change to v-else

---------

Co-authored-by: Lin, Hung-Shin <wancat@wancat.cc>
---
 app/src/components/HintPart.vue  |  8 ++++----
 app/src/components/QuestPart.vue | 14 +++++++-------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/src/components/HintPart.vue b/app/src/components/HintPart.vue
index 0cdad51..3656d00 100644
--- a/app/src/components/HintPart.vue
+++ b/app/src/components/HintPart.vue
@@ -21,13 +21,13 @@ const right = () => {
 </script>
 
 <template>
-  <div class="flex flex-wrap">
+  <div class="w-full flex items-center p-2">
     <font-awesome-icon
       :icon="['far', 'lightbulb']"
-      class="text-yellow-200 p-2"
+      class="text-yellow-200 p-2 content-center"
     />
-    <h1 class="inline text-text font-xl w-7/12 p-2 m-1">Hint</h1>
-    <div v-if="current !== -1">
+    <h1 class="inline text-text font-xl p-2 m-1">Hint</h1>
+    <div v-if="current !== -1" class="w-full flex justify-end">
       <button
         class="p-2 m-1 w-1/8"
         id="Lbutton"
diff --git a/app/src/components/QuestPart.vue b/app/src/components/QuestPart.vue
index d65609c..bbed861 100644
--- a/app/src/components/QuestPart.vue
+++ b/app/src/components/QuestPart.vue
@@ -32,13 +32,13 @@ onMounted(async () => {
         <p class="text-text">Tasks:</p>
         <ul v-if="sessionManager.session.value">
           <li v-for="task in sessionManager.session.value.tasks" :key="task.id">
-            <p class="text-text">
-              <input
-                type="checkbox"
-                class="form-checkbox"
-                disabled
-                :checked="task.completed"
-              />{{ task.name }}
+            <p v-if="task.completed" class="text-text-primary">
+              <span class="">✓</span>
+              {{ task.name }}
+            </p>
+            <p v-else class="text-text">
+              <span class="">➤</span>
+              {{ task.name }}
             </p>
           </li>
         </ul>