feat: fixes and formatter

2026-01-12 16:01:32 +01:00
parent 85c6084351
commit 11e632acff
353 changed files with 23315 additions and 27361 deletions
@@ -1,15 +1,5 @@
-import {
-  Feather,
-  FontAwesome,
-  MaterialCommunityIcons,
-} from "@expo/vector-icons";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { Feather, FontAwesome, MaterialCommunityIcons } from '@expo/vector-icons'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
  Linking,
  Platform,
@@ -19,161 +9,149 @@ import {
  Text,
  View,
  findNodeHandle,
-} from "react-native";
-import { SheetManager } from "react-native-actions-sheet";
+} from 'react-native'
+import { SheetManager } from 'react-native-actions-sheet'

-import { BlurView } from "expo-blur";
-import { setGlobal } from "reactn";
-import {
-  musiclandShareHeading,
-  musiclandShareMessage,
-  musiclandShareUrl,
-} from "../../data";
-import { isWeb } from "../../hooks/useLayoutType";
-import { Palette } from "../../styles";
-import { FONT_FAMILY } from "../../styles/Fonts";
-import AppActionSheet from "../AppActionSheet";
+import { BlurView } from 'expo-blur'
+import { setGlobal } from 'reactn'
+import { musiclandShareHeading, musiclandShareMessage, musiclandShareUrl } from '../../data'
+import { isWeb } from '../../hooks/useLayoutType'
+import { Palette } from '../../styles'
+import { FONT_FAMILY } from '../../styles/Fonts'
+import AppActionSheet from '../AppActionSheet'

 const ShareModal = ({ payload }) => {
-  const heading = payload?.heading ?? musiclandShareHeading;
-  const url = payload?.url ?? musiclandShareUrl;
-  const shareTitle = payload?.shareTitle ?? heading;
-  const shareMessage = payload?.shareMessage ?? musiclandShareMessage;
-  const copyUrl =
-    payload?.copyUrl ?? payload?.qrUrl ?? payload?.url ?? musiclandShareUrl;
-  const linkLabel = payload?.linkLabel ?? copyUrl;
-  const sectionTitle = payload?.sectionTitle ?? "Partager sur...";
-  const qrTitle = payload?.qrTitle ?? "Scannez le QR-code";
-  const qrUrl = payload?.qrUrl ?? musiclandShareUrl;
+  const heading = payload?.heading ?? musiclandShareHeading
+  const url = payload?.url ?? musiclandShareUrl
+  const shareTitle = payload?.shareTitle ?? heading
+  const shareMessage = payload?.shareMessage ?? musiclandShareMessage
+  const copyUrl = payload?.copyUrl ?? payload?.qrUrl ?? payload?.url ?? musiclandShareUrl
+  const linkLabel = payload?.linkLabel ?? copyUrl
+  const sectionTitle = payload?.sectionTitle ?? 'Partager sur...'
+  const qrTitle = payload?.qrTitle ?? 'Scannez le QR-code'
+  const qrUrl = payload?.qrUrl ?? musiclandShareUrl

-  const [copied, setCopied] = useState(false);
-  const copyTimeout = useRef(null);
-  const shareQrTimeoutRef = useRef(null);
-  const modalRef = useRef(null);
-  const [webVisible, setWebVisible] = useState(true);
-  const blurProps =
-    Platform.OS === "android"
-      ? { experimentalBlurMethod: "dimezisBlurView" }
-      : {};
+  const [copied, setCopied] = useState(false)
+  const copyTimeout = useRef(null)
+  const shareQrTimeoutRef = useRef(null)
+  const modalRef = useRef(null)
+  const [webVisible, setWebVisible] = useState(true)
+  const blurProps = Platform.OS === 'android' ? { experimentalBlurMethod: 'dimezisBlurView' } : {}

  const closeSheet = useCallback(() => {
    if (isWeb) {
-      setWebVisible(false);
+      setWebVisible(false)
    }

    try {
-      const maybePromise = SheetManager.hide("Share");
-      return Promise.resolve(maybePromise);
+      const maybePromise = SheetManager.hide('Share')
+      return Promise.resolve(maybePromise)
    } catch (error) {
-      console.error("share.sheet.close", error);
-      return Promise.resolve();
+      console.error('share.sheet.close', error)
+      return Promise.resolve()
    }
-  }, []);
+  }, [])

  useEffect(() => {
    if (isWeb) {
-      setWebVisible(true);
+      setWebVisible(true)
    }
-  }, [payload]);
+  }, [payload])

  const shareText = useMemo(() => {
-    return [shareMessage, url].filter(Boolean).join(" ");
-  }, [shareMessage, url]);
+    return [shareMessage, url].filter(Boolean).join(' ')
+  }, [shareMessage, url])

