From d15038912cf8bd05fdbdd5355941b3cdc6118d39 Mon Sep 17 00:00:00 2001
From: zyycn <zyycn@users.noreply.github.com>
Date: Sun, 26 Jul 2026 04:34:57 +0800
Subject: [PATCH] feat(ui): replace product branding icon

Use the new product mark across the favicon, login panel, and sidebar with a consistent dark brand background and cache-busted browser icon.

Co-authored-by: Codex <noreply@openai.com>
---
 frontend/index.html                                |  2 +-
 frontend/public/favicon.svg                        | 14 +++++++-------
 frontend/src/layout/components/AppSidebar.vue      | 10 +++++++---
 frontend/src/styles/tokens.css                     |  1 +
 frontend/src/views/login/components/LoginPanel.vue |  9 +++++++--
 frontend/src/views/login/index.vue                 |  4 ++--
 6 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index e52563499..eb31d792f 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,7 +6,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
     />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg?v=20260726" />
     <title>Codex Proxy RS</title>
   </head>
   <body>
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
index 066717a38..f6c1d326a 100644
--- a/frontend/public/favicon.svg
+++ b/frontend/public/favicon.svg
@@ -1,9 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <rect width="64" height="64" rx="16" fill="#111827"/>
-  <g transform="translate(10 8) scale(1.85)" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3.1-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7S8.22 3.26 10 5.26A8.3 8.3 0 0 1 12 5Z"/>
-    <path d="M8 14v.5"/>
-    <path d="M16 14v.5"/>
-    <path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="48 48 416 416" role="img" aria-labelledby="title">
+  <title id="title">Codex Proxy</title>
+  <rect x="48" y="48" width="416" height="416" rx="88" fill="#1c2a3d" />
+  <g fill="none" stroke="#fff" stroke-linecap="round" stroke-width="36">
+    <path d="M156 307A112 112 0 0 1 307 156" />
+    <path d="M356 205A112 112 0 0 1 205 356" />
   </g>
+  <path d="m407 105-119 153-183 149 124-157Z" fill="#fff" />
 </svg>
diff --git a/frontend/src/layout/components/AppSidebar.vue b/frontend/src/layout/components/AppSidebar.vue
index c0dfcceda..ee438f9f6 100644
--- a/frontend/src/layout/components/AppSidebar.vue
+++ b/frontend/src/layout/components/AppSidebar.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {
   ArrowUpCircle,
-  Cat,
   ChartNoAxesColumn,
   Info,
   KeyRound,
@@ -340,9 +339,14 @@ onBeforeUnmount(() => {
       <BaseMotionIcon
         aria-hidden="true"
         variant="brand"
-        class="inline-flex size-11 items-center justify-center relative -top-0.5 rounded-(--cp-icon-button-radius) bg-(--cp-bg-muted) text-(--cp-text-primary)"
+        class="inline-flex size-11 items-center justify-center relative -top-0.5 rounded-(--cp-icon-button-radius) bg-(--cp-brand-mark-bg)"
       >
-        <Cat :size="27" stroke-width="2" />
+        <img
+          src="/favicon.svg"
+          alt=""
+          class="block size-9 select-none"
+          draggable="false"
+        >
       </BaseMotionIcon>
       <span
         v-show="brandLabelVisible"
diff --git a/frontend/src/styles/tokens.css b/frontend/src/styles/tokens.css
index e9a5e6141..4bbb97528 100644
--- a/frontend/src/styles/tokens.css
+++ b/frontend/src/styles/tokens.css
@@ -8,6 +8,7 @@
   --cp-bg-tertiary: #eef6ff;
   --cp-bg-nav-active: #e9eef5;
   --cp-bg-dark: #111827;
+  --cp-brand-mark-bg: #1c2a3d;
   --cp-white: #ffffff;
   --cp-transparent: #ffffff00;
   --cp-overlay-scrim: #0e17264d;
diff --git a/frontend/src/views/login/components/LoginPanel.vue b/frontend/src/views/login/components/LoginPanel.vue
index 3f7cd7fa4..195d3961e 100644
--- a/frontend/src/views/login/components/LoginPanel.vue
+++ b/frontend/src/views/login/components/LoginPanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ArrowRight, Cat, CircleAlert, Eye, EyeOff, KeyRound, Mail, Moon, Sun } from '@lucide/vue'
+import { ArrowRight, CircleAlert, Eye, EyeOff, KeyRound, Mail, Moon, Sun } from '@lucide/vue'
 import { computed, shallowRef } from 'vue'
 
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -58,7 +58,12 @@ function togglePasswordVisible(): void {
     <header class="flex min-w-0 items-center justify-between gap-4.5 max-[560px]:gap-3.5">
       <div class="flex min-w-0 items-center gap-3">
         <BaseMotionIcon aria-hidden="true" variant="brand" class="login-logo">
-          <Cat :size="20" :stroke-width="2.1" />
+          <img
+            src="/favicon.svg"
+            alt=""
+            class="block size-8 select-none"
+            draggable="false"
+          >
         </BaseMotionIcon>
         <span class="grid min-w-0 gap-1">
           <strong
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index fc1c8c5fc..8c92ced78 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -93,7 +93,7 @@ async function handleSubmit(): Promise<void> {
   --login-form-bg-c: color-mix(in srgb, var(--cp-bg-muted) 78%, var(--cp-info-bg));
   --login-form-shadow: color-mix(in srgb, var(--cp-text-primary) 20%, transparent);
   --login-form-line: color-mix(in srgb, var(--cp-info-border) 54%, transparent);
-  --login-logo-bg: color-mix(in srgb, var(--cp-info-bg) 74%, var(--cp-bg-surface));
+  --login-logo-bg: var(--cp-brand-mark-bg);
   --login-logo-text: var(--cp-accent-primary);
   --login-title: var(--cp-text-primary);
   --login-brand-title: var(--cp-text-strong);
@@ -159,7 +159,7 @@ async function handleSubmit(): Promise<void> {
   --login-form-bg-c: color-mix(in srgb, var(--cp-bg-page) 90%, transparent);
   --login-form-shadow: color-mix(in srgb, var(--cp-bg-dark) 70%, transparent);
   --login-form-line: color-mix(in srgb, var(--cp-info-text) 66%, transparent);
-  --login-logo-bg: color-mix(in srgb, var(--cp-bg-surface) 84%, transparent);
+  --login-logo-bg: var(--cp-brand-mark-bg);
   --login-logo-text: var(--cp-info-text);
   --login-title: var(--cp-text-strong);
   --login-brand-title: var(--cp-white);