layout fixes DeckList and subcomponents

frontend/src/components/Deck.vue

@@ -2,7 +2,7 @@
   <v-expansion-panel-content>
     <template v-slot:header>
       <v-layout align-center row>
-        <v-flex text-xs-center xs2>
+        <v-flex text-xs-center xs4 sm3 md2>
           <Crystal
             v-for="element in deck.elements()"
             :key="element.name"
@@ -10,7 +10,11 @@
           />
         </v-flex>
         <v-flex class="subheading">
-          {{ deck.name }}
+          <v-card flat>
+            <v-card-text>
+              {{ deck.name }}
+            </v-card-text>
+          </v-card>
         </v-flex>
       </v-layout>
     </template>
@@ -54,8 +58,8 @@
               </v-card-title>
 
               <v-card-text>
-                Are you sure you want to delete this deck? This cannot be
-                undone.
+                Are you sure you want to delete your deck "{{ deck.name }}"?
+                This cannot be undone.
               </v-card-text>
 
               <v-card-actions>

frontend/src/components/DeckList.vue

@@ -1,17 +1,18 @@
 <template>
   <v-expansion-panel v-model="open">
-    <Deck
-      v-for="deck in linked"
-      :deck="deck"
-      :key="deck.id"
-      @change="refresh_decks"
-    />
     <NewDeck
       @change="
         open = null
         refresh_decks()
       "
     />
+
+    <Deck
+      v-for="deck in linked"
+      :deck="deck"
+      :key="deck.id"
+      @change="refresh_decks"
+    />
   </v-expansion-panel>
 </template>
 

frontend/src/components/NewDeck.vue

@@ -1,14 +1,24 @@
 <template>
   <v-expansion-panel-content>
     <template v-slot:header>
-      <span class="subheading">New Deck</span>
+      <v-layout align-center row>
+        <v-flex text-xs-center xs4 sm3 md2>
+          <v-icon>view_carousel</v-icon>
+          <v-icon>add</v-icon>
+        </v-flex>
+        <v-flex class="subheading">
+          <v-card flat>
+            <v-card-text>
+              New Deck
+            </v-card-text>
+          </v-card>
+        </v-flex>
+      </v-layout>
     </template>
 
-    <v-container>
-      <v-card flat>
-        <DeckEditor ref="editor" @save="save_deck" />
-      </v-card>
-    </v-container>
+    <v-card flat>
+      <DeckEditor ref="editor" @save="save_deck" />
+    </v-card>
   </v-expansion-panel-content>
 </template>