@pi-spi/app 1.5.1 → 1.6.0

package/src/modules/profile/presentation/pages/profile_page_avatar.tsx

@@ -1,6 +1,7 @@
 import { MaterialIcons } from '@expo/vector-icons';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 
 import { useBloc } from '../../../../core/bloc_react';
 import { Di } from '../../../../core/di';
@@ -9,16 +10,18 @@ import { Themer, useTheme } from '../../../../core/theme';
 import { useValueListenable } from '../../../../core/value_notifier';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { showModalBottomSheet } from '../../../../shared/material/overlays';
-import { AliasWidget } from '../../../../shared/widgets/alias_widget';
+import { AliasPI } from '../../../../shared/models/alias_pi';
+import { withAlpha } from '../../../../shared/utils/color';
 import { AvatarWidget } from '../../../../shared/widgets/avatar_widget';
+import { ClipboardWidget } from '../../../../shared/widgets/clipboard_widget';
 import { ImageSelectWidget } from '../../../../shared/widgets/image_select_widget';
 import { AliasBloc } from '../../../alias/presentation/bloc/alias_bloc';
 import { AliasExistState } from '../../../alias/presentation/bloc/alias_state';
 import { ProfileAvatar } from '../../domain/profile_avatar';
 
-const AVATAR_SIZE = 64;
+const AVATAR_SIZE = 68;
 
-/** En-tête du profil : nom, alias, et photo (modifiable). */
+/** En-tête du profil : photo (modifiable), nom et alias. */
 export function ProfilePageAvatar() {
   const traductions = useAppLocalizations();
   const theme = useTheme();
@@ -27,6 +30,7 @@ export function ProfilePageAvatar() {
   const [aliasCle] = useState(() => (aliasBloc.state instanceof AliasExistState ? aliasBloc.state.alias.getCle() : ''));
   const user = Di.config.user;
   const avatar = useValueListenable(ProfileAvatar.value);
+  const gradientId = `entete${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
 
   const showImagePicker = () =>
     void showModalBottomSheet(router, {
@@ -63,49 +67,86 @@ export function ProfilePageAvatar() {
       ),
     });
 
+  const primaire = theme.colorScheme.primary;
+
   return (
-    <View style={styles.row}>
-      {/* Nom et alias */}
-      <View style={styles.flex}>
-        <Text numberOfLines={1} style={theme.textTheme.titleSmall}>
-          {user.nomComplet()}
-        </Text>
-        <View style={styles.gap8} />
-        <AliasWidget alias={aliasCle} name={user.nomComplet()} canCopy textAlign="left" />
-      </View>
-      <View style={styles.gap8w} />
+    <View style={styles.entete}>
+      {/* Dégradé doux de la couleur du thème */}
+      <Svg style={StyleSheet.absoluteFill} preserveAspectRatio="none">
+        <Defs>
+          <LinearGradient id={gradientId} x1="0" y1="0" x2="1" y2="1">
+            <Stop offset="0" stopColor={primaire} stopOpacity={0.22} />
+            <Stop offset="1" stopColor={primaire} stopOpacity={0.06} />
+          </LinearGradient>
+        </Defs>
+        <Rect width="100%" height="100%" fill={`url(#${gradientId})`} />
+      </Svg>
+
       {/* Avatar */}
       <Pressable accessibilityRole="imagebutton" onPress={showImagePicker}>
-        <View style={styles.shadow}>
-          <AvatarWidget userInitiales={user.initiales()} photo={avatar} size={AVATAR_SIZE} rounded />
+        <View style={[styles.avatar, { backgroundColor: theme.colorScheme.surface }]}>
+          <AvatarWidget userInitiales={user.initiales()} photo={avatar} size={AVATAR_SIZE - 6} rounded />
         </View>
         {/* Badge caméra */}
-        <View style={[styles.camera, { backgroundColor: theme.colorScheme.primary, borderColor: theme.scaffoldBackgroundColor }]}>
-          <MaterialIcons name="photo-camera" size={14} color="white" />
+        <View style={[styles.camera, { backgroundColor: primaire, borderColor: theme.colorScheme.surface }]}>
+          <MaterialIcons name="photo-camera" size={15} color={theme.colorScheme.onPrimary} />
         </View>
       </Pressable>
+
+      {/* Nom */}
+      <Text numberOfLines={2} style={[theme.textTheme.headlineMedium, styles.nom]}>
+        {user.nomComplet()}
+      </Text>
+
+      {/* Alias de l'utilisateur, copié d'un appui */}
+      <Pressable
+        accessibilityRole="button"
+        onPress={() => void ClipboardWidget.setData(aliasCle)}
+        style={[styles.alias, { backgroundColor: withAlpha(theme.colorScheme.surface, 0.7) }]}
+      >
+        <MaterialIcons name="badge" size={15} color={primaire} />
+        <Text numberOfLines={1} style={[theme.textTheme.displayMedium, styles.aliasTexte]}>
+          {AliasPI.formatPhoneNumber(aliasCle)}
+        </Text>
+        <MaterialIcons name="content-copy" size={14} color={primaire} />
+      </Pressable>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  row: { flexDirection: 'row', alignItems: 'center' },
-  flex: { flex: 1 },
-  gap8: { height: 8 },
-  gap8w: { width: 8 },
-  shadow: { borderRadius: AVATAR_SIZE / 2, boxShadow: '0 3px 8px rgba(0,0,0,0.15)' },
+  entete: {
+    alignItems: 'center',
+    paddingTop: 24,
+    paddingBottom: 20,
+    paddingHorizontal: 20,
+    borderRadius: 24,
+    overflow: 'hidden',
+  },
+  avatar: { padding: 3, borderRadius: AVATAR_SIZE / 2, boxShadow: '0 3px 12px rgba(0,0,0,0.12)' },
   camera: {
     position: 'absolute',
-    right: -4,
-    bottom: -4,
-    width: 28,
-    height: 28,
-    borderRadius: 14,
+    right: 0,
+    bottom: 0,
+    width: 30,
+    height: 30,
+    borderRadius: 15,
     borderWidth: 2,
     alignItems: 'center',
     justifyContent: 'center',
     boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
   },
+  nom: { marginTop: 14, textAlign: 'center' },
+  alias: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 5,
+    borderRadius: 20,
+    maxWidth: '100%',
+  },
+  aliasTexte: { flexShrink: 1, marginHorizontal: 6 },
   deleteTile: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, minHeight: 56 },
   deleteText: { flex: 1, marginHorizontal: 16 },
 });

