Full UI 180 & Overall improvements

src/components/BottomTab.js

@@ -2,13 +2,14 @@ import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import Ionicons from '@expo/vector-icons/Ionicons';
 import { styles } from '../styles';
+import { cn } from '../utils/cn';
 
 function TabBtn({ tab, current, onChange }) {
   const active = current === tab.key;
   return (
-    <Pressable onPress={() => onChange(tab.key)} style={styles.tabItem}>
+    <Pressable onPress={() => onChange(tab.key)} className={styles.tabItem}>
       <Ionicons name={active ? tab.iconActive : tab.icon} size={18} color={active ? '#dbeafe' : '#94a3b8'} />
-      <Text style={[styles.tabLabel, active && styles.tabLabelActive]}>{tab.label}</Text>
+      <Text className={cn(styles.tabLabel, active && styles.tabLabelActive)}>{tab.label}</Text>
     </Pressable>
   );
 }
@@ -25,23 +26,23 @@ export default function BottomTab({ current, onChange, onAddItem, canAddItem })
   ];
 
   return (
-    <View style={styles.tabBarWrap}>
-      <View style={styles.tabBar}>
-        <View style={styles.tabGroupSide}>
+    <View className={styles.tabBarWrap}>
+      <View className={styles.tabBar}>
+        <View className={styles.tabGroupSide}>
           {leftTabs.map((tab) => (
             <TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
           ))}
         </View>
 
         <Pressable
-          style={[styles.tabAddBtn, !canAddItem && styles.tabAddBtnDisabled]}
+          className={cn(styles.tabAddBtn, !canAddItem && styles.tabAddBtnDisabled)}
           onPress={onAddItem}
           disabled={!canAddItem}
         >
           <Ionicons name="add" size={26} color="#fff" />
         </Pressable>
 
-        <View style={styles.tabGroupSide}>
+        <View className={styles.tabGroupSide}>
           {rightTabs.map((tab) => (
             <TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
           ))}