From f243385507fe45ba9765a1560ff142d5f5630411 Mon Sep 17 00:00:00 2001
From: Martin Guillon <dev@akylas.fr>
Date: Thu, 29 Oct 2026 11:02:18 +0100
Subject: [PATCH] fix(cards): make the Android floating buttons round with a
 larger scan icon

The add button is a circle and the scan button a pill (surface container with a 24 icon next
to the 16 label), as the design system says: buttons are fully round.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 app/components/list/CardsList.svelte | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/app/components/list/CardsList.svelte b/app/components/list/CardsList.svelte
index 38a4faf7..d6206b5f 100644
--- a/app/components/list/CardsList.svelte
+++ b/app/components/list/CardsList.svelte
@@ -11,6 +11,7 @@
     import { showError } from '@shared/utils/showError';
     import { onMount } from 'svelte';
     import { Writable, writable } from 'svelte/store';
+    import CardIcon from '~/components/common/CardIcon.svelte';
     import CardListCell from '~/components/list/CardListCell.svelte';
     import { DocFolder, OCRDocument } from '~/models/OCRDocument';
     import {
@@ -471,26 +472,22 @@
     </Template>
 
     <stacklayout bind:this={fabHolder} slot="fab" class="fabHolder" marginBottom={Math.min(60, $windowInset.bottom)} orientation="horizontal">
-        <uibutton class={$hasCamera ? 'small-fab' : 'fab'} horizontalAlignment="center" text="mdi-plus" verticalAlignment="center" on:tap={throttle(() => onAddButton(), 500)} />
+        <uibutton class={$hasCamera ? 'small-fab' : 'fab'} horizontalAlignment="center" shape="round" text="mdi-plus" verticalAlignment="center" on:tap={throttle(() => onAddButton(), 500)} />
         {#if $hasCamera}
-            <uibutton
+            <uisurface
                 backgroundColor={colorPrimaryContainer}
-                borderRadius={18}
-                color={colorOnPrimaryContainer}
-                android:elevation={3}
-                fontSize={15}
-                fontWeight="600"
                 height={56}
+                horizontalAlignment="center"
                 margin={16}
-                padding="0 20"
-                rippleColor={colorPrimaryContainer}
-                {...{ src: appIcon('camera') }}
-                text={lc('scan')}
-                variant="contained"
                 verticalAlignment="center"
                 on:tap={throttle(() => onStartCam(), 500)}
                 on:longPress={() => onStartCam(true)}
-            />
+            >
+                <stacklayout orientation="horizontal" padding="0 24" verticalAlignment="center">
+                    <CardIcon color={colorOnPrimaryContainer} size={24} src={appIcon('camera')} verticalAlignment="center" />
+                    <label color={colorOnPrimaryContainer} fontSize={16} fontWeight="600" marginLeft={8} text={lc('scan')} verticalAlignment="center" />
+                </stacklayout>
+            </uisurface>
         {/if}
     </stacklayout>