some styling

Author: stlbucket

assets/css/main.scss

@@ -1,4 +1,5 @@
 .buttons {
   display: flex;
   gap: 1rem;
-}
+}
+

components/TodoList.vue

@@ -1,6 +1,6 @@
 <template>
   <UCard class="todo-list-card">
-    <template #header>{{ status }}</template>
+    <template #header><span class="text-black text-3xl">{{ status }}</span></template>
     <div class="buttons">
       <UButton
         :disabled="selectedTodos.length === 0"
@@ -26,10 +26,17 @@
       show-header
       :rows="todos"
       v-model="selectedTodos"
-      :columns="[{key:'created_at',label:'Created'},{key:'name',label:'Name'}]"
+      :columns="[{key:'created_at',label:'Created'},{key:'updated_at',label:'Updated'},{key:'name',label:'Name'}]"
+      class="todo-list-table"
     >
-      <template #created_at-data="{ row }">
-        {{ useFormatDateTimeString(row.created_at) }}
+    <template #created_at-data="{ row }">
+        <span class="text-black text-sm">{{ useFormatDateTimeString(row.created_at) }}</span>
+      </template>
+      <template #updated_at-data="{ row }">
+        <span class="text-black text-sm">{{ useFormatDateTimeString(row.updated_at) }}</span>
+      </template>
+      <template #name-data="{ row }">
+        <span class="text-black text-xl">{{ row.name }}</span>
       </template>
     </UTable>
   </UCard>

components/TodoListManager.vue

@@ -10,24 +10,31 @@
       </div>
     </template>
     <div class="todo-lists">
-      <TodoList
-        status="incomplete"
-        :todos="incompleteTodos"
-        @updateTodos="updateTodos"
-        @deleteTodos="deleteTodos"
-      />
-      <TodoList
-        status="complete"
-        :todos="completeTodos"
-        @updateTodos="updateTodos"
-        @deleteTodos="deleteTodos"
-      />
-      <TodoList
-        status="archived"
-        :todos="archivedTodos"
-        @updateTodos="updateTodos"
-        @deleteTodos="deleteTodos"
-      />
+      <div class="todo-lists-current">
+        <TodoList
+          status="incomplete"
+          :todos="incompleteTodos"
+          @updateTodos="updateTodos"
+          @deleteTodos="deleteTodos"
+          class="incomplete"
+        />
+        <TodoList
+          status="complete"
+          :todos="completeTodos"
+          @updateTodos="updateTodos"
+          @deleteTodos="deleteTodos"
+          class="complete"
+        />
+      </div>
+      <div class="todo-list-archived">
+        <TodoList
+          status="archived"
+          :todos="archivedTodos"
+          @updateTodos="updateTodos"
+          @deleteTodos="deleteTodos"
+          class="archived"
+        />
+      </div>
     </div>
   </UCard>
   <UModal v-model="showModal">
@@ -59,9 +66,27 @@
   justify-content: space-between;
 }
 .todo-lists {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.todo-lists-current {
   display: flex;
   justify-content: space-evenly;
 }
+.todo-lists-archive {
+  display: flex;
+  justify-content: space-evenly;
+}
+.incomplete {
+  background-color: #AECFDF;
+}
+.complete {
+  background-color: #9F9FAD;
+}
+.archived {
+  background-color: #93748A;
+}
 </style>
 
 <script lang="ts" setup>