From bd215391c9ed99bbfab93ae993dbc5fedb5a40d4 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Mon, 21 Jul 2025 00:16:15 +0100
Subject: [PATCH] Update login button to look nicer

---
 src/lib/buttons/Login.svelte | 26 ++++++++++++++++++++++----
 src/lib/notLoggedIn.svelte   |  3 +--
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/lib/buttons/Login.svelte b/src/lib/buttons/Login.svelte
index b1676ca..d385822 100644
--- a/src/lib/buttons/Login.svelte
+++ b/src/lib/buttons/Login.svelte
@@ -1,11 +1,29 @@
 <script lang="ts">
-    import { SignIn } from "@auth/sveltekit/components";
+	import { signIn } from "@auth/sveltekit/client";
 
+    function handleLogin() {
+        signIn("keycloak", { callbackUrl: "/"});
+    }
 </script>
 
-<SignIn provider="keycloak" redirectTo="/">
-    <div slot="submitButton" class="buttonPrimary">Login</div>
-</SignIn>
+<button on:click={handleLogin} class="keycloak">
+    Login with FJLA
+</button>
 
 <style>
+    .keycloak {
+        width: 70%;
+        height: 35px;
+        border: none;
+        border-radius: 3px;
+        background-color: blue;
+        color: whitesmoke;
+        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        font-size: 15px;
+        cursor: pointer;
+    }
+
+    .keycloak:hover {
+        background-color: rgb(52, 52, 252);
+    }
 </style>
\ No newline at end of file
diff --git a/src/lib/notLoggedIn.svelte b/src/lib/notLoggedIn.svelte
index 267fd9c..84c8658 100644
--- a/src/lib/notLoggedIn.svelte
+++ b/src/lib/notLoggedIn.svelte
@@ -16,6 +16,7 @@
 <style>
     #content-container {
         width: 100%;
+        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
         text-align: center;
         margin: 10 auto;
         padding: 25px;
@@ -36,13 +37,11 @@
     }
 
     header {
-        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
         font-size: large;
         padding: 15px;
     }
 
     p {
-        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
         padding: 15px;
     }
 </style>
\ No newline at end of file