fix: update button styles to use ring for better accessibility

This commit is contained in:
2026-02-22 14:12:32 +01:00
parent 0b9d6373bf
commit 96680ff8b5
+9 -7
View File
@@ -914,14 +914,15 @@
<div
class="p-3 border-r border-r-theme-900 flex flex-col items-center gap-2 z-10 bg-black/40 backdrop-blur-sm"
>
<div class="bg-primary-800/80 border border-primary-700/50 rounded-[1.1rem] p-1">
<div class="bg-primary-800/80 ring-1 ring-inset ring-white/15 rounded-[1.1rem] p-1.5">
<img class="pointer-events-none" src={Logo} alt="logo" bind:this={ezppLogo} />
</div>
<Badge class="text-[0.5rem] py-0 px-2">{$launcherVersion || 'dev'}</Badge>
<Button
class="flex size-12 items-center gap-2 border {selectedView === 'home'
? 'bg-primary-300/50 border-primary-300/50'
: 'bg-black/20 border-black/20'} hover:bg-primary-300/50 hover:border-primary-300/50 rounded-[0.85rem] p-3 mt-3"
class="flex size-12 items-center gap-2 ring-1 ring-inset ring-white/15 {selectedView ===
'home'
? 'bg-primary-300/50'
: 'bg-black/20 border-black/20'} hover:bg-primary-300/50 rounded-[0.85rem] p-3 mt-3"
disabled={$launching}
onclick={() => {
if (!$launching) selectedView = 'home';
@@ -930,9 +931,10 @@
<House class="text-theme-200 !size-5" />
</Button>
<Button
class="flex size-12 items-center gap-2 border {selectedView === 'settings'
? 'bg-primary-300/50 border-primary-300/50'
: 'bg-black/20 border-black/20'} hover:bg-primary-300/50 hover:border-primary-300/50 rounded-[0.85rem] p-3 mt-3"
class="flex size-12 items-center gap-2 ring-1 ring-inset ring-white/15 {selectedView ===
'settings'
? 'bg-primary-300/50'
: 'bg-black/20 border-black/20'} hover:bg-primary-300/50 rounded-[0.85rem] p-3 mt-3"
disabled={$launching}
onclick={() => {
if (!$launching) selectedView = 'settings';