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

@@ -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>
+    <h1 class="inline text-text font-xl p-2 m-1">Hint</h1>
-    <div v-if="current !== -1">
+    <div v-if="current !== -1" class="w-full flex justify-end">
       <button
         class="p-2 m-1 w-1/8"
         id="Lbutton"

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">
+            <p v-if="task.completed" class="text-text-primary">
-              <input
+              <span class="">✓</span>
-                type="checkbox"
+              {{ task.name }}
-                class="form-checkbox"
+            </p>
-                disabled
+            <p v-else class="text-text">
-                :checked="task.completed"
+              <span class="">➤</span>
-              />{{ task.name }}
+              {{ task.name }}
             </p>
           </li>
         </ul>