From 8ad7c273dc7821e220165046675f50eb73c7637a Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Sun, 15 Sep 2019 12:14:16 +0200
Subject: [PATCH] Fix headers and spacing

---
 src/components/DeckBuilder/CardPicker.vue |  5 +++--
 src/views/DeckBuilder.vue                 |  1 +
 src/views/Draft.vue                       | 23 ++++++++++++++++++++---
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/DeckBuilder/CardPicker.vue b/src/components/DeckBuilder/CardPicker.vue
index 427494d..90b7fc5 100644
--- a/src/components/DeckBuilder/CardPicker.vue
+++ b/src/components/DeckBuilder/CardPicker.vue
@@ -18,8 +18,7 @@ $padding: 10px;
   max-height: 100%;
   display: grid;
   gap: $padding;
-  padding: ($padding * 4) $padding;
-  row-gap: $padding * 4;
+  padding: $padding;
   place-items: stretch;
 }
 
@@ -27,9 +26,11 @@ $padding: 10px;
   display: flex;
   align-items: center;
   transition: 100ms all;
+  cursor: pointer;
   img {
     max-width: 100%;
     max-height: 100%;
+    transition: box-shadow 60ms;
   }
   &.available:hover img {
     box-shadow: 0 0 15px 5px rgba(200, 210, 255, 0.5);
diff --git a/src/views/DeckBuilder.vue b/src/views/DeckBuilder.vue
index ef2b9d3..51df709 100644
--- a/src/views/DeckBuilder.vue
+++ b/src/views/DeckBuilder.vue
@@ -103,6 +103,7 @@
 .cards {
   display: grid;
   grid-template-columns: 5% 1fr 5%;
+  column-gap: 10px;
 }
 
 .decklist {
diff --git a/src/views/Draft.vue b/src/views/Draft.vue
index b0efb73..9f38860 100644
--- a/src/views/Draft.vue
+++ b/src/views/Draft.vue
@@ -1,9 +1,14 @@
 <template>
   <section class="draftview">
     <section class="playerlist">
-      <b>Players</b>
+      <header>
+        <h2>Players</h2>
+      </header>
     </section>
     <section class="pool">
+      <header>
+        <h2>Available picks</h2>
+      </header>
       <CardPicker
         @picked="cardPicked"
         :columns="columns"
@@ -13,7 +18,9 @@
       />
     </section>
     <section class="cardlist">
-      <b>Cards</b>
+      <header>
+        <h2>Cards</h2>
+      </header>
     </section>
   </section>
 </template>
@@ -31,11 +38,21 @@
     padding: 10px 20px;
     grid-row: 1;
   }
+
+  header > h2 {
+    font-family: $fantasy;
+    font-weight: 600;
+    text-align: center;
+    font-size: 2.5vh;
+    padding: 1vh;
+  }
 }
 
 .pool {
+  display: flex;
+  flex-direction: column;
   .picker {
-    height: 100%;
+    flex: 1;
   }
 }