package/src/modules/profile/presentation/pages/profile_page_contacts.tsx

@@ -10,13 +10,14 @@ import { Themer, useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { Card } from '../../../../shared/material/card';
 import { showModalBottomSheet } from '../../../../shared/material/overlays';
-import { AppBar, Scaffold } from '../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../shared/material/scaffold';
 import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
 import type { ContactPI } from '../../../contacts/domain/contact_pi';
 import type { PhoneContact } from '../../../contacts/domain/phone_contact';
 import { ContactBloc } from '../../../contacts/presentation/bloc/contact_bloc';
 import { ContactSearchEvent } from '../../../contacts/presentation/bloc/contact_event';
 import { ContactAliasListWidget } from '../../../contacts/presentation/pages/contact_list_alias_widget';
+import { ProfileAppBar } from './profile_app_bar';
 import { ProfilePageContactsActions } from './profile_page_contacts_actions';
 
 /**
@@ -42,11 +43,10 @@ export function ProfilePageContacts({ contactPI }: { contactPI?: ContactPI | nul
   };
 
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.profileContactPageTitle} />}>
       <MyPageContainer>
         <Pressable style={styles.flex} onPress={Keyboard.dismiss} accessible={false}>
-          <Text style={theme.textTheme.titleSmall}>{traductions.profileContactPageTitle}</Text>
-          <View style={styles.gap10} />
+          <View style={styles.gap8} />
           {/* Recherche d'un contact */}
           <Card>
             <View style={[styles.search, { backgroundColor: theme.inputDecorationTheme.fillColor }]}>
