Did some color styling to the navbar

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
 				]
 			}
 		}

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();
 

src/lib/components/topBar/DropDownBtn.svelte → 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-->

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"}

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,104 +30,104 @@
 
 <!--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={() => {
 				console.log("Save Project as");
 			}}
 		/>
 
-		<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>

src/lib/components/topBar/TopBarBtn.svelte → 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,31 +31,31 @@
 </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 {
 		-webkit-user-select: none;
 		-ms-user-select: none;
 		user-select: none;
 	}
+
+	.container {
+		position: absolute;
+		height: 0px;
+		z-index: 100;
+	}
 </style>

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 {