hernani/koopa-admin-log
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

landings: distinct Chrome / Firefox / Edge / Brave browser marks

Browse source 
Wallet hub rows on bank, exchange, and merchant landings used vague mono
icons that were hard to tell apart.

Replace them with multi-colour brand-style marks for Chrome, Firefox, Edge,
and Brave. Hub label becomes “Web browsers (experimental)”.

Also drop the circled “①” prefix from the shop pay popup “Wallet payment”
label — leftover copy-paste artefact from an earlier draft, not intentional
numbering.
This commit is contained in:
Hernâni Marques 2026-07-10 20:25:40 +02:00
parent 7440bc68b0
commit c7f86dd3da
No known key found for this signature in database
5 changed files with 118 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

59
configs/exchange-landing/index.html
View file

@ -118,16 +118,17 @@
font-weight: 600; font-size: 0.82rem; gap: 0.5rem;
}
.app-ico { width: 1.15rem; height: 1.15rem; flex-shrink: 0; display: block; }
.app-ico path, .app-ico circle, .app-ico rect { fill: currentColor; }
.app-ico:not(.browser-ico) path,
.app-ico:not(.browser-ico) circle,
.app-ico:not(.browser-ico) rect { fill: currentColor; }
.app-ico.stroke-ico path, .app-ico.stroke-ico circle, .app-ico.stroke-ico rect {
fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.app-btn:not(.ios):not(.hub) .app-ico { color: #f0c86a; }
.app-btn.ios .app-ico { color: #5eead4; }
.hub-icons { display: inline-flex; align-items: center; gap: 0.35rem; }
.hub-icons .app-ico { width: 1.05rem; height: 1.05rem; }
.hub-icons .app-ico.gold { color: #f0c86a; }
.hub-icons .app-ico.blue { color: #3ecfbf; }
.hub-icons { display: inline-flex; align-items: center; gap: 0.4rem; }
.hub-icons .app-ico { width: 1.25rem; height: 1.25rem; }
.hub-icons .browser-ico { border-radius: 3px; flex-shrink: 0; }
.step-tagline .app-ico {
width: 1rem; height: 1rem; display: inline-block; vertical-align: -0.15em; margin: 0 0.12em;
}
@ -234,27 +235,41 @@
<svg class="app-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M16.7 12.6c0-2.1 1.7-3.1 1.8-3.2-1-1.4-2.5-1.6-3-1.7-1.3-.1-2.5.8-3.1.8s-1.6-.7-2.7-.7c-1.4 0-2.7.8-3.4 2.1-1.5 2.5-.4 6.3 1 8.3.7 1 1.5 2.1 2.6 2 1-.1 1.5-.7 2.8-.7s1.7.7 2.8.7 1.9-1 2.6-2c.8-1.1 1.1-2.2 1.1-2.3-.1 0-2.2-.8-2.2-3.3zm-2-6.2c.6-.7 1-1.7.9-2.7-1 .1-2.1.6-2.8 1.4-.6.7-1.1 1.7-.9 2.6 1 .1 2-.5 2.8-1.3z"/></svg>
App Store
</a>
<a class="app-btn hub" href="https://wallet.taler.net/" target="_blank" rel="noopener noreferrer" aria-label="Browser platforms (experimental)">
<span class="hub-icons" aria-hidden="true">
<svg class="app-ico gold" viewBox="0 0 24 24" role="img" aria-label="Chrome">
<circle cx="12" cy="12" r="10" opacity="0.22"/>
<path d="M12 2a10 10 0 0 1 8.66 5H12V2z" opacity="0.95"/>
<path d="M20.66 7A10 10 0 0 1 12 22l5-8.66H12L20.66 7z" opacity="0.55"/>
<path d="M12 22A10 10 0 0 1 3.34 7H12l-5 8.66L12 22z" opacity="0.75"/>
<circle cx="12" cy="12" r="3.4"/>
<a class="app-btn hub" href="https://wallet.taler.net/" target="_blank" rel="noopener noreferrer" aria-label="Web browsers (experimental): Chrome, Firefox, Edge, Brave">
<span class="hub-icons" aria-hidden="true" title="Chrome · Firefox · Edge · Brave">
<svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Chrome">
<circle cx="12" cy="12" r="10" fill="#DEE1E6"/>
<path fill="#EA4335" d="M12 2a10 10 0 0 1 8.66 5H12a4 4 0 0 0-3.46 2L5.1 4.1A10 10 0 0 1 12 2z"/>
<path fill="#FBBC04" d="M20.66 7A10 10 0 0 1 12 22l3.46-6A4 4 0 0 0 12 8h8.66z"/>
<path fill="#34A853" d="M5.1 4.1 8.54 9A4 4 0 0 0 12 16l-3.46 6A10 10 0 0 1 5.1 4.1z"/>
<circle cx="12" cy="12" r="4" fill="#fff"/>
<circle cx="12" cy="12" r="3.1" fill="#4285F4"/>
</svg>
<svg class="app-ico blue" viewBox="0 0 24 24" role="img" aria-label="Firefox">
<circle cx="12" cy="13" r="6.2" opacity="0.35"/>
<path d="M12 4.2c1.6 0 2.9.7 3.7 1.6.6-.9 1.6-1.4 2.7-1.3-.2 1.6-.9 2.8-1.9 3.6 1.4 1.3 2.3 3.1 2.3 5.1 0 4.1-3.4 7.3-7.8 7.3S3.2 17.3 3.2 13.2c0-2.3 1-4.3 2.7-5.6C5 6.5 4.4 5.1 4.5 3.5c1.1-.1 2.1.5 2.7 1.4C8.1 4.8 9.6 4.2 12 4.2z"/>
<path d="M9.2 11.2c.9-.6 1.8-.9 2.8-.9 1.2 0 2.3.4 3.1 1.1" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" opacity="0.5"/>
<svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Firefox">
<circle cx="12" cy="12.2" r="8.2" fill="#9059FF"/>
<path fill="#FF7139" d="M20.2 9.2c-.2-1.4-1.1-2.6-2.2-3.4.5 1.1.6 2.3.3 3.4-.9-1.6-2.5-2.6-4.4-2.6-1.3 0-2.5.4-3.4 1.1C9.3 5.4 10.9 3.8 13 3.2c-2.5.1-4.7 1.4-6.1 3.4C5.3 8.2 4.6 10.2 4.8 12.3c.3 3.9 3.5 7 7.4 7.1 3.6.1 6.7-2.2 7.7-5.5.4-1.4.4-2.9.3-4.7z"/>
<path fill="#FFD567" d="M12.1 9.4c1.6 0 2.9.9 3.5 2.2-.7-.4-1.5-.6-2.4-.6-2.2 0-4 1.6-4.2 3.7-.5-.8-.7-1.8-.6-2.8.4-1.5 1.8-2.5 3.7-2.5z"/>
<circle cx="12.2" cy="13.4" r="2.35" fill="#20123A"/>
</svg>
<svg class="app-ico gold" viewBox="0 0 24 24" role="img" aria-label="Safari">
<circle cx="12" cy="12" r="9.2" fill="none" stroke="currentColor" stroke-width="1.7"/>
<path d="M14.8 9.2 13 13l-3.8 1.8L11 11l3.8-1.8z"/>
<path d="M12 5.2v1.4M12 17.4v1.4M5.2 12h1.4M17.4 12h1.4" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" opacity="0.55"/>
<svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Edge">
<defs>
<linearGradient id="edge-g-ex" x1="4" y1="4" x2="20" y2="20" gradientUnits="userSpaceOnUse">
<stop stop-color="#0C59A4"/>
<stop offset="0.55" stop-color="#1B9DE2"/>
<stop offset="1" stop-color="#36C5F0"/>
</linearGradient>
</defs>
<circle cx="12" cy="12" r="10" fill="url(#edge-g-ex)"/>
<path fill="#fff" d="M6.2 14.6c.6 3.1 3.3 5.4 6.6 5.4 3.7 0 6.7-2.7 7.1-6.2-1.4 1.7-3.6 2.7-6 2.7-1.5 0-2.9-.4-4-1.2.6.1 1.2.2 1.8.2 3.4 0 5.9-1.9 5.9-4.6 0-.7-.2-1.3-.5-1.9-1.4-2.5-4.3-3.6-7.2-2.7C7.1 7.2 5.3 9.6 5.3 12.3c0 .8.2 1.6.5 2.3h.4z"/>
<path fill="#9CE4FA" opacity="0.9" d="M12.8 8.1c1.9 0 3.5 1.1 3.5 2.8 0 1.9-1.8 3.2-4.4 3.2-1.4 0-2.6-.4-3.5-1 1.5 2.1 4.1 3.2 6.7 2.8 2.2-.3 3.9-1.9 4.4-4-1.1 1.1-2.7 1.7-4.4 1.7-1.6 0-2.9-.7-2.9-1.9 0-1.1 1-1.9 2.5-2.1.4-.1.7-.3.9-.5-.8-.6-1.7-.9-2.8-.9z"/>
</svg>
<svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Brave">
<path fill="#FB542B" d="M12 2.2 4.8 5.1v5.6c0 5.1 3.4 9.8 7.2 11.1 3.8-1.3 7.2-6 7.2-11.1V5.1L12 2.2z"/>
<path fill="#fff" d="M12 5.1 8.1 6.7l.7 1.5L7.2 10l1.5.9L7.6 13.2l2.2.4L12 18.2l2.2-4.6 2.2-.4-1.1-2.3 1.5-.9-1.6-1.8.7-1.5L12 5.1z"/>
<path fill="#FB542B" d="M12 7.2 10.3 8l.5 1.1h2.4l.5-1.1L12 7.2zm-1.6 3.1L9.2 11.6l.9.5.4-1.8h-.1zm3.2 0h-.1l.4 1.8.9-.5-1.2-1.3zM10.4 13l-.5 1.1L12 16.1l2.1-2-.5-1.1h-3.2z"/>
</svg>
</span>
Browser platforms (experimental)
Web browsers (experimental)
</a>
</div>
</div>