improve design

apps/mobile/App.js

@@ -1,12 +1,21 @@
-import React,{useState} from 'react';
+import React, {useState, useEffect} from 'react';
-import NavigationService, {AppContainer} from "./src/services/NavigationService"
+import NavigationService, {
+  AppContainer,
+} from './src/services/NavigationService';
+import {StatusBar} from 'react-native';
 
 const App = () => {
-  return (<AppContainer
+  useEffect(() => {
-    ref={navigatorRef => {
+    StatusBar.setBackgroundColor('transparent');
-      NavigationService.setTopLevelNavigator(navigatorRef);
+    StatusBar.setTranslucent(true);
-    }}
+    StatusBar.setBarStyle('dark-content');
-  />
+  });
+  return (
+    <AppContainer
+      ref={navigatorRef => {
+        NavigationService.setTopLevelNavigator(navigatorRef);
+      }}
+    />
   );
 };
 

apps/mobile/src/components/NoteItem/index.js

@@ -0,0 +1,90 @@
+import React, {useState} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  Dimensions,
+  FlatList,
+} from 'react-native';
+
+import {
+  COLOR_SCHEME,
+  SIZE,
+  br,
+  ph,
+  pv,
+  opacity,
+  FONT,
+  WEIGHT,
+} from '../../common/common';
+
+import Icon from 'react-native-vector-icons/Ionicons';
+import {Reminder} from '../Reminder';
+import {getElevation} from '../../utils/utils';
+const w = Dimensions.get('window').width;
+const h = Dimensions.get('window').height;
+
+const NoteItem = props => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+  const item = props.item;
+
+  return (
+    <View
+      activeOpacity={opacity}
+      style={{
+        marginHorizontal: w * 0.05,
+        backgroundColor: '#f0f0f0',
+        marginVertical: h * 0.015,
+        borderRadius: br,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: pv,
+      }}>
+      <View
+        style={{
+          width: '92%',
+          justifyContent: 'center',
+          alignItems: 'flex-start',
+        }}>
+        <Text
+          style={{
+            fontSize: SIZE.md,
+            fontFamily: WEIGHT.bold,
+          }}>
+          {item.title}
+        </Text>
+        <Text
+          style={{
+            fontSize: SIZE.xs + 1,
+            color: colors.icon,
+            fontFamily: WEIGHT.regular,
+          }}>
+          {item.headline}
+        </Text>
+
+        <Text
+          style={{
+            color: colors.accent,
+            fontSize: SIZE.xxs,
+            textAlignVertical: 'center',
+            fontFamily: WEIGHT.regular,
+          }}>
+          {item.timestamp + '  '}
+        </Text>
+      </View>
+      <TouchableOpacity
+        style={{
+          width: '8%',
+          justifyContent: 'center',
+          alignItems: 'center',
+          minHeight: 60,
+        }}>
+        <Icon name="md-more" size={SIZE.xl} color={colors.accent} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default NoteItem;

apps/mobile/src/components/Recents/index.js

@@ -1,5 +1,12 @@
 import React, {useState} from 'react';
-import {View, Text, TouchableOpacity} from 'react-native';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  Dimensions,
+  FlatList,
+} from 'react-native';
 
 import {
   COLOR_SCHEME,
@@ -13,104 +20,150 @@ import {
 } from '../../common/common';
 
 import Icon from 'react-native-vector-icons/Ionicons';
-import {FlatList} from 'react-native-gesture-handler';
+import {Reminder} from '../Reminder';
+import {getElevation} from '../../utils/utils';
+import NoteItem from '../NoteItem';
+const w = Dimensions.get('window').width;
+const h = Dimensions.get('window').height;
+
+// example data
+
+const 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',
+  },
+];
 
 export const RecentList = () => {
   const [colors, setColors] = useState(COLOR_SCHEME);
+
+  let blockdata = [
+    {
+      name: '',
+      icon: 'md-add',
+      func: () => {
+        NavigationService.navigate('Editor');
+      },
+    },
+    {
+      name: 'Reminders',
+      icon: 'ios-clock',
+      func: () => {},
+    },
+    {
+      name: 'Lists',
+      icon: 'ios-list',
+      func: () => {},
+    },
+  ];
+
   return (
     <>
       <FlatList
-        data={[
+        data={data}
-          {
+        ListFooterComponent={
-            title: 'One day about',
+          <View
-            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%',
+              height: 150,
-              backgroundColor: '#f0f0f0',
+              alignItems: 'center',
-              marginVertical: '2.5%',
+              justifyContent: 'center',
-              borderRadius: br,
-              paddingVertical: pv - 5,
             }}>
             <Text
               style={{
-                fontSize: SIZE.md,
+                color: colors.navbg,
-                paddingHorizontal: ph,
+                fontSize: SIZE.sm,
-                paddingTop: pv,
-                fontFamily: WEIGHT.bold,
-              }}>
-              {item.title}
-            </Text>
-            <Text
-              style={{
-                fontSize: SIZE.xs + 1,
-                paddingHorizontal: ph,
-                color: colors.icon,
                 fontFamily: WEIGHT.regular,
               }}>
-              {item.headline}
+              - End -
             </Text>
-
+          </View>
-            <View
+        }
+        ListHeaderComponent={
+          <>
+            <ScrollView
+              horizontal={true}
               style={{
-                height: 30,
+                paddingHorizontal: '4%',
-                width: '100%',
+              }}
-                borderRadius: 5,
+              showsHorizontalScrollIndicator={false}
-                justifyContent: 'space-between',
+              contentContainerStyle={{
-                flexDirection: 'row',
+                justifyContent: 'flex-start',
                 alignItems: 'center',
-                paddingHorizontal: ph,
+                flexDirection: 'row',
               }}>
-              <Text
+              {blockdata.map(item => (
-                style={{
+                <TouchableOpacity
-                  color: colors.accent,
+                  onPress={item.func}
-                  fontSize: SIZE.xxs,
+                  activeOpacity={opacity}
-                  textAlignVertical: 'center',
+                  style={{
-                  fontFamily: WEIGHT.regular,
+                    ...getElevation(5),
-                }}>
+                    width: 100,
-                {item.timestamp + '  '}
+                    height: 100,
-              </Text>
+                    borderRadius: br,
+                    backgroundColor:
+                      item.icon === 'md-add' ? colors.accent : '#f0f0f0',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    marginRight: 30,
+                    marginLeft: 5,
+                    marginVertical: 20,
+                    marginBottom: 30,
+                  }}>
+                  <View
+                    style={{
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                    }}>
+                    <Icon
+                      name={item.icon}
+                      color={item.icon === 'md-add' ? 'white' : colors.icon}
+                      size={SIZE.xxl}
+                    />
+                    {item.name !== '' ? (
+                      <Text
+                        style={{
+                          fontSize: SIZE.sm - 2,
+                          color: colors.icon,
+                          fontFamily: WEIGHT.regular,
+                        }}>
+                        {item.name}
+                      </Text>
+                    ) : (
+                      undefined
+                    )}
+                  </View>
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
 
-              <View
+            <Reminder />
-                style={{
+          </>
-                  justifyContent: 'space-between',
+        }
-                  flexDirection: 'row',
+        renderItem={({item, index}) => <NoteItem item={item} index={index} />}
-                  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/components/Reminder/index.js

@@ -23,73 +23,72 @@ export const Reminder = () => {
       style={{
         ...getElevation(10),
         width: '90%',
-        marginVertical: Platform.OS === 'ios' ? h * 0.02 : '5%',
+        marginVertical: Platform.OS === 'ios' ? h * 0.01 : '0%',
         alignSelf: 'center',
         borderRadius: br,
         backgroundColor: colors.accent,
         paddingHorizontal: ph,
-        paddingVertical: 5,
+        marginBottom: 20,
+        padding: 5,
       }}>
-      <View
+      <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
+          numberOfLines={1}
           style={{
-            paddingBottom: 5,
+            width: '100%',
+            maxWidth: '100%',
           }}>
           <Text
+            numberOfLines={1}
             style={{
               color: 'white',
               fontSize: SIZE.lg,
               fontFamily: WEIGHT.bold,
+              maxWidth: '100%',
             }}>
             Pay Utility Bills
           </Text>
+        </Text>
+
+        <View
+          style={{
+            width: '100%',
+            justifyContent: 'space-between',
+            flexDirection: 'row',
+            alignItems: 'flex-end',
+          }}>
           <Text
             style={{
-              fontFamily: WEIGHT.light,
+              fontFamily: WEIGHT.regular,
               fontSize: SIZE.xs,
               color: 'white',
+              marginBottom: 3,
             }}>
             {'\n'}
             Amount 5000 RS
           </Text>
-        </Text>
 
-        <Text
-          style={{
-            color: 'white',
-            fontSize: SIZE.xxl,
-            fontFamily: WEIGHT.light,
-          }}>
           <Text
             style={{
-              fontSize: SIZE.xs,
+              color: 'white',
+              fontSize: SIZE.xxl,
+              fontFamily: WEIGHT.light,
             }}>
-            in
+            <Text
+              style={{
+                fontSize: SIZE.xs,
+              }}>
+              in
+            </Text>
+            00:00{''}
+            <Text
+              style={{
+                fontSize: SIZE.xs,
+              }}>
+              mins
+            </Text>
           </Text>
-          00:00{''}
+        </View>
-          <Text
-            style={{
-              fontSize: SIZE.xs,
-            }}>
-            mins
-          </Text>
-        </Text>
       </View>
     </TouchableOpacity>
   );

apps/mobile/src/components/SearchInput/index.js

@@ -27,9 +27,8 @@ export const Search = () => {
         alignSelf: 'center',
         borderRadius: br,
         paddingHorizontal: ph,
-        paddingVertical: Platform.OS == 'ios' ? pv : pv - 5,
+        paddingVertical: Platform.OS == 'ios' ? pv - 3 : pv - 8,
-        marginTop: 10,
+        marginBottom: 10,
-        marginBottom: 25,
       }}>
       <TextInput
         style={{

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

@@ -28,6 +28,7 @@ import {Search} from '../../components/SearchInput';
 import {Reminder} from '../../components/Reminder';
 import {RecentList} from '../../components/Recents';
 import {getElevation} from '../../utils/utils';
+import {FlatList} from 'react-native-gesture-handler';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
@@ -35,12 +36,24 @@ export const Home = ({navigation}) => {
   const [loading, setLoading] = useState(true);
   const [colors, setColors] = useState(COLOR_SCHEME);
 
-  const RenderMenu = (
+  const RenderSideMenu = (
     <SafeAreaView
       style={{
         height: '100%',
-        backgroundColor: colors.accent,
+        justifyContent: 'center',
       }}>
+      <View
+        style={{
+          backgroundColor: colors.accent,
+          height: h * 0.5,
+          width: h * 0.5,
+          position: 'absolute',
+          top: h * -0.15,
+          left: h * -0.2,
+          transform: [{rotateZ: '340deg'}],
+          borderRadius: 100,
+        }}
+      />
       <View
         style={{
           height: '25%',
@@ -74,14 +87,13 @@ export const Home = ({navigation}) => {
             fontSize: SIZE.xs,
             marginTop: 10,
           }}>
-          Usage: 80.45/100 MB
+          80.45/100 MB
         </Text>
 
         <View
           style={{
             borderRadius: 2.5,
             backgroundColor: 'white',
-            ...getElevation(10),
             marginTop: 10,
             paddingHorizontal: 5,
             paddingVertical: 2,
@@ -89,8 +101,8 @@ export const Home = ({navigation}) => {
           <Text
             style={{
               fontFamily: WEIGHT.regular,
-
               fontSize: SIZE.xxs,
+              color: colors.accent,
             }}>
             Basic User
           </Text>
@@ -99,133 +111,57 @@ export const Home = ({navigation}) => {
 
       <View
         style={{
-          ...getElevation(5),
+          backgroundColor: colors.navbg,
-          backgroundColor: 'white',
           width: '90%',
           alignSelf: 'center',
           height: '60%',
           marginVertical: 10,
           borderRadius: 5,
         }}>
-        <View
+        <FlatList
-          style={{
+          data={[
-            backgroundColor: 'white',
+            {
-            width: '100%',
+              name: 'Home',
-            alignSelf: 'center',
+              icon: 'ios-home',
-            flexDirection: 'row',
+            },
-            justifyContent: 'flex-start',
+          ]}
-            alignItems: 'center',
+          keyExtractor={(item, index) => item.name}
-            paddingHorizontal: ph,
+          renderItem={({item, index}) => (
-            marginVertical: 10,
+            <TouchableOpacity
-          }}>
+              activeOpacity={opacity}
-          <Icon
+              style={{
-            style={{
+                width: '100%',
-              width: 30,
+                alignSelf: 'center',
-            }}
+                flexDirection: 'row',
-            name="ios-home"
+                justifyContent: 'flex-start',
-            color={colors.icon}
+                alignItems: 'center',
-            size={SIZE.lg}
+                paddingHorizontal: ph,
-          />
+                marginVertical: 10,
-          <Text
+              }}>
-            style={{
+              <Icon
-              fontFamily: WEIGHT.medium,
+                style={{
-              fontSize: SIZE.sm,
+                  width: 30,
-              marginTop: -5,
+                }}
-            }}>
+                name={item.icon}
-            Home
+                color={colors.icon}
-          </Text>
+                size={SIZE.lg}
-        </View>
+              />
-        <View
+              <Text
-          style={{
+                style={{
-            backgroundColor: 'white',
+                  fontFamily: WEIGHT.medium,
-            width: '100%',
+                  fontSize: SIZE.sm,
-            alignSelf: 'center',
+                  marginTop: -5,
-            flexDirection: 'row',
+                }}>
-            justifyContent: 'flex-start',
+                {item.name}
-            alignItems: 'center',
+              </Text>
-            paddingHorizontal: ph,
+            </TouchableOpacity>
-            marginVertical: 10,
+          )}
-          }}>
+        />
-          <Icon
-            style={{
-              width: 30,
-            }}
-            name="ios-heart"
-            color={colors.icon}
-            size={SIZE.lg}
-          />
-          <Text
-            style={{
-              fontFamily: WEIGHT.medium,
-              fontSize: SIZE.sm,
-              marginTop: -5,
-            }}>
-            Favourites
-          </Text>
-        </View>
-        <View
-          style={{
-            backgroundColor: 'white',
-            width: '100%',
-            alignSelf: 'center',
-            flexDirection: 'row',
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            paddingHorizontal: ph,
-            marginVertical: 10,
-          }}>
-          <Icon
-            style={{
-              width: 30,
-            }}
-            name="ios-settings"
-            color={colors.icon}
-            size={SIZE.lg}
-          />
-          <Text
-            style={{
-              fontFamily: WEIGHT.medium,
-              fontSize: SIZE.sm,
-              marginTop: -5,
-            }}>
-            Settings
-          </Text>
-        </View>
-        <View
-          style={{
-            backgroundColor: 'white',
-            width: '100%',
-            alignSelf: 'center',
-            flexDirection: 'row',
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            paddingHorizontal: ph,
-            marginVertical: 10,
-          }}>
-          <Icon
-            style={{
-              width: 30,
-            }}
-            name="ios-sync"
-            color={colors.icon}
-            size={SIZE.lg}
-          />
-          <Text
-            style={{
-              fontFamily: WEIGHT.medium,
-              fontSize: SIZE.sm,
-              marginTop: -5,
-            }}>
-            Sync
-          </Text>
-        </View>
       </View>
 
       <View
         style={{
-          ...getElevation(5),
           backgroundColor: '#F3A712',
-
           width: '90%',
           alignSelf: 'center',
           borderRadius: 5,
@@ -258,26 +194,6 @@ export const Home = ({navigation}) => {
     </SafeAreaView>
   );
 
-  let data = [
-    {
-      name: '',
-      icon: 'md-add',
-      func: () => {
-        NavigationService.navigate('Editor');
-      },
-    },
-    {
-      name: 'Reminders',
-      icon: 'ios-clock',
-      func: () => {},
-    },
-    {
-      name: 'Lists',
-      icon: 'ios-list',
-      func: () => {},
-    },
-  ];
-
   useEffect(() => {
     setTimeout(() => {
       setLoading(false);
@@ -285,7 +201,10 @@ export const Home = ({navigation}) => {
   });
 
   return (
-    <SideMenu menu={RenderMenu} openMenuOffset={w / 1.5}>
+    <SideMenu
+      bounceBackOnOverdraw={false}
+      menu={RenderSideMenu}
+      openMenuOffset={w / 1.5}>
       <SafeAreaView style={styles.container}>
         <View
           style={{
@@ -293,8 +212,8 @@ export const Home = ({navigation}) => {
             justifyContent: 'space-between',
             alignItems: 'center',
             paddingHorizontal: '5%',
-            marginTop: Platform.OS == 'ios' ? h * 0.02 : '7.5%',
+            marginTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.04,
-            marginBottom: h * 0.02,
+            marginBottom: h * 0.04,
           }}>
           <Text
             style={{
@@ -304,69 +223,10 @@ export const Home = ({navigation}) => {
             }}>
             Notes
           </Text>
-          <Icon name="md-more" color={colors.icon} size={SIZE.xxxl} />
+          <Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
         </View>
 
         <Search />
-
-        <ScrollView
-          horizontal={true}
-          style={{
-            paddingHorizontal: '4%',
-            height: 200,
-          }}
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            flexDirection: 'row',
-          }}>
-          {data.map(item => (
-            <TouchableOpacity
-              onPress={item.func}
-              activeOpacity={opacity}
-              style={{
-                ...getElevation(5),
-                width: 100,
-                height: 100,
-                borderRadius: br,
-                backgroundColor:
-                  item.icon === 'md-add' ? colors.accent : '#f0f0f0',
-                justifyContent: 'center',
-                alignItems: 'center',
-
-                marginRight: 30,
-                marginLeft: 5,
-              }}>
-              <View
-                style={{
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}>
-                <Icon
-                  name={item.icon}
-                  color={item.icon === 'md-add' ? 'white' : colors.icon}
-                  size={SIZE.xxl}
-                />
-                {item.name !== '' ? (
-                  <Text
-                    style={{
-                      fontSize: SIZE.sm - 2,
-                      color: colors.icon,
-                      fontFamily: WEIGHT.regular,
-                    }}>
-                    {item.name}
-                  </Text>
-                ) : (
-                  undefined
-                )}
-              </View>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
-
-        <Reminder />
-
         <RecentList />
       </SafeAreaView>
     </SideMenu>