create basic homepage design

apps/mobile/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}

apps/mobile/src/common/common.js

@@ -1,57 +1,69 @@
 //COLOR SCHEME
 
 export function setColorScheme(
-    night = false,
-    bg = "white",
-    fg = "#189ad3",
-    nav = "#f2f2f2",
-    pri = "black",
-    sec = "white",
-    accent = "#189ad3",
-    normal = "black",
-    icon = ICONS_COLOR
+  night = false,
+  bg = 'white',
+  fg = '#0000FF',
+  nav = '#f2f2f2',
+  pri = 'black',
+  sec = 'white',
+  accent = '#0000FF',
+  normal = 'black',
+  icon = ICONS_COLOR,
 ) {
-    COLOR_SCHEME.bg = bg;
-    COLOR_SCHEME.fg = fg;
-    COLOR_SCHEME.nav = nav;
-    COLOR_SCHEME.pri = pri;
-    COLOR_SCHEME.sec = sec;
-    COLOR_SCHEME.accent = accent;
-    COLOR_SCHEME.normal = normal;
-    COLOR_SCHEME.night = night;
-    COLOR_SCHEME.icon = icon;
+  COLOR_SCHEME.bg = bg;
+  COLOR_SCHEME.fg = fg;
+  COLOR_SCHEME.nav = nav;
+  COLOR_SCHEME.pri = pri;
+  COLOR_SCHEME.sec = sec;
+  COLOR_SCHEME.accent = accent;
+  COLOR_SCHEME.normal = normal;
+  COLOR_SCHEME.night = night;
+  COLOR_SCHEME.icon = icon;
 
-    return;
+  return;
 }
 
 export const COLOR_SCHEME = {
-    night: false,
-    bg: "white",
-    fg: "#189ad3",
-    navbg: "#f2f2f2",
-    pri: "black",
-    sec: "white",
-    accent: "#189ad3",
-    normal: "black",
-    icon: "gray"
+  night: false,
+  bg: 'white',
+  fg: '#0000FF',
+  navbg: '#f2f2f2',
+  pri: 'black',
+  sec: 'white',
+  accent: '#0000FF',
+  normal: 'black',
+  icon: 'gray',
 };
 
 //FONT FAMILY
-export const FONT = "";
-export const FONT_BOLD = "";
+export const FONT = '';
+export const FONT_BOLD = '';
 
 //FONT SIZE
 
 export const SIZE = {
-    xxs: 10,
-    xs: 12,
-    sm: 16,
-    md: 18,
-    lg: 22,
-    xl: 28,
-    xxl: 34,
-    xxxl: 40
-}
+  xxs: 10,
+  xs: 12,
+  sm: 16,
+  md: 18,
+  lg: 22,
+  xl: 28,
+  xxl: 34,
+  xxxl: 40,
+};
 
+export const br = 5; // border radius
+export const ph = 10; // padding horizontal
+export const pv = 10; // padding vertical
+export const opacity = 0.85; // active opacity
 
+// GLOBAL FONT
 
+export const WEIGHT = {
+  light: 'Quicksand-Light',
+  regular: 'Quicksand-Regular',
+  medium: 'Quicksand-Medium',
+  semibold: 'Quicksand-SemiBold',
+  bold: 'Quicksand-Bold',
+};

apps/mobile/src/views/Home/index.js

@@ -1,5 +1,4 @@
-
-import React, {Fragment,useEffect,useState} from 'react';
+import React, {Fragment, useEffect, useState} from 'react';
 import {
   SafeAreaView,
   StyleSheet,
@@ -7,46 +6,351 @@ import {
   View,
   Text,
   StatusBar,
+  TouchableOpacity,
+  TextInput,
 } from 'react-native';
+
 import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-import Loading from "../../../loading";
-import { COLOR_SCHEME } from '../../common/common';
-
+  COLOR_SCHEME,
+  SIZE,
+  br,
+  ph,
+  pv,
+  opacity,
+  FONT,
+  WEIGHT,
+} from '../../common/common';
+import {styles} from './styles';
 
