update

src/components/Input.js

@@ -6,6 +6,7 @@ import {
   View,
   Image,
   Keyboard,
+  Platform,
 } from "react-native";
 import { useState } from "react";
 import CountryPicker, { DARK_THEME } from "react-native-country-picker-modal";
@@ -13,10 +14,11 @@ import usePlaceApi from "react-native-minuit/src/hooks/usePlacesApi";
 
 import { art, icons } from "../assets";
 import { Fonts, Palette, Style, gutters } from "../styles";
-import { fontTypeList } from "../styles/Fonts";
+import { FONT_FAMILY, fontTypeList } from "../styles/Fonts";
 
 import { isWeb } from "../hooks/useLayoutType";
 import { GOOGLE_API_KEY } from "../data/keys";
+import { BlurView } from "expo-blur";
 
 const Input = ({
   inputRef = null,
@@ -39,6 +41,7 @@ const Input = ({
   layout = "default", // "default" | "line"
 
   isNumeric = false,
+  isBlur = false,
 }) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
@@ -63,51 +66,66 @@ const Input = ({
     minChars: 2,
   });
 
+  const ContainerView = isBlur ? BlurView : View;
+
   return (
     <>
       <View
         style={{
-          ...(isRoundedRectangle
-            ? {
-                ...Style.containerItem,
-                ...(isDefaultLayout
-                  ? {
-                      paddingVertical: 10,
-                      backgroundColor:
-                        type === "coinAmount"
-                          ? Palette.transparentRadioactivGreen
-                          : Palette.lightPurple,
-                      height: type === "textarea" ? 150 : "auto",
-                    }
-                  : {}),
-              }
-            : {
-                ...Style.containerCenter,
-                borderBottomColor: mainColor,
-                borderBottomWidth: 1,
-              }),
-          ...(borderType === "dashed"
-            ? {
-                borderStyle: "dashed",
-                borderColor: isFocused
-                  ? Palette.primary
-                  : Palette.transparentPrimary,
-                borderWidth: 1,
-              }
-            : {}),
           width: "100%",
           ...containerStyle,
+          gap: 4,
         }}
       >
         {label?.length > 0 && (
-          <Text style={{ ...Fonts({ type: "default" }) }}>{label}</Text>
+          <Text
+            style={{
+              fontSize: 14,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+            }}
+          >
+            {label}
+          </Text>
         )}
 
-        <View
+        <ContainerView
+          tint="dark"
+          experimentalBlurMethod={
+            Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+          }
           style={{
             ...Style.containerRow,
-            ...(isRoundedRectangle ? { flex: 1 } : {}),
-            paddingVertical: 10,
+            ...(isRoundedRectangle
+              ? {
+                  ...Style.containerItem,
+                  ...(isDefaultLayout
+                    ? {
+                        paddingVertical: 10,
+                        backgroundColor:
+                          type === "coinAmount"
+                            ? Palette.transparentRadioactivGreen
+                            : Palette.glass,
+                        height: type === "textarea" ? 150 : 50,
+                        overflow: "hidden",
+                        borderRadius: 12,
+                      }
+                    : {}),
+                }
+              : {
+                  ...Style.containerCenter,
+                  borderBottomColor: mainColor,
+                  borderBottomWidth: 1,
+                }),
+            ...(borderType === "dashed"
+              ? {
+                  borderStyle: "dashed",
+                  borderColor: isFocused
+                    ? Palette.primary
+                    : Palette.transparentPrimary,
+                  borderWidth: 1,
+                }
+              : {}),
             width: "100%",
           }}
         >
@@ -155,7 +173,7 @@ const Input = ({
             <TextInput
               ref={inputRef}
               placeholder={placeholder}
-              placeholderTextColor={mainColor}
+              placeholderTextColor={Palette.gray}
               value={value}
               onChangeText={setValue}
               multiline={type === "textarea"}
@@ -165,9 +183,15 @@ const Input = ({
               style={{
                 width: "100%",
                 ...(isRoundedRectangle
-                  ? { height: "100%", flex: 1, textAlignVertical: "top" }
+                  ? {
+                      height: "100%",
+                      flex: 1,
+                      textAlignVertical: type === "textarea" ? "top" : "center",
+                    }
                   : { textAlign: "center" }),
-                ...Fonts({ type: "default", color: mainColor }),
+                fontSize: 14,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterRegular,
                 ...(isWeb
                   ? {
                       lineHeight: "auto",
@@ -199,10 +223,7 @@ const Input = ({
           )}
 
           {type === "password" ? (
-            <Pressable
-              onPress={() => setShowPassword(!showPassword)}
-              style={{ position: "absolute", right: 0 }}
-            >
+            <Pressable onPress={() => setShowPassword(!showPassword)}>
               <Image
                 source={icons.eye}
                 style={[Style.iconDefault]}
@@ -216,7 +237,7 @@ const Input = ({
               resizeMode="contain"
             />
           ) : null}
-        </View>
+        </ContainerView>
 
         {type === "autoCompleteAddress" &&
           places?.[0]?.description &&