plum-e2e 1.2.4 → 1.3.1

package/frontend/src/lib/components/icons/BrowserIcon.svelte

@@ -0,0 +1,75 @@
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+ -->
+
+<script>
+	export let browser = 'chromium';
+	export let size = 11;
+</script>
+
+{#if browser === 'firefox'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<path d="M12 2c0 4.5-5 7-5 12a5 5 0 0 0 10 0c0-5-5-7.5-5-12z" />
+		<path d="M12 9c0 2.5-2.5 4-2.5 7a2.5 2.5 0 0 0 5 0c0-3-2.5-4.5-2.5-7z" />
+	</svg>
+{:else if browser === 'webkit'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<circle cx="12" cy="12" r="10" />
+		<polygon points="12,5.5 14.5,12 12,10.5 9.5,12" fill="currentColor" stroke="none" />
+		<polygon
+			points="12,18.5 9.5,12 12,13.5 14.5,12"
+			fill="currentColor"
+			stroke="none"
+			opacity="0.35"
+		/>
+	</svg>
+{:else}
+	<!-- chromium -->
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<circle cx="12" cy="12" r="10" />
+		<circle cx="12" cy="12" r="4" />
+		<line x1="21.17" y1="8" x2="12" y2="8" />
+		<line x1="3.95" y1="6.06" x2="8.54" y2="14" />
+		<line x1="10.88" y1="21.94" x2="15.46" y2="14" />
+	</svg>
+{/if}

package/frontend/src/lib/components/layout/Nav.svelte

@@ -17,7 +17,6 @@
 
 <script>
 	import { page } from '$app/stores';
-	import { theme } from '$lib/stores/theme';
 	import { slide } from 'svelte/transition';
 
 	let menuOpen = false;
@@ -25,14 +24,9 @@
 	const links = [
 		{ href: '/', label: 'Run Tests' },
 		{ href: '/reports', label: 'Reports' },
-		{ href: '/scheduled-tests', label: 'Scheduled' },
-		{ href: '/settings', label: 'Settings' }
+		{ href: '/scheduled-tests', label: 'Scheduled' }
 	];
 
-	function toggleTheme() {
-		theme.update((t) => (t === 'light' ? 'dark' : 'light'));
-	}
-
 	function closeMenu() {
 		menuOpen = false;
 	}
@@ -53,43 +47,29 @@
 		</div>
 
 		<div class="actions">
-			<button class="theme-btn" on:click={toggleTheme} aria-label="Toggle theme">
-				{#if $theme === 'light'}
-					<svg
-						width="15"
-						height="15"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					>
-						<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-					</svg>
-				{:else}
-					<svg
-						width="15"
-						height="15"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					>
-						<circle cx="12" cy="12" r="5" />
-						<line x1="12" y1="1" x2="12" y2="3" />
-						<line x1="12" y1="21" x2="12" y2="23" />
-						<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-						<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-						<line x1="1" y1="12" x2="3" y2="12" />
-						<line x1="21" y1="12" x2="23" y2="12" />
-						<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-						<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-					</svg>
-				{/if}
-			</button>
+			<a
+				href="/settings"
+				class="settings-btn"
+				class:active={$page.url.pathname === '/settings'}
+				aria-label="Settings"
+				title="Settings"
+			>
+				<svg
+					width="16"
+					height="16"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<circle cx="12" cy="12" r="3" />
+					<path
+						d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
+					/>
+				</svg>
+			</a>
 
 			<button
 				class="hamburger"
@@ -116,6 +96,14 @@
 					{link.label}
 				</a>
 			{/each}
+			<a
+				href="/settings"
+				class="mobile-link"
+				class:active={$page.url.pathname === '/settings'}
+				on:click={closeMenu}
+			>
+				Settings
+			</a>
 		</div>
 	{/if}
 </nav>
@@ -199,7 +187,8 @@
 		margin-left: auto;
 	}
 
-	.theme-btn {
+	/* Settings gear icon */
+	.settings-btn {
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -209,19 +198,25 @@
 		border: 1px solid var(--border);
 		background: transparent;
 		color: var(--text-muted);
-		cursor: pointer;
+		text-decoration: none;
 		transition:
 			background var(--duration-fast),
 			color var(--duration-fast),
 			border-color var(--duration-fast);
 	}
 
-	.theme-btn:hover {
+	.settings-btn:hover {
 		background: var(--bg-subtle);
 		color: var(--text);
 		border-color: var(--text-muted);
 	}
 
+	.settings-btn.active {
+		background: var(--accent-soft);
+		color: var(--accent);
+		border-color: var(--accent);
+	}
+
 	/* Hamburger */
 	.hamburger {
 		display: none;