+import Icon from 'react-native-vector-icons/Ionicons';
+import {FlatList} from 'react-native-gesture-handler';
 export const Home = ({navigation}) => {
- 
-    const [loading,setLoading] = useState(true);
-    const [colors,setColors] = useState(COLOR_SCHEME);
-    
-  
+  const [loading, setLoading] = useState(true);
+  const [colors, setColors] = useState(COLOR_SCHEME);
 
   useEffect(() => {
     setTimeout(() => {
       setLoading(false);
-      
-    },1000)
-  })
-  
-   return loading? <Loading/> :<>
-    <Text>Hello</Text>
-    
-  </>
-  };
+    }, 1000);
+  });
 
-  Home.navigationOptions = {
-    header: null
-  };  
+  return (
+    <View style={styles.container}>
+      <Search />
 
+      <ScrollView
+        horizontal={true}
+        style={{
+          paddingHorizontal: '5%',
+          height: 200,
+        }}
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{
+          justifyContent: 'flex-start',
+          alignItems: 'center',
+          flexDirection: 'row',
+        }}>
+        <TouchableOpacity
+          activeOpacity={opacity}
+          style={{
+            width: 100,
+            height: 100,
+            borderRadius: br,
+            backgroundColor: colors.accent,
+            justifyContent: 'center',
+            alignItems: 'center',
+            elevation: 5,
+            marginRight: 30,
+          }}>
+          <View
+            style={{
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+            <Icon name="md-add" color="white" size={SIZE.xxl} />
+          </View>
+        </TouchableOpacity>
 
-const styles = StyleSheet.create({
+        <TouchableOpacity
+          activeOpacity={opacity}
+          style={{
+            width: 100,
+            height: 100,
+            borderRadius: br,
+            backgroundColor: '#f0f0f0',
+            justifyContent: 'center',
+            alignItems: 'center',
+            elevation: 5,
+          }}>
+          <View
+            style={{
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+            <Icon name="ios-clock" color={colors.icon} size={SIZE.xxl} />
+            <Text
+              style={{
+                fontSize: SIZE.sm - 2,
+                color: colors.icon,
+              }}>
+              Reminders
+            </Text>
+          </View>
+        </TouchableOpacity>
 
-});
+        <TouchableOpacity
+          activeOpacity={opacity}
+          style={{
+            width: 100,
+            height: 100,
+            borderRadius: br,
+            backgroundColor: '#f0f0f0',
+            justifyContent: 'center',
+            alignItems: 'center',
+            elevation: 5,
+            marginLeft: 30,
+            marginRight: 30,
+          }}>
+          <View
+            style={{
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+            <Icon name="ios-list" color={colors.icon} size={SIZE.xxl} />
+            <Text
+              style={{
+                fontSize: SIZE.sm - 2,
+                color: colors.icon,
+              }}>
+              Lists
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </ScrollView>
+
+      <Reminder />
+
+      <RecentList />
+    </View>
+  );
+};
+
+Home.navigationOptions = {
+  header: null,
+};
 
 export default Home;
 
+export const Search = () => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '90%',
+        backgroundColor: '#f0f0f0',
+        alignSelf: 'center',
+        borderRadius: br,
+        fontSize: SIZE.sm,
+        paddingHorizontal: ph,
+        paddingVertical: pv - 5,
+        elevation: 5,
+        marginTop: 25,
+      }}>
+      <TextInput
+        style={{
+          fontFamily: 'Quicksand-Light',
+          maxWidth: '90%',
+        }}
+        placeholder="Search your notes"
+      />
+      <Icon name="ios-search" color={colors.icon} size={SIZE.xxl} />
+    </View>
+  );
+};
+
+export const Reminder = () => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+
+  return (
+    <TouchableOpacity
+      activeOpacity={opacity}
+      style={{
+        width: '90%',
+        marginVertical: '5%',
+        alignSelf: 'center',
+        borderRadius: br,
+        backgroundColor: colors.accent,
+        elevation: 5,
+        paddingHorizontal: ph,
+        paddingVertical: pv - 5,
+      }}>
+      <View
+        style={{
+          justifyContent: 'space-between',
+          flexDirection: 'row',
+          alignItems: 'center',
+        }}>
+        <Icon
+          style={{
+            position: 'absolute',
+            top: 0,
+            right: 0,
+          }}
+          name="ios-clock"
+          color="white"
+          size={SIZE.md}
+        />
+        <Text
+          style={{
+            color: 'white',
+            fontWeight: 'bold',
+            fontSize: SIZE.lg,
+          }}>
+          Pay Utility Bills
+          <Text
+            style={{
+              fontWeight: 'normal',
+              fontSize: SIZE.xs,
+            }}>
+            {'\n'}
+            Amount 5000 RS
+          </Text>
+        </Text>
+
+        <Text
+          style={{
+            color: 'white',
+            fontSize: SIZE.xxxl,
+          }}>
+          00:00{''}
+          <Text
+            style={{
+              fontSize: SIZE.xs,
+            }}>
+            min
+          </Text>
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export const RecentList = () => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+  return (
+    <>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          paddingHorizontal: '5%',
+          marginTop: '7.5%',
+          marginBottom: '0%',
+        }}>
+        <Text
+          style={{
+            fontSize: SIZE.lg,
+            color: colors.icon,
+          }}>
+          Recent
+        </Text>
+        <Icon name="ios-albums" color={colors.icon} size={SIZE.xl} />
+      </View>
+
+      <FlatList
+        data={[
+          {
+            title: 'One day about',
+            headline:
+              'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has',
+            timestamp: '2 hours ago',
+            type: 'note',
+          },
+          {
+            title: 'Shopping List',
+            headline:
+              'It is a long established fact that a reader will be distracted by the readable content of',
+            timestamp: '5 hours ago',
+            type: 'list',
+          },
+          {
+            title: 'Reminder',
+            headline:
+              'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a ',
+            timestamp: '2 days ago',
+            type: 'reminder',
+          },
+          {
+            title: 'Writing Notes for',
+            headline:
+              'There are many variations of passages of Lorem Ipsum available, but the majority have ',
+            timestamp: '2 months ago',
+          },
+        ]}
+        renderItem={({item, index}) => (
+          <TouchableOpacity
+            activeOpacity={opacity}
+            style={{
+              marginHorizontal: '5%',
+              backgroundColor: '#f0f0f0',
+              marginVertical: '2.5%',
+              borderRadius: br,
+              paddingVertical: pv - 5,
+            }}>
+            <Text
+              style={{
+                fontWeight: 'bold',
+                fontSize: SIZE.md,
+                paddingHorizontal: ph,
+                paddingTop: pv,
+              }}>
+              {item.title}
+            </Text>
+            <Text
+              style={{
+                fontSize: SIZE.xs + 1,
+                paddingHorizontal: ph,
+              }}>
+              {item.headline}
+            </Text>
+
+            <View
+              style={{
+                height: 30,
+                width: '100%',
+                borderRadius: 5,
+                justifyContent: 'space-between',
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingHorizontal: ph,
+              }}>
+              <Text
+                style={{
+                  color: colors.accent,
+                  fontSize: SIZE.xxs,
+                  textAlignVertical: 'center',
+                }}>
+                {item.timestamp + '  '}
+              </Text>
+
+              <View
+                style={{
+                  justifyContent: 'space-between',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  width: '15%',
+                }}>
+                <Icon name="ios-share" color={colors.accent} size={SIZE.lg} />
+                <Icon name="ios-trash" color={colors.accent} size={SIZE.lg} />
+              </View>
+            </View>
+          </TouchableOpacity>
+        )}
+      />
+    </>
+  );
+};

apps/mobile/src/views/Home/styles.js

@@ -0,0 +1,11 @@
+import {StyleSheet} from 'react-native';
+import {SIZE, COLOR_SCHEME} from '../../common/common';
+
+export const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+    alignSelf: 'center',
+    height: '100%',
+  },
+});