From 966c0ce0ebb901e2c6670b77cec91e9676b804a4 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 23 Feb 2022 23:12:39 +0000
Subject: [PATCH] Redesign Budget Settings and introduce Button component

---
 web/src/components/Button.vue |  8 ++++++
 web/src/pages/Settings.vue    | 51 +++++++++++++++++++----------------
 2 files changed, 36 insertions(+), 23 deletions(-)
 create mode 100644 web/src/components/Button.vue

diff --git a/web/src/components/Button.vue b/web/src/components/Button.vue
new file mode 100644
index 0000000..ff7554f
--- /dev/null
+++ b/web/src/components/Button.vue
@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+        <button class="px-4 py-2 text-base font-medium rounded-md shadow-sm focus:outline-none focus:ring-2">
+                <slot></slot>
+        </button>
+</template>
\ No newline at end of file
diff --git a/web/src/pages/Settings.vue b/web/src/pages/Settings.vue
index d8467a0..6550a11 100644
--- a/web/src/pages/Settings.vue
+++ b/web/src/pages/Settings.vue
@@ -5,6 +5,7 @@ import { DELETE, POST } from "../api";
 import { useBudgetsStore } from "../stores/budget";
 import { useSessionStore } from "../stores/session";
 import Card from "../components/Card.vue";
+import Button from "../components/Button.vue";
 
 const transactionsFile = ref<File | undefined>(undefined);
 const assignmentsFile = ref<File | undefined>(undefined);
@@ -57,37 +58,41 @@ function ynabImport() {
 <template>
     <div>
         <h1>Danger Zone</h1>
-    <div class="grid md:grid-cols-2 gap-6">
-            <Card>
-                <h2>Clear Budget</h2>
+        <div class="grid md:grid-cols-2 gap-6">
+            <Card class="flex-col p-3">
+                <h2 class="text-lg font-bold">Clear Budget</h2>
                 <p>This removes transactions and assignments to start from scratch. Accounts and categories are kept. Not undoable!</p>
 
-                <button @click="clearBudget">Clear budget</button>
+                <Button class="bg-red-500" @click="clearBudget">Clear budget</Button>
             </Card>
-            <Card>
-                <h2>Delete Budget</h2>
+            <Card class="flex-col p-3">
+                <h2 class="text-lg font-bold">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>
+                <Button class="bg-red-500" @click="deleteBudget">Delete budget</button>
             </Card>
-            <Card>
-                <h2>Fix all historic negative category-balances</h2>
+            <Card class="flex-col p-3">
+                <h2 class="text-lg font-bold">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>
+                <Button class="bg-orange-500" @click="cleanNegative">Fix negative</button>
             </Card>
-            <Card>
-                <h2>Import YNAB Budget</h2>
+            <Card class="flex-col p-3">
+                <h2 class="text-lg font-bold">Import YNAB Budget</h2>
+                
+                <div class="flex flex-row">
+                    <div>
+                        <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>
+                    </div>
 
-                <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>
+                    <Button class="bg-blue-500" :disabled="filesIncomplete" @click="ynabImport">Importieren</Button>
+                </div>
             </Card>
         </div>
     </div>