From 469b45855135176ea89272e03814823cb0259c55 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Tue, 18 Aug 2026 09:54:22 +0200
Subject: [PATCH] ENH - add transparent VaultX header mark

Replace the framed header glyph with a background-free faceted VaultX mark that echoes the app icon while remaining crisp and transparent in the compact navbar.
---
 .../src/views/apps/CryptoApp.contract.test.ts |  2 +
 frontend/src/views/apps/CryptoApp.vue         | 49 ++++++++++++++-----
 2 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/apps/CryptoApp.contract.test.ts b/frontend/src/views/apps/CryptoApp.contract.test.ts
index b5643c8..83ab2ae 100644
--- a/frontend/src/views/apps/CryptoApp.contract.test.ts
+++ b/frontend/src/views/apps/CryptoApp.contract.test.ts
@@ -65,6 +65,8 @@ describe('VaultX crypto app contracts', () => {
 
   it('uses the compact Flare-style navigation and polished overlay transitions', () => {
     expect(source).toContain('class="vault-navbar"')
+    expect(source).toContain('class="vault-header-logo"')
+    expect(source).not.toContain('.vault-header-brand > i')
     expect(source).toContain(':show-back="Boolean(detail)"')
     expect(source).not.toMatch(/<SkyNavbar[\s\S]*?\slarge(?:\s|>)/)
     expect(source).toContain('class="vault-view"')
diff --git a/frontend/src/views/apps/CryptoApp.vue b/frontend/src/views/apps/CryptoApp.vue
index afc0fc1..4c08c90 100644
--- a/frontend/src/views/apps/CryptoApp.vue
+++ b/frontend/src/views/apps/CryptoApp.vue
@@ -273,7 +273,38 @@ onMounted(() => void crypto.load())
           v-if="!detail && (!authenticated || tab === 'portfolio')"
           class="vault-header-brand"
         >
-          <i><ChartCandlestick :size="16" /></i>
+          <svg class="vault-header-logo" aria-hidden="true" viewBox="0 0 32 32">
+            <defs>
+              <linearGradient id="vault-logo-top" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0" stop-color="#79e8ff" />
+                <stop offset="1" stop-color="#2677ff" />
+              </linearGradient>
+              <linearGradient
+                id="vault-logo-bottom"
+                x1="0"
+                y1="0"
+                x2="1"
+                y2="1"
+              >
+                <stop offset="0" stop-color="#164dce" />
+                <stop offset="1" stop-color="#31d6aa" />
+              </linearGradient>
+            </defs>
+            <path d="M16 2 28 16 16 14 4 16Z" fill="url(#vault-logo-top)" />
+            <path d="m4 16 12-2 12 2-12 14Z" fill="url(#vault-logo-bottom)" />
+            <path
+              d="m16 2 12 14-12 14L4 16Z"
+              fill="none"
+              stroke="#f5cf6a"
+              stroke-width="1.4"
+            />
+            <path
+              d="m16 2v12L4 16m12-2 12 2"
+              fill="none"
+              stroke="rgba(255,255,255,.58)"
+              stroke-width=".8"
+            />
+          </svg>
           <span>{{ t('name') }}</span>
         </span>
         <span v-else-if="detail" class="vault-detail-title">
@@ -1654,16 +1685,12 @@ onMounted(() => void crypto.load())
   gap: 8px;
   align-items: center;
 }
-.vault-header-brand > i {
-  display: grid;
-  place-items: center;
-  width: 25px;
-  height: 25px;
-  color: #07100e;
-  background: linear-gradient(145deg, #9affe4, #5f9dff);
-  border: 1px solid rgba(255, 255, 255, 0.38);
-  border-radius: 8px;
-  box-shadow: 0 7px 18px rgba(101, 251, 210, 0.16);
+.vault-header-logo {
+  width: 27px;
+  height: 27px;
+  flex: 0 0 auto;
+  overflow: visible;
+  filter: drop-shadow(0 4px 6px rgba(49, 214, 170, 0.24));
 }
 .vault-section-title {
   font-size: 17px;