Layout with toolbar

frontend/src/components/Header.vue

@@ -1,12 +1,12 @@
 <template>
-  <v-flex mb-4>
+  <v-toolbar app>
-    <h1 class="display-2 font-weight-bold mb-3">
+    <v-toolbar-title class="headline text-uppercase">
-      Hello World!
+      <span>Yavook</span>
-    </h1>
+      <span class="font-weight-light">!FFTCG</span>
-    <p class="subheading font-weight-regular">
+    </v-toolbar-title>
-      App under development, please don't submit any valuable data!
+    <v-spacer></v-spacer>
-    </p>
+    <slot />
-  </v-flex>
+  </v-toolbar>
 </template>
 
 <script>

frontend/src/components/forms/FormDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <v-dialog v-model="dialog">
-    <v-btn slot="activator">
+    <v-btn flat slot="activator">
       {{ buttonText }}
     </v-btn>
 

frontend/src/views/Home.vue

@@ -1,10 +1,16 @@
 <template>
-  <v-container>
+  <v-content>
-    <Header />
+    <v-container>
+      <Header>
+        <LoginForm />
+        <RegisterForm />
+      </Header>
 
-    <LoginForm />
+      <p class="subheading font-weight-regular">
-    <RegisterForm />
+        App under development, please don't submit any valuable data!
-  </v-container>
+      </p>
+    </v-container>
+  </v-content>
 </template>
 
 <script>

frontend/src/views/UserCP.vue

@@ -1,15 +1,17 @@
 <template>
-  <v-container>
+  <v-content>
-    <Header />
+    <v-container>
+      <Header>
+        <v-btn flat @click.native="logout">Logout</v-btn>
+      </Header>
 
-    <template v-if="user">
+      <template v-if="user">
-      <p>user logged in: {{ user.login }}</p>
+        <p>user logged in: {{ user.login }}</p>
 
-      <DeckList />
+        <DeckList />
-
+      </template>
-      <v-btn @click.native="logout">Logout</v-btn>
+    </v-container>
-    </template>
+  </v-content>
-  </v-container>
 </template>
 
 <script>
@@ -27,6 +29,8 @@ export default {
     DeckList
   },
 
+  data: () => ({}),
+
   methods: {
     goHome() {
       Cookies.remove('session')