stripe and small fixes

src/providers/StripeProvider.js

@@ -5,7 +5,7 @@ import { loadStripe } from '@stripe/stripe-js'
 import * as WebBrowser from 'expo-web-browser'
 import Overlay from '../components/Overlay'
 import Button from '../components/Button'
-import useLayoutType from '../hooks/useLayoutType'
+import { Palette } from '../styles'
 import { mainBorderRadius } from '../styles/Style'
 import { STRIPE_PUBLISHABLE_KEY_LIVE, STRIPE_PUBLISHABLE_KEY_TEST } from '../data/keys'
 import { getFunctionsClient } from '../config/firebase'
@@ -81,7 +81,6 @@ export const useStripe = () => {
 }
 
 const StripeProvider = ({ children }) => {
-  const { isMobile } = useLayoutType()
   const { currentUserData } = useUserData() || {}
   const canUseEmbeddedCheckout = isWeb && Boolean(stripePromise)
 
@@ -373,18 +372,13 @@ const StripeProvider = ({ children }) => {
   return (
     <StripeContext.Provider value={providerValue}>
       {children}
-      <Overlay isVisible={clientSecret !== null} setIsVisible={closeEmbeddedCheckout}>
+      <Overlay
+        isVisible={clientSecret !== null}
+        setIsVisible={closeEmbeddedCheckout}
+        contentContainerStyle={styles.overlayContentFull}
+      >
         <View style={[StyleSheet.absoluteFillObject, styles.overlayContent]}>
-          <View
-            style={[
-              styles.embeddedWrapper,
-              {
-                width: isMobile ? '99%' : '95%',
-                height: isMobile ? '92vh' : '96vh',
-                maxWidth: isMobile ? '100%' : '1400px',
-              },
-            ]}
-          >
+          <View style={[styles.embeddedWrapper, styles.embeddedWrapperFull]}>
             {clientSecret && stripePromise ? (
               <EmbeddedCheckoutProvider stripe={stripePromise} options={{ clientSecret }}>
                 <EmbeddedCheckout
@@ -396,7 +390,14 @@ const StripeProvider = ({ children }) => {
               </EmbeddedCheckoutProvider>
             ) : null}
           </View>
-          <Button type="secondary" isAbsoluteBottom text="Fermer" onPress={closeEmbeddedCheckout} />
+          <Button
+            type="primary"
+            isAbsoluteBottom
+            text="Fermer"
+            onPress={closeEmbeddedCheckout}
+            containerStyle={styles.closeButton}
+            textStyle={styles.closeButtonText}
+          />
         </View>
       </Overlay>
     </StripeContext.Provider>
@@ -409,11 +410,37 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  overlayContentFull: {
+    justifyContent: 'flex-start',
+    alignItems: 'stretch',
+  },
   embeddedWrapper: {
     alignSelf: 'center',
     borderRadius: mainBorderRadius,
     overflow: 'hidden',
   },
+  embeddedWrapperFull: {
+    width: '100%',
+    height: '100%',
+    maxWidth: '100%',
+    borderRadius: 0,
+    alignSelf: 'stretch',
+  },
+  closeButton: {
+    height: 56,
+    borderWidth: 2,
+    borderColor: Palette.white,
+    shadowColor: Palette.primary,
+    shadowOpacity: 0.6,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 6 },
+    elevation: 6,
+  },
+  closeButtonText: {
+    color: Palette.white,
+    fontSize: 16,
+    letterSpacing: 0.3,
+  },
 })
 
 export default StripeProvider