Refactor Input component styles and enhance Signup form placeholders

Author: codeAbinash

src/components/Input.tsx

@@ -1,5 +1,5 @@
 import { Colors } from '@utils/colors'
-import { SEMIBOLD } from '@utils/fonts'
+import { F, SEMIBOLD } from '@utils/fonts'
 import { cn } from '@utils/utils'
 import React from 'react'
 import { TextInput, View, useColorScheme, type TextInputProps } from 'react-native'
@@ -17,7 +17,7 @@ export function Input({ Icon, Right, accent = Colors.accent, multiline, classNam
         {Icon}
         <TextInput
           className={cn('flex-1 px-0 py-3 text-zinc-800 dark:text-zinc-200', className)}
-          style={[{ fontSize: 12.5, marginBottom: 1, paddingVertical: 0, flex: 1 }, SEMIBOLD]}
+          style={[{ marginBottom: 1, paddingVertical: 0, flex: 1 }, F.F12_5, SEMIBOLD]}
           placeholderTextColor={scheme === 'dark' ? Colors.zinc[500] : Colors.zinc[400]}
           cursorColor={accent}
           selectionColor={accent + '77'}

src/components/RoundNotification.tsx

@@ -1,12 +1,11 @@
 import { SemiBold } from '@utils/fonts'
-import React from 'react'
 import { View } from 'react-native'
 
 export default function RoundNotification({ n }: { n: number }) {
   if (n === 0) return null
   return (
     <View className='items-center justify-center rounded-full bg-red-500' style={{ height: 22, width: 22 }}>
-      <SemiBold className='text-xs text-white' style={{ paddingTop: 2 }} numberOfLines={1}>
+      <SemiBold className='text-xs text-white' style={{ paddingBottom: 2 }} numberOfLines={1}>
         {n}
       </SemiBold>
     </View>

src/screens/Settings/UiAndComponents.tsx

@@ -115,7 +115,7 @@ export default function UiAndComponents({ navigation }: NavProp) {
           <SettGroup title='Text area'>
             <Input
               placeholder='This is a input field with multiple lines. You can type as much as you want.'
-              numberOfLines={5}
+              numberOfLines={8}
               multiline
             />
           </SettGroup>

src/screens/auth/Login.tsx

@@ -89,6 +89,7 @@ export default function Login({ navigation }: NavProp) {
           <SettGroup title='Email or Username'>
             <Input
               Icon={<RoundedIcon Icon={Mail02SolidIcon} className='bg-rose-500' />}
+              autoComplete='email'
               placeholder='Email or Username'
               value={username}
               onChangeText={setUsername}
@@ -101,6 +102,7 @@ export default function Login({ navigation }: NavProp) {
           <SettGroup title='Password'>
             <Input
               value={password}
+              autoComplete='password'
               onChangeText={setPassword}
               placeholder='Password'
               secureTextEntry={!isVisible}

src/screens/auth/Signup.tsx

@@ -80,6 +80,7 @@ export default function Signup({ navigation }: NavProp) {
   })
 
   useEffect(() => {
+    if(!username) return setStatus(NameStatus.Initial)
     setStatus(NameStatus.Checking)
     const timer = setTimeout(() => {
       const { error, data } = usernameStatusZodValidator.safeParse({ username })
@@ -93,7 +94,7 @@ export default function Signup({ navigation }: NavProp) {
     return () => clearTimeout(timer)
   }, [checkUsername, username])
 
-  function handelSubmit() {
+  function handleSubmit() {
     const { error, data } = signupZodValidator.safeParse({ username, password, email, name })
     console.log(error)
     if (error) {
@@ -114,15 +115,17 @@ export default function Signup({ navigation }: NavProp) {
           <SettGroup title='Full Name'>
             <Input
               Icon={<RoundedIcon Icon={TextFontSolidIcon} className='bg-blue-500' />}
-              placeholder='Full Name'
+              placeholder='Your Full Name'
+              autoComplete='name'
               value={name}
               onChangeText={setName}
             />
           </SettGroup>
           <SettGroup title='Email'>
             <Input
               Icon={<RoundedIcon Icon={Mail02SolidIcon} className='bg-rose-500' />}
-              placeholder='Email'
+              placeholder='Your Email'
+              autoComplete='email'
               value={email}
               keyboardType='email-address'
               onChangeText={setEmail}
@@ -131,7 +134,8 @@ export default function Signup({ navigation }: NavProp) {
           <SettGroup title='Username'>
             <Input
               Icon={<RoundedIcon Icon={StarSolidIcon} className='bg-amber-500' />}
-              placeholder='Username'
+              placeholder='Select a Username'
+              autoComplete='username'
               value={username}
               onChangeText={setUsername}
               Right={<UsernameStatus isAvail={status} />}
@@ -142,7 +146,8 @@ export default function Signup({ navigation }: NavProp) {
             <Input
               value={password}
               onChangeText={setPassword}
-              placeholder='Password'
+              placeholder='Enter Password'
+              autoComplete='password'
               secureTextEntry={!isVisible}
               Icon={<RoundedIcon Icon={LockPasswordSolidIcon} className='bg-slate-500' />}
               Right={<PasswordEye isVisible={isVisible} setIsVisible={setIsVisible} />}
@@ -158,7 +163,7 @@ export default function Signup({ navigation }: NavProp) {
             title={isPending ? 'Signing up...' : 'Signup'}
             className='w-full'
             disabled={isPending}
-            onPress={handelSubmit}
+            onPress={handleSubmit}
           />
         </View>
         <SettGroup title='More Options' className='mt-5'>
@@ -189,8 +194,8 @@ function UsernameStatus({ isAvail }: { isAvail: NameStatus }) {
   return (
     <>
       {isAvail === NameStatus.Checking && <ActivityIndicator size={23} color={Colors.accent} />}
-      {isAvail === NameStatus.Available && <Tick01Icon className='text-green-500' height={22} width={22} />}
-      {isAvail === NameStatus.Unavailable && <Cancel01SolidIcon className='text-red-500' width={20} height={20} />}
+      {isAvail === NameStatus.Available && <Tick01Icon height={22} width={22} color={Colors.green[500]} />}
+      {isAvail === NameStatus.Unavailable && <Cancel01SolidIcon width={20} height={20} color={Colors.red[500]} />}
     </>
   )
 }

src/utils/fonts.tsx

@@ -82,6 +82,7 @@ export const F = StyleSheet.create({
   },
   F12_5: {
     fontSize: 12.5,
+    lineHeight: 18,
   },
   F13: {
     fontSize: 13,