Fix storage provider buttons visibility with colored borders

The storage option buttons were nearly invisible due to low contrast
between bg-dark-600 buttons and bg-dark-700 background. Added distinct
colored borders (blue/green/purple) and darker backgrounds to make
the Pinata, web3.storage, and Local Storage options clearly visible.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
gilesb
2026-01-10 00:04:56 +00:00
parent cf94600d63
commit 70cde17fef

View File

@@ -3292,17 +3292,17 @@ async def ui_storage_page(username: str, storages: list, request: Request) -> HT
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
<button onclick="showAddForm('pinata')"
class="p-4 bg-dark-600 hover:bg-dark-500 border border-dark-500 hover:border-blue-500 rounded-lg text-left transition-colors">
class="p-4 bg-dark-800 hover:bg-dark-600 border-2 border-blue-600 hover:border-blue-400 rounded-lg text-left transition-colors">
<div class="font-semibold text-white">Pinata</div>
<div class="text-sm text-gray-400">IPFS pinning service</div>
</button>
<button onclick="showAddForm('web3storage')"
class="p-4 bg-dark-600 hover:bg-dark-500 border border-dark-500 hover:border-blue-500 rounded-lg text-left transition-colors">
class="p-4 bg-dark-800 hover:bg-dark-600 border-2 border-green-600 hover:border-green-400 rounded-lg text-left transition-colors">
<div class="font-semibold text-white">web3.storage</div>
<div class="text-sm text-gray-400">IPFS + Filecoin</div>
</button>
<button onclick="showAddForm('local')"
class="p-4 bg-dark-600 hover:bg-dark-500 border border-dark-500 hover:border-blue-500 rounded-lg text-left transition-colors">
class="p-4 bg-dark-800 hover:bg-dark-600 border-2 border-purple-600 hover:border-purple-400 rounded-lg text-left transition-colors">
<div class="font-semibold text-white">Local Storage</div>
<div class="text-sm text-gray-400">Your own disk</div>
</button>