improve design

apps/mobile/App.js

@@ -1,8 +1,17 @@
-import React,{useState} from 'react';
-import NavigationService, {AppContainer} from "./src/services/NavigationService"
+import React, {useState, useEffect} from 'react';
+import NavigationService, {
+  AppContainer,
+} from './src/services/NavigationService';
+import {StatusBar} from 'react-native';
 
 const App = () => {
-  return (<AppContainer
+  useEffect(() => {
+    StatusBar.setBackgroundColor('transparent');
+    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,14 +20,15 @@ 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;
 
-export const RecentList = () => {
-  const [colors, setColors] = useState(COLOR_SCHEME);
-  return (
-    <>
-      <FlatList
-        data={[
+// example data
+
+const data = [
   {
     title: 'One day about',
     headline:
@@ -48,69 +56,114 @@ export const RecentList = () => {
       'There are many variations of passages of Lorem Ipsum available, but the majority have ',
     timestamp: '2 months ago',
   },
-        ]}
-        renderItem={({item, index}) => (
+];
+
+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}
+        ListFooterComponent={
+          <View
+            style={{
+              height: 150,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}>
+            <Text
+              style={{
+                color: colors.navbg,
+                fontSize: SIZE.sm,
+                fontFamily: WEIGHT.regular,
+              }}>
+              - End -
+            </Text>
+          </View>
+        }
+        ListHeaderComponent={
+          <>
+            <ScrollView
+              horizontal={true}
+              style={{
+                paddingHorizontal: '4%',
+              }}
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={{
+                justifyContent: 'flex-start',
+                alignItems: 'center',
+                flexDirection: 'row',
+              }}>
+              {blockdata.map(item => (
                 <TouchableOpacity
+                  onPress={item.func}
                   activeOpacity={opacity}
                   style={{
-              marginHorizontal: '5%',
-              backgroundColor: '#f0f0f0',
-              marginVertical: '2.5%',
+                    ...getElevation(5),
+                    width: 100,
+                    height: 100,
                     borderRadius: br,
-              paddingVertical: pv - 5,
+                    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.md,
-                paddingHorizontal: ph,
-                paddingTop: pv,
-                fontFamily: WEIGHT.bold,
-              }}>
-              {item.title}
-            </Text>
-            <Text
-              style={{
-                fontSize: SIZE.xs + 1,
-                paddingHorizontal: ph,
+                          fontSize: SIZE.sm - 2,
                           color: colors.icon,
                           fontFamily: WEIGHT.regular,
                         }}>
-              {item.headline}
+                        {item.name}
                       </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',
-                  fontFamily: WEIGHT.regular,
-                }}>
-                {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>
+                    ) : (
+                      undefined
+                    )}
                   </View>
                 </TouchableOpacity>
-        )}
+              ))}
+            </ScrollView>
+
+            <Reminder />
+          </>
+        }
+        renderItem={({item, index}) => <NoteItem item={item} index={index} />}
       />
     </>
   );

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

@@ -23,52 +23,50 @@ 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
-        style={{
-          justifyContent: 'space-between',
-          flexDirection: 'row',
-          alignItems: 'center',
-        }}>
-        <Icon
-          style={{
-            position: 'absolute',
-            top: 0,
-            right: 0,
-          }}
-          name="ios-clock"
-          color="white"
-          size={SIZE.md}
-        />
-
+      <View>
         <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={{
@@ -91,6 +89,7 @@ export const Reminder = () => {
             </Text>
           </Text>
         </View>
+      </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,
-        marginTop: 10,
-        marginBottom: 25,
+        paddingVertical: Platform.OS == 'ios' ? pv - 3 : pv - 8,
+        marginBottom: 10,
       }}>
       <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,17 +111,25 @@ export const Home = ({navigation}) => {
 
       <View
         style={{
-          ...getElevation(5),
-          backgroundColor: 'white',
+          backgroundColor: colors.navbg,
           width: '90%',
           alignSelf: 'center',
           height: '60%',
           marginVertical: 10,
           borderRadius: 5,
         }}>
-        <View
+        <FlatList
+          data={[
+            {
+              name: 'Home',
+              icon: 'ios-home',
+            },
+          ]}
+          keyExtractor={(item, index) => item.name}
+          renderItem={({item, index}) => (
+            <TouchableOpacity
+              activeOpacity={opacity}
               style={{
-            backgroundColor: 'white',
                 width: '100%',
                 alignSelf: 'center',
                 flexDirection: 'row',
@@ -122,7 +142,7 @@ export const Home = ({navigation}) => {
                 style={{
                   width: 30,
                 }}
-            name="ios-home"
+                name={item.icon}
                 color={colors.icon}
                 size={SIZE.lg}
               />
@@ -132,100 +152,16 @@ export const Home = ({navigation}) => {
                   fontSize: SIZE.sm,
                   marginTop: -5,
                 }}>
-            Home
+                {item.name}
               </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-heart"
-            color={colors.icon}
-            size={SIZE.lg}
+            </TouchableOpacity>
+          )}
         />
-          <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%',
-            marginBottom: h * 0.02,
+            marginTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.04,
+            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>