lfg2025/archy
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 33 Wiki Activity

Update UI styles and enhance controller navigation functionality

Browse Source 
- Replaced cyan color with yellow in various UI components for a cohesive visual theme.
- Improved focus styles for controller navigation, adding subtle grow and glow effects to sidebar items and containers.
- Enhanced controller navigation logic to support direct focus on app containers in the Marketplace and My Apps sections.
- Introduced wheel scrolling support for better navigation experience within scrollable areas.
- Removed unused audio tone function from useLoginSounds.ts to streamline code.
This commit is contained in:
Dorian
2026-02-17 20:40:26 +00:00
parent c72b97e940
commit 5a04875dcc
12 changed files with 109 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
neode-ui/src/views/Web5.vue
View File

@@ -10,7 +10,7 @@
<div class="glass-card p-6 mb-6">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
<!-- Networking Profits -->
<div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div class="flex items-center gap-3 min-w-0">
<div class="relative shrink-0">
<span class="text-2xl text-orange-500 font-bold">₿</span>
@@ -23,7 +23,7 @@
</div>
<!-- DID Status -->
<div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div class="flex items-center gap-3 min-w-0">
<div class="relative shrink-0">
<div class="w-3 h-3 rounded-full" :class="didStatus === 'active' ? 'bg-green-400' : 'bg-yellow-400'"></div>
@@ -44,7 +44,7 @@
</div>
<!-- Wallet Connection -->
<div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div class="flex items-center gap-3 min-w-0">
<div class="relative shrink-0">
<div class="w-3 h-3 rounded-full" :class="walletConnected ? 'bg-green-400' : 'bg-red-400'"></div>
@@ -65,7 +65,7 @@
</div>
<!-- Nostr Relay Status -->
<div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div class="flex items-center gap-3 min-w-0">
<div class="relative shrink-0">
<div class="w-3 h-3 rounded-full" :class="nostrRelaysConnected > 0 ? 'bg-green-400' : 'bg-red-400'"></div>
@@ -85,7 +85,7 @@
</div>
<!-- Connected Nodes -->
<div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div class="flex items-center gap-3 min-w-0">
<div class="relative shrink-0">
<div class="w-3 h-3 rounded-full" :class="connectedNodesCount > 0 ? 'bg-green-400' : 'bg-amber-400'"></div>
@@ -159,7 +159,7 @@
<!-- Core Services Overview Cards -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<!-- Bitcoin Domain Name Portfolio -->
<div class="glass-card p-6 flex flex-col h-full min-h-0">
<div data-controller-container tabindex="0" class="glass-card p-6 flex flex-col h-full min-h-0">
<div class="flex items-start gap-4 mb-4 shrink-0">
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -210,7 +210,7 @@
</div>
<!-- Web5 Wallet -->
<div class="glass-card p-6 flex flex-col h-full min-h-0">
<div data-controller-container tabindex="0" class="glass-card p-6 flex flex-col h-full min-h-0">
<div class="flex items-start gap-4 mb-4 shrink-0">
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -259,7 +259,7 @@
</div>
<!-- Nostr Relays -->
<div class="glass-card p-6 flex flex-col h-full min-h-0">
<div data-controller-container tabindex="0" class="glass-card p-6 flex flex-col h-full min-h-0">
<div class="flex items-start gap-4 mb-4 shrink-0">
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -310,7 +310,7 @@
</div>
<!-- Connected Nodes (P2P over Tor) -->
<div ref="nodesContainerRef" class="glass-card p-6 lg:col-span-3 scroll-mt-24">
<div ref="nodesContainerRef" data-controller-container tabindex="0" class="glass-card p-6 lg:col-span-3 scroll-mt-24">
<div class="flex items-start gap-4 mb-4">
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">