Test card layout

frontend/components/Note.vue

@@ -1,40 +1,22 @@
 <template>
-    <v-card
-        class="d-flex flex-column"
-        :class="{ hover: hover }"
-        d
-        height="100%"
-        :color="hover ? 'blue lighten-4' : ''"
-        :elevation="hover ? 12 : 2"
-    >
-        <div class="mb-auto">
-            <v-list-item three-line>
-                <v-list-item-content>
-                    <div class="overline mb-4">
-                        Last updated {{ updatedAt }}
-                    </div>
-                    <v-list-item-title class="headline mb-1">
-                        <h2 class="title primary--text">{{ title }}</h2>
-                    </v-list-item-title>
-                </v-list-item-content>
-            </v-list-item>
-            <v-card-actions>
-                <div class="tags">
-                    <v-chip
-                        v-for="tag in tags"
-                        :key="tag"
-                        active
-                        color="secondary"
-                    >
-                        {{ tag }}
-                    </v-chip>
-                </div>
-            </v-card-actions>
-        </div>
+    <v-card class="d-flex flex-column" height="100%">
+        <v-card-title>
+            <h2 class="title primary--text">{{ title }}</h2>
+        </v-card-title>
+        <v-card-text> Last updated {{ prettyDate }} </v-card-text>
+        <v-card-actions>
+            <div class="tags">
+                <v-chip v-for="tag in tags" :key="tag" active color="secondary">
+                    {{ tag }}
+                </v-chip>
+            </div>
+        </v-card-actions>
     </v-card>
 </template>
 
 <script>
+import { format } from 'timeago.js'
+
 export default {
     name: 'Note',
     props: {
@@ -46,15 +28,16 @@ export default {
             type: Array,
             default: () => [],
         },
-        hover: {
-            type: Boolean,
-            default: false,
-        },
         updatedAt: {
             type: String,
             default: null,
         },
     },
+    computed: {
+        prettyDate() {
+            return format(this.updatedAt)
+        },
+    },
 }
 </script>