From 3f7f64612003ca5cfdc5bdd2812af9c79e8eb02d Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Fri, 4 Feb 2022 17:16:03 +0000
Subject: [PATCH] Extract card and use for budget list

---
 web/src/dialogs/NewBudget.vue | 11 ++++++++---
 web/src/pages/Dashboard.vue   | 19 +++++++++++--------
 web/src/pages/Settings.vue    |  7 +++----
 3 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/web/src/dialogs/NewBudget.vue b/web/src/dialogs/NewBudget.vue
index 5556f28..a37c5ed 100644
--- a/web/src/dialogs/NewBudget.vue
+++ b/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>
diff --git a/web/src/pages/Dashboard.vue b/web/src/pages/Dashboard.vue
index 96fb263..a810eb6 100644
--- a/web/src/pages/Dashboard.vue
+++ b/web/src/pages/Dashboard.vue
@@ -1,21 +1,24 @@
 <script lang="ts">
 import NewBudget from '../dialogs/NewBudget.vue';
+import Card from '../components/Card.vue';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
     props: ["budgetid"],
-    components: { NewBudget }
+    components: { NewBudget, Card }
 })
 </script>
 
 <template>
     <h1>Budgets</h1>
-    <div>
-        <div v-for="budget in $store.getters.Budgets" class="budget-item">
-            <div class="text-h5 grey lighten-2">
-                <router-link v-bind:to="'/budget/'+budget.ID">{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</router-link>
-            </div>
-        </div>
+    <div class="flex">
+        <Card v-for="budget in $store.getters.Budgets">
+            <router-link v-bind:to="'/budget/'+budget.ID" class="contents">
+            <!--<svg class="w-24"></svg>-->
+                <p class="w-24 text-center text-6xl"></p>
+                <span class="text-lg">{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</span>
+            </router-link>
+        </Card>
         <NewBudget />
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/web/src/pages/Settings.vue b/web/src/pages/Settings.vue
index 0ca0fce..bd5d478 100644
--- a/web/src/pages/Settings.vue
+++ b/web/src/pages/Settings.vue
@@ -69,7 +69,7 @@ export default defineComponent({
                         </v-card-header-text>
                     </v-card-header>
                     <v-card-actions class="justify-center">
-                        <v-btn @click="clearBudget" color="error">Clear budget</v-btn>
+                        <v-btn @click="clearBudget">Clear budget</v-btn>
                     </v-card-actions>
                 </v-card>
             </v-col>
@@ -82,7 +82,7 @@ export default defineComponent({
                         </v-card-header-text>
                     </v-card-header>
                     <v-card-actions class="justify-center">
-                        <v-btn @click="deleteBudget" color="error">Delete budget</v-btn>
+                        <v-btn @click="deleteBudget">Delete budget</v-btn>
                     </v-card-actions>
                 </v-card>
             </v-col>
@@ -95,7 +95,7 @@ export default defineComponent({
                         </v-card-header-text>
                     </v-card-header>
                     <v-card-actions class="justify-center">
-                        <v-btn @click="cleanNegative" color="primary">Fix negative</v-btn>
+                        <v-btn @click="cleanNegative">Fix negative</v-btn>
                     </v-card-actions>
                 </v-card>
             </v-col>
@@ -121,7 +121,6 @@ export default defineComponent({
                         <v-btn
                             :disabled="filesIncomplete"
                             @click="ynabImport"
-                            color="primary"
                         >Importieren</v-btn>
                     </v-card-actions>
                 </v-card>