From 48b65f11403c743a263ba0d6aa649984b4eb44b0 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Wed, 9 Sep 2026 13:44:02 +0200
Subject: [PATCH] Replace header/footer lock badge with the real Osias brand
 mark
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The nav and footer logo were still using the padlock icon in a
bordered badge div — a placeholder from before the brand mark existed.
Swapped in PauseMarkIcon (solid-fill, matches the extension icon and
favicon) and dropped the badge wrapper entirely; the mark sits directly
next to the wordmark now, same as the extension's own toolbar icon.
LockIcon itself is untouched — it still depicts the actual lock
feature in "How it works" and the hero demo card, which is correct.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HoMzqFw3d93hG6c9xB4thU
---
 src/components/SiteFooter.tsx |  6 ++----
 src/components/SiteHeader.tsx |  6 ++----
 src/components/icons.tsx      | 12 ++++++++++++
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/SiteFooter.tsx b/src/components/SiteFooter.tsx
index 4256429..743e98b 100644
--- a/src/components/SiteFooter.tsx
+++ b/src/components/SiteFooter.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { LockIcon } from "./icons";
+import { PauseMarkIcon } from "./icons";
 import { LINKS } from "@/lib/links";
 
 export function SiteFooter() {
@@ -8,9 +8,7 @@ export function SiteFooter() {
       <div className="mx-auto flex max-w-[1180px] flex-col gap-10 px-8 py-14 sm:flex-row sm:items-start sm:justify-between sm:px-16">
         <div className="flex max-w-[340px] flex-col gap-3">
           <Link href="/" className="flex items-center gap-2.5">
-            <span className="flex h-[26px] w-[26px] items-center justify-center rounded-md border border-white/10 bg-white/6">
-              <LockIcon className="h-[13px] w-[13px] text-accent" />
-            </span>
+            <PauseMarkIcon className="h-[19px] w-[19px] text-accent" />
             <span className="font-display text-base font-medium text-cream">Osias</span>
           </Link>
           <p className="text-[13px] leading-relaxed text-muted-2">
diff --git a/src/components/SiteHeader.tsx b/src/components/SiteHeader.tsx
index 31f8e88..98da30f 100644
--- a/src/components/SiteHeader.tsx
+++ b/src/components/SiteHeader.tsx
@@ -1,14 +1,12 @@
 import Link from "next/link";
-import { LockIcon } from "./icons";
+import { PauseMarkIcon } from "./icons";
 import { LINKS } from "@/lib/links";
 
 export function SiteHeader() {
   return (
     <header className="flex items-center justify-between px-8 py-7 border-b border-white/7 sm:px-16">
       <Link href="/" className="flex items-center gap-2.5">
-        <span className="flex h-[30px] w-[30px] items-center justify-center rounded-lg border border-white/10 bg-white/6">
-          <LockIcon className="h-[15px] w-[15px] text-accent" />
-        </span>
+        <PauseMarkIcon className="h-[22px] w-[22px] text-accent" />
         <span className="font-display text-xl font-medium text-cream">Osias</span>
       </Link>
       <nav className="hidden items-center gap-9 text-sm sm:flex">
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index d5b7c95..d05f298 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -12,6 +12,18 @@ const stroke = {
   strokeLinejoin: "round" as const,
 };
 
+// The Osias brand mark — two uneven bars, a paused instrument with a quieter
+// second reading as a frozen price candle. Solid fill (not the stroke system
+// above) since this is the logo, not a UI icon — matches copilot/public/icon.
+export function PauseMarkIcon({ className }: IconProps) {
+  return (
+    <svg viewBox="0 0 64 64" className={className} fill="currentColor">
+      <rect x="18" y="15" width="10" height="34" rx="5" />
+      <rect x="36" y="19" width="10" height="26" rx="5" />
+    </svg>
+  );
+}
+
 export function LockIcon({ className }: IconProps) {
   return (
     <svg viewBox="0 0 24 24" className={className} {...stroke} strokeWidth={2}>