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.
This commit is contained in:
smx.pusha
2026-08-18 09:54:22 +02:00
parent fcc5d026f7
commit 469b458551
2 changed files with 40 additions and 11 deletions
@@ -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"')
+38 -11
View File
@@ -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;