From 44a95927edb532f8982cf24c03d9fdd129016bd6 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Sun, 5 Jun 2022 21:50:26 +0200
Subject: feat: Implement new theme switcher component and backend

The theme is now shared between the domain returned by base_domain()
---
 apps/portal/src/app/index.scss                  |  1 +
 apps/portal/src/app/pages/_layout.svelte        | 84 ++++++++-----------------
 apps/portal/src/app/pages/forgot.svelte         |  2 +-
 apps/portal/src/app/pages/login.svelte          |  2 +-
 apps/portal/src/app/pages/reset-password.svelte |  2 +-
 apps/portal/src/app/pages/sign-up.svelte        |  7 ++-
 apps/portal/src/index.html                      | 15 +++--
 7 files changed, 45 insertions(+), 68 deletions(-)

(limited to 'apps/portal/src')

diff --git a/apps/portal/src/app/index.scss b/apps/portal/src/app/index.scss
index 56ac1c0..dd4ddb6 100644
--- a/apps/portal/src/app/index.scss
+++ b/apps/portal/src/app/index.scss
@@ -19,3 +19,4 @@
 @use '../../web-shared/src/styles/components/btn-states';
 @use '../../web-shared/src/styles/components/alert';
 @use '../../web-shared/src/styles/components/details';
+@use '../../web-shared/src/styles/components/light-dark-switch';
diff --git a/apps/portal/src/app/pages/_layout.svelte b/apps/portal/src/app/pages/_layout.svelte
index ec4bd11..d5af444 100644
--- a/apps/portal/src/app/pages/_layout.svelte
+++ b/apps/portal/src/app/pages/_layout.svelte
@@ -1,7 +1,5 @@
 <script>
-	import Button from "$shared/components/button.svelte";
-	import Tile from "$shared/components/tile.svelte";
-	import {switch_theme} from "$shared/lib/helpers";
+	import ThemeSwitcher from "$shared/components/theme-switcher.svelte";
 </script>
 
 <style>
@@ -13,6 +11,7 @@
         width: 100%;
         height: 100%;
         overflow: hidden;
+        z-index: 1;
     }
 
     #decoration svg {
@@ -29,13 +28,13 @@
 </style>
 
 <main class="container-fluid padding-x-xs padding-x-xxl@xs padding-y-md padding-y-lg@md max-width-sm">
-    <slot/>
-
-    <Tile class="margin-top-sm">
-        <Button on:click={() => switch_theme()}
-                text="Switch theme"
-                variant="secondary"/>
-    </Tile>
+    <div class="z-index-2 position-relative">
+        <slot/>
+    </div>
+    
+    <div class="position-fixed right-0 top-0 margin-md z-index-2">
+        <ThemeSwitcher/>
+    </div>
 
     <figure id="decoration"
             aria-hidden="true">
@@ -43,55 +42,22 @@
              viewBox="0 0 1920 450"
              fill="none">
             <g stroke="currentColor"
-               stroke-width="2">
-                <rect x="1286"
-                      y="64"
-                      width="128"
-                      height="128"/>
-                <circle cx="1350"
-                        cy="128"
-                        r="64"/>
-                <path d="M1286 64L1414 192"/>
-                <circle cx="1478"
-                        cy="128"
-                        r="64"/>
-                <rect x="1414"
-                      y="192"
-                      width="128"
-                      height="128"/>
-                <circle cx="1478"
-                        cy="256"
-                        r="64"/>
-                <path d="M1414 192L1542 320"/>
-                <circle cx="1606"
-                        cy="256"
-                        r="64"/>
-                <rect x="1542"
-                      y="320"
-                      width="128"
-                      height="128"/>
-                <circle cx="1606"
-                        cy="384"
-                        r="64"/>
-                <path d="M1542 320L1670 448"/>
-                <rect x="1690"
-                      y="192"
-                      width="128"
-                      height="128"/>
-                <circle cx="1754"
-                        cy="256"
-                        r="64"/>
-                <path d="M1690 192L1818 320"/>
-                <rect x="1542"
-                      y="64"
-                      width="128"
-                      height="128"/>
-                <circle cx="1606"
-                        cy="128"
-                        r="64"/>
-                <path d="M1542 64L1670 192"/>
-                <circle cx="1478"
-                        r="64"/>
+               stroke-width="2"
+               stroke-linejoin="round"
+               stroke-linecap="round">
+                <path d="M1449 94.9993V3L1354 48.9995L1259 3V94.9993L1354 140.999L1449 94.9993Z"/>
+                <path d="M1639 94.9993V3L1544 48.9995L1449 3V94.9993L1544 140.999L1639 94.9993Z"/>
+                <path d="M1354 49.0002V141"/>
+                <path d="M1544 49.0002V141"/>
+                <path d="M1449 94.9995L1544 140.999L1449 186.999L1354 140.999L1449 94.9995Z"/>
+                <path d="M1544 141V232.999L1449 278.999L1354 232.999V141"/>
+                <path d="M1449 187V279"/>
+                <path d="M1544 264L1639 310L1544 355.999L1449 310L1544 264Z"/>
+                <path d="M1639 310V402L1544 447.999L1449 402V310"/>
+                <path d="M1544 356.001V448"/>
+                <path d="M1639 94.9995L1734 140.999L1639 186.999L1544 140.999L1639 94.9995Z"/>
+                <path d="M1734 141V232.999L1639 278.999L1544 232.999V141"/>
+                <path d="M1639 187V279"/>
             </g>
         </svg>
     </figure>
diff --git a/apps/portal/src/app/pages/forgot.svelte b/apps/portal/src/app/pages/forgot.svelte
index 5ffac23..156deab 100644
--- a/apps/portal/src/app/pages/forgot.svelte
+++ b/apps/portal/src/app/pages/forgot.svelte
@@ -71,7 +71,7 @@
               class="max-width-xxs">
             <fieldset>
                 <legend class="form-legend">
-                    <span class="margin-bottom-xs">Send reset link</span> <br/>
+                    <span class="margin-bottom-xs text-xl">Send reset link</span> <br/>
                     <span class="text-sm">... or <a href="/login"
                                                     use:link>log in</a></span>
                 </legend>
diff --git a/apps/portal/src/app/pages/login.svelte b/apps/portal/src/app/pages/login.svelte
index df8d537..2822be0 100644
--- a/apps/portal/src/app/pages/login.svelte
+++ b/apps/portal/src/app/pages/login.svelte
@@ -98,7 +98,7 @@
               class="max-width-xxs">
             <fieldset>
                 <legend class="form-legend">
-                    <span class="margin-bottom-xs">Log into your account</span>
+                    <span class="margin-bottom-xs text-xl">Log into your account</span>
                     <br/>
                     <span class="text-sm">... or <a href="/signup"
                                                     use:link>create a new one</a></span>
diff --git a/apps/portal/src/app/pages/reset-password.svelte b/apps/portal/src/app/pages/reset-password.svelte
index 1b26903..dabf5c9 100644
--- a/apps/portal/src/app/pages/reset-password.svelte
+++ b/apps/portal/src/app/pages/reset-password.svelte
@@ -84,7 +84,7 @@
                     {#if isActive === true}
                         <fieldset>
                             <legend class="form-legend">
-                                <span class="margin-bottom-xs">Set your new password</span> <br/>
+                                <span class="margin-bottom-xs text-xl">Set your new password</span> <br/>
                                 <span class="text-sm">
 								... or
 								<a href="/login"
diff --git a/apps/portal/src/app/pages/sign-up.svelte b/apps/portal/src/app/pages/sign-up.svelte
index 31ae55b..509d33a 100644
--- a/apps/portal/src/app/pages/sign-up.svelte
+++ b/apps/portal/src/app/pages/sign-up.svelte
@@ -84,12 +84,15 @@
               class="max-width-xxs">
             <fieldset>
                 <legend class="form-legend">
-                    <span class="margin-bottom-xs">Create your account</span> <br/>
+                    <span class="margin-bottom-xs text-xl">Create your account</span> <br/>
                     <span class="text-sm"
                     >... or <a href="/login"
                                use:link>log in</a></span
                     >
                 </legend>
+                <div class="margin-bottom-xs">
+                    <p>Provide an email and password to get immediate access to your new environment (30 days full access, no billing details required, no promotion emails).</p>
+                </div>
                 <div class="margin-bottom-xxs max-width-xxs">
                     <Alert visible={signupForm.alert.isVisible}
                            title={signupForm.alert.title}
@@ -114,7 +117,7 @@
                 </div>
                 <div class="flex justify-end">
                     <Button class="margin-bottom-xs"
-                            text="Submit"
+                            text="Create account"
                             type="primary"
                             loading={signupForm.loading}
                     />
diff --git a/apps/portal/src/index.html b/apps/portal/src/index.html
index 0bf1fb1..25de7d3 100644
--- a/apps/portal/src/index.html
+++ b/apps/portal/src/index.html
@@ -26,16 +26,23 @@
     <link rel="icon"
           href="./_assets/pwa/favicon.svg">
     <script>
-		const currentTheme = localStorage.getItem("theme");
+		const value = `; ${document.cookie}`;
+		const parts = value.split(`; go_theme=`);
+		let currentTheme = "system";
+		if (parts.length === 2) {
+			currentTheme = parts.pop().split(";").shift();
+		}
 		if (currentTheme === "light") {
 			document.querySelector("html").dataset.theme = "light";
-		} else {
+		} else if (currentTheme === "dark") {
 			document.querySelector("html").dataset.theme = "dark";
+		} else {
+			document.querySelector("html").dataset.theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 		}
     </script>
     <link rel="stylesheet"
           href="./_assets/pre.css">
-    <title>Projects - Greatoffice</title>
+    <title>Portal - Greatoffice</title>
 </head>
 
 <body>
@@ -47,7 +54,7 @@
 <div class="fill-loader fill-loader--v4"
      id="loader"
      role="alert">
-    <p class="fill-loader__label">Loading Projects...</p>
+    <p class="fill-loader__label">Loading Portal...</p>
     <div aria-hidden="true">
         <div class="fill-loader__base"></div>
         <div class="fill-loader__fill"></div>
-- 
cgit v1.3