refactor(ui): refactor ui components

Author: yjose

ios/Podfile.lock

@@ -1473,7 +1473,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost: d3f49c53809116a5d38da093a8aa78bf551aed09
-  DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
+  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   EXConstants: 988aa430ca0f76b43cd46b66e7fae3287f9cc2fc
   EXFont: f20669cb266ef48b004f1eb1f2b20db96cd1df9f
   EXJSONUtils: 5c42959e87be238b045ef37cc5268b16a6c0ad4a
@@ -1495,7 +1495,7 @@ SPEC CHECKSUMS:
   FBLazyVector: 84f6edbe225f38aebd9deaf1540a4160b1f087d7
   FBReactNativeSpec: d0086a479be91c44ce4687a962956a352d2dc697
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
+  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   hermes-engine: b2669ce35fc4ac14f523b307aff8896799829fe2
   libaom: 144606b1da4b5915a1054383c3a4459ccdb3c661
   libavif: 84bbb62fb232c3018d6f1bab79beea87e35de7b7
@@ -1559,7 +1559,7 @@ SPEC CHECKSUMS:
   SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
   SDWebImageWebPCoder: af09429398d99d524cae2fe00f6f0f6e491ed102
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
-  Yoga: 64cd2a583ead952b0315d5135bf39e053ae9be70
+  Yoga: 1b901a6d6eeba4e8a2e8f308f708691cdb5db312
 
 PODFILE CHECKSUM: ac55d8c0b92af1b0a5da5f8cb8448313ecc7948e
 

src/app/(app)/_layout.tsx

@@ -3,13 +3,12 @@ import { Link, Redirect, SplashScreen, Tabs } from 'expo-router';
 import React, { useCallback, useEffect } from 'react';
 
 import { useAuth, useIsFirstTime } from '@/core';
+import { Pressable, Text } from '@/ui';
 import {
   Feed as FeedIcon,
-  Pressable,
   Settings as SettingsIcon,
   Style as StyleIcon,
-  Text,
-} from '@/ui';
+} from '@/ui/icons';
 
 export default function TabLayout() {
   const status = useAuth.use.status();

src/app/(app)/settings.tsx

@@ -7,18 +7,8 @@ import { ItemsContainer } from '@/components/settings/items-container';
 import { LanguageItem } from '@/components/settings/language-item';
 import { ThemeItem } from '@/components/settings/theme-item';
 import { translate, useAuth } from '@/core';
-import {
-  colors,
-  FocusAwareStatusBar,
-  Github,
-  Rate,
-  ScrollView,
-  Share,
-  Support,
-  Text,
-  View,
-  Website,
-} from '@/ui';
+import { colors, FocusAwareStatusBar, ScrollView, Text, View } from '@/ui';
+import { Github, Rate, Share, Support, Website } from '@/ui/icons';
 
 export default function Settings() {
   const signOut = useAuth.use.signOut();

src/components/card.tsx

@@ -6,21 +6,29 @@ import { Image, Pressable, Text, View } from '@/ui';
 
 type Props = Post;
 
+const images = [
+  'https://images.unsplash.com/photo-1489749798305-4fea3ae63d43?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1564507004663-b6dfb3c824d5?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1515386474292-47555758ef2e?auto=format&fit=crop&w=800&q=80',
+  'https://plus.unsplash.com/premium_photo-1666815503002-5f07a44ac8fb?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1587974928442-77dc3e0dba72?auto=format&fit=crop&w=800&q=80',
+];
+
 export const Card = ({ title, body, id }: Props) => {
   return (
     <Link href={`/feed/${id}`} asChild>
-      <Pressable className="m-2 overflow-hidden rounded-xl  bg-neutral-200 p-2 shadow-xl dark:bg-charcoal-900">
+      <Pressable className="m-2 overflow-hidden rounded-xl  border border-neutral-300 bg-white  dark:bg-neutral-900">
         <Image
-          className="h-56 w-full"
+          className="h-56 w-full overflow-hidden rounded-t-xl"
           contentFit="cover"
           source={{
-            uri: 'https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80',
+            uri: images[Math.floor(Math.random() * images.length)],
           }}
         />
 
-        <View>
-          <Text className="py-2 text-2xl font-bold">{title}</Text>
-          <Text numberOfLines={3} className="leading-snug">
+        <View className="p-2">
+          <Text className="py-3 text-2xl ">{title}</Text>
+          <Text numberOfLines={3} className="leading-snug text-gray-600">
             {body}
           </Text>
         </View>

src/components/colors.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Text, View } from '@/ui';
-import colors from '@/ui/theme/colors';
+import colors from '@/ui/colors';
 
 import { Title } from './title';
 type ColorName = keyof typeof colors;
@@ -39,9 +39,9 @@ const Color = ({ name }: { name: ColorName }) => {
 
 const ColorCard = ({ color, value }: { value: string; color: string }) => {
   return (
-    <View>
+    <View className="flex-1">
       <View
-        className="h-14 w-8 rounded-sm"
+        className="h-14 w-full rounded-sm"
         style={{ backgroundColor: color }}
       />
       <Text className="text-sm">{value}</Text>

src/components/inputs.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { Option } from '@/ui';
 import { Input, Select, View } from '@/ui';
-import { Checkbox, Radio, Switch } from '@/ui/core/checkbox';
+import { Checkbox, Radio, Switch } from '@/ui/checkbox';
 
 import { Title } from './title';
 

src/components/settings/item.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 
 import type { TxKeyPath } from '@/core';
-import { ArrowRight, Pressable, Text, View } from '@/ui';
+import { Pressable, Text, View } from '@/ui';
+import { ArrowRight } from '@/ui/icons';
 
 type ItemProps = {
   text: TxKeyPath;

src/components/settings/items-container.tsx

@@ -13,7 +13,7 @@ export const ItemsContainer = ({ children, title }: Props) => {
     <>
       {title && <Text className="pb-2 pt-4 text-lg" tx={title} />}
       {
-        <View className=" rounded-md border-[1px] border-neutral-200 dark:border-charcoal-700 dark:bg-charcoal-800">
+        <View className=" rounded-md border-[1px] border-neutral-200 dark:border-neutral-700 dark:bg-neutral-800">
           {children}
         </View>
       }

src/core/use-theme-config.tsx

@@ -5,7 +5,7 @@ import {
 } from '@react-navigation/native';
 import { useColorScheme } from 'nativewind';
 
-import { colors } from '@/ui/theme';
+import colors from '@/ui/colors';
 
 const DarkTheme: Theme = {
   ..._DarkTheme,

src/ui/core/button.tsx renamed to src/ui/button.tsx

@@ -24,7 +24,7 @@ const button = tv({
       },
       outline: {
         container: 'border border-neutral-400',
-        label: 'text-black dark:text-charcoal-100',
+        label: 'text-black dark:text-neutral-100',
         indicator: 'text-black',
       },
       destructive: {