From 109e9ccbe26fa655c7ad2452e58dfb8da830e14b Mon Sep 17 00:00:00 2001
From: Youssouf EL Azizi <youssoufelazizi@gmail.com>
Date: Tue, 23 Mar 2021 16:28:38 +0100
Subject: [PATCH] feat: update Home screen

---
 src/index.tsx                   |  4 +--
 src/screens/Home/Categories.tsx | 36 +++++++------------
 src/screens/Home/Header.tsx     | 19 +++-------
 src/screens/Home/Tasks.tsx      | 62 +++++++++++----------------------
 src/ui/theme/index.tsx          |  5 ++-
 5 files changed, 44 insertions(+), 82 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 35a528e..7f8a54f 100644
--- a/src/index.tsx
+++ b/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>
   );
 };
diff --git a/src/screens/Home/Categories.tsx b/src/screens/Home/Categories.tsx
index 4d5b57f..a320321 100644
--- a/src/screens/Home/Categories.tsx
+++ b/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,
-  },
-});
diff --git a/src/screens/Home/Header.tsx b/src/screens/Home/Header.tsx
index 4b3984f..e8a45e3 100644
--- a/src/screens/Home/Header.tsx
+++ b/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,
-  },
-});
diff --git a/src/screens/Home/Tasks.tsx b/src/screens/Home/Tasks.tsx
index 20a74e0..78d87e8 100644
--- a/src/screens/Home/Tasks.tsx
+++ b/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,
   },
diff --git a/src/ui/theme/index.tsx b/src/ui/theme/index.tsx
index 27944b4..9e2b364 100644
--- a/src/ui/theme/index.tsx
+++ b/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