@pi-spi/app 1.6.0 → 2.1.0

package/src/modules/transactions/presentation/pages/transaction_rtp/transaction_rtp_page_actions_reject.tsx

@@ -1,19 +1,18 @@
-import { MaterialIcons } from '@expo/vector-icons';
 import { useState } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { ScrollView, StyleSheet, Text } from 'react-native';
 
 import { useBloc } from '../../../../../core/bloc_react';
 import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, useTheme } from '../../../../../core/theme';
 import type { AppLocalizations } from '../../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { ElevatedButton } from '../../../../../shared/material/buttons';
 import { formatMontant } from '../../../../../shared/widgets/amount_widget';
+import { SelectionBoutons, SelectionChoix, SelectionSheet } from '../../../../../shared/widgets/selection';
 import type { Transaction } from '../../../domain/models/transaction';
 import { TransactionRejectReason } from '../../../domain/models/transaction_reject_reason';
 import { TransactionRtpBloc } from '../../bloc/transaction_rtp/transaction_rtp_bloc';
 import { TransactionRtpRejectEvent } from '../../bloc/transaction_rtp/transaction_rtp_event';
-import { SheetBox } from '../transaction_details/sheet_box';
 
 /** Textes des raisons de rejet */
 function raison(motif: TransactionRejectReason, traductions: AppLocalizations): string {
@@ -43,52 +42,52 @@ export function TransactionRtpPageActionsReject() {
   const tx = (bloc.state as unknown as { transaction: Transaction }).transaction;
 
   return (
-    <SheetBox>
-      <Text style={theme.textTheme.headlineLarge}>{traductions.transactionRtpRejectTitle(tx.clientNom)}</Text>
-      <View style={styles.gap12} />
-      <Text style={theme.textTheme.bodySmall}>
-        {traductions.transactionRtpRejectSubtitle(formatMontant(tx.montant, traductions.localeName), tx.clientNom)}
-      </Text>
-      <View style={styles.gap20} />
-      {/* Raisons du rejet */}
-      {TransactionRejectReason.values()
-        .filter((motif) => motif !== TransactionRejectReason.autre)
-        .map((motif) => (
-          <View key={motif} style={styles.chipRow}>
-            <Pressable
-              accessibilityRole="button"
-              onPress={() => setReason(motif)}
-              style={[styles.chip, { backgroundColor: theme.secondaryHeaderColor }]}
-            >
-              {reason === motif && <MaterialIcons name="check" size={18} color={theme.colorScheme.onSurface} style={styles.check} />}
-              <Text style={theme.textTheme.bodyMedium}>{raison(motif, traductions)}</Text>
-            </Pressable>
-          </View>
-        ))}
-      <View style={styles.gap10} />
-      <ElevatedButton
-        style={styles.button}
-        onPress={
-          reason != null
-            ? () => {
-                AppRouter.pop(router);
-                bloc.add(new TransactionRtpRejectEvent(tx, reason));
-              }
-            : undefined
-        }
-      >
-        {traductions.btnTextReject}
-      </ElevatedButton>
-    </SheetBox>
+    <SelectionSheet
+      titre={traductions.transactionRtpRejectTitle(tx.clientNom)}
+      entete={
+        <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>
+          {traductions.transactionRtpRejectSubtitle(formatMontant(tx.montant, traductions.localeName), tx.clientNom)}
+        </Text>
+      }
+      contenu={
+        <>
+          {/* Raisons du rejet */}
+          <ScrollView bounces={false} style={styles.defile} contentContainerStyle={styles.content}>
+            {TransactionRejectReason.values()
+              .filter((motif) => motif !== TransactionRejectReason.autre)
+              .map((motif) => (
+                <SelectionChoix
+                  key={motif}
+                  texte={raison(motif, traductions)}
+                  choisi={reason === motif}
+                  onPress={() => setReason(motif)}
+                />
+              ))}
+          </ScrollView>
+          <SelectionBoutons
+            boutons={[
+              <ElevatedButton
+                key="rejeter"
+                onPress={
+                  reason != null
+                    ? () => {
+                        AppRouter.pop(router);
+                        bloc.add(new TransactionRtpRejectEvent(tx, reason));
+                      }
+                    : undefined
+                }
+              >
+                {traductions.btnTextReject}
+              </ElevatedButton>,
+            ]}
+          />
+        </>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  gap10: { height: 10 },
-  gap12: { height: 12 },
-  gap20: { height: 20 },
-  chipRow: { paddingVertical: 5, alignItems: 'flex-start' },
-  chip: { flexDirection: 'row', alignItems: 'center', borderRadius: 8, paddingHorizontal: 12, minHeight: 32 },
-  check: { marginRight: 8 },
-  button: { height: 56 },
+  defile: { flexShrink: 1 },
+  content: { paddingHorizontal: 20, paddingTop: 4, paddingBottom: 16 },
 });

package/src/modules/transactions/presentation/pages/transaction_search/transaction_search_page_filters.tsx

@@ -120,7 +120,7 @@ export function TransactionSearchPageFilters() {
 /** Titre d'une section de filtres */
 function SectionTitle({ label }: { label: string }) {
   const theme = useTheme();
-  return <Text style={[theme.textTheme.displayMedium, styles.sectionTitle]}>{label.toUpperCase()}</Text>;
+  return <Text style={[theme.textTheme.displayMedium, styles.sectionTitle, { color: Themer.neural03Color }]}>{label.toUpperCase()}</Text>;
 }
 
 /** Icône dans un carré arrondi */
@@ -162,8 +162,8 @@ function FiltersDates({
         {/* Teinté quand le filtre est actif */}
         <IconBox
           name="calendar-month"
-          color={estDefinie ? Themer.primaryDark : Themer.neural04Color}
-          backgroundColor={estDefinie ? 'rgba(242,169,0,0.15)' : theme.colorScheme.surface}
+          color={estDefinie ? theme.primaryColorDark : Themer.neural04Color}
+          backgroundColor={estDefinie ? theme.colorScheme.secondary : theme.colorScheme.surface}
         />
         {/* La plage choisie, sinon l'invitation à la choisir */}
         <Text style={[theme.textTheme.headlineSmall, styles.label15, styles.texts]}>
@@ -254,7 +254,7 @@ const styles = StyleSheet.create({
   separateur: { height: StyleSheet.hairlineWidth },
   separateurIndent: { marginLeft: 76, marginRight: 16 },
   content: { paddingHorizontal: 16, paddingTop: 24, paddingBottom: 16 },
-  sectionTitle: { color: Themer.neural03Color, letterSpacing: 0.6, marginLeft: 4, marginBottom: 10 },
+  sectionTitle: { letterSpacing: 0.6, marginLeft: 4, marginBottom: 10 },
   tile: { flexDirection: 'row', alignItems: 'center', paddingLeft: 16, paddingRight: 8, paddingVertical: 10 },
   icon: { width: 44, height: 44, borderRadius: 14, alignItems: 'center', justifyContent: 'center' },
   texts: { flex: 1, marginHorizontal: 16 },

package/src/modules/transactions/presentation/pages/transaction_split/transaction_split_page_repartition.tsx

@@ -61,8 +61,8 @@ export function TransactionSplitPageRepartition({ transaction, contacts }: { tra
             {/* Par montant */}
             <TextButton onPress={() => undefined}>
               <View style={styles.row}>
-                <Text style={[theme.textTheme.bodySmall, { color: Themer.primaryDark }]}>{traductions.transactionSplitRepartitionParMontant}</Text>
-                <MaterialIcons name="keyboard-arrow-down" size={24} color={Themer.primaryDark} />
+                <Text style={[theme.textTheme.bodySmall, { color: theme.primaryColorDark }]}>{traductions.transactionSplitRepartitionParMontant}</Text>
+                <MaterialIcons name="keyboard-arrow-down" size={24} color={theme.primaryColorDark} />
               </View>
             </TextButton>
           </View>

package/src/pi_spi_sdk_entry.tsx

@@ -179,9 +179,16 @@ function SdkShell({ config, booted }: { config: PiSpiSdkConfig; booted: Booted }
   // comme le `buildWhen` du BlocBuilder<ConfigBloc> de Flutter.
   const configState = useBlocBuilder(
     configBloc,
-    (_previous, current) => current instanceof ConfigLoadedState && current.updatedKey === ConfigKey.preferedTheme,
+    (_previous, current) =>
+      current instanceof ConfigLoadedState &&
+      (current.updatedKey === ConfigKey.preferedTheme || current.updatedKey === ConfigKey.preferedAccent),
   );
-  const theme = Themer.get(configState.configParams.params[ConfigKey.preferedTheme], systemScheme);
+  const params = configState.configParams.params;
+  // Thème (système, clair ou sombre) teinté par la couleur d'accentuation ;
+  // « Système » suit le téléphone en direct (useColorScheme)
+  const theme = Themer.get(params[ConfigKey.preferedTheme], params[ConfigKey.preferedAccent], systemScheme);
+  // Couleurs neutres (Themer.neural0x) adaptées au thème affiché
+  Themer.suivreLuminosite(theme.brightness);
   const navigationTheme = useMemo(() => toNavigationTheme(theme), [theme]);
 
   return (

package/src/shared/widgets/confirm_action_sheet_widget.tsx

@@ -1,12 +1,15 @@
-import { ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { AppRouter, useAppRouter } from '../../core/router';
 import { useTheme } from '../../core/theme';
 import { useAppLocalizations } from '../../l10n/localizations';
 import { ElevatedButton, FilledTonalButton } from '../material/buttons';
+import { SelectionBoutons, SelectionSheet } from './selection';
 
-/** Feuille de confirmation : titre, texte, et boutons Annuler / Confirmer (retournent `false` / `true`). */
+/**
+ * Feuille de confirmation : [title] et [subtitle] centrés, puis Annuler et
+ * Confirmer fixés en bas (retournent `false` / `true` par défaut).
+ */
 export function ConfirmActionSheetWidget({
   title,
   subtitle,
@@ -25,44 +28,37 @@ export function ConfirmActionSheetWidget({
   const traductions = useAppLocalizations();
   const theme = useTheme();
   const router = useAppRouter();
-  const insets = useSafeAreaInsets();
-  const { height } = useWindowDimensions();
 
   return (
-    <View style={styles.padding}>
-      <View style={[styles.box, { backgroundColor: theme.colorScheme.surface, maxHeight: height * 0.7 - 40, marginBottom: insets.bottom }]}>
-        <ScrollView bounces={false}>
-          <Text style={[theme.textTheme.titleSmall, styles.center]}>{title}</Text>
-          <View style={styles.gap20} />
-          <Text style={[theme.textTheme.displayMedium, styles.center]}>{subtitle}</Text>
-          <View style={styles.gap30} />
-          <View style={styles.buttons}>
-            <View style={styles.flex}>
-              <FilledTonalButton style={styles.button} onPress={cancelAction ?? (() => AppRouter.pop(router, { value: false }))}>
+    <SelectionSheet
+      contenu={
+        <>
+          <ScrollView bounces={false} style={styles.defile} contentContainerStyle={styles.content}>
+            {/* Titre */}
+            <Text style={[theme.textTheme.titleSmall, styles.center]}>{title}</Text>
+            <View style={styles.gap12} />
+            {/* Sous-titre */}
+            <Text style={[theme.textTheme.displayMedium, styles.center]}>{subtitle}</Text>
+          </ScrollView>
+          <SelectionBoutons
+            boutons={[
+              <FilledTonalButton key="non" onPress={cancelAction ?? (() => AppRouter.pop(router, { value: false }))}>
                 {cancelTitle ?? traductions.btnTextCancel}
-              </FilledTonalButton>
-            </View>
-            <View style={styles.gap16} />
-            <View style={styles.flex}>
-              <ElevatedButton style={styles.button} onPress={confirmAction ?? (() => AppRouter.pop(router, { value: true }))}>
+              </FilledTonalButton>,
+              <ElevatedButton key="oui" onPress={confirmAction ?? (() => AppRouter.pop(router, { value: true }))}>
                 {confirmTitle ?? traductions.btnTextAccept}
-              </ElevatedButton>
-            </View>
-          </View>
-        </ScrollView>
-      </View>
-    </View>
+              </ElevatedButton>,
+            ]}
+          />
+        </>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  padding: { padding: 20 },
-  box: { borderRadius: 20, overflow: 'hidden' },
+  defile: { flexShrink: 1 },
+  content: { paddingHorizontal: 24, paddingTop: 4, paddingBottom: 20 },
   center: { textAlign: 'center' },
-  flex: { flex: 1 },
-  buttons: { flexDirection: 'row', height: 56 },
-  button: { height: 56 },
-  gap16: { width: 16 },
-  gap20: { height: 20 },
-  gap30: { height: 30 },
+  gap12: { height: 12 },
 });

package/src/shared/widgets/custom_progressbar.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Svg, { Circle } from 'react-native-svg';
 
-import { Themer } from '../../core/theme';
+import { useTheme } from '../../core/theme';
 
 /**
  * Anneau de progression (≈ `CustomCircularProgressBar`) : cercle de fond
@@ -25,6 +25,7 @@ export function CustomCircularProgressBar({
   strokeWidth?: number;
   children?: ReactNode;
 }) {
+  const theme = useTheme();
   const radius = size / 2;
   const box = size + strokeWidth;
   const center = box / 2;
@@ -38,7 +39,7 @@ export function CustomCircularProgressBar({
             cx={center}
             cy={center}
             r={radius}
-            stroke={progressColor ?? Themer.primary}
+            stroke={progressColor ?? theme.colorScheme.primary}
             strokeWidth={strokeWidth}
             fill="none"
             strokeLinecap="round"

package/src/shared/widgets/image_select_widget.tsx

@@ -1,33 +1,30 @@
-import { MaterialIcons } from '@expo/vector-icons';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import type { ReactNode } from 'react';
-import { Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
 
-import { Images } from '../../core/assets';
-import { useTheme } from '../../core/theme';
+import { Themer, useTheme } from '../../core/theme';
 import { useAppLocalizations } from '../../l10n/localizations';
-import { Card } from '../material/card';
+import { SbSelectionOption, SelectionSheet } from './selection';
 
 /**
- * Feuille de choix d'une image : photo avec l'appareil photo, ou image de
- * la galerie. [onSelect] reçoit l'URI locale de l'image (ou `null` si
- * l'utilisateur annule).
+ * Feuille de choix d'une image : prendre une photo, la choisir dans la
+ * galerie, puis les [otherActions] (ex. SbSelectionOption « Supprimer »).
+ * [onSelect] reçoit l'URI locale de l'image (ou `null` si l'utilisateur
+ * annule).
  */
 export function ImageSelectWidget({
   title,
+  subtitle,
   onSelect,
   otherActions = [],
 }: {
   title?: string;
+  subtitle?: string;
   onSelect: (uri: string | null) => void;
   otherActions?: ReactNode[];
 }) {
   const theme = useTheme();
   const traductions = useAppLocalizations();
-  const insets = useSafeAreaInsets();
-  const { height } = useWindowDimensions();
 
   const pickImage = async (source: 'camera' | 'gallery') => {
     try {
@@ -46,58 +43,46 @@ export function ImageSelectWidget({
     }
   };
 
+  const actions: ReactNode[] = [
+    // Prendre une photo avec l'appareil photo
+    <SbSelectionOption
+      key="camera"
+      icone="photo-camera"
+      titre={traductions.imageSelectCamera}
+      onPress={() => void pickImage('camera')}
+    />,
+    // Sélectionner une photo depuis la galerie
+    <SbSelectionOption
+      key="galerie"
+      icone="photo-library"
+      titre={traductions.imageSelectGalerie}
+      onPress={() => void pickImage('gallery')}
+    />,
+    ...otherActions,
+  ];
+
   return (
-    <View style={[styles.box, { backgroundColor: theme.colorScheme.surface, maxHeight: height * 0.7 }]}>
-      <ScrollView contentContainerStyle={[styles.content, { paddingBottom: insets.bottom + 10 }]}>
-        {/* Title */}
-        {title != null && (
-          <>
-            <Text style={theme.textTheme.headlineMedium}>{title}</Text>
-            <View style={styles.gap10} />
-          </>
-        )}
-        <View style={styles.row}>
-          {/* Prendre une photo avec la caméra */}
-          <Pressable accessibilityRole="button" onPress={() => void pickImage('camera')} style={styles.camera}>
-            <Image source={Images.ticketCaisse} style={StyleSheet.absoluteFill} contentFit="contain" />
-            <MaterialIcons name="photo-camera" size={24} color="white" />
-          </Pressable>
-        </View>
-        <View style={styles.gap20} />
-        {/* Actions */}
-        <Card>
-          {/* Sélectionner une photo depuis la galerie */}
-          <Pressable
-            accessibilityRole="button"
-            onPress={() => void pickImage('gallery')}
-            style={({ pressed }) => [styles.tile, pressed ? { backgroundColor: theme.colorScheme.secondary } : null]}
-          >
-            <MaterialIcons name="image" size={24} color={theme.colorScheme.onSurface} />
-            <Text style={[theme.textTheme.bodyLarge, styles.tileText]}>{traductions.transactionDetailsTicketSaveGallery}</Text>
-            <MaterialIcons name="arrow-forward-ios" size={16} color={theme.colorScheme.onSurface} />
-          </Pressable>
-          {otherActions}
-        </Card>
-      </ScrollView>
-    </View>
+    <SelectionSheet
+      titre={title}
+      entete={
+        subtitle != null ? (
+          <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>{subtitle}</Text>
+        ) : undefined
+      }
+      contenu={
+        <ScrollView bounces={false} contentContainerStyle={styles.content}>
+          {actions.map((action, i) => (
+            <View key={i} style={i > 0 ? styles.suivante : null}>
+              {action}
+            </View>
+          ))}
+        </ScrollView>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  box: { borderTopLeftRadius: 20, borderTopRightRadius: 20, overflow: 'hidden' },
-  content: { paddingTop: 20, paddingHorizontal: 20 },
-  row: { height: 80, flexDirection: 'row', alignItems: 'center' },
-  camera: {
-    width: 77,
-    height: 80,
-    borderRadius: 12,
-    overflow: 'hidden',
-    backgroundColor: 'rgba(0,0,0,0.12)',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  tile: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, minHeight: 56 },
-  tileText: { flex: 1, marginHorizontal: 16 },
-  gap10: { height: 10 },
-  gap20: { height: 20 },
+  content: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 16 },
+  suivante: { marginTop: 10 },
 });

package/src/shared/widgets/notification_dialog.tsx

@@ -1,6 +1,5 @@
 import { Image } from 'expo-image';
-import { ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { Images } from '../../core/assets';
 import { scaleDownSize } from '../utils/scale_down';
@@ -8,6 +7,7 @@ import { AppRouter, useAppRouter } from '../../core/router';
 import { useTheme } from '../../core/theme';
 import { ElevatedButton } from '../material/buttons';
 import { PopScope } from '../material/overlays';
+import { SelectionSheet } from './selection';
 
 /** Affichage des dialogues de notifications de succes ou erreur */
 export enum NotificationType {
@@ -43,8 +43,8 @@ export type NotificationDialogProps = {
 };
 
 /**
- * Contenu de feuille du bas affichant un succès / une erreur / une info,
- * avec son animation, ses textes et ses boutons. Le bouton retour est
+ * Feuille du bas affichant un succès / une erreur / une info : animation
+ * selon le [type], textes centrés puis bouton(s) sur toute la largeur. Le bouton retour est
  * bloqué : seuls les boutons ferment la feuille.
  */
 export function NotificationDialog({
@@ -61,73 +61,70 @@ export function NotificationDialog({
 }: NotificationDialogProps) {
   const theme = useTheme();
   const router = useAppRouter();
-  const { height } = useWindowDimensions();
-  const insets = useSafeAreaInsets();
   const image = animatedImage ?? imageFor(type);
   const close = () => AppRouter.pop(router);
 
   return (
     <PopScope canPop={false}>
-      <View
-        style={[
-          styles.box,
-          { maxHeight: height * 0.7, backgroundColor: theme.colorScheme.surface, paddingBottom: insets.bottom },
-        ]}
-      >
-        <ScrollView contentContainerStyle={styles.content} bounces={false}>
-          {image != null && (
-            <>
-              <Image source={image} style={[scaleDownSize(image, 100), styles.image]} contentFit="contain" />
-              <View style={styles.gap32} />
-            </>
-          )}
-          {/* Text message */}
-          {message != null && (
-            <>
-              <Text style={[theme.textTheme.headlineSmall, styles.center]}>{message}</Text>
-              <View style={styles.gap20} />
-            </>
-          )}
-          {/* Title message */}
-          {title != null && (
-            <>
-              <Text style={[theme.textTheme.titleSmall, styles.center]}>{title}</Text>
-              <View style={styles.gap15} />
-            </>
-          )}
-          {/* Subtitle message */}
-          {subtitle != null && (
-            <>
-              <Text style={[theme.textTheme.titleSmall, styles.center]}>{subtitle}</Text>
-              <View style={styles.gap15} />
-            </>
-          )}
-          {/* Description */}
-          {description != null && (
-            <>
-              <Text style={[theme.textTheme.displaySmall, styles.center]}>{description}</Text>
-              <View style={styles.gap24} />
-            </>
-          )}
-          {/* Continue btn */}
-          {btnText != null && (
-            <ElevatedButton onPress={btnAction ?? close} style={btnColor ? { backgroundColor: btnColor } : undefined}>
-              {btnText}
-            </ElevatedButton>
-          )}
-          {/* Btns d'action */}
-          {btns?.map((btn, i) => (
-            <View key={i} style={styles.btn}>
-              <ElevatedButton
-                onPress={btn.btnAction ?? close}
-                style={btn.btnColor ? { backgroundColor: btn.btnColor } : undefined}
-              >
-                {btn.btnText}
+      <SelectionSheet
+        hauteurMax={0.8}
+        contenu={
+          <ScrollView contentContainerStyle={styles.content} bounces={false}>
+            {image != null && (
+              <>
+                <Image source={image} style={[scaleDownSize(image, 96), styles.image]} contentFit="contain" />
+                <View style={styles.gap24} />
+              </>
+            )}
+            {/* Text message */}
+            {message != null && (
+              <>
+                <Text style={[theme.textTheme.headlineSmall, styles.center]}>{message}</Text>
+                <View style={styles.gap16} />
+              </>
+            )}
+            {/* Title message */}
+            {title != null && (
+              <>
+                <Text style={[theme.textTheme.titleSmall, styles.center]}>{title}</Text>
+                <View style={styles.gap12} />
+              </>
+            )}
+            {/* Subtitle message */}
+            {subtitle != null && (
+              <>
+                <Text style={[theme.textTheme.titleSmall, styles.center]}>{subtitle}</Text>
+                <View style={styles.gap12} />
+              </>
+            )}
+            {/* Description */}
+            {description != null && (
+              <>
+                <Text style={[theme.textTheme.displaySmall, styles.center]}>{description}</Text>
+                <View style={styles.gap16} />
+              </>
+            )}
+            <View style={styles.gap8} />
+            {/* Continue btn */}
+            {btnText != null && (
+              <ElevatedButton onPress={btnAction ?? close} style={btnColor ? { backgroundColor: btnColor } : undefined}>
+                {btnText}
               </ElevatedButton>
-            </View>
-          ))}
-        </ScrollView>
-      </View>
+            )}
+            {/* Btns d'action */}
+            {btns?.map((btn, i) => (
+              <View key={i} style={styles.btn}>
+                <ElevatedButton
+                  onPress={btn.btnAction ?? close}
+                  style={btn.btnColor ? { backgroundColor: btn.btnColor } : undefined}
+                >
+                  {btn.btnText}
+                </ElevatedButton>
+              </View>
+            ))}
+          </ScrollView>
+        }
+      />
     </PopScope>
   );
 }
@@ -146,13 +143,12 @@ function imageFor(type: NotificationType): number | undefined {
 }
 
 const styles = StyleSheet.create({
-  box: { borderRadius: 20, width: '100%', overflow: 'hidden' },
-  content: { paddingHorizontal: 40, paddingVertical: 10, alignItems: 'stretch' },
+  content: { paddingHorizontal: 28, paddingTop: 8, paddingBottom: 16, alignItems: 'stretch' },
   image: { alignSelf: 'center' },
   center: { textAlign: 'center' },
-  gap15: { height: 15 },
-  gap20: { height: 20 },
+  gap8: { height: 8 },
+  gap12: { height: 12 },
+  gap16: { height: 16 },
   gap24: { height: 24 },
-  gap32: { height: 32 },
   btn: { paddingVertical: 5 },
 });