aiolabs/webapp
8
0
Fork 0
Code Issues 65 Pull requests Projects Releases Packages Wiki Activity Actions

ui(qr-scanner): swap flash-toggle icon from lightning-bolt to flashlight

Browse source 
The control toggles the camera torch, but the inline-SVG bolt read
as a Lightning Network glyph — confusing on a Lightning-payments
app, especially next to the scanner used to validate paid tickets.
Use lucide's Flashlight icon for an unambiguous match to the
control's actual function, and add an aria-label while we're here.
This commit is contained in:
Padreug 2026-05-25 12:07:20 +02:00
commit 464ee642de
1 changed files with 6 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/ui/qr-scanner.vue
View file

@ -43,16 +43,17 @@
</div>
<div class="flex gap-2">
<!-- Flash toggle (if available) -->
<!-- Flash toggle (if available) — flashlight, not lightning-bolt:
this controls the camera torch, not anything Lightning-related,
and the bolt icon was confusing in a Lightning-payments app. -->
<Button
v-if="flashAvailable"
@click="toggleFlash"
variant="outline"
size="sm"
aria-label="Toggle flashlight"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
<Flashlight class="w-4 h-4" />
</Button>
<!-- Close scanner -->
@ -73,7 +74,7 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { Button } from '@/components/ui/button'
import { Loader2 } from 'lucide-vue-next'
import { Loader2, Flashlight } from 'lucide-vue-next'
import { useQRScanner } from '@/composables/useQRScanner'
interface Emits {