Extract card and use for budget list

web/src/dialogs/NewBudget.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+import Card from '../components/Card.vue';
 import { defineComponent } from "vue";
 import { NEW_BUDGET } from "../store/action-types";
 
@@ -9,6 +10,7 @@ export default defineComponent({
       budgetName: ""
     }
   },
+  components: { Card },
   methods: {
     saveBudget() {
       this.$store.dispatch(NEW_BUDGET, this.$data.budgetName);
@@ -22,7 +24,10 @@ export default defineComponent({
 </script>
 
 <template>
-  <button color="primary" dark @click="newBudget">New Budget</button>
+  <Card>
+    <p class="w-24 text-center text-6xl">+</p>
+    <button class="text-lg" dark @click="newBudget">New Budget</button>
+  </Card>
   <div v-if="dialog" justify="center">
     <div>
       <div>
@@ -32,8 +37,8 @@ export default defineComponent({
         <input type="text" v-model="budgetName" label="Budget name" required />
       </div>
       <div>
-        <button color="blue darken-1" text @click="dialog = false">Close</button>
-        <button color="blue darken-1" text @click="saveBudget">Save</button>
+        <button @click="dialog = false">Close</button>
+        <button @click="saveBudget">Save</button>
       </div>
     </div>
   </div>