From 466239ce11b5d303cfd66c3ad3351f71613f94f4 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Tue, 1 Mar 2022 20:31:01 +0000
Subject: [PATCH] Remove defaults from Button

---
 web/src/components/Button.vue              |  2 +-
 web/src/components/TransactionInputRow.vue |  8 +++--
 web/src/pages/Account.vue                  |  6 ++--
 web/src/pages/Settings.vue                 | 34 ++++++++++------------
 4 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/web/src/components/Button.vue b/web/src/components/Button.vue
index c7c16a0..9491068 100644
--- a/web/src/components/Button.vue
+++ b/web/src/components/Button.vue
@@ -3,7 +3,7 @@
 
 <template>
     <button
-        class="px-4 py-2 text-base font-medium rounded-md shadow-sm focus:outline-none focus:ring-2"
+        class="px-4 rounded-md shadow-sm focus:outline-none focus:ring-2"
     >
         <slot></slot>
     </button>
diff --git a/web/src/components/TransactionInputRow.vue b/web/src/components/TransactionInputRow.vue
index 1a1d8e8..52e20c0 100644
--- a/web/src/components/TransactionInputRow.vue
+++ b/web/src/components/TransactionInputRow.vue
@@ -52,18 +52,22 @@ function saveTransaction(e: MouseEvent) {
 
 <template>
     <tr>
+        <label class="md:hidden">Date</label>
         <td class="text-sm">
             <DateInput class="border-b-2 border-black" v-model="TX.Date" />
         </td>
+        <label class="md:hidden">Payee</label>
         <td>
             <Autocomplete v-model:text="TX.Payee" v-model:id="TX.PayeeID" v-model:type="payeeType" model="payees" />
         </td>
+        <label class="md:hidden">Category</label>
         <td>
             <Autocomplete v-model:text="TX.Category" v-model:id="TX.CategoryID" model="categories" />
         </td>
-        <td>
+        <td class="col-span-2">
             <input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
         </td>
+        <label class="md:hidden">Amount</label>
         <td class="text-right">
             <input
                 class="text-right block w-full border-b-2 border-black"
@@ -71,7 +75,7 @@ function saveTransaction(e: MouseEvent) {
                 v-model="TX.Amount"
             />
         </td>
-        <td>
+        <td class="hidden md:table-cell">
             <Button class="bg-blue-500" @click="saveTransaction">Save</Button>
         </td>
     </tr>
diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index 0dded53..eb3c371 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -70,17 +70,17 @@ function createReconcilationTransaction() {
         <span v-if="transactions.Reconciling" class="border-2 block bg-gray-200 rounded-lg p-2">
             Is
             <Currency :value="transactions.ReconcilingBalance" />your current balance?
-            <Button class="bg-blue-500 mx-3" @click="submitReconcilation">Yes!</Button>
+            <Button class="bg-blue-500 mx-3 py-2" @click="submitReconcilation">Yes!</Button>
             <br />No, it's:
             <input class="text-right" type="number" v-model="TargetReconcilingBalance" />
             Difference:
             <Currency :value="transactions.ReconcilingBalance - TargetReconcilingBalance" />
             <Button
-                class="bg-orange-500 mx-3"
+                class="bg-orange-500 mx-3 py-2"
                 v-if="Math.abs(transactions.ReconcilingBalance - TargetReconcilingBalance) > 0.01"
                 @click="createReconcilationTransaction"
             >Create reconciling Transaction</Button>
-            <Button class="bg-red-500 mx-3" @click="cancelReconcilation">Cancel</Button>
+            <Button class="bg-red-500 mx-3 py-2" @click="cancelReconcilation">Cancel</Button>
         </span>
     </div>
 
diff --git a/web/src/pages/Settings.vue b/web/src/pages/Settings.vue
index fc41a14..d63382b 100644
--- a/web/src/pages/Settings.vue
+++ b/web/src/pages/Settings.vue
@@ -82,42 +82,40 @@ function ynabExport() {
                 <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 class="bg-red-500" @click="clearBudget">Clear budget</Button>
+                <Button class="bg-red-500 py-2" @click="clearBudget">Clear budget</Button>
             </Card>
             <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 class="bg-red-500" @click="deleteBudget">Delete budget</button>
+                <Button class="bg-red-500 py-2" @click="deleteBudget">Delete budget</button>
             </Card>
             <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 class="bg-orange-500" @click="cleanNegative">Fix negative</button>
+                <Button class="bg-orange-500 py-2" @click="cleanNegative">Fix negative</button>
             </Card>
             <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>
-
-                    <Button class="bg-blue-500" :disabled="filesIncomplete" @click="ynabImport">Importieren</Button>
+                <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>
+
+                <Button class="bg-blue-500 py-2" :disabled="filesIncomplete" @click="ynabImport">Importieren</Button>
             </Card>
             <Card class="flex-col p-3">
                 <h2 class="text-lg font-bold">Export as YNAB TSV</h2>
 
                 <div class="flex flex-row">
-                    <Button class="bg-blue-500" @click="ynabExport">Export</Button>
+                    <Button class="bg-blue-500 py-2" @click="ynabExport">Export</Button>
                 </div>
             </Card>
         </div>