@@ -99,6 +99,7 @@ export function ProfilePageContacts({ contactPI }: { contactPI?: ContactPI | nul
 }
 
 const styles = StyleSheet.create({
+  gap8: { height: 8 },
   flex: { flex: 1 },
   search: { height: 36, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12 },
   input: { flex: 1, marginLeft: 8, paddingVertical: 0 },

package/src/modules/search/presentation/pages/search_fonctionnalites.ts

@@ -1,6 +1,8 @@
 import { Platform } from 'react-native';
 
 import { Images } from '../../../../core/assets';
+import { Di } from '../../../../core/di';
+import { AppEnv } from '../../../../core/env';
 import { AppRouter, type SdkRouter } from '../../../../core/router';
 import type { AppLocalizations } from '../../../../l10n/app_localizations';
 import { Fonctionnalite } from '../../domain/models/fonctionnalite';
@@ -65,6 +67,13 @@ export function fonctionnalitesRecherchables(
       motsCles: ['historique', 'paiement', 'operation', 'releve', 'history', 'payment', 'historico', 'pagamento'],
       ouvrir: () => aller(AppRouter.transactionSearch),
     }),
+    new Fonctionnalite({
+      icon: Images.iconsCloche,
+      titre: traductions.searchNotificationsTitle,
+      sousTitre: traductions.searchNotificationsSubTitle,
+      motsCles: ['notification', 'alerte', 'message', 'nouveau', 'alert', 'news', 'notificacao', 'alerta'],
+      ouvrir: () => aller(AppRouter.notifications),
+    }),
 
     // Abonnements
     new Fonctionnalite({
@@ -111,6 +120,25 @@ export function fonctionnalitesRecherchables(
       motsCles: ['parametre', 'reglage', 'theme', 'langue', 'notification', 'sombre', 'settings', 'language', 'dark', 'definicoes', 'idioma'],
       ouvrir: () => aller(AppRouter.profileParametre),
     }),
+    // Masqué si l'hôte n'autorise pas le client à changer de thème
+    ...(Di.config.appConfig.canChangeTheme
+      ? [
+          new Fonctionnalite({
+            icon: Images.iconsTheme,
+            titre: traductions.searchThemeTitle,
+            sousTitre: traductions.searchThemeSubTitle,
+            motsCles: ['theme', 'apparence', 'sombre', 'clair', 'couleur', 'mode', 'appearance', 'dark', 'light', 'color', 'tema', 'aparencia', 'escuro', 'claro', 'cor'],
+            ouvrir: () => aller(AppRouter.profileParametreTheme),
+          }),
+        ]
+      : []),
+    new Fonctionnalite({
+      icon: Images.iconsCloche,
+      titre: traductions.searchNotificationsParametreTitle,
+      sousTitre: traductions.searchNotificationsParametreSubTitle,
+      motsCles: ['notification', 'son', 'vibration', 'sonnerie', 'style', 'sound', 'vibrate', 'som', 'vibracao', 'estilo'],
+      ouvrir: () => aller(AppRouter.profileParametreNotifications),
+    }),
     // Sur le web, le profil n'a pas ces pages : pas de contacts,
     // et l'aide est un lien externe.
     ...(web
@@ -123,13 +151,18 @@ export function fonctionnalitesRecherchables(
             motsCles: ['contact', 'alias', 'repertoire', 'contacts', 'contactos'],
             ouvrir: () => aller(AppRouter.profileContacts),
           }),
-          new Fonctionnalite({
-            icon: Images.iconsHelp,
-            titre: traductions.profilePageMenuHelpTitle,
-            sousTitre: traductions.searchAideSubTitle,
-            motsCles: ['aide', 'faq', 'assistance', 'support', 'help', 'ajuda'],
-            ouvrir: () => aller(AppRouter.profileHelpCenter),
-          }),
+          // Seulement si l'hôte fournit un lien d'aide, comme dans le profil
+          ...((AppEnv.aideLink?.length ?? 0) > 0
+            ? [
+                new Fonctionnalite({
+                  icon: Images.iconsHelp,
+                  titre: traductions.profilePageMenuHelpTitle,
+                  sousTitre: traductions.searchAideSubTitle,
+                  motsCles: ['aide', 'faq', 'assistance', 'support', 'help', 'ajuda'],
+                  ouvrir: () => aller(AppRouter.profileHelpCenter),
+                }),
+              ]
+            : []),
         ]),
   ];
 }

package/src/modules/search/presentation/pages/search_page.tsx

@@ -289,7 +289,7 @@ export function SearchPage({
                 </Text>
               </View>
             ) : (
-              <ScrollView keyboardDismissMode="on-drag" keyboardShouldPersistTaps="handled" contentContainerStyle={styles.liste}>
+              <ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={styles.liste}>
                 <MenuActionsWidget items={resultats.map(ligne)} />
               </ScrollView>
             )}

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

@@ -17,6 +17,7 @@ import { DateFormat } from '../../../../../shared/utils/date_format';
 import { AliasWidget } from '../../../../../shared/widgets/alias_widget';
 import { formatMontant } from '../../../../../shared/widgets/amount_widget';
 import { ClipboardWidget } from '../../../../../shared/widgets/clipboard_widget';
+import { ErrorCardWidget } from '../../../../../shared/widgets/error_card_widget';
 import { ErrorPage, ErrorType } from '../../../../../shared/widgets/error_page';
 import { CustomLoadingDialog, LoadingPage } from '../../../../../shared/widgets/loading_page';
 import { NotificationDialog, NotificationType } from '../../../../../shared/widgets/notification_dialog';