-  const encodedUrl = useMemo(() => encodeURIComponent(url), [url]);
-  const encodedShareText = useMemo(
-    () => encodeURIComponent(shareText),
-    [shareText]
-  );
+  const encodedUrl = useMemo(() => encodeURIComponent(url), [url])
+  const encodedShareText = useMemo(() => encodeURIComponent(shareText), [shareText])

  useEffect(() => {
    return () => {
      if (copyTimeout.current) {
-        clearTimeout(copyTimeout.current);
+        clearTimeout(copyTimeout.current)
      }
-
-    };
-  }, []);
+    }
+  }, [])

  useEffect(() => {
-    if (!isWeb || typeof document === "undefined" || !webVisible) {
-      return;
+    if (!isWeb || typeof document === 'undefined' || !webVisible) {
+      return
    }

    const handlePointerDown = (event) => {
-      const node = modalRef.current;
+      const node = modalRef.current
      if (!node) {
-        return;
+        return
      }

-      const domNode = findNodeHandle(node);
-      if (domNode && typeof domNode.contains === "function") {
+      const domNode = findNodeHandle(node)
+      if (domNode && typeof domNode.contains === 'function') {
        if (domNode.contains(event.target)) {
-          return;
+          return
        }
      }

      if (domNode === event.target) {
-        return;
+        return
      }

-      closeSheet();
-    };
+      closeSheet()
+    }

    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        closeSheet();
+      if (event.key === 'Escape') {
+        closeSheet()
      }
-    };
+    }

-    document.addEventListener("pointerdown", handlePointerDown);
-    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener('pointerdown', handlePointerDown)
+    document.addEventListener('keydown', handleKeyDown)

    return () => {
-      document.removeEventListener("pointerdown", handlePointerDown);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [closeSheet, webVisible]);
+      document.removeEventListener('pointerdown', handlePointerDown)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [closeSheet, webVisible])

  const handleCopy = useCallback(async () => {
    try {
      if (copyTimeout.current) {
-        clearTimeout(copyTimeout.current);
+        clearTimeout(copyTimeout.current)
      }

-      if (isWeb && typeof navigator !== "undefined" && navigator.clipboard) {
-        await navigator.clipboard.writeText(copyUrl);
+      if (isWeb && typeof navigator !== 'undefined' && navigator.clipboard) {
+        await navigator.clipboard.writeText(copyUrl)
      } else {
-        const Clipboard = await import("expo-clipboard");
-        if (typeof Clipboard?.setStringAsync === "function") {
-          await Clipboard.setStringAsync(copyUrl);
-        } else if (typeof Clipboard?.default?.setStringAsync === "function") {
-          await Clipboard.default.setStringAsync(copyUrl);
+        const Clipboard = await import('expo-clipboard')
+        if (typeof Clipboard?.setStringAsync === 'function') {
+          await Clipboard.setStringAsync(copyUrl)
+        } else if (typeof Clipboard?.default?.setStringAsync === 'function') {
+          await Clipboard.default.setStringAsync(copyUrl)
        }
      }

-      setCopied(true);
+      setCopied(true)
      copyTimeout.current = setTimeout(() => {
-        setCopied(false);
-      }, 2000);
+        setCopied(false)
+      }, 2000)
    } catch (error) {
-      console.error("share.copy.failed", error);
+      console.error('share.copy.failed', error)
    }
-  }, [copyUrl]);
+  }, [copyUrl])

  const handleSystemShare = useCallback(async () => {
-    if (Platform.OS === "web" && typeof navigator !== "undefined") {
+    if (Platform.OS === 'web' && typeof navigator !== 'undefined') {
      try {
-        if (typeof navigator.share === "function") {
+        if (typeof navigator.share === 'function') {
          await navigator.share({
            url,
            text: shareText,
            title: shareTitle,
-          });
-          return;
+          })
+          return
        }
      } catch (error) {
-        console.error("share.system.web", error);
+        console.error('share.system.web', error)
      }
    }

@@ -186,166 +164,145 @@ const ShareModal = ({ payload }) => {
          android: { message: shareText, title: shareTitle },
          default: { message: shareText, title: shareTitle },
        })
-      );
+      )
    } catch (error) {
-      console.error("share.system.native", error);
+      console.error('share.system.native', error)
    }
