Update default font scaling for Text and TextInput components

Author: codeAbinash

src/assets/icons/appIcon.png

@@ -22,14 +22,14 @@ export default function BackHeader({ navigation, Right, title, Title }: BackHead
         {Title || (
           <View className='flex-row items-center' style={{ gap: 10 }}>
             <TouchableOpacity
-              className='p-3 pr-2'
+              className='p-3 pr-0.5'
               onPress={() => navigation && navigation.goBack()}
               activeOpacity={0.7}
             >
               <ArrowLeft01Icon width={26} height={26} color={scheme === 'dark' ? Colors.zinc[200] : Colors.zinc[800]} />
             </TouchableOpacity>
             <Medium
-              style={{ fontSize: 18, flex: 1 }}
+              style={{ fontSize: 14.3, flex: 1 }}
               className='mt-0.5 text-zinc-800 dark:text-zinc-200'
               numberOfLines={1}
             >

src/assets/icons/appIcon.svg

@@ -10,11 +10,11 @@ export default function Btn({ title, onPress, disabled, children, style, ...rest
       activeOpacity={0.8}
       onPress={onPress}
       className='w-full bg-accent'
-      style={[{ borderRadius: 14, paddingVertical: 13, paddingHorizontal: 13, opacity: disabled ? 0.8 : 1 }, style]}
+      style={[{ borderRadius: 14.5, paddingVertical: 13, paddingHorizontal: 13, opacity: disabled ? 0.8 : 1 }, style]}
       disabled={disabled}
       {...rest}
     >
-      <Medium style={{ fontSize: 15 }} className='text-center text-white'>
+      <Medium style={{ fontSize: 12.2 }} className='text-center text-white'>
         {title || children}
       </Medium>
     </TouchableOpacity>
@@ -27,9 +27,9 @@ export function BtnTransparent({ title, onPress, children, style }: ButtonProps)
       activeOpacity={0.7}
       onPress={onPress}
       className='w-full'
-      style={[{ borderRadius: 14, paddingVertical: 13 }]}
+      style={[{ borderRadius: 14.5, paddingVertical: 13 }]}
     >
-      <Medium style={[{ fontSize: 15 }, style]} className='text-center text-accent'>
+      <Medium style={[{ fontSize: 12.2 }, style]} className='text-center text-accent'>
         {title || children}
       </Medium>
     </TouchableOpacity>

src/assets/icons/src/list-setting-stroke-rounded.svg

@@ -16,7 +16,7 @@ export function Input({ Icon, Right, accent = Colors.accent, multiline, style, .
         {Icon}
         <TextInput
           className='flex-1 p-2.5 px-0 text-zinc-800 dark:text-zinc-200'
-          style={[{ fontSize: 14.5, paddingVertical: 0, flex: 1 }, PoppinsMedium, style]}
+          style={[{ fontSize: 12, paddingVertical: 0, flex: 1 }, PoppinsMedium, style]}
           placeholderTextColor={scheme === 'dark' ? Colors.zinc[500] : Colors.zinc[400]}
           cursorColor={accent}
           selectionColor={accent + '55'}

src/components/BackHeader.tsx

@@ -31,7 +31,7 @@ export default function Search({ onChangeText, value, ...all }: TextInputProps)
       <TextInput
         ref={ref}
         className='flex-1 p-2 px-3 text-zinc-800 dark:text-zinc-200'
-        style={[PoppinsMedium, { fontSize: 12.2 }]}
+        style={[PoppinsMedium, { fontSize: 12.2, marginTop: 0.8 }]}
         placeholderTextColor={scheme === 'dark' ? Colors.zinc[500] : Colors.zinc[400]}
         cursorColor={Colors.accent}
         selectionColor={Colors.accent + '55'}

src/components/Button.tsx

@@ -1,6 +1,6 @@
 import { ArrowRight01Icon, Tick01Icon } from '@assets/icons/icons'
 import { Colors } from '@utils/colors'
-import { Medium } from '@utils/fonts'
+import { F, Medium } from '@utils/fonts'
 import type { StackNav } from '@utils/types'
 import React from 'react'
 import {
@@ -39,7 +39,7 @@ export function SettOption({ title, onPress, Icon, Right, style, arrow, numberOf
         {Icon}
         <Medium
           className='p-2.5 px-0 text-left text-zinc-800 dark:text-zinc-200'
-          style={[{ fontSize: 14.5, flexShrink: 1 }, style]}
+          style={[{ fontSize: 12, flexShrink: 1 }, style]}
           numberOfLines={numberOfLines || 0}
         >
           {title}
@@ -63,7 +63,7 @@ export function SettGroup({ children, title, color = Colors.accent, ...rest }: S
       {title && (
         <Medium
           className={'px-6 py-1.5 text-accent'}
-          style={{ textTransform: 'none', opacity: 1, fontSize: 13, color: color }}
+          style={{ textTransform: 'none', opacity: 1, fontSize: 10, color: color }}
         >
           {title}
         </Medium>
@@ -79,7 +79,7 @@ export function RightArrow() {
 
 export function SettText({ children, style, ...rest }: TextProps) {
   return (
-    <Medium className='px-5 text-xs text-zinc-500 dark:text-zinc-500' {...rest} style={[{ fontSize: 11 }, style]}>
+    <Medium className='px-5 text-zinc-500 dark:text-zinc-500' {...rest} style={[F.F9, style]}>
       {children}
     </Medium>
   )

src/components/Input.tsx

@@ -26,25 +26,25 @@ export default function StackHeader({
   navigation,
 }: CardHeaderProps) {
   return (
-    <View className='w-full flex-row items-center justify-between pb-1' style={{ gap: 5 }}>
+    <View className='w-full flex-row items-center justify-between pb-1.5' style={{ gap: 5 }}>
       <View className='items-start' style={{ flex: 1 }}>
         <TouchableOpacity onPress={LeftOnPress || (() => navigation.goBack())} activeOpacity={0.7}>
           {Left || (
-            <Medium className='px-0.5 py-1 pb-1 text-accent' style={{ fontSize: 15.5 }} numberOfLines={1}>
+            <Medium className='px-0.5 py-1.5 pb-1 text-accent' style={{ fontSize: 13 }} numberOfLines={1}>
               {left}
             </Medium>
           )}
         </TouchableOpacity>
       </View>
       {Title || (
-        <SemiBold className='text-center text-zinc-800 dark:text-zinc-200' style={{ fontSize: 16 }}>
+        <SemiBold className='text-center text-zinc-800 dark:text-zinc-200' style={{ fontSize: 13 }}>
           {title}
         </SemiBold>
       )}
       <View className='flex-1 items-end'>
         <TouchableOpacity onPress={RightOnPress || (() => navigation.goBack())} activeOpacity={0.7}>
           {Right || (
-            <Medium className='px-0.5 py-1 pb-1 text-accent' style={{ fontSize: 15.5 }}>
+            <Medium className='px-0.5 py-1 pb-1.5 text-accent' style={{ fontSize: 13 }}>
               {right}
             </Medium>
           )}

src/components/Search.tsx

@@ -4,15 +4,15 @@ import type { TextProps } from 'react-native'
 
 export function TxtAcc({ children, size, ...rest }: TextProps & { size?: number }) {
   return (
-    <Medium className='text-accent' style={{ fontSize: size || 15 }} {...rest}>
+    <Medium className='text-accent' style={{ fontSize: size || 11.5 }} {...rest}>
       {children}
     </Medium>
   )
 }
 
 export function Txt({ children, size, ...rest }: TextProps & { size?: number }) {
   return (
-    <Medium className='text-zinc-500' style={{ fontSize: size || 14 }} {...rest}>
+    <Medium className='text-zinc-500' style={{ fontSize: size || 11.5 }} {...rest}>
       {children}
     </Medium>
   )