eyeSVG & center login

src/assets/UI/EyeSVG.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+import Svg, { Circle, Path } from "react-native-svg";
+
+function EyeSVG(props) {
+  return (
+    <Svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props?.size ?? 24}
+      height={props?.size ?? 24}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="white"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...props}
+    >
+      <Path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
+      <Circle cx={12} cy={12} r={3} />
+    </Svg>
+  );
+}
+
+export default EyeSVG;

src/assets/UI/EyeSlashSVG.js

@@ -0,0 +1,27 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+function EyeSlashSVG(props) {
+  return (
+    <Svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props?.size ?? 24}
+      height={props?.size ?? 24}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="white"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...props}
+    >
+      <Path d="M3 3l18 18" />
+      <Path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
+      <Path d="M12 9a3 3 0 013 3" />
+      <Path d="M9.88 9.88A3 3 0 0012 15a3 3 0 002.12-.88" />
+    </Svg>
+  );
+}
+
+export default EyeSlashSVG;

src/components/Input.js

@@ -1,24 +1,25 @@
-import {
-  Pressable,
-  TextInput,
-  InputAccessoryView,
-  Text,
-  View,
-  Image,
-  Keyboard,
-  Platform,
-} from "react-native";
 import { useState } from "react";
+import {
+  Image,
+  InputAccessoryView,
+  Keyboard,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
 // import CountryPicker, { DARK_THEME } from "react-native-country-picker-modal";
 import usePlaceApi from "react-native-minuit/src/hooks/usePlacesApi";
 
 import { art, icons } from "../assets";
 import { Fonts, Palette, Style, gutters } from "../styles";
-import { FONT_FAMILY, fontTypeList } from "../styles/Fonts";
+import { FONT_FAMILY } from "../styles/Fonts";
 
-import { isWeb } from "../hooks/useLayoutType";
-import { GOOGLE_API_KEY } from "../data/keys";
 import { BlurView } from "expo-blur";
+import EyeSlashSVG from "../assets/UI/EyeSlashSVG";
+import EyeSVG from "../assets/UI/EyeSVG";
+import { GOOGLE_API_KEY } from "../data/keys";
+import { isWeb } from "../hooks/useLayoutType";
 
 const Input = ({
   inputRef = null,
@@ -189,11 +190,7 @@ const Input = ({
           )}
           {type === "password" ? (
             <Pressable onPress={() => setShowPassword(!showPassword)}>
-              <Image
-                source={icons.eye}
-                style={[Style.iconDefault]}
-                resizeMode="contain"
-              />
+              {showPassword ? <EyeSVG /> : <EyeSlashSVG />}
             </Pressable>
           ) : type === "coinAmount" ? (
             <Image

src/providers/SharedProviders.js

@@ -1,14 +1,14 @@
-import React from "react";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
-import { SafeAreaProvider } from "react-native-safe-area-context";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import React from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
+import { SheetProvider } from "react-native-actions-sheet";
+import SplashAnimationProvider from "./SplashAnimationProvider";
+import StripeEmbeddedProvider from "./StripeEmbeddedProvider";
+import UniversalLinkProvider from "./UniversalLinkProvider";
 import UserDataProvider from "./UserDataProvider";
 import WebViewProvider from "./WebViewProvider";
-import SplashAnimationProvider from "./SplashAnimationProvider";
-import UniversalLinkProvider from "./UniversalLinkProvider";
-import StripeEmbeddedProvider from "./StripeEmbeddedProvider";
-import { SheetProvider } from "react-native-actions-sheet";
 
 const SharedProviders = ({ children }) => {
   const providers = [

src/screens/Login.js

@@ -1,4 +1,4 @@
-import { GoogleSigninButton } from "@react-native-google-signin/google-signin";
+/* eslint-disable react/display-name */
 import * as AuthSession from "expo-auth-session";
 import * as GoogleAuth from "expo-auth-session/providers/google";
 import * as WebBrowser from "expo-web-browser";
@@ -8,6 +8,7 @@ import { useGlobal } from "reactn";
 import { background } from "../assets";
 import GradientButton from "../components/GradientButton.js";
 import { Input } from "../components/Input.js";
+import ItemContainer from "../components/ItemContainer/ItemContainer";
 import firebase, { usersRef } from "../config/firebase";
 import {
   GOOGLE_ANDROID_CLIENT_ID,
@@ -20,7 +21,6 @@ import { Routes } from "../navigation";
 import { navigate } from "../navigation/NavigationService.js";
 import { FONT_FAMILY } from "../styles/Fonts.js";
 import Palette from "../styles/Palette.js";
-import ItemContainer from "../components/ItemContainer/ItemContainer";
 
 export default ({ navigation }) => {
   WebBrowser.maybeCompleteAuthSession();
@@ -133,7 +133,7 @@ export default ({ navigation }) => {
                 redirectUri: request?.redirectUri,
                 extraParams: { code_verifier: request?.codeVerifier },
               },
-              discovery,
+              discovery
             );
             idToken = tokenResponse?.id_token;
           }
@@ -168,10 +168,16 @@ export default ({ navigation }) => {
       width={isWeb ? 600 : null}
       backgroundImg={isWeb ? background.loginBgWeb : background.homeBG}
       headerType="NAVIGATION"
-      title="Connexion"
+      title={isWeb ? "" : "Connexion"}
       hideBackButton
     >
-      <View style={{ flex: 1, paddingTop: 20 }}>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
         <ItemContainer height={600} width={800} disableKeyboardHeight>
           <View style={{ gap: 30, paddingTop: 5, paddingHorizontal: 5 }}>
             <View style={{ gap: 2 }}>

src/screens/Playback/RecordPlayback.web.js

@@ -193,9 +193,7 @@ const RecordPlayback = ({ route }) => {
         "mediaRecorder:error",
         String(err?.message || err || "")
       );
-      setMediaError(
-        err instanceof Error ? err : new Error(String(err || ""))
-      );
+      setMediaError(err instanceof Error ? err : new Error(String(err || "")));
     };
 
     recorder.onstop = () => {
@@ -475,14 +473,10 @@ const RecordPlayback = ({ route }) => {
     }
 
     setIsRecording(false);
-    console.log(
-      LOG_PREFIX,
-      "stopAndNavigate:navigate",
-      {
-        route: Routes.RecordedPlayback,
-        hasVideo: !!videoUrl,
-      }
-    );
+    console.log(LOG_PREFIX, "stopAndNavigate:navigate", {
+      route: Routes.RecordedPlayback,
+      hasVideo: !!videoUrl,
+    });
     navigate(Routes.RecordedPlayback, { project, videoUri: videoUrl || null });
   }, [dur, player, pos, project, stopRecorderAndGetUrl]);
 

src/screens/Register.js

@@ -1,15 +1,15 @@
-import { View, Text, Pressable } from "react-native";
 import React, { useState } from "react";
-import Page from "../layouts/Page";
+import { Pressable, Text, View } from "react-native";
 import { background } from "../assets";
-import { Palette } from "../styles";
-import { FONT_FAMILY } from "../styles/Fonts";
-import { Input } from "../components/Input";
 import BorderGradientButton from "../components/BorderGradientButton";
-import { navigate } from "../navigation/NavigationService";
-import { Routes } from "../navigation";
+import { Input } from "../components/Input";
 import ItemContainer from "../components/ItemContainer/ItemContainer";
 import { isWeb } from "../hooks/useLayoutType";
+import Page from "../layouts/Page";
+import { Routes } from "../navigation";
+import { navigate } from "../navigation/NavigationService";
+import { Palette } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
 
 const Register = () => {
   const [email, setEmail] = useState("");
@@ -21,7 +21,13 @@ const Register = () => {
       headerType="NAVIGATION"
       title="Inscription"
     >
-      <View style={{ flex: 1, paddingTop: 20 }}>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
         <ItemContainer height={360} disableKeyboardHeight>
           <View style={{ gap: 32, paddingTop: 5, paddingHorizontal: 5 }}>
             <Text