-  }, [shareText, shareTitle, url]);
+  }, [shareText, shareTitle, url])

  const handleShareOption = useCallback(
    async (option) => {
-      if (option?.type === "qr") {
-        console.log("share.modal.handleShareOption", {
+      if (option?.type === 'qr') {
+        console.log('share.modal.handleShareOption', {
          key: option?.key,
          platform: Platform.OS,
-        });
+        })

        if (shareQrTimeoutRef.current) {
-          clearTimeout(shareQrTimeoutRef.current);
+          clearTimeout(shareQrTimeoutRef.current)
        }

        const openQrModal = () => {
-          console.log("share.modal.openQrModal", {
+          console.log('share.modal.openQrModal', {
            platform: Platform.OS,
            url: qrUrl,
            title: qrTitle,
-          });
-          shareQrTimeoutRef.current = null;
+          })
+          shareQrTimeoutRef.current = null
          setGlobal({
            shareQrModal: {
              visible: true,
              url: qrUrl,
              title: qrTitle,
            },
-          });
-        };
-
-        if (Platform.OS === "web") {
-          console.log("share.modal.scheduleQr", { platform: Platform.OS });
-          const maybePromise = closeSheet();
-          shareQrTimeoutRef.current = setTimeout(openQrModal, 80);
-          if (maybePromise && typeof maybePromise.catch === "function") {
-            maybePromise.catch((error) => {
-              console.error("share.modal.closeSheet.error", error);
-            });
-          }
-        } else {
-          await closeSheet();
-          openQrModal();
+          })
        }

-        return;
+        if (Platform.OS === 'web') {
+          console.log('share.modal.scheduleQr', { platform: Platform.OS })
+          const maybePromise = closeSheet()
+          shareQrTimeoutRef.current = setTimeout(openQrModal, 80)
+          if (maybePromise && typeof maybePromise.catch === 'function') {
+            maybePromise.catch((error) => {
+              console.error('share.modal.closeSheet.error', error)
+            })
+          }
+        } else {
+          await closeSheet()
+          openQrModal()
+        }
+
+        return
      }

-      const target = option?.target;
+      const target = option?.target

      if (!target) {
-        await handleSystemShare();
-        await closeSheet();
-        return;
+        await handleSystemShare()
+        await closeSheet()
+        return
      }

      try {
-        if (Platform.OS === "web") {
-          window.open(target, "_blank", "noopener,noreferrer");
-          await closeSheet();
-          return;
+        if (Platform.OS === 'web') {
+          window.open(target, '_blank', 'noopener,noreferrer')
+          await closeSheet()
+          return
        }

-        const supported = await Linking.canOpenURL(target);
+        const supported = await Linking.canOpenURL(target)
        if (supported) {
-          await Linking.openURL(target);
-          await closeSheet();
-          return;
+          await Linking.openURL(target)
+          await closeSheet()
+          return
        }
      } catch (error) {
-        console.error(`share.option.error.${option?.key || "unknown"}`, error);
+        console.error(`share.option.error.${option?.key || 'unknown'}`, error)
      }

-      await handleSystemShare();
-      await closeSheet();
+      await handleSystemShare()
+      await closeSheet()
    },
    [closeSheet, handleSystemShare, qrTitle, qrUrl]
-  );
+  )

  const onSystemShare = useCallback(async () => {
-    await handleSystemShare();
-    await closeSheet();
-  }, [closeSheet, handleSystemShare]);
+    await handleSystemShare()
+    await closeSheet()
+  }, [closeSheet, handleSystemShare])

  const shareOptions = useMemo(() => {
    if (Array.isArray(payload?.options) && payload.options.length) {
-      return payload.options;
+      return payload.options
    }

    return [
      {
-        key: "facebook",
-        label: "Partager sur Facebook",
+        key: 'facebook',
+        label: 'Partager sur Facebook',
        Icon: (props) => <FontAwesome name="facebook" {...props} />,
        target: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
      },
      {
-        key: "instagram",
-        label: "Partager sur Instagram",
+        key: 'instagram',
+        label: 'Partager sur Instagram',
        Icon: (props) => <FontAwesome name="instagram" {...props} />,
        target: `https://www.instagram.com/?url=${encodedUrl}`,
      },
      {
-        key: "x",
-        label: "Partager sur X",
+        key: 'x',
+        label: 'Partager sur X',
        Icon: (props) => <FontAwesome name="twitter" {...props} />,
        target: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedShareText}`,
      },
      {
-        key: "email",
-        label: "Partager par e-mail",
+        key: 'email',
+        label: 'Partager par e-mail',
        Icon: (props) => <Feather name="mail" {...props} />,
-        target: `mailto:?subject=${encodeURIComponent(
-          shareTitle
-        )}&body=${encodedShareText}`,
+        target: `mailto:?subject=${encodeURIComponent(shareTitle)}&body=${encodedShareText}`,
      },
      {
-        key: "qr",
-        type: "qr",
-        label: "Partager par QR-code",
-        Icon: (props) => (
-          <MaterialCommunityIcons name="qrcode-scan" {...props} />
-        ),
+        key: 'qr',
+        type: 'qr',
+        label: 'Partager par QR-code',
+        Icon: (props) => <MaterialCommunityIcons name="qrcode-scan" {...props} />,
      },
-    ];
-  }, [encodedShareText, encodedUrl, payload?.options, shareTitle]);
+    ]
+  }, [encodedShareText, encodedUrl, payload?.options, shareTitle])

  const mobileContent = (
    <View style={styles.container}>
-      <BlurView
-        style={[styles.card, styles.blurCard]}
-        tint="dark"
-        intensity={40}
-        {...blurProps}
-      >
+      <BlurView style={[styles.card, styles.blurCard]} tint="dark" intensity={40} {...blurProps}>
        <Text style={styles.heading}>{heading}</Text>
        <View style={styles.linkRow}>
          <Text numberOfLines={1} style={styles.linkText}>
            {linkLabel}
          </Text>
          <View style={styles.linkActions}>
-            <Pressable
-              hitSlop={8}
-              onPress={handleCopy}
-              style={styles.iconButton}
-            >
-              <Feather
-                name={copied ? "check" : "copy"}
-                size={16}
-                color={Palette.white}
-              />
+            <Pressable hitSlop={8} onPress={handleCopy} style={styles.iconButton}>
+              <Feather name={copied ? 'check' : 'copy'} size={16} color={Palette.white} />
            </Pressable>
-            <Pressable
-              hitSlop={8}
-              onPress={onSystemShare}
-              style={styles.iconButton}
-            >
+            <Pressable hitSlop={8} onPress={onSystemShare} style={styles.iconButton}>
              <Feather name="share-2" size={16} color={Palette.white} />
            </Pressable>
          </View>
@@ -357,7 +314,7 @@ const ShareModal = ({ payload }) => {
        <Text style={styles.sectionHeading}>{sectionTitle}</Text>
        <View style={styles.optionsList}>
          {shareOptions.map((option, index) => {
-            const Icon = option?.Icon ?? Feather;
+            const Icon = option?.Icon ?? Feather
            return (
              <BlurView
                key={option?.key || index}
@@ -365,25 +322,22 @@ const ShareModal = ({ payload }) => {
                intensity={100}
                {...blurProps}
              >
-                <Pressable
-                  onPress={() => handleShareOption(option)}
-                  style={styles.optionRow}
-                >
+                <Pressable onPress={() => handleShareOption(option)} style={styles.optionRow}>
                  <View style={styles.optionIconWrapper}>
                    <Icon size={18} color={Palette.white} />
                  </View>
                  <Text style={styles.optionLabel}>{option?.label}</Text>
                </Pressable>
              </BlurView>
-            );
+            )
          })}
        </View>
      </BlurView>
    </View>
-  );
+  )

  if (isWeb && !webVisible) {
-    return null;
+    return null
  }

  return (
@@ -392,11 +346,7 @@ const ShareModal = ({ payload }) => {
        <View ref={modalRef} collapsable={false} style={styles.webContainer}>
          <View style={styles.webHeader}>
            <Text style={styles.webHeading}>{heading}</Text>
-            <Pressable
-              onPress={closeSheet}
-              hitSlop={12}
-              style={styles.webCloseButton}
-            >
+            <Pressable onPress={closeSheet} hitSlop={12} style={styles.webCloseButton}>
              <Feather name="x" size={16} color={Palette.white} />
            </Pressable>
          </View>
@@ -415,13 +365,9 @@ const ShareModal = ({ payload }) => {
                    copied && styles.webActionButtonActive,
                  ]}
                >
-                  <Feather
-                    name={copied ? "check" : "copy"}
-                    size={16}
-                    color={Palette.white}
-                  />
+                  <Feather name={copied ? 'check' : 'copy'} size={16} color={Palette.white} />
                  <Text style={styles.webActionLabel}>
-                    {copied ? "Lien copié" : "Copier le lien"}
+                    {copied ? 'Lien copié' : 'Copier le lien'}
                  </Text>
                </Pressable>

@@ -439,7 +385,7 @@ const ShareModal = ({ payload }) => {
              <Text style={styles.webSectionHeading}>{sectionTitle}</Text>
              <View style={styles.webOptionsGrid}>
                {shareOptions.map((option, index) => {
-                  const Icon = option?.Icon ?? Feather;
+                  const Icon = option?.Icon ?? Feather
                  return (
                    <Pressable
                      key={option?.key || index}
@@ -450,13 +396,9 @@ const ShareModal = ({ payload }) => {
                        <Icon size={18} color={Palette.white} />
                      </View>
                      <Text style={styles.webOptionLabel}>{option?.label}</Text>
-                      <Feather
-                        name="chevron-right"
-                        size={16}
-                        color="rgba(255, 255, 255, 0.6)"
-                      />
+                      <Feather name="chevron-right" size={16} color="rgba(255, 255, 255, 0.6)" />
                    </Pressable>
-                  );
+                  )
                })}
              </View>
            </View>
@@ -466,8 +408,8 @@ const ShareModal = ({ payload }) => {
        mobileContent
      )}
    </AppActionSheet>
-  );
-};
+  )
+}

 const styles = StyleSheet.create({
  container: {
@@ -475,40 +417,40 @@ const styles = StyleSheet.create({
  },
  card: {
    backgroundColor: Palette.glass,
-    overflow: "hidden",
+    overflow: 'hidden',
    borderRadius: 24,
    borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.08)",
+    borderColor: 'rgba(255, 255, 255, 0.08)',
    paddingHorizontal: 20,
    paddingVertical: 18,
    gap: 16,
  },
  blurCard: {
-    overflow: "hidden",
-    position: "relative",
+    overflow: 'hidden',
+    position: 'relative',
  },
  closeButton: {
-    position: "absolute",
+    position: 'absolute',
    top: 16,
    right: 16,
    width: 32,
    height: 32,
    borderRadius: 16,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "rgba(255, 255, 255, 0.12)",
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.12)',
    zIndex: 2,
  },
  heading: {
    fontSize: 20,
    color: Palette.white,
-    textAlign: "center",
+    textAlign: 'center',
    fontFamily: FONT_FAMILY.HelveticaNeueMedium,
  },
  linkRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: "rgba(255, 255, 255, 0.06)",
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.06)',
    borderRadius: 16,
    paddingHorizontal: 14,
    paddingVertical: 10,
@@ -521,21 +463,21 @@ const styles = StyleSheet.create({
    fontFamily: FONT_FAMILY.InterMedium,
  },
  linkActions: {
-    flexDirection: "row",
-    alignItems: "center",
+    flexDirection: 'row',
+    alignItems: 'center',
    gap: 8,
  },
  iconButton: {
    width: 32,
    height: 32,
    borderRadius: 16,
-    backgroundColor: "rgba(255, 255, 255, 0.08)",
-    alignItems: "center",
-    justifyContent: "center",
+    backgroundColor: 'rgba(255, 255, 255, 0.08)',
+    alignItems: 'center',
+    justifyContent: 'center',
  },
  copiedText: {
    fontSize: 12,
-    textAlign: "center",
+    textAlign: 'center',
    color: Palette.white,
    opacity: 0.8,
    fontFamily: FONT_FAMILY.InterMedium,
@@ -544,19 +486,19 @@ const styles = StyleSheet.create({
    fontSize: 18,
    color: Palette.white,
    fontFamily: FONT_FAMILY.HelveticaNeueMedium,
-    textAlign: "center",
+    textAlign: 'center',
  },
  optionsList: {
    gap: 12,
  },
  optionBlur: {
    borderRadius: 18,
-    overflow: "hidden",
+    overflow: 'hidden',
  },
  optionRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: "rgba(255, 255, 255, 0.04)",
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.04)',
    // borderRadius: 18,
    paddingHorizontal: 14,
    paddingVertical: 14,
@@ -566,9 +508,9 @@ const styles = StyleSheet.create({
    width: 36,
    height: 36,
    borderRadius: 18,
-    backgroundColor: "rgba(255, 255, 255, 0.08)",
-    alignItems: "center",
-    justifyContent: "center",
+    backgroundColor: 'rgba(255, 255, 255, 0.08)',
+    alignItems: 'center',
+    justifyContent: 'center',
  },
  optionLabel: {
    flex: 1,
@@ -580,9 +522,9 @@ const styles = StyleSheet.create({
    gap: 24,
  },
  webHeader: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
    gap: 12,
  },
  webHeading: {
@@ -595,20 +537,20 @@ const styles = StyleSheet.create({
    width: 32,
    height: 32,
    borderRadius: 16,
-    backgroundColor: "rgba(255, 255, 255, 0.08)",
-    alignItems: "center",
-    justifyContent: "center",
+    backgroundColor: 'rgba(255, 255, 255, 0.08)',
+    alignItems: 'center',
+    justifyContent: 'center',
  },
  webSubheading: {
    fontSize: 14,
-    color: "rgba(255, 255, 255, 0.65)",
+    color: 'rgba(255, 255, 255, 0.65)',
    fontFamily: FONT_FAMILY.InterMedium,
  },
  webContent: {
    gap: 20,
  },
  webLinkCard: {
-    backgroundColor: "rgba(255, 255, 255, 0.06)",
+    backgroundColor: 'rgba(255, 255, 255, 0.06)',
    borderRadius: 20,
    paddingHorizontal: 20,
    paddingVertical: 18,
@@ -618,18 +560,18 @@ const styles = StyleSheet.create({
    color: Palette.white,
    fontSize: 15,
    fontFamily: FONT_FAMILY.InterMedium,
-    overflow: "hidden",
+    overflow: 'hidden',
  },
  webLinkActions: {
-    flexDirection: "row",
-    alignItems: "center",
+    flexDirection: 'row',
+    alignItems: 'center',
    gap: 12,
-    flexWrap: "wrap",
+    flexWrap: 'wrap',
  },
  webActionButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
    gap: 10,
    paddingHorizontal: 18,
    paddingVertical: 12,
@@ -639,7 +581,7 @@ const styles = StyleSheet.create({
    backgroundColor: Palette.primary,
  },
  webSecondaryButton: {
-    backgroundColor: "rgba(255, 255, 255, 0.08)",
+    backgroundColor: 'rgba(255, 255, 255, 0.08)',
  },
  webActionButtonActive: {
    backgroundColor: Palette.darkRadioactivGreen,
@@ -650,7 +592,7 @@ const styles = StyleSheet.create({
    fontFamily: FONT_FAMILY.InterMedium,
  },
  webOptionsCard: {
-    backgroundColor: "rgba(255, 255, 255, 0.06)",
+    backgroundColor: 'rgba(255, 255, 255, 0.06)',
    borderRadius: 20,
    paddingHorizontal: 20,
    paddingVertical: 22,
@@ -665,11 +607,11 @@ const styles = StyleSheet.create({
    gap: 12,
  },
  webOptionRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
    gap: 12,
-    backgroundColor: "rgba(255, 255, 255, 0.04)",
+    backgroundColor: 'rgba(255, 255, 255, 0.04)',
    borderRadius: 16,
    paddingHorizontal: 18,
    paddingVertical: 14,
@@ -678,9 +620,9 @@ const styles = StyleSheet.create({
    width: 36,
    height: 36,
    borderRadius: 18,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "rgba(255, 255, 255, 0.08)",
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.08)',
    marginRight: 4,
  },
  webOptionLabel: {
@@ -689,6 +631,6 @@ const styles = StyleSheet.create({
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterMedium,
  },
-});
+})

-export default ShareModal;
+export default ShareModal