11.5 Adjustable Header Color

src/components/Shared/ListHeader.vue

@@ -2,14 +2,18 @@
     <q-banner
     dense
     inline-actions
-    class="list-header text-white bg-orange-4 text-center">
+    class="list-header text-white"
+    :class="bgColor">
     <span class="text-bold text-subtitle1"><slot /></span>
 </q-banner>
 </template>
 
 <script>
 export default {
-  name: 'ListHeader'
+  name: 'ListHeader',
+  props: [
+    'bgColor'
+  ]
 }
 </script>
 

src/components/Tasks/TasksCompleted.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <list-header>Completed</list-header>
+  <div class="q-mt-lg">
+    <list-header bgColor="bg-green-4">Completed</list-header>
     <q-list
       v-if="Object.keys(tasksCompleted).length"
       separator

src/components/Tasks/TasksTodo.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <list-header>Todo</list-header>
+    <list-header bgColor="bg-orange-4">Todo</list-header>
     <q-list
       v-if="Object.keys(tasksTodo).length"
       separator

src/pages/PageTodo.vue

@@ -4,8 +4,6 @@
     <tasks-todo
       :tasksTodo="tasksTodo" />
 
-    <hr>
-
     <tasks-completed
       :tasksCompleted="tasksCompleted" />