sign/login ui tweaks

components/pages/main/SignUpPage.tsx

@@ -11,7 +11,7 @@ import {
 } from "react-native-ui-lib";
 import { useSignUp } from "@/hooks/firebase/useSignUp";
 import { ProfileType } from "@/contexts/AuthContext";
-import { StyleSheet } from "react-native";
+import { Dimensions, StyleSheet } from "react-native";
 import { AntDesign } from "@expo/vector-icons";
 
 const SignUpPage = ({
@@ -40,19 +40,21 @@ const SignUpPage = ({
   };
 
   return (
-    <View padding-10 height={"100%"} flexG>
-      <Text text30 center>
-        Get started with Cally
+    <View padding-15 marginT-30 height={Dimensions.get("window").height} flexG>
+      <Text style={styles.title}>Get started with Cally</Text>
+      <Text style={styles.subtitle} marginT-15 color="#919191">
+        Please enter your details.
       </Text>
-      <Text center>Please enter your details.</Text>
       <TextField
-        marginT-60
+        marginT-30
         autoFocus
         placeholder="First name"
         value={firstName}
         onChangeText={setFirstName}
         style={styles.textfield}
-        onSubmitEditing={() => {lnameRef.current?.focus()}}
+        onSubmitEditing={() => {
+          lnameRef.current?.focus();
+        }}
         blurOnSubmit={false}
       />
       <TextField
@@ -61,7 +63,9 @@ const SignUpPage = ({
         value={lastName}
         onChangeText={setLastName}
         style={styles.textfield}
-        onSubmitEditing={() => {emailRef.current?.focus()}}
+        onSubmitEditing={() => {
+          emailRef.current?.focus();
+        }}
         blurOnSubmit={false}
       />
       <TextField
@@ -70,58 +74,69 @@ const SignUpPage = ({
         value={email}
         onChangeText={setEmail}
         style={styles.textfield}
-        onSubmitEditing={() => {passwordRef.current?.focus()}}
+        onSubmitEditing={() => {
+          passwordRef.current?.focus();
+        }}
         blurOnSubmit={false}
       />
-      <TextField
-        ref={passwordRef}
-        placeholder="Password"
-        value={password}
-        onChangeText={setPassword}
-        secureTextEntry={!isPasswordVisible}
-        style={styles.textfield}
-        trailingAccessory={
-          <TouchableOpacity
-            onPress={() => setIsPasswordVisible(!isPasswordVisible)}
-          >
-            <AntDesign
-              name={isPasswordVisible ? "eye" : "eyeo"}
-              size={24}
-              color="gray"
-            />
-          </TouchableOpacity>
-        }
-      />
-      <View gap-10 marginH-10>
+      <View
+        centerV
+        style={[styles.textfield, { padding: 0, paddingHorizontal: 30 }]}
+      >
+        <TextField
+          ref={passwordRef}
+          placeholder="Password"
+          style={styles.jakartaLight}
+          value={password}
+          onChangeText={setPassword}
+          secureTextEntry={!isPasswordVisible}
+          trailingAccessory={
+            <TouchableOpacity
+              onPress={() => setIsPasswordVisible(!isPasswordVisible)}
+            >
+              <AntDesign
+                name={isPasswordVisible ? "eye" : "eyeo"}
+                size={24}
+                color="gray"
+              />
+            </TouchableOpacity>
+          }
+        />
+      </View>
+      <View gap-5 marginT-15>
         <View row centerV>
           <Checkbox
+            style={[styles.check]}
+            color="#919191"
             value={allowFaceID}
             onValueChange={(value) => {
               setAllowFaceID(value);
             }}
           />
-          <Text text90R marginL-10>
+          <Text style={styles.jakartaLight} marginL-10>
             Allow FaceID for login in future
           </Text>
         </View>
         <View row centerV>
           <Checkbox
+            style={styles.check}
+            color="#919191"
             value={acceptTerms}
             onValueChange={(value) => setAcceptTerms(value)}
           />
           <View row>
-            <Text text90R marginL-10>
+            <Text style={styles.jakartaLight} marginL-10>
               I accept the
             </Text>
             <TouchableOpacity>
-              <Text text90 style={{ textDecorationLine: "underline" }}>
+              <Text text90 style={styles.jakartaMedium}>
                 {" "}
                 terms and conditions
               </Text>
             </TouchableOpacity>
-            <Text text90R> and </Text>
+            <Text style={styles.jakartaLight}> and </Text>
             <TouchableOpacity>
-              <Text text90 style={{ textDecorationLine: "underline" }}>
+              <Text text90 style={styles.jakartaMedium}>
                 {" "}
                 privacy policy
               </Text>
@@ -132,16 +147,24 @@ const SignUpPage = ({
       <View style={styles.bottomView}>
         <Button
           label="Register"
+          labelStyle={{
+            fontFamily: "PlusJakartaSans_600SemiBold",
+            fontSize: 16,
+          }}
           onPress={handleSignUp}
-          style={{ marginBottom: 10, backgroundColor: "#fd1775" }}
+          style={{ marginBottom: 0, backgroundColor: "#fd1775", height: 50 }}
         />
-        <View row centerH marginT-10 marginB-5 gap-5>
-          <Text text70 center>
+        <View row centerH marginT-10 marginB-2 gap-5>
+          <Text style={[styles.jakartaLight, { fontSize: 16, color: "#484848" }]} center>
             Already have an account?
           </Text>
 
           <Button
-            label="Sign In"
+            label="Log in"
+            labelStyle={[
+              styles.jakartaMedium,
+              { fontSize: 16, textDecorationLine: "none", color: "#fd1775" },
+            ]}
             flexS
             margin-0
             link
@@ -161,11 +184,35 @@ export default SignUpPage;
 const styles = StyleSheet.create({
   textfield: {
     backgroundColor: "white",
-    marginVertical: 10,
+    marginVertical: 8,
     padding: 30,
-    height: 45,
+    height: 44,
     borderRadius: 50,
+    fontFamily: "PlusJakartaSans_300Light",
+    fontSize: 13,
+    color: "#919191",
   },
   //mora da se izmeni kako treba
-  bottomView: { marginTop: 150 },
+  bottomView: { marginTop: "auto", marginBottom: 30 },
+  jakartaLight: {
+    fontFamily: "PlusJakartaSans_300Light",
+    fontSize: 13,
+    color: "#919191",
+  },
+  jakartaMedium: {
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 13,
+    color: "#919191",
+    textDecorationLine: "underline",
+  },
+  title: { fontFamily: "Manrope_600SemiBold", fontSize: 34, marginTop: 50 },
+  subtitle: { fontFamily: "PlusJakartaSans_400Regular", fontSize: 16 },
+  check: {
+    borderRadius: 3,
+    aspectRatio: 1,
+    width: 18,
+    color: "#919191",
+    borderColor: "#919191",
+    borderWidth: 1,
+  },
 });