fix: ajustement de la taille de NativeList et mise à jour des styles de QR-code

Author: ecnivtwelve

src/views/account/Restaurant/Modals/CardDetail.tsx

@@ -296,30 +296,31 @@ const RestaurantCardDetail: Screen<"RestaurantCardDetail"> = ({ route, navigatio
                 weight="light"
                 activeScale={0.95}
               >
-                <NativeList inline style={{ width: 100, height: 76 }}>
+                <NativeList inline style={{ width: 120, height: 76 }}>
                   <View
                     style={{
                       height: 76,
                       gap: 6,
                       flexDirection: "column",
                       alignItems: "center",
-                      justifyContent: "center"
+                      justifyContent: "center",
+                      backgroundColor: route.params.card.theme.colors.background ?? theme.colors.primary,
                     }}
                   >
                     <QrCode
                       size={24}
                       strokeWidth={2.2}
-                      color={theme.colors.text}
+                      color={"#fff"}
                     />
                     <Text
                       style={{
                         fontFamily: "semibold",
                         fontSize: 13,
-                        color: theme.colors.text,
+                        color: "#fff",
                         textAlign: "center",
                       }}
                     >
-                      QR-code
+                      Payer un repas
                     </Text>
                   </View>
                 </NativeList>

src/views/account/Restaurant/Modals/QrCode.tsx

@@ -13,6 +13,8 @@ import { Screen } from "@/router/helpers/types";
 import { ExternalAccount } from "@/stores/account/types";
 import useSoundHapticsWrapper from "@/utils/native/playSoundHaptics";
 import * as Brightness from "expo-brightness";
+import Reanimated, { ZoomIn } from "react-native-reanimated";
+import { anim2Papillon } from "@/utils/ui/animations";
 
 const RestaurantQrCode: Screen<"RestaurantQrCode">  = ({ route, navigation }) => {
   const { card } = route.params;
@@ -123,7 +125,7 @@ const RestaurantQrCode: Screen<"RestaurantQrCode">  = ({ route, navigation }) =>
           }}
           onPress={() => navigation.goBack()}
         >
-          <View
+          <Reanimated.View
             style={{
               marginBottom: 32,
               justifyContent: "center",
@@ -148,42 +150,50 @@ const RestaurantQrCode: Screen<"RestaurantQrCode">  = ({ route, navigation }) =>
             >
               Approche le code QR du scanner de la borne afin de valider ta carte
             </Text>
-          </View>
+          </Reanimated.View>
         </Pressable>
 
         {qrCode && (
-          <PressableScale
-            style={{
-              padding: 16,
-              backgroundColor: "white",
+          <Reanimated.View
+            entering={anim2Papillon(ZoomIn)}
+          >
+            <PressableScale
+              style={{
+                padding: 16,
+                backgroundColor: "white",
 
-              borderColor: theme.colors.text + "40",
-              borderWidth: 1,
+                borderColor: theme.colors.text + "40",
+                borderWidth: 1,
 
-              shadowColor: "#000",
-              shadowOffset: {
-                width: 0,
-                height: 2,
-              },
-              shadowOpacity: 0.2,
-              shadowRadius: 7,
+                shadowColor: "#000",
+                shadowOffset: {
+                  width: 0,
+                  height: 2,
+                },
+                shadowOpacity: 0.2,
+                shadowRadius: 7,
 
-              elevation: 5,
+                elevation: 5,
 
-              borderRadius: 16,
-              borderCurve: "continuous",
-            }}
-            onPress={() => {
-              GenerateQRCode();
-            }}
-            weight="light"
-            activeScale={0.9}
-          >
-            <QRCode
-              value={qrCode}
-              size={280}
-            />
-          </PressableScale>
+                borderRadius: 16,
+                borderCurve: "continuous",
+              }}
+              onPress={() => {
+                GenerateQRCode();
+              }}
+              weight="light"
+              activeScale={0.9}
+            >
+              <Reanimated.View
+                entering={anim2Papillon(ZoomIn).delay(100)}
+              >
+                <QRCode
+                  value={qrCode}
+                  size={280}
+                />
+              </Reanimated.View>
+            </PressableScale>
+          </Reanimated.View>
         )}
 
         <Pressable