From c3175b9be64aa41e5aac8774ca87279dcebaaebd Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Tue, 22 Feb 2022 19:14:17 +0000
Subject: [PATCH] Update NewBudget to use modal again

---
 web/src/dialogs/NewBudget.vue | 50 +++++++++++++++++++++++++++--------
 1 file changed, 39 insertions(+), 11 deletions(-)

diff --git a/web/src/dialogs/NewBudget.vue b/web/src/dialogs/NewBudget.vue
index c6eecb6..fca1ade 100644
--- a/web/src/dialogs/NewBudget.vue
+++ b/web/src/dialogs/NewBudget.vue
@@ -19,17 +19,45 @@ function newBudget() {
     <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>
-        <span class="text-h5">New Budget</span>
-      </div>
-      <div>
-        <input type="text" v-model="budgetName" label="Budget name" required />
-      </div>
-      <div>
-        <button @click="dialog = false">Close</button>
-        <button @click="saveBudget">Save</button>
+  <div v-if="dialog" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
+    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+      <div class="mt-3 text-center">
+        <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
+          <svg
+            class="h-6 w-6 text-green-600"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M5 13l4 4L19 7"
+            />
+          </svg>
+        </div>
+        <h3 class="mt-3 text-lg leading-6 font-medium text-gray-900">New Budget</h3>
+        <div class="mt-2 px-7 py-3">
+          <input
+            class="border-2"
+            type="text"
+            v-model="budgetName"
+            placeholder="Budget name"
+            required
+          />
+          <!--<p class="text-sm text-gray-500">Account has been successfully registered!</p>-->
+        </div>
+        <div class="items-center px-4 py-3">
+          <button
+            @click="dialog = false"
+            class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md w-1/2 shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
+          >Close</button>
+          <button
+            class="px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md w-1/2 shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
+            @click="saveBudget"
+          >Save</button>
+        </div>
       </div>
     </div>
   </div>