From af38e3cb1daf5531bed91ed6d60c780d421b0c5d Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Thu, 17 Nov 2022 22:54:22 +0100
Subject: [PATCH] feat: full layout & refactoring

---
 .../lib/components/layout/FullLayout.svelte   | 52 +++++++++++++++++++
 .../lib/components/layout/SplitLayout.svelte  |  6 ++-
 frontend/src/routes/login/+page.svelte        | 15 ++----
 frontend/windi.config.ts                      |  1 +
 4 files changed, 62 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/lib/components/layout/FullLayout.svelte

diff --git a/frontend/src/lib/components/layout/FullLayout.svelte b/frontend/src/lib/components/layout/FullLayout.svelte
new file mode 100644
index 0000000..62810e3
--- /dev/null
+++ b/frontend/src/lib/components/layout/FullLayout.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import backgroundImage from '$lib/assets/background.jpg';
+	import logo from '$lib/assets/logo/ssps.svg';
+	import DarkModeToggle from '../DarkModeToggle.svelte';
+</script>
+
+<div class="bg">
+	<div class="bgOverlay">
+		<img class="logo" src={logo} alt="SSPŠ logo" />
+		<div class="darkModeToggle">
+			<DarkModeToggle backgroundColor="dark" />
+		</div>
+	</div>
+	<div style={`background-image: url(${backgroundImage});`} class="bgImage" />
+</div>
+<div class="view">
+	<div class="content">
+		<slot />
+	</div>
+</div>
+
+<style>
+	.bgImage {
+		@apply -z-20;
+		@apply absolute min-w-screen min-w-full min-h-screen;
+		@apply bg-no-repeat;
+		background-position: 55%;
+	}
+	.bgOverlay {
+		@apply -z-10 absolute min-w-screen min-h-screen;
+		background: linear-gradient(45deg, rgba(18, 48, 75, 1), rgba(119, 173, 224, 0.443));
+		@apply bg-cover;
+	}
+	.bgOverlay .logo {
+		@apply absolute top-0 left-0;
+		@apply hidden md:inline-block;
+		@apply h-auto max-w-56;
+		@apply p-7;
+	}
+	.bgOverlay .darkModeToggle {
+		@apply absolute top-0 right-0;
+		@apply hidden md:inline-block;
+		@apply p-7;
+	}
+	.view {
+		@apply z-10 overflow-scroll;
+		@apply w-screen h-screen top-0 right-0 bottom-0 left-0 m-auto;
+	}
+	.content {
+		@apply w-full h-full;
+	}
+</style>
diff --git a/frontend/src/lib/components/layout/SplitLayout.svelte b/frontend/src/lib/components/layout/SplitLayout.svelte
index b6303d1..3669c24 100644
--- a/frontend/src/lib/components/layout/SplitLayout.svelte
+++ b/frontend/src/lib/components/layout/SplitLayout.svelte
@@ -32,8 +32,10 @@
 		@apply bg-cover;
 	}
 	.bgOverlay .logo {
-        @apply hidden md:block;
-		@apply h-auto max-w-56 p-7;
+		@apply absolute top-0 left-0;
+		@apply hidden md:inline-block;
+		@apply h-auto max-w-56;
+		@apply p-7;
 	}
 	.darkModeToggle {
 		@apply absolute right-0;
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index cca740b..6589cd8 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -10,22 +10,17 @@
 		>
 			<img class="object-cover" src={lev} alt="" />
 		</div>
-		<h1 class="mt-6 text-4xl text-[#406280] font-semibold">Přihlášení</h1>
-		<p class="mt-6 font-light text-[#e6e6e6] text-center">
+		<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Přihlášení</h1>
+		<p class="mt-8 font-light text-sspsGray text-center">
 			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
 		</p>
 		<input
-			class="mt-6 w-3/5 shadow-lg p-3 rounded-lg text-xl"
-			type="text"
-			placeholder="Evidenční číslo přihlášky"
-		/>
-		<input
-			class="mt-6 w-3/5 shadow-lg p-3 rounded-lg text-xl border border-[#406280] border-2"
+			class="bg-[#f8fafb] mt-8 w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
 			type="password"
-			value="............"
+			placeholder="Ev. číslo"
 		/>
 		<input
-			class="mt-6 w-3/5 p-3 rounded-lg font-semibold text-xl bg-[#406280] text-white"
+			class="mt-8 w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"
 			type="submit"
 			value="Odeslat"
 		/>
diff --git a/frontend/windi.config.ts b/frontend/windi.config.ts
index 79b3e69..4efe0ed 100644
--- a/frontend/windi.config.ts
+++ b/frontend/windi.config.ts
@@ -5,6 +5,7 @@ export default defineConfig({
         extend: {
             colors: {
                 "sspsBlue": '#406280',
+                "sspsBlueDark": '#243a55',
                 "sspsGray": "#e6e6e6",
             }
         }