From e5cf439231a75c5712732f03f51f1611c347e9af Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Tue, 22 Feb 2022 18:57:15 +0000
Subject: [PATCH] Update BudgetSettings to tailwindcss

---
 web/src/pages/Settings.vue | 99 +++++++++++++-------------------------
 1 file changed, 34 insertions(+), 65 deletions(-)

diff --git a/web/src/pages/Settings.vue b/web/src/pages/Settings.vue
index 2acb8cd..d8467a0 100644
--- a/web/src/pages/Settings.vue
+++ b/web/src/pages/Settings.vue
@@ -4,6 +4,7 @@ import { useRouter } from "vue-router";
 import { DELETE, POST } from "../api";
 import { useBudgetsStore } from "../stores/budget";
 import { useSessionStore } from "../stores/session";
+import Card from "../components/Card.vue";
 
 const transactionsFile = ref<File | undefined>(undefined);
 const assignmentsFile = ref<File | undefined>(undefined);
@@ -54,72 +55,40 @@ function ynabImport() {
 </script>
 
 <template>
-    <v-container>
+    <div>
         <h1>Danger Zone</h1>
-        <v-row>
-            <v-col cols="12" md="6" xl="3">
-                <v-card>
-                    <v-card-header>
-                        <v-card-header-text>
-                            <v-card-title>Clear Budget</v-card-title>
-                            <v-card-subtitle>This removes transactions and assignments to start from scratch. Accounts and categories are kept. Not undoable!</v-card-subtitle>
-                        </v-card-header-text>
-                    </v-card-header>
-                    <v-card-actions class="justify-center">
-                        <v-btn @click="clearBudget">Clear budget</v-btn>
-                    </v-card-actions>
-                </v-card>
-            </v-col>
-            <v-col cols="12" md="6" xl="3">
-                <v-card>
-                    <v-card-header>
-                        <v-card-header-text>
-                            <v-card-title>Delete Budget</v-card-title>
-                            <v-card-subtitle>This deletes the whole bugdet including all transactions, assignments, accounts and categories. Not undoable!</v-card-subtitle>
-                        </v-card-header-text>
-                    </v-card-header>
-                    <v-card-actions class="justify-center">
-                        <v-btn @click="deleteBudget">Delete budget</v-btn>
-                    </v-card-actions>
-                </v-card>
-            </v-col>
-            <v-col cols="12" md="6" xl="3">
-                <v-card>
-                    <v-card-header>
-                        <v-card-header-text>
-                            <v-card-title>Fix all historic negative category-balances</v-card-title>
-                            <v-card-subtitle>This restores YNABs functionality, that would substract any overspent categories' balances from next months inflows.</v-card-subtitle>
-                        </v-card-header-text>
-                    </v-card-header>
-                    <v-card-actions class="justify-center">
-                        <v-btn @click="cleanNegative">Fix negative</v-btn>
-                    </v-card-actions>
-                </v-card>
-            </v-col>
-            <v-col cols="12" xl="6">
-                <v-card>
-                    <v-card-header>
-                        <v-card-header-text>
-                            <v-card-title>Import YNAB Budget</v-card-title>
-                        </v-card-header-text>
-                    </v-card-header>
+    <div class="grid md:grid-cols-2 gap-6">
+            <Card>
+                <h2>Clear Budget</h2>
+                <p>This removes transactions and assignments to start from scratch. Accounts and categories are kept. Not undoable!</p>
 
-                    <label for="transactions_file">
-                        Transaktionen:
-                        <input type="file" @change="gotTransactions" accept="text/*" />
-                    </label>
-                    <br />
-                    <label for="assignments_file">
-                        Budget:
-                        <input type="file" @change="gotAssignments" accept="text/*" />
-                    </label>
+                <button @click="clearBudget">Clear budget</button>
+            </Card>
+            <Card>
+                <h2>Delete Budget</h2>
+                <p>This deletes the whole bugdet including all transactions, assignments, accounts and categories. Not undoable!</p>
+                <button @click="deleteBudget">Delete budget</button>
+            </Card>
+            <Card>
+                <h2>Fix all historic negative category-balances</h2>
+                <p>This restores YNABs functionality, that would substract any overspent categories' balances from next months inflows.</p>
+                <button @click="cleanNegative">Fix negative</button>
+            </Card>
+            <Card>
+                <h2>Import YNAB Budget</h2>
 
-                    <v-card-actions class="justify-center">
-                        <v-btn :disabled="filesIncomplete" @click="ynabImport">Importieren</v-btn>
-                    </v-card-actions>
-                </v-card>
-            </v-col>
-        </v-row>
-        <v-card></v-card>
-    </v-container>
+                <label for="transactions_file">
+                    Transaktionen:
+                    <input type="file" @change="gotTransactions" accept="text/*" />
+                </label>
+                <br />
+                <label for="assignments_file">
+                    Budget:
+                    <input type="file" @change="gotAssignments" accept="text/*" />
+                </label>
+
+                <button :disabled="filesIncomplete" @click="ynabImport">Importieren</button>
+            </Card>
+        </div>
+    </div>
 </template>
\ No newline at end of file