From 9877879ba69f4fd766aedd6338fc2e13563689e5 Mon Sep 17 00:00:00 2001
From: Jonas_Jones <me@jonasjones.dev>
Date: Fri, 7 Mar 2025 22:19:47 +0100
Subject: [PATCH] added Alpha Notice to pages

---
 src/lib/components/AlphaNotice.svelte | 32 +++++++++++++++++++++++++++
 src/routes/about/+page.svelte         |  8 ++++++-
 src/routes/login/+page.svelte         |  3 +++
 src/routes/signup/+page.svelte        |  5 ++++-
 4 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/AlphaNotice.svelte

diff --git a/src/lib/components/AlphaNotice.svelte b/src/lib/components/AlphaNotice.svelte
new file mode 100644
index 0000000..45efed4
--- /dev/null
+++ b/src/lib/components/AlphaNotice.svelte
@@ -0,0 +1,32 @@
+<div class="alpha-notice">
+    <h2><b>This is an Alpha Version</b></h2>
+    <p>
+        Note that this Dashboard is in an alpha state. This means that there are bugs and missing features.
+        Please report any bugs or issues to the
+        <a href="https://github.com/JonasunderscoreJones/dash.jonasjones.dev/issues">GitHub repository</a>.
+    </p>
+</div>
+
+<style>
+    .alpha-notice {
+        background-color: #c48900;
+        color: #721c24;
+        padding: 1rem;
+        border: 1px solid #533300;
+        border-radius: 0.25rem;
+        margin: 1rem 0;
+    }
+
+    .alpha-notice h2 {
+        margin-top: 0;
+    }
+
+    .alpha-notice a {
+        color: #721c24;
+        text-decoration: underline;
+    }
+
+    .alpha-notice a:hover {
+        color: #560009;
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 6bcfbb8..1934e77 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,3 +1,7 @@
+<script>
+	import AlphaNotice from "$lib/components/AlphaNotice.svelte";
+</script>
+
 <svelte:head>
 	<title>About</title>
 	<meta name="description" content="About this app" />
@@ -6,9 +10,11 @@
 <div class="text-column">
 	<h1>About this Dashboard</h1>
 
+	<AlphaNotice />
+
 	<p>
 		This is a Dashboard app for my Ecosystem's services.
-		The list and roadmap of supported services can be viewed in the 
+		The list and roadmap of supported services can be viewed in the
 		<a href="https://github.com/JonasunderscoreJones/dash.jonasjones.dev/blob/main/README.md">README.md</a>
 		page of the github repository. Thus, the Dashboard is opensource in the same repository.
 	</p>
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 76deba9..e009e35 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -3,6 +3,7 @@
     import { onMount } from 'svelte';
     import { setSessionKey, redirectToHome, ACCOUNTS_WORKER_URL } from '$lib/session.js';
     import { page } from '$app/state';
+    import AlphaNotice from '$lib/components/AlphaNotice.svelte';
     let email = '';
     let password = '';
     let errorMessage = '';
@@ -43,6 +44,8 @@
     <div class="login-prompt">
       <h1>Login</h1>
 
+      <AlphaNotice />
+
       {#if errorMessage}
         <p style="color: red;">{errorMessage}</p>
       {/if}
diff --git a/src/routes/signup/+page.svelte b/src/routes/signup/+page.svelte
index cc133e0..3919e8b 100644
--- a/src/routes/signup/+page.svelte
+++ b/src/routes/signup/+page.svelte
@@ -2,6 +2,7 @@
     import { navigate } from 'svelte-routing';
     import { setSessionKey, ACCOUNTS_WORKER_URL } from '$lib/session.js';
     import { page } from '$app/state';
+    import AlphaNotice from '$lib/components/AlphaNotice.svelte';
     let username = '';
     let firstname = '';
     let lastname = '';
@@ -41,6 +42,8 @@
     <div class="login-prompt">
       <h1>Signup</h1>
 
+      <AlphaNotice />
+
       {#if errorMessage}
         <p style="color: red;">{errorMessage}</p>
       {/if}
@@ -141,7 +144,7 @@
     }
 
     button:hover {
-      background-color: #0056b3;
+      background-color: var(--color-theme-2);
     }
 
     p {