@@ -260,9 +261,7 @@ export function TransactionRtpPage({
           {toPay && !canDoAction() && (
             <>
               <View style={styles.gap16} />
-              <Text style={[theme.textTheme.bodySmall, styles.warning, { color: Themer.systemErrorColor }]}>
-                {traductions.transactionRtpWarningMessage}
-              </Text>
+              <ErrorCardWidget icon="shield" message={traductions.transactionRtpWarningMessage} />
             </>
           )}
         </ScrollView>
@@ -487,7 +486,6 @@ const styles = StyleSheet.create({
   row: { flexDirection: 'row', alignItems: 'center' },
   value: { flex: 1, paddingLeft: 10 },
   right: { textAlign: 'right' },
-  warning: { marginLeft: 8, marginRight: 20, marginTop: 2, marginBottom: 5 },
   gap3: { height: 3 },
   gap10: { height: 10 },
   gap16: { height: 16 },

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

@@ -1,5 +1,6 @@
 import { MaterialIcons } from '@expo/vector-icons';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import type { ComponentProps } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
 
 import { BlocProvider, useBloc } from '../../../../../core/bloc_react';
 import { Di } from '../../../../../core/di';
@@ -9,6 +10,7 @@ import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { ElevatedButton, FilledTonalButton } from '../../../../../shared/material/buttons';
 import { showModalBottomSheet } from '../../../../../shared/material/overlays';
 import { FrequenceCommand } from '../../../../../shared/models/frequence_command';
+import { ErrorCardWidget } from '../../../../../shared/widgets/error_card_widget';
 import type { Subscription } from '../../../../subscription/domain/models/subscription';
 import { TransactionStatut, type Transaction } from '../../../domain/models/transaction';
 import { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
@@ -80,18 +82,23 @@ export function TransactionRtpPageActions({
       ),
     });
 
-  const warning = (message: string) => (
-    <Text style={[theme.inputDecorationTheme.errorStyle, styles.warning]}>{`⚠ ${message}`}</Text>
+  const warning = (message: string, icon: ComponentProps<typeof ErrorCardWidget>['icon']) => (
+    <ErrorCardWidget message={message} icon={icon} />
   );
 
   if (isExpired(tx)) {
-    return <View style={styles.padding}>{warning(traductions.transactionRtpExpiredWarningMessage)}</View>;
+    return <View style={styles.padding}>{warning(traductions.transactionRtpExpiredWarningMessage, 'timer-off')}</View>;
   }
 
   const scheduleActive = canDoAction && sub == null;
   return (
     <View style={styles.padding}>
-      {isSoldeInsuffisant && warning(traductions.transactionFormAmountInvalid)}
+      {isSoldeInsuffisant && (
+        <>
+          {warning(traductions.transactionFormAmountInvalid, 'account-balance-wallet')}
+          <View style={styles.gap12} />
+        </>
+      )}
       <View style={styles.row}>
         {tx.canSchedule() && sub == null && (
           <>
@@ -128,7 +135,7 @@ export function TransactionRtpPageActions({
 
 const styles = StyleSheet.create({
   padding: { paddingVertical: 10, paddingHorizontal: 10 },
-  warning: { marginLeft: 8, marginTop: 2, marginBottom: 5 },
+  gap12: { height: 12 },
   row: { flexDirection: 'row', alignItems: 'center' },
   flex: { flex: 1 },
   button: { height: 56 },

package/src/shared/utils/color.ts

@@ -0,0 +1,14 @@
+/**
+ * Équivalent de `Color.withValues(alpha:)` : la couleur [color] avec
+ * l'opacité [alpha] (0 à 1). Accepte `#RGB`, `#RRGGBB` et `#RRGGBBAA` ;
+ * toute autre forme est rendue telle quelle.
+ */
+export function withAlpha(color: string, alpha: number): string {
+  let hex = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(color)?.[1];
+  if (hex == null) return color;
+  if (hex.length === 3) hex = hex.replace(/./g, (c) => c + c);
+  const a = Math.round(Math.min(1, Math.max(0, alpha)) * 255)
+    .toString(16)
+    .padStart(2, '0');
+  return `#${hex.slice(0, 6)}${a}`;
+}

package/src/shared/widgets/error_card_widget.tsx

@@ -0,0 +1,58 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import type { ComponentProps } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Themer, useTheme } from '../../core/theme';
+import { Card } from '../material/card';
+
+/** Couleur d'erreur du thème avec une opacité (0 à 1). */
+function erreur(alpha: number): string {
+  const hex = Math.round(alpha * 255).toString(16).padStart(2, '0');
+  return `${Themer.systemErrorColor}${hex}`;
+}
+
+/**
+ * Carte d'avertissement : fond teinté, bordure et icône dans la couleur
+ * d'erreur du thème, suivies du `message`.
+ */
+export function ErrorCardWidget({
+  message,
+  icon = 'warning-amber',
+}: {
+  message: string;
+  icon?: ComponentProps<typeof MaterialIcons>['name'];
+}) {
+  const theme = useTheme();
+  const texte = theme.textTheme.bodySmall;
+  return (
+    <Card style={styles.card}>
+      <View style={styles.row}>
+        <View style={styles.icon}>
+          <MaterialIcons name={icon} size={18} color={Themer.systemErrorColor} />
+        </View>
+        <Text
+          style={[
+            texte,
+            styles.message,
+            texte?.fontSize != null && { lineHeight: texte.fontSize * 1.4 },
+          ]}
+        >
+          {message}
+        </Text>
+      </View>
+    </Card>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    margin: 0,
+    backgroundColor: erreur(0.08),
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: erreur(0.35),
+  },
+  row: { flexDirection: 'row', alignItems: 'flex-start', padding: 14 },
+  icon: { padding: 6, borderRadius: 999, backgroundColor: erreur(0.15), marginRight: 12 },
+  message: { flex: 1, textAlign: 'left', color: Themer.systemErrorColor },
+});

package/src/shared/widgets/selection.tsx

@@ -0,0 +1,98 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import type { ReactNode } from 'react';
+import { Pressable, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Themer, useTheme } from '../../core/theme';
+import { withAlpha } from '../utils/color';
+
+/**
+ * Feuille de sélection : poignée, [titre], [entete] facultatif, puis le
+ * [contenu] (qui défile s'il est trop long : utiliser un ScrollView).
+ * À ouvrir avec showModalBottomSheet.
+ */
+export function SbSelectionSheet({
+  titre,
+  titreSize,
+  entete,
+  contenu,
+}: {
+  titre?: string;
+  titreSize?: number;
+  entete?: ReactNode;
+  contenu: ReactNode;
+}) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const { height } = useWindowDimensions();
+  return (
+    <View
+      style={[
+        styles.sheet,
+        { maxHeight: height * 0.75, backgroundColor: theme.colorScheme.surface, paddingBottom: insets.bottom },
+      ]}
+    >
+      {/* Poignée */}
+      <View style={[styles.poignee, { backgroundColor: withAlpha(Themer.neural03Color, 0.4) }]} />
+      {titre != null && (
+        <Text style={[theme.textTheme.headlineLarge, styles.titre, titreSize != null ? { fontSize: titreSize } : null]}>{titre}</Text>
+      )}
+      {entete != null && <View style={styles.entete}>{entete}</View>}
+      <View style={styles.gap8} />
+      <View style={styles.contenu}>{contenu}</View>
+    </View>
+  );
+}
+
+/** Ligne d'une feuille de sélection : [pastille], [texte], [detail] facultatif et coche si elle est [choisie]. */
+export function SbSelectionLigne({
+  pastille,
+  texte,
+  detail,
+  choisie,
+  onPress,
+}: {
+  pastille: ReactNode;
+  texte: string;
+  detail?: string;
+  choisie: boolean;
+  onPress: () => void;
+}) {
+  const theme = useTheme();
+  const primaire = theme.colorScheme.primary;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ selected: choisie }}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.ligne,
+        { backgroundColor: choisie ? withAlpha(primaire, 0.08) : pressed ? theme.colorScheme.secondary : 'transparent' },
+      ]}
+    >
+      {pastille}
+      <View style={styles.textes}>
+        <Text numberOfLines={1} style={[theme.textTheme.displayLarge, { fontWeight: choisie ? '700' : '500' }]}>
+          {texte}
+        </Text>
+        {detail != null && detail.length > 0 && (
+          <Text numberOfLines={1} style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>
+            {detail}
+          </Text>
+        )}
+      </View>
+      {choisie && <MaterialIcons name="check-circle" size={22} color={primaire} />}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  sheet: { width: '100%', borderTopLeftRadius: 20, borderTopRightRadius: 20 },
+  poignee: { alignSelf: 'center', marginTop: 10, marginBottom: 14, width: 36, height: 4, borderRadius: 2 },
+  titre: { paddingHorizontal: 20 },
+  entete: { paddingHorizontal: 20, paddingTop: 12 },
+  contenu: { flexShrink: 1 },
+  gap8: { height: 8 },
+  ligne: { flexDirection: 'row', alignItems: 'center', marginVertical: 2, paddingHorizontal: 8, paddingVertical: 10, borderRadius: 14 },
+  textes: { flex: 1, marginHorizontal: 14 },
+});