From 5aa51b980ae3ae60675db19afeae87908be778c7 Mon Sep 17 00:00:00 2001
From: BaBrixx <bastian.b.hansen@gmail.com>
Date: Wed, 8 Nov 2023 15:31:16 +0100
Subject: [PATCH] Did some color styling to the navbar

---
 src/lib/GlobalCssProperties.json              | 14 +++-
 .../styling/ZodSchemas/CSSVariables.ts        |  1 +
 ...opDownBtn.svelte => DropDownButton.svelte} |  4 +-
 .../components/topBar/DropDownCheckBox.svelte |  4 +-
 src/lib/components/topBar/TopBar.svelte       | 64 +++++++++----------
 .../{TopBarBtn.svelte => TopBarButton.svelte} | 22 +++----
 src/routes/+page.svelte                       |  6 +-
 7 files changed, 63 insertions(+), 52 deletions(-)
 rename src/lib/components/topBar/{DropDownBtn.svelte => DropDownButton.svelte} (92%)
 rename src/lib/components/topBar/{TopBarBtn.svelte => TopBarButton.svelte} (77%)

diff --git a/src/lib/GlobalCssProperties.json b/src/lib/GlobalCssProperties.json
index 4dd30eed..2e3d1012 100644
--- a/src/lib/GlobalCssProperties.json
+++ b/src/lib/GlobalCssProperties.json
@@ -2,7 +2,7 @@
 	"default": {
 		"mediaFeature": "default",
 		"color": {
-			"--navigationbar-text-color": ["display-p3", 1, 1, 1, 0],
+			"--navigationbar-text-color": ["display-p3", 1, 1, 1],
 			"--console-scrollbar-thumb-color": [
 				"display-p3",
 				0.22745098039,
@@ -91,6 +91,12 @@
 				0.3362745098,
 				0.39901960784,
 				0.43823529411
+			],
+			"--navigationbar-button-hover-color": [
+				"display-p3",
+				0.3362745098,
+				0.39901960784,
+				0.43823529411
 			]
 		},
 		"fontSize": {
@@ -177,6 +183,12 @@
 					0.13490196078,
 					0.14666666666,
 					0.17019607843
+				],
+				"--navigationbar-button-hover-color": [
+					"display-p3",
+					0.13490196078,
+					0.14666666666,
+					0.17019607843
 				]
 			}
 		}
diff --git a/src/lib/classes/styling/ZodSchemas/CSSVariables.ts b/src/lib/classes/styling/ZodSchemas/CSSVariables.ts
index 3faedb2c..896b1953 100644
--- a/src/lib/classes/styling/ZodSchemas/CSSVariables.ts
+++ b/src/lib/classes/styling/ZodSchemas/CSSVariables.ts
@@ -29,6 +29,7 @@ export const ColorVariables = z
 		"--queries-input-background-color": ColorAttribute,
 		"--canvas-action-color": ColorAttribute,
 		"--console-tab-hover-color": ColorAttribute,
+		"--navigationbar-button-hover-color": ColorAttribute,
 	})
 	.strict();
 
diff --git a/src/lib/components/topBar/DropDownBtn.svelte b/src/lib/components/topBar/DropDownButton.svelte
similarity index 92%
rename from src/lib/components/topBar/DropDownBtn.svelte
rename to src/lib/components/topBar/DropDownButton.svelte
index 7cf28320..e31dd168 100644
--- a/src/lib/components/topBar/DropDownBtn.svelte
+++ b/src/lib/components/topBar/DropDownButton.svelte
@@ -8,13 +8,13 @@
 	export let color: string = "black";
 
 	//Set icon attributes
-	const iconCtx = {
+	const iconContext = {
 		strokeWidth: "1.5",
 		size: "15",
 		variation: "filled",
 		color: color,
 	};
-	setContext("iconCtx", iconCtx);
+	setContext("iconContext", iconContext);
 </script>
 
 <!--Make each dropdown item, into button-->
diff --git a/src/lib/components/topBar/DropDownCheckBox.svelte b/src/lib/components/topBar/DropDownCheckBox.svelte
index a8f231e6..ad133e2c 100644
--- a/src/lib/components/topBar/DropDownCheckBox.svelte
+++ b/src/lib/components/topBar/DropDownCheckBox.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher, type ComponentType } from "svelte";
-	import DropDownBtn from "./DropDownBtn.svelte";
+	import DropDownButton from "./DropDownButton.svelte";
 	import { Done } from "svelte-google-materialdesign-icons";
 	import {
 		checkboxStates,
@@ -38,7 +38,7 @@
 
 <!--Make each dropdown item, into button-->
 {#key unique}
-	<DropDownBtn
+	<DropDownButton
 		{name}
 		{icon}
 		color={checked ? "black" : "transparent"}
diff --git a/src/lib/components/topBar/TopBar.svelte b/src/lib/components/topBar/TopBar.svelte
index 4e74a08d..bfa92926 100644
--- a/src/lib/components/topBar/TopBar.svelte
+++ b/src/lib/components/topBar/TopBar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import TopBarBtn from "$lib/components/topBar/TopBarBtn.svelte";
-	import DropDownBtn from "$lib/components/topBar/DropDownBtn.svelte";
+	import TopBarButton from "$lib/components/topBar/TopBarButton.svelte";
+	import DropDownButton from "$lib/components/topBar/DropDownButton.svelte";
 	import DropDownCheckBox from "$lib/components/topBar/DropDownCheckBox.svelte";
 	import {
 		Note_add,
@@ -20,8 +20,8 @@
 </script>
 
 <!--
-	- TopBarBtn: The button on the navbar, where name equal text displayed in button
-	- DropDownBtn: An element in the dropdown menu as a button, where name equal to text displayed 
+	- TopBarButton: The button on the navbar, where name equal text displayed in button
+	- DropDownButton: An element in the dropdown menu as a button, where name equal to text displayed 
 		in button and icon which can be empty
 	- DropDownCheckBox: An element in the dropdown menu as a checkbox, where name eqaul to text displayed. 
 		Has two functions on:checked and on:unchecked
@@ -30,36 +30,36 @@
 
 <!--File top bar button-->
 <div>
-	<TopBarBtn name="File">
-		<DropDownBtn
+	<TopBarButton name="File">
+		<DropDownButton
 			icon={Note_add}
 			name="New Project"
 			on:click={() => {
 				console.log("New Project");
 			}}
 		/>
-		<DropDownBtn
+		<DropDownButton
 			icon={File_open}
 			name="Open Project"
 			on:click={() => {
 				console.log("Open Project");
 			}}
 		/>
-		<DropDownBtn
+		<DropDownButton
 			icon={File_open}
 			name="Recent Projects"
 			on:click={() => {
 				console.log("Recent Projects");
 			}}
 		/>
-		<DropDownBtn
+		<DropDownButton
 			icon={Save}
 			name="Save Project"
 			on:click={() => {
 				console.log("Save Project");
 			}}
 		/>
-		<DropDownBtn
+		<DropDownButton
 			icon={Save}
 			name="Save Project as"
 			on:click={() => {
@@ -67,67 +67,67 @@
 			}}
 		/>
 
-		<DropDownBtn
+		<DropDownButton
 			icon={Done_all}
 			name="New Test Plan"
 			on:click={() => {
 				console.log("New Test Plan");
 			}}
 		/>
-		<DropDownBtn
+		<DropDownButton
 			icon={Image}
 			name="Export as Png"
 			on:click={() => {
 				console.log("Export as Png");
 			}}
 		/>
-		<DropDownBtn
+		<DropDownButton
 			icon={Image}
 			name="Export without border as Png"
 			on:click={() => {
 				console.log("Export without border as Png");
 			}}
 		/>
-	</TopBarBtn>
+	</TopBarButton>
 </div>
 
 <!--Edit top bar button-->
 <div>
-	<TopBarBtn name="Edit">
-		<DropDownBtn
+	<TopBarButton name="Edit">
+		<DropDownButton
 			icon={Arrow_left}
 			name="Move All Nodes Left"
 			on:click={() => {
 				console.log("Move All Nodes Left");
 			}}
 		/>
-		<DropDownBtn
+		<DropDownButton
 			icon={Arrow_right}
 			name="Move All Nodes Right"
 			on:click={() => {
 				console.log("Move All Nodes Right");
 			}}
 		/>
-		<DropDownBtn
+		<DropDownButton
 			icon={Arrow_drop_up}
 			name="Move All Nodes Up"
 			on:click={() => {
 				console.log("Move All Nodes Up");
 			}}
 		/>
-		<DropDownBtn
+		<DropDownButton
 			icon={Arrow_drop_down}
 			name="Move All Nodes Down"
 			on:click={() => {
 				console.log("Move All Nodes Down");
 			}}
 		/>
-	</TopBarBtn>
+	</TopBarButton>
 </div>
 
 <!--View top bar button-->
 <div>
-	<TopBarBtn name="View">
+	<TopBarButton name="View">
 		<DropDownCheckBox
 			name="Project Panel"
 			on:checked={() => {
@@ -155,25 +155,25 @@
 				console.log("unchecked Autoscaling");
 			}}
 		/>
-		<DropDownBtn
+		<DropDownButton
 			name="Scaling"
 			on:click={() => {
 				console.log("Scaling");
 			}}
 		/>
-		<DropDownBtn
+		<DropDownButton
 			icon={Window}
 			name="Split canvas"
 			on:click={() => {
 				console.log("Split canvas");
 			}}
 		/>
-	</TopBarBtn>
+	</TopBarButton>
 </div>
 
 <!--Options top bar button-->
 <div>
-	<TopBarBtn name="Options">
+	<TopBarButton name="Options">
 		<DropDownCheckBox
 			name="UI cache"
 			on:checked={() => {
@@ -193,41 +193,41 @@
 				console.log("unchecked Periodic query execution");
 			}}
 		/>
-		<DropDownBtn
+		<DropDownButton
 			icon={Settings_input_composite}
 			name="Engine Options"
 			on:click={() => {
 				console.log("Engine Options");
 			}}
 		/>
-	</TopBarBtn>
+	</TopBarButton>
 </div>
 
 <!--Help top bar button-->
 <div>
-	<TopBarBtn name="Help">
-		<DropDownBtn
+	<TopBarButton name="Help">
+		<DropDownButton
 			icon={Help}
 			name="Modelling Help"
 			on:click={() => {
 				console.log("Modelling Help");
 			}}
 		/>
-		<DropDownBtn
+		<DropDownButton
 			icon={Help}
 			name="Testing Help"
 			on:click={() => {
 				console.log("Testing Help");
 			}}
 		/>
-		<DropDownBtn
+		<DropDownButton
 			icon={Error}
 			name="About"
 			on:click={() => {
 				console.log("About");
 			}}
 		/>
-	</TopBarBtn>
+	</TopBarButton>
 </div>
 
 <style>
diff --git a/src/lib/components/topBar/TopBarBtn.svelte b/src/lib/components/topBar/TopBarButton.svelte
similarity index 77%
rename from src/lib/components/topBar/TopBarBtn.svelte
rename to src/lib/components/topBar/TopBarButton.svelte
index 41583441..1939ff42 100644
--- a/src/lib/components/topBar/TopBarBtn.svelte
+++ b/src/lib/components/topBar/TopBarButton.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import TopBarDropDown from "../topBar/TopBarDropDown.svelte";
+	import TopBarDropDown from "./TopBarDropDown.svelte";
 
 	export let name: string = "Default";
 
@@ -31,26 +31,20 @@
 </div>
 
 <style>
-	.container {
-		position: absolute;
-		height: 0px;
-		z-index: 100;
-	}
-
 	div {
 		height: 100%;
 	}
 
 	button {
 		height: 100%;
-		background-color: slategrey;
+		background-color: var(--main-navigationbar-color);
 		border-color: transparent;
-		border-right: 2px solid black;
-		color: rgb(0, 0, 0);
+		border-right: 2px solid white;
+		color: var(--navigationbar-text-color);
 	}
 
 	button:hover {
-		filter: brightness(0.9);
+		background-color: var(--navigationbar-button-hover-color);
 	}
 
 	.unselectable {
@@ -58,4 +52,10 @@
 		-ms-user-select: none;
 		user-select: none;
 	}
+
+	.container {
+		position: absolute;
+		height: 0px;
+		z-index: 100;
+	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2e3c4b6e..ecaca41c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -140,11 +140,9 @@
 	}
 
 	#main-nav {
-		color: var(--navigationbar-text-color);
 		background-color: var(--main-navigationbar-color);
-		height: 2.5em;
-		min-height: 2.5em;
-		border-bottom: 0.3em solid black;
+		height: 2em;
+		border-bottom: 0.2em solid black;
 	}
 
 	main {