fix: update top bar styles

.gitignore

@@ -8,3 +8,4 @@ refs/public/apple-icon.png
 refs/public/placeholder-logo.svg
 refs/public/placeholder-logo.png
 refs/public/placeholder.svg
+web/audit/cdp-audit*.txt

package.json

@@ -9,7 +9,7 @@
     "build": "pnpm --dir web build",
     "format": "pnpm --dir web format",
     "html": "pnpm --dir refs build && node scripts/extract-static.mjs refs/.next/server/app refs-html",
-    "cdp-audit": "pnpm --dir web refs-cdp-audit:responsive"
+    "cdp-audit": "pnpm --dir web refs-cdp-audit:large"
   },
   "keywords": [],
   "author": "Ku6epXBOCTuK",

web/package.json

@@ -14,6 +14,7 @@
 		"format": "prettier --write .",
 		"lint": "eslint .",
 		"refs-cdp-audit": "node scripts/audit-cdp.mjs",
+		"refs-cdp-audit:large": "node scripts/audit-cdp.mjs --viewport 2560x1440",
 		"refs-cdp-audit:responsive": "node scripts/audit-cdp-responsive.mjs",
 		"refs-css-audit": "node scripts/audit-css.mjs",
 		"refs-dom-audit": "node scripts/audit-dom.mjs"

web/src/lib/components/kit/IconButton.svelte

@@ -33,16 +33,15 @@
 
 <style>
 	.icon-btn {
-		display: inline-flex;
+		display: grid;
 		align-items: center;
-		justify-content: center;
-		width: 2rem;
-		height: 2rem;
 		border: 1px solid var(--line);
 		border-radius: var(--radius);
 		background: transparent;
 		color: var(--muted);
 		cursor: pointer;
+		font-size: inherit;
+		line-height: inherit;
 	}
 	.icon-btn:hover:not(:disabled) {
 		color: var(--foreground);
@@ -59,8 +58,6 @@
 		border-color: var(--cyan);
 	}
 	.icon-btn--bare {
-		width: auto;
-		height: auto;
 		padding: 6px;
 		border: 0;
 		border-radius: 0;

web/src/lib/components/kit/StatusDot.svelte

@@ -3,10 +3,9 @@
 <style>
 	.status-dot {
 		display: inline-block;
-		width: 8px;
+		width: 6px;
-		height: 8px;
+		height: 6px;
 		border-radius: 50%;
 		background: var(--success);
-		box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent);
 	}
 </style>

web/src/lib/components/kit/TopBar.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { resolve } from "$app/paths";
+	import { CircleQuestionMark, Moon, Sun } from "@lucide/svelte";
 	import IconButton from "./IconButton.svelte";
 	import StatusDot from "./StatusDot.svelte";
-	import { resolve } from "$app/paths";
-	import { CircleHelp, Moon, Sun } from "@lucide/svelte";
 
 	interface Props {
 		theme: "light" | "dark";
@@ -16,22 +16,24 @@
 	let lang = $state("RU");
 </script>
 
-	<header class="topbar">
+<header class="topbar">
-		<a class="brand" href={resolve("/")}>
+	<a class="brand" href={resolve("/")}>
-			<span class="brand-mark">EP</span>
+		<span class="brand-mark">EP</span>
-			<span>easy-png-tools</span>
+		<span>easy-png-tools</span>
-			{#if crumb}<span class="version">{crumb}</span>{/if}
+		{#if crumb}<span class="version">{crumb}</span>{/if}
-		</a>
+	</a>
-		<nav class="nav">
+	<nav class="nav">
-			<a href={resolve("/preview/demo")}>Workspace</a>
+		<a href={resolve("/preview/demo")}>Workspace</a>
-			<a href={resolve("/preview/list-tools")}>Catalog</a>
+		<a href={resolve("/preview/list-tools")}>Catalog</a>
-			<a href={resolve("/preview/tools/linear-gradient-png")}>Gradient</a>
+		<a href={resolve("/preview/tools/linear-gradient-png")}>Gradient</a>
-			<a href={resolve("/preview/tools/remove-background-png")}>Background remover</a>
+		<a href={resolve("/preview/tools/remove-background-png")}
-		</nav>
+			>Background remover</a
-		<div class="top-actions">
+		>
+	</nav>
+	<div class="top-actions">
 		<span class="status"><StatusDot /> {status}</span>
 		<IconButton
-			icon={CircleHelp}
+			icon={CircleQuestionMark}
 			label="Help"
 			variant="bare"
 			onclick={() => {}}
@@ -61,9 +63,6 @@
 
 <style>
 	.topbar {
-		position: sticky;
-		top: 0;
-		z-index: 20;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
@@ -96,13 +95,13 @@
 	.nav {
 		display: flex;
 		align-items: center;
-		gap: 18px;
+		gap: 22px;
-		margin-left: 24px;
+		margin-right: 28px;
+		margin-left: auto;
 	}
 	.nav a {
 		color: var(--muted);
 		font: 12px var(--font-mono);
-		letter-spacing: 0.04em;
 		text-decoration: none;
 	}
 	.nav a:hover {
@@ -122,7 +121,8 @@
 		letter-spacing: 0.08em;
 	}
 	.lang {
-		display: inline-flex;
+		display: flex;
+		align-items: center;
 		border: 1px solid var(--line);
 		border-radius: var(--radius);
 		overflow: hidden;
@@ -132,17 +132,12 @@
 		background: transparent;
 		color: var(--muted);
 		font: 10px var(--font-mono);
-		letter-spacing: 0.06em;
 		padding: 6px 9px;
 		cursor: pointer;
 	}
-	.lang-btn + .lang-btn {
-		border-left: 1px solid var(--line);
-	}
 	.lang-div {
-		color: var(--muted);
+		color: var(--foreground);
-		font: 10px var(--font-mono);
+		font-family: var(--font-sans);
-		align-self: center;
 	}
 	.lang-btn.active {
 		background: var(--foreground);