aiolabs/bitspire
9
0
Fork 0
Code Issues 52 Pull requests 2 Projects Releases Packages Wiki Activity Actions

fix(access): put End Session ✕ left of Help, solid destructive red

Browse source 
Per on-device review: order the top-left group ✕ then ?, and use the
`destructive` button variant so the exit swatch is a solid, theme-aware
red (--destructive is scoped per colorscheme) rather than a subtle
outline that didn't read as an exit.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018ivBosaWmv8vwFE7ejrdHW
This commit is contained in:
Padreug 2026-08-16 08:47:22 +02:00
commit 4ce68c1301
1 changed files with 13 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

23
apps/machine/src/views/IdleView.vue
View file

@ -181,6 +181,19 @@ function handleCashOut() {
re-lock the moment they're done rather than waiting out the idle timeout
(which would leave the card usable by the next person meanwhile). -->
<div class="absolute top-4 left-4 lg:top-8 lg:left-8 flex items-center gap-2 lg:gap-3">
<!-- End session first (leftmost): a solid `destructive` swatch so the exit
reads as red in every theme (--destructive is theme-scoped). Shown
only while the access gate is engaged. -->
<Button
v-if="atmStore.accessControl.enabled"
variant="destructive"
size="icon"
class="h-14 w-14 lg:h-20 lg:w-20 rounded-full text-2xl lg:text-4xl font-bold"
aria-label="End session"
@click="atmStore.endSession()"
>
✕
</Button>
<Button
variant="outline"
size="icon"
@ -190,16 +203,6 @@ function handleCashOut() {
>
?
</Button>
<Button
v-if="atmStore.accessControl.enabled"
variant="outline"
size="icon"
class="h-14 w-14 lg:h-20 lg:w-20 rounded-full border-2 border-destructive/50 text-2xl lg:text-4xl font-bold text-destructive"
aria-label="End session"
@click="atmStore.endSession()"
>
✕
</Button>
</div>
<!-- Debug toggle (only visible when debug bar is hidden, never in production) -->