FIX - show VaultX logo in market headers

Use the VaultX app mark in crypto detail navbars while retaining each market symbol and name beside it. Keep the coin-specific logo in the detail content where it identifies the selected asset.

frontend/src/views/apps/CryptoApp.contract.test.ts

@@ -92,6 +92,10 @@ 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).toContain(
+      'class="vault-header-logo vault-header-logo--detail"',
+    )
+    expect(source).not.toContain('class="coin-detail-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|>)/)

frontend/src/views/apps/CryptoApp.vue

@@ -415,7 +415,11 @@ onMounted(() => void crypto.load())
           <span>{{ t('name') }}</span>
         </span>
         <span v-else-if="detail" class="vault-detail-title">
-          <CryptoLogo class="coin-detail-logo" :market="detail" />
+          <img
+            class="vault-header-logo vault-header-logo--detail"
+            :src="cryptoHeaderLogo"
+            alt=""
+          />
           <span>
             <b>{{ detail.symbol }}</b>
             <small>{{ detail.name }}</small>
@@ -1918,12 +1922,9 @@ onMounted(() => void crypto.load())
   gap: 8px;
   align-items: center;
 }
-.coin-detail-logo {
-  display: grid;
-  place-items: center;
+.vault-header-logo--detail {
   width: 28px;
   height: 28px;
-  border-radius: 10px;
 }
 .vault-detail-title > span {
   display: grid;