From fb49d45677b0c619f3c3bf44aaae6e055bc69eb1 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Fri, 14 Aug 2020 16:12:17 +0200
Subject: [PATCH] More buttons

---
 app/src/main/kotlin/views/NoteView.kt          |  8 +++-----
 app/src/main/kotlin/views/components/Navbar.kt |  8 ++++----
 css/styles.css                                 | 12 ++++++++++++
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/app/src/main/kotlin/views/NoteView.kt b/app/src/main/kotlin/views/NoteView.kt
index 78b33c3..b82a9a7 100644
--- a/app/src/main/kotlin/views/NoteView.kt
+++ b/app/src/main/kotlin/views/NoteView.kt
@@ -104,18 +104,16 @@ class NoteView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
                     }
                 }
             }
-            span("flex justify-end mb-4") {
+            span("flex space-x-2 justify-end mb-4") {
                 a(
                     href = "/notes/${note.uuid}/edit",
-                    classes = "mx-2 bg-teal-500 hover:bg-teal-600 focus:bg-teal-600" +
-                        " focus:outline-none text-white font-bold py-2 px-4 rounded"
+                    classes = "btn btn-teal"
                 ) { +"Edit" }
                 form(method = FormMethod.post, classes = "inline") {
                     button(
                         type = ButtonType.submit,
                         name = "delete",
-                        classes = "mx-2 bg-red-500 hover:bg-red-600 focus:bg-red-600" +
-                            " focus:outline-none text-white font-bold py-2 px-4 rounded"
+                        classes = "btn btn-red"
                     ) { +"Delete" }
                 }
             }
diff --git a/app/src/main/kotlin/views/components/Navbar.kt b/app/src/main/kotlin/views/components/Navbar.kt
index 987e570..4653e00 100644
--- a/app/src/main/kotlin/views/components/Navbar.kt
+++ b/app/src/main/kotlin/views/components/Navbar.kt
@@ -6,18 +6,18 @@ import kotlinx.html.*
 fun BODY.navbar(jwtPayload: JwtPayload?) {
     nav("nav bg-teal-700 shadow-md flex items-center justify-between px-4") {
         a(href = "/", classes = "text-2xl text-gray-100 font-bold") { +"SimpleNotes" }
-        ul {
+        ul("space-x-2") {
             if (jwtPayload != null) {
-                li("inline text-gray-100 ml-2 text-md font-semibold") {
+                li("inline text-gray-100 text-md font-semibold") {
                     a(href = "/notes") { +"Notes" }
                 }
-                li("inline ml-2") {
+                li("inline") {
                     form(classes = "inline", action = "/logout", method = FormMethod.post) {
                         button(type = ButtonType.submit, classes = "btn btn-green") { +"Logout" }
                     }
                 }
             } else {
-                li("inline pl-2") {
+                li("inline") {
                     a(href = "/login", classes = "btn btn-green") { +"Sign In" }
                 }
             }
diff --git a/css/styles.css b/css/styles.css
index 07a3faa..8b85c09 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -34,6 +34,18 @@
     }
 }
 
+.btn-red {
+    @apply bg-red-500 text-white;
+
+    &:focus {
+        @apply bg-red-600;
+    }
+
+    &:hover {
+        @apply bg-red-600;
+    }
+}
+
 .nav {
     height: 64px;
 }