fix: ui revise

app/src/components/CommandlistPart.vue

@@ -1,5 +1,3 @@
-<script setup></script>
-
 <template>
   <font-awesome-icon :icon="['fas', 'list']" class="text-text-primary p-1" />
   <h1 class="inline text-text-primary font-xl">Command Cheatsheets</h1>

app/src/components/ControlPalette.vue

@@ -1,6 +1,15 @@
+<script setup>
+import { createSession } from '../store/session'
+
+const reset = async () => {
+  console.log('resetting...')
+  await createSession()
+}
+</script>
+
 <template>
   <section class="h-[10%] p-3 grid grid-cols-3 gap-4 place-content-between">
-    <button id="solution" class="bg-bg-disabled rounded-lg p-2">
+    <button disabled id="solution" class="bg-bg-disabled rounded-lg p-2">
       <font-awesome-icon
         :icon="['far', 'circle-question']"
         class="text-text-disabled"
@@ -14,7 +23,7 @@
       />
       <p class="text-text-primary inline ml-1">Reset</p>
     </button>
-    <button id="continue" class="bg-bg-disabled rounded-lg p-2">
+    <button disabled id="continue" class="bg-bg-disabled rounded-lg p-2">
       <font-awesome-icon
         :icon="['far', 'circle-right']"
         class="text-text-disabled"
@@ -23,12 +32,3 @@
     </button>
   </section>
 </template>
-
-<script setup>
-import { createSession } from '../store/session'
-
-const reset = async () => {
-  console.log('resetting...')
-  await createSession()
-}
-</script>

app/src/components/DynamicBackground.vue

@@ -1,9 +1,3 @@
-<template>
-  <div id="box">
-    <canvas ref="canvas"></canvas>
-  </div>
-</template>
-
 <script setup>
 import { ref, onMounted } from 'vue'
 
@@ -79,6 +73,12 @@ onMounted(() => {
 })
 </script>
 
+<template>
+  <div id="box">
+    <canvas ref="canvas"></canvas>
+  </div>
+</template>
+
 <style scoped>
 #box {
   position: relative;

app/src/components/FileNode.vue

@@ -1,12 +1,3 @@
-<template>
-  <a href="#" :class="nodeClass()">{{ node.discovered ? node.name : '???' }}</a>
-  <ul :class="nodeClass()" v-if="node.children && node.children.length > 0">
-    <li :class="nodeClass()" v-for="child in node.children" :key="child.path">
-      <FileNode :node="child" :pwd="pwd" />
-    </li>
-  </ul>
-</template>
-
 <script setup>
 const props = defineProps({
   node: {
@@ -27,3 +18,12 @@ function nodeClass() {
   return classes
 }
 </script>
+
+<template>
+  <a href="#" :class="nodeClass()">{{ node.discovered ? node.name : '???' }}</a>
+  <ul :class="nodeClass()" v-if="node.children && node.children.length > 0">
+    <li :class="nodeClass()" v-for="child in node.children" :key="child.path">
+      <FileNode :node="child" :pwd="pwd" />
+    </li>
+  </ul>
+</template>

app/src/components/GameHeaderPart.vue

@@ -34,7 +34,7 @@ const handleLogout = async () => {
         <button id="backward" class="flex items-center h-5 w-5">
           <font-awesome-icon
             :icon="['fas', 'arrow-left']"
-            class="text-text-tertiary h-full w-full"
+            class="text-border h-full w-full"
           />
         </button> -->
         <p

app/src/components/QuestPart.vue

@@ -4,14 +4,14 @@ import sessionStore from '../store/session'
 
 <template>
   <div class="h-full w-full max-h-full">
-    <h1 id="topic" class="text-text" v-if="sessionStore.quest">
+    <p id="topic" class="text-text font-black" v-if="sessionStore.quest">
       {{ sessionStore.quest.title }}
-    </h1>
-    <hr class="border-text-tertiary border-2 my-2" />
+    </p>
+    <br />
     <div>
       <div v-if="sessionStore.quest" class="whitespace-pre-wrap">
         <p class="text-text">{{ sessionStore.quest.instruction }}</p>
-        <br />
+        <hr class="border-border border-2 my-2" />
         <p class="text-text">Tasks:</p>
         <ul v-if="sessionStore.session">
           <li v-for="task in sessionStore.session.tasks" :key="task.id">

app/src/components/TerminalPart.vue

@@ -1,13 +1,3 @@
-<template>
-  <font-awesome-icon :icon="['fas', 'terminal']" class="text-text p-1" />
-  <button class="text-text h-[5%]">Terminal</button>
-  <div
-    id="terminal"
-    ref="terminal"
-    class="bg-bg-secondary h-[calc(100%-5%)] p-0.5"
-  ></div>
-</template>
-
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useTerminal } from '../store/session'
@@ -20,3 +10,11 @@ onMounted(() => {
   window.addEventListener('resize', () => term.resizeScreen())
 })
 </script>
+
+<template>
+  <div class="h-[10%] w-full max-h-full">
+    <font-awesome-icon :icon="['fas', 'terminal']" class="text-text p-1" />
+    <button class="text-text h-full">Terminal</button>
+  </div>
+  <div id="terminal" ref="terminal" class="h-[90%] p-2"></div>
+</template>