feat: update Home screen

src/index.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import {Login} from 'screens';
+import {Home} from 'screens';
 import {ThemeProvider} from 'ui';
 
 export const App = () => {
   return (
     <ThemeProvider>
-      <Login />
+      <Home />
     </ThemeProvider>
   );
 };

src/screens/Home/Categories.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import {StyleSheet, View, Text, FlatList} from 'react-native';
+import {FlatList} from 'react-native';
+import {Text, View} from 'ui';
 
 type CategoryType = {
   label: string;
@@ -17,9 +18,16 @@ const data: CategoryType[] = [
 
 const CategoryItem = ({label, total, color}: CategoryType) => {
   return (
-    <View style={[styles.item, {backgroundColor: color}]}>
-      <Text style={styles.label}>{label}</Text>
-      <Text style={styles.total}>{total} task</Text>
+    <View
+      margin="s"
+      padding="s"
+      paddingRight="l"
+      borderRadius={8}
+      style={{backgroundColor: color}}>
+      <Text variant="subheader">{label}</Text>
+      <Text fontSize={12} opacity={0.5}>
+        {total} task
+      </Text>
     </View>
   );
 };
@@ -35,23 +43,3 @@ export const Categories = () => {
     />
   );
 };
-
-const styles = StyleSheet.create({
-  item: {
-    padding: 12,
-    paddingRight: 24,
-    borderRadius: 8,
-    margin: 4,
-    minWidth: 120,
-  },
-  label: {
-    color: '#252A31',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  total: {
-    color: '#252A31',
-    fontSize: 12,
-    opacity: 0.5,
-  },
-});

src/screens/Home/Header.tsx

@@ -1,24 +1,15 @@
 import * as React from 'react';
-import {View, Text, StyleSheet} from 'react-native';
+import {View} from 'react-native';
+import {Text} from 'ui';
 import {Categories} from './Categories';
 
 export const Header = () => {
   return (
     <View>
-      <Text style={styles.title}> Today </Text>
+      <Text variant="header" margin="l">
+        Today
+      </Text>
       <Categories />
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  title: {
-    fontFamily: 'Inter',
-    fontSize: 32,
-    fontWeight: 'bold',
-    color: '#252A31',
-    marginHorizontal: 20,
-    textAlign: 'left',
-    paddingVertical: 30,
-  },
-});

src/screens/Home/Tasks.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {StyleSheet, View, Text, FlatList, Pressable} from 'react-native';
-import {Check, UnCheck} from 'ui';
+import {StyleSheet, FlatList, Pressable} from 'react-native';
+import {Check, Text, UnCheck, View} from 'ui';
 import {Header} from './Header';
 
 type TaskType = {
@@ -23,11 +23,26 @@ const TaskItem = ({label, done: d, color}: TaskType) => {
   const [done, setDone] = React.useState(d);
   return (
     <Pressable onPress={() => setDone(!done)}>
-      <View style={styles.item}>
+      <View flexDirection="row" alignItems="center">
         {done ? <Check style={styles.done} /> : <UnCheck style={styles.done} />}
-        <View style={[styles.itemContent, {opacity: done ? 0.3 : 1}]}>
-          <Text style={styles.label}>{label}</Text>
-          <View style={[styles.circle, {backgroundColor: color}]} />
+        <View
+          flex={1}
+          paddingVertical="l"
+          flexDirection="row"
+          alignItems="center"
+          borderBottomWidth={1}
+          borderBottomColor="grey"
+          opacity={done ? 0.3 : 1}>
+          <Text variant="subheader" style={{flex: 1}}>
+            {label}
+          </Text>
+          <View
+            width={12}
+            height={12}
+            borderRadius={12}
+            marginHorizontal="m"
+            style={{backgroundColor: color}}
+          />
         </View>
       </View>
     </Pressable>
@@ -47,41 +62,6 @@ export const Tasks = () => {
 };
 
 const styles = StyleSheet.create({
-  item: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  itemContent: {
-    flex: 1,
-    paddingVertical: 24,
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderBottomColor: 'rgba(0,0,0,0.1)',
-    borderBottomWidth: 1,
-  },
-  label: {
-    color: '#252A31',
-    fontSize: 18,
-    fontWeight: '700',
-    fontFamily: 'Inter',
-    flex: 1,
-  },
-  icon: {
-    justifyContent: 'center',
-    paddingHorizontal: 16,
-  },
-  circle: {
-    width: 12,
-    height: 12,
-    borderRadius: 12,
-    marginHorizontal: 16,
-  },
-  title: {
-    color: '#252A31',
-    fontSize: 34,
-    fontWeight: 'bold',
-    paddingVertical: 20,
-  },
   done: {
     marginHorizontal: 16,
   },

src/ui/theme/index.tsx

@@ -67,7 +67,10 @@ export const theme = createTheme({
       fontWeight: 'bold',
       fontSize: 32,
     },
-    subheader: {},
+    subheader: {
+      fontSize: 16,
+      fontWeight: 'bold',
+    },
     body: {},
 
     // buttons labels