Update themes

frontend/pages/account.vue

@@ -1,19 +1,16 @@
 <template>
     <v-col cols="12" sm="8" md="6">
-        <v-card color="primary" class="white--text">
+        <v-card color="secondary">
             <v-btn icon to="/" aria-label="Go back">
                 <v-icon color="white">{{ mdiArrowLeft }}</v-icon>
             </v-btn>
             <v-card-title class="text-center justify-center py-6">
-                <h1
-                    :class="{ 'white--text': !$vuetify.theme.dark }"
-                    class="font-weight-bold display-2"
-                >
+                <h1 class="font-weight-bold display-2 white--text">
                     Account
                 </h1>
             </v-card-title>
 
-            <v-tabs v-model="tab" grow>
+            <v-tabs v-model="tab" grow color="accent">
                 <v-tab v-for="tab in tabs" :key="tab">
                     {{ tab }}
                 </v-tab>

frontend/pages/notes.vue

@@ -7,6 +7,11 @@
             loading-text="Loading notes..."
             class="elevation-1"
             disable-sort
+            :footer-props="{
+                showFirstLastPage: false,
+                prevIcon: mdiChevronLeft,
+                nextIcon: mdiChevronRight,
+            }"
         >
             <template v-slot:top>
                 <v-toolbar flat color="secondary">
@@ -53,7 +58,7 @@
                     class="mr-2"
                     @click="editItem(item)"
                 >
-                    {{ mdiPencil }}}
+                    {{ mdiPencil }}
                 </v-icon>
                 <v-icon
                     aria-label="Delete Note"
@@ -66,7 +71,7 @@
                 </v-icon>
             </template>
             <template v-slot:no-data>
-                <v-btn color="primary" @click="initialize">Reset</v-btn>
+                <span>No notes yet</span>
             </template>
         </v-data-table>
     </v-col>
@@ -74,17 +79,27 @@
 
 <script>
 import { format } from 'timeago.js'
-import { mdiEye, mdiPencil, mdiDelete } from '@mdi/js'
+import {
+    mdiEye,
+    mdiPencil,
+    mdiDelete,
+    mdiChevronLeft,
+    mdiChevronRight,
+} from '@mdi/js'
 
 export default {
     name: 'Notes',
-    title: 'Notes',
+    async asyncData(context) {
+        const notes = await context.$axios.$get('/notes')
+        return { notes, loading: false }
+    },
     data: () => ({
         mdiEye,
         mdiPencil,
         mdiDelete,
+        mdiChevronLeft,
+        mdiChevronRight,
         loading: true,
-        notes: [],
         headers: [
             { text: 'Title', align: 'start', value: 'title' },
             { text: 'Last updated', value: 'updatedAt', align: 'end' },
@@ -92,18 +107,12 @@ export default {
             { text: 'Actions', value: 'actions' },
         ],
     }),
-    mounted() {
-        this.loadNotes()
-    },
     methods: {
         async loadNotes() {
-            await this.$axios
-                .get('/notes')
-                .then((e) => {
-                    this.notes = e.data
-                    this.loading = false
-                })
-                .catch((_) => {})
+            await this.$axios.$get('/notes').then((notes) => {
+                this.notes = notes
+                this.loading = false
+            })
         },
         editItem(item) {},
         async deleteItem(item) {
@@ -116,6 +125,9 @@ export default {
         },
         format,
     },
+    head: () => ({
+        title: 'My notes',
+    }),
 }
 </script>