Fixing top bar

src/lib/GlobalCssProperties.json

@@ -95,8 +95,48 @@
 				0.39901960784,
 				0.43823529411
 			],
+			"--engine-ui-underline-color": ["display-p3", 1, 1, 1],
+			"--engine-ui-error-underline-color": [
+				"display-p3",
+				0.82745098039,
+				0.18431372549,
+				0.18431372549
+			],
+			"--engine-ui-input-text-placeholder-color": [
+				"display-p3",
+				0.8,
+				0.8,
+				0.8
+			],
+			"--engine-ui-scrollbar-thumb-background-color": [
+				"display-p3",
+				0.5608,
+				0.498,
+				0.4353
+			],
+			"--engine-ui-scrollbar-thumb-color": [
+				"display-p3",
+				0.7137,
+				0.6941,
+				0.6706
+			],
+			"--engine-ui-text-color": ["display-p3", 1, 1, 1],
+			"--engine-ui-background-color": [
+				"display-p3",
+				0.2862745098,
+				0.34901960784,
+				0.38823529411
+			],
+			"--engine-ui-button-color": [
+				"display-p3",
+				0.2862745098,
+				0.34901960784,
+				0.38823529411
+			],
 			"--settings-danger-button-color": ["srgb", 0.498, 0.0902, 0.0549],
-			"--settings-safe-button-color": ["srgb", 0.3255, 0.498, 0.2667]
+			"--settings-safe-button-color": ["srgb", 0.3255, 0.498, 0.2667],
+			"--dropdown-button-color": ["srgb", 1, 1, 1],
+			"--dropdown-text-color": ["srgb", 0, 0, 0]
 		},
 		"fontSize": {
 			"--sidebar-fontsize": [1, "rem"],
@@ -206,7 +246,40 @@
 					0.13490196078,
 					0.14666666666,
 					0.17019607843
-				]
+				],
+				"--engine-ui-underline-color": ["display-p3", 1, 1, 1],
+				"--engine-ui-error-underline-color": [
+					"display-p3",
+					0.82745098039,
+					0.18431372549,
+					0.18431372549
+				],
+				"--engine-ui-input-text-placeholder-color": [
+					"display-p3",
+					0.7333,
+					0.7333,
+					0.7333
+				],
+				"--engine-ui-scrollbar-thumb-background-color": [
+					"display-p3",
+					0.95,
+					0.95,
+					0.95
+				],
+				"--engine-ui-scrollbar-thumb-color": ["display-p3", 0, 0, 0],
+				"--engine-ui-background-color": [
+					"display-p3",
+					0.08490196078,
+					0.09666666666,
+					0.12019607843
+				],
+				"--engine-ui-button-color": [
+					"display-p3",
+					0.08490196078,
+					0.09666666666,
+					0.12019607843
+				],
+				"--engine-ui-text-color": ["display-p3", 1, 1, 1]
 			}
 		},
 		{

src/lib/classes/styling/ZodSchemas/CSSVariables.ts

@@ -34,8 +34,18 @@ export const ColorVariables = z
 		"--sidebar-text-color": ColorAttribute,
 		"--sidebar-element-color": ColorAttribute,
 		"--sidebar-element-hover-color": ColorAttribute,
+		"--engine-ui-underline-color": ColorAttribute,
+		"--engine-ui-error-underline-color": ColorAttribute,
+		"--engine-ui-input-text-placeholder-color": ColorAttribute,
+		"--engine-ui-scrollbar-thumb-background-color": ColorAttribute,
+		"--engine-ui-scrollbar-thumb-color": ColorAttribute,
+		"--engine-ui-text-color": ColorAttribute,
+		"--engine-ui-background-color": ColorAttribute,
+		"--engine-ui-button-color": ColorAttribute,
 		"--settings-danger-button-color": ColorAttribute,
 		"--settings-safe-button-color": ColorAttribute,
+		"--dropdown-button-color": ColorAttribute,
+		"--dropdown-text-color": ColorAttribute,
 	})
 	.strict();
 

src/lib/components/overlayMenu/elements/Button.svelte

@@ -6,17 +6,23 @@
 	export let icon: ComponentType;
 
 	export let text: string;
+
+	export let backgroundColor: string = "var(--dropdown-button-color)";
+
+	export let buttonColor: string = "var(--dropdown-text-color))";
 </script>
 
-<button on:click={click}>
+<button
+	on:click={click}
+	style="background-color: {backgroundColor}; color: {buttonColor}"
+>
 	<svelte:component this={icon} ariaLabel="" class="icon" tabindex="-1" />
 	<p>{text}</p>
 </button>
 
 <style>
 	button {
 		border: 0;
-		background-color: #fff;
 		display: flex;
 		align-items: center;
 		height: 2em;
@@ -30,6 +36,6 @@
 	}
 
 	button:hover {
-		background-color: #eee;
+		filter: brightness(0.9);
 	}
 </style>

src/lib/components/topBar/DropDownButton.svelte

@@ -12,15 +12,14 @@
 		strokeWidth: "1.5",
 		size: "15",
 		variation: "filled",
-		color: color,
 	};
 	setContext("iconContext", iconContext);
 </script>
 
 <!--Make each dropdown item, into button-->
 
 <button class="dropdown-item" on:click>
-	<svelte:component this={icon}></svelte:component>
+	<svelte:component this={icon} {color}></svelte:component>
 	<div class="align-text">{name}</div>
 </button>
 

src/lib/components/topBar/TopBar.svelte

@@ -21,6 +21,8 @@
 	} from "svelte-google-materialdesign-icons";
 	import SettingsView from "$lib/components/settings/SettingsView.svelte";
 	import { showSettings } from "$lib/components/settings/showSettings";
+	import AboutUi from "./aboutUI/AboutUI.svelte";
+	import { showAboutUI } from "$lib/components/topBar/aboutUI/showAboutUI";
 
 	let projectHandler: typeof ProjectHandler;
 
@@ -41,7 +43,7 @@
 -->
 
 <!--File top bar button-->
-<div>
+<div class="container">
 	<TopBarButton name="File">
 		<DropDownButton
 			icon={Note_add}
@@ -110,7 +112,7 @@
 </div>
 
 <!--Edit top bar button-->
-<div>
+<div class="container">
 	<TopBarButton name="Edit">
 		<DropDownButton
 			icon={Arrow_left}
@@ -144,7 +146,7 @@
 </div>
 
 <!--View top bar button-->
-<div>
+<div class="container">
 	<TopBarButton name="View">
 		<DropDownCheckBox
 			name="Project Panel"
@@ -190,7 +192,7 @@
 </div>
 
 <!--Options top bar button-->
-<div>
+<div class="container">
 	<TopBarButton name="Options">
 		<DropDownCheckBox
 			name="UI cache"
@@ -214,7 +216,7 @@
 			icon={Settings_input_composite}
 			name="Engine Options"
 			on:click={() => {
-				console.log("Engine Options");
+				console.log("Engine options");
 			}}
 		/>
 		<DropDownButton
@@ -228,7 +230,7 @@
 </div>
 
 <!--Help top bar button-->
-<div>
+<div class="container">
 	<TopBarButton name="Help">
 		<DropDownButton
 			icon={Help}
@@ -241,16 +243,18 @@
 			icon={Error}
 			name="About"
 			on:click={() => {
-				console.log("About");
+				$showAboutUI = true;
 			}}
 		/>
 	</TopBarButton>
 </div>
 
+<!-- Add modal component here -->
 <SettingsView />
+<AboutUi />
 
 <style>
-	div {
+	.container {
 		height: 100%;
 		display: block;
 		float: left;

src/lib/components/topBar/aboutUI/AboutUI.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import Modal from "$lib/components/modal/Modal.svelte";
+	import { showAboutUI } from "./showAboutUI";
+</script>
+
+<Modal show={$showAboutUI}>
+	<div>
+		<div class="box">
+			<h1>Ecdar v. 0.1</h1>
+			<p>Made by:</p>
+			<p>&nbsp; 5. Semester, Aalborg University 2023</p>
+			<p>
+				For more information, go to
+				<a href="https://www.ecdar.net/" target="_blank">
+					www.Ecdar.net</a
+				>
+			</p>
+		</div>
+		<button
+			on:click={() => {
+				$showAboutUI = false;
+			}}>Close</button
+		>
+	</div>
+</Modal>
+
+<style>
+	.box {
+		height: 10em;
+		width: 30em;
+		padding-left: 1em;
+		color: var(--text-color);
+	}
+
+	button {
+		margin-left: 30em;
+		margin-bottom: 1em;
+	}
+</style>

src/lib/components/topBar/aboutUI/showAboutUI.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const showAboutUI = writable(false);

src/lib/interfaces/IAboutUI.ts

@@ -0,0 +1,3 @@
+export default interface IAboutUIComponent {
+	showAboutUI: () => void;
+}

src/lib/interfaces/IModalComponent.ts

@@ -0,0 +1,4 @@
+export default interface IModalComponent {
+	closeModal: () => void;
+	showModal: () => void;
+}

tests/lib/components/topBar/aboutUI/about.test.ts

@@ -0,0 +1,20 @@
+import { test, expect } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+	await page.goto("/");
+	await page.click("#start-new-project");
+});
+
+test("Navigating to Help, then About", async ({ page }) => {
+	await page.getByRole("button", { name: "Help", exact: true }).click();
+
+	await page.getByRole("button", { name: "error About" }).click();
+
+	const aboutBox = await page
+		.locator("dialog")
+		.locator(".box")
+		.locator("h1")
+		.innerHTML();
+
+	expect(aboutBox).toBe("Ecdar v. 0.1");
+});

tests/lib/components/topBar/topbar.test.ts

@@ -0,0 +1,29 @@
+import { test, expect } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+	await page.goto("/");
+	await page.click("#start-new-project");
+});
+
+test("Check and uncheck Project Panel checkbox", async ({ page }) => {
+	await page.getByRole("button", { name: "View", exact: true }).click();
+	let color = await page
+		.getByRole("button", { name: "done Project Panel" })
+		.locator("svg")
+		.getAttribute("fill");
+	expect(color).toBe("transparent");
+
+	await page.getByRole("button", { name: "done Project Panel" }).click();
+	color = await page
+		.getByRole("button", { name: "done Project Panel" })
+		.locator("svg")
+		.getAttribute("fill");
+	expect(color).toBe("black");
+
+	await page.getByRole("button", { name: "done Project Panel" }).click();
+	color = await page
+		.getByRole("button", { name: "done Project Panel" })
+		.locator("svg")
+		.getAttribute("fill");
+	expect(color).toBe("transparent");
+});