Add layout and style to change keeper view

Author: g3force

src/components/SelectNumber.vue

@@ -13,6 +13,7 @@ defineEmits([
 
 <template>
   <button v-for="(_, number) in Array(count)"
+          class="button blue"
           :disabled="number===currentNumber"
           @click="$emit('update:number', number)"
   >

src/views/ChangeKeeper.vue

@@ -17,18 +17,34 @@ const changeKeeperId = (id: number) => {
 </script>
 
 <template>
-  <div>
+  <div class="num-pad">
     <SelectNumber
       :current-number="keeperId"
       :count="16"
       @update:number="changeKeeperId"
     />
-  </div>
-  <div>
-    <button @click="router.push('/')">Cancel</button>
+    <button
+      id="button-cancel"
+      class="button red"
+      @click="router.push('/')"
+    >
+      Cancel
+    </button>
   </div>
 </template>
 
 <style scoped>
+.num-pad {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+  gap: 1em 1em;
+  padding: 1em;
+  height: 100%;
+  box-sizing: border-box;
+}
 
+#button-cancel {
+  grid-column: 2 / 4;
+}
 </style>