refactor: update background colors and text sizes for consistency across components

Author: codeAbinash

global.css

@@ -9,8 +9,13 @@
   --color-g2: #3866D5;
   --color-g1: #8101E9;
   --color-app-icon-bg: #191C21;
+
+  --bg:  #f2f2f3;
+  --bg-card: #fff;
+  --bg-card-dark: #0d0d0f;
 }
 
+
 .d {
   @apply border border-red-500;
 }
@@ -20,5 +25,9 @@
 }
 
 .bg {
-  @apply bg-zinc-100 dark:bg-black;
+  @apply bg-(--bg) dark:bg-black;
 }
+
+.bg-card {
+  @apply bg-(--bg-card) dark:bg-(--bg-card-dark);
+}

src/components/BackHeader.tsx

@@ -18,7 +18,7 @@ type BackHeaderProps = ViewProps & {
 export default function BackHeader({ navigation, Right, title, Title, onBackPress }: BackHeaderProps) {
   const scheme = useColorScheme()
   return (
-    <View className='bg-white px-5 pr-6 pb-0.5 pl-1 dark:bg-zinc-950'>
+    <View className='bg-card px-5 pr-6 pb-0.5 pl-1'>
       <PaddingTop />
       <View>
         {Title || (
@@ -29,8 +29,8 @@ export default function BackHeader({ navigation, Right, title, Title, onBackPres
               activeOpacity={0.7}
             >
               <ArrowLeft01Icon
-                strokeWidth={1.7}
-                size={26}
+                strokeWidth={1.75}
+                size={27}
                 color={scheme === 'dark' ? Colors.zinc[200] : Colors.zinc[800]}
               />
             </TouchableOpacity>

src/components/Popup.tsx

@@ -32,11 +32,11 @@ const Popup = React.memo<PopupT>(({ text, title, buttons, index, noClose }) => {
         }}
       >
         <View className='flex-1 items-center justify-center bg-black/40 dark:bg-black/50'>
-          <View className='w-[85%] rounded-xl bg-white dark:bg-zinc-900'>
+          <View className='w-[85%] rounded-3xl bg-white dark:bg-zinc-900'>
             <View className='px-6 pt-5'>
-              <SemiBold className='text-base text-black dark:text-white'>{title}</SemiBold>
+              <SemiBold className='text-xl text-black dark:text-white'>{title}</SemiBold>
               <ScrollView style={{ maxHeight: H * 0.65, marginTop: 10 }}>
-                <Medium className='text-sm text-black dark:text-white' style={{ fontSize: MAIN_TEXT_SIZE }}>
+                <Medium className='text-sm text-black dark:text-white' style={{ fontSize: MAIN_TEXT_SIZE + 1 }}>
                   {text}
                 </Medium>
               </ScrollView>

src/components/Settings/SettGroup.tsx

@@ -1,4 +1,4 @@
-import { SMALL_TEXT_SIZE } from '@components/values'
+import { SUB_TEXT_SIZE } from '@components/values'
 import { Colors } from '@utils/colors'
 import { SemiBold } from '@utils/fonts'
 import { cn, layout } from '@utils/utils'
@@ -11,11 +11,18 @@ type SettGroupProps = ViewProps & {
 }
 export default function SettGroup({ children, title, className, accent = Colors.accent, ...rest }: SettGroupProps) {
   return (
-    <Animated.View className={cn('bg-white py-3 dark:bg-zinc-950', className)} layout={layout} {...rest}>
+    <Animated.View
+      className={cn('bg-card py-3  mx-3.5 ', className)}
+      layout={layout}
+      {...rest}
+      style={{
+        borderRadius: 20,
+      }}
+    >
       {title && (
         <SemiBold
           className={'px-6 pb-1.5 pt-0.5 text-accent'}
-          style={{ textTransform: 'none', opacity: 1, fontSize: SMALL_TEXT_SIZE, color: accent, marginBottom: 5 }}
+          style={{ textTransform: 'none', opacity: 1, fontSize: SUB_TEXT_SIZE, color: accent, marginBottom: 5 }}
         >
           {title}
         </SemiBold>

src/components/Settings/SettOption.tsx

@@ -28,7 +28,7 @@ export function SettOption({
 }: SettOptionProps) {
   return (
     <TouchableOpacity
-      className={cn('flex-row items-center justify-between px-6', className)}
+      className={cn('flex-row items-center justify-between px-5', className)}
       onPress={onPress}
       activeOpacity={0.7}
       style={[{ gap: 10 }]}

src/components/Settings/SettText.tsx

@@ -6,7 +6,7 @@ import { TextProps } from 'react-native'
 export default function SettText({ children, className, ...rest }: TextProps) {
   const newLocal = cn('px-5 text-zinc-500 dark:text-zinc-500', className)
   return (
-    <Medium className={newLocal} {...rest} style={{ fontSize: SMALL_TEXT_SIZE, lineHeight: SMALL_TEXT_SIZE * 1.5 }}>
+    <Medium className={newLocal} {...rest} style={{ fontSize: 12, lineHeight: 12 * 1.5 }}>
       {children}
     </Medium>
   )

src/components/Settings/SettWrapper.tsx

@@ -6,7 +6,7 @@ import { AutoStatusBar } from '@components/StatusBar'
 import { useNavigation } from '@react-navigation/native'
 import { StackNav } from '@utils/types'
 import React from 'react'
-import { ScrollViewProps, useColorScheme, View } from 'react-native'
+import { ScrollViewProps, View, useColorScheme } from 'react-native'
 
 type SettWrapperProps = ScrollViewProps & {
   Header?: React.ReactNode

src/components/values.ts

@@ -2,5 +2,5 @@ export const MAIN_TEXT_SIZE = 14
 export const MAIN_BUTTON_SIZE = 15
 export const SUB_TEXT_SIZE = 13
 export const SMALL_TEXT_SIZE = 11
-export const HEADING_SIZE = 17
+export const HEADING_SIZE = 18
 export const LARGE_HEADING_SIZE = 20

src/screens/DeveloperOptions/DeveloperOptions.tsx

@@ -66,7 +66,7 @@ export default function DeveloperOptions({ navigation }: NavProp) {
 
   return (
     <SettWrapper title='Developer Options'>
-      <Gap12>
+      <Gap12 className='mt-4'>
         <SettGroup>
           <SettOption
             title='Developer Options'

src/screens/Settings/Settings/Settings.tsx

@@ -28,6 +28,7 @@ import PolicyIcon from '@hugeicons/PolicyIcon'
 import ShieldUserIcon from '@hugeicons/ShieldUserIcon'
 import SquareArrowUp02Icon from '@hugeicons/SquareArrowUp02Icon'
 import SquareLock02Icon from '@hugeicons/SquareLock02Icon'
+import SunCloudAngledRainZap01Icon from '@hugeicons/SunCloudAngledRainZap01Icon'
 import TelegramIcon from '@hugeicons/TelegramIcon'
 import UserIcon from '@hugeicons/UserIcon'
 import Wallet02Icon from '@hugeicons/Wallet02Icon'
@@ -46,12 +47,11 @@ import { ToastAndroid, View, useColorScheme } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 import Animated, { FadeIn } from 'react-native-reanimated'
 import AdminSettings from './AdminSettings'
-import SunCloudAngledRainZap01Icon from '@hugeicons/SunCloudAngledRainZap01Icon'
 
 function SettingsHeader({ title, Title }: { title?: string; Title?: React.ReactNode }) {
   const [search, setSearch] = React.useState('')
   return (
-    <View style={{ gap: 5 }} className='bg-white px-5 pb-3 dark:bg-zinc-950'>
+    <View style={{ gap: 5 }} className='bg-card px-5 pb-3 '>
       {Title}
       <Bold style={{ fontSize: 24 }} className='mt-3 text-zinc-800 dark:text-zinc-200'>
         {title}
@@ -103,7 +103,7 @@ export default function Settings({ navigation }: NavProp) {
   }
 
   return (
-    <View className='flex-1 bg-white dark:bg-zinc-950'>
+    <View className='flex-1 bg-card'>
       <PaddingTop />
       <ScrollView
         contentContainerStyle={{ paddingBottom: 30, backgroundColor: scheme === 'dark' ? 'black' : Colors.zinc[100] }}