From a912d72904320cff714a71ada1729588b7d5c090 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Sat, 21 Dec 2019 11:12:55 +0500
Subject: [PATCH] minor code improvments

---
 apps/mobile/src/common/common.js              | 181 ++++----
 .../mobile/src/components/EditorMenu/index.js | 392 +++++++++---------
 apps/mobile/src/components/Menu/index.js      |  19 +-
 apps/mobile/src/components/NotesList/index.js |   5 +-
 apps/mobile/src/views/Editor/index.js         | 105 ++---
 apps/mobile/src/views/Home/index.js           |   3 +-
 apps/mobile/src/views/Notebook/index.js       |  87 +---
 7 files changed, 335 insertions(+), 457 deletions(-)

diff --git a/apps/mobile/src/common/common.js b/apps/mobile/src/common/common.js
index 26b33b78d..c13ee0f6d 100755
--- a/apps/mobile/src/common/common.js
+++ b/apps/mobile/src/common/common.js
@@ -1,23 +1,89 @@
 import {DeviceEventEmitter, StatusBar, PixelRatio} from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
-import {useAppContext} from '../provider/useAppContext';
+
 //COLOR SCHEME
 export const ACCENT = {
   color: '#0560FF',
   shade: '#0560FF12',
 };
+
+const fixedColors = {
+  accent: ACCENT.color,
+  shade: ACCENT.shade,
+  fg: ACCENT.color,
+  normal: 'black',
+  icon: 'gray',
+  errorBg: '#FFD2D2',
+  errorText: '#D8000C',
+  successBg: '#DFF2BF',
+  successText: '#4F8A10',
+  warningBg: '#FEEFB3',
+  warningText: '#9F6000',
+};
+
+export var COLOR_SCHEME = {
+  night: false,
+  bg: 'white',
+  navbg: '#f6fbfc',
+  nav: '#f0f0f0',
+  pri: 'black',
+  sec: 'white',
+  ...fixedColors,
+};
+
+export const COLOR_SCHEME_LIGHT = {
+  night: false,
+  bg: 'white',
+  navbg: '#f6fbfc',
+  nav: '#f0f0f0',
+  pri: 'black',
+  sec: 'white',
+  ...fixedColors,
+};
+export const COLOR_SCHEME_DARK = {
+  night: true,
+  bg: '#1f1f1f',
+  navbg: '#1c1c1c',
+  nav: '#2b2b2b',
+  pri: 'white',
+  sec: 'black',
+  ...fixedColors,
+};
+
+//FONT FAMILY
+//export const FONT = '';
+//export const FONT_BOLD = '';
+
+//FONT SIZE
+
+export const SIZE = {
+  xxs: 10 * PixelRatio.getFontScale(),
+  xs: 12 * PixelRatio.getFontScale(),
+  sm: 14 * PixelRatio.getFontScale(),
+  md: 18 * PixelRatio.getFontScale(),
+  lg: 24 * PixelRatio.getFontScale(),
+  xl: 28 * PixelRatio.getFontScale(),
+  xxl: 32 * PixelRatio.getFontScale(),
+  xxxl: 36 * PixelRatio.getFontScale(),
+};
+
+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: 'NotoSans',
+  regular: 'NotoSans',
+  medium: 'NotoSans',
+  semibold: 'NotoSerif',
+  bold: 'NotoSerif-Bold',
+};
+
 export function setColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
-  COLOR_SCHEME.bg = colors.bg;
-  COLOR_SCHEME.fg = accent.color;
-  COLOR_SCHEME.navbg = colors.navbg;
-  COLOR_SCHEME.nav = colors.nav;
-  COLOR_SCHEME.pri = colors.pri;
-  COLOR_SCHEME.sec = colors.sec;
-  COLOR_SCHEME.accent = accent.color;
-  COLOR_SCHEME.shade = accent.shade;
-  COLOR_SCHEME.normal = colors.normal;
-  COLOR_SCHEME.night = colors.night;
-  COLOR_SCHEME.icon = colors.icon;
+  COLOR_SCHEME = {...colors, accent: accent.color, shade: accent.shade};
 
   DeviceEventEmitter.emit('onThemeUpdate');
 
@@ -61,94 +127,3 @@ export const onThemeUpdate = (func = () => {}) => {
 export const clearThemeUpdateListener = (func = () => {}) => {
   return DeviceEventEmitter.removeListener('onThemeUpdate', func);
 };
-
-export const COLOR_SCHEME = {
-  night: false,
-  bg: 'white',
-  fg: ACCENT.color,
-  navbg: '#f6fbfc',
-  nav: '#f0f0f0',
-  pri: 'black',
-  sec: 'white',
-  accent: ACCENT.color,
-  shade: ACCENT.shade,
-  normal: 'black',
-  icon: 'gray',
-  errorBg: '#FFD2D2',
-  errorText: '#D8000C',
-  successBg: '#DFF2BF',
-  successText: '#4F8A10',
-  warningBg: '#FEEFB3',
-  warningText: '#9F6000',
-};
-
-export const COLOR_SCHEME_LIGHT = {
-  night: false,
-  bg: 'white',
-  fg: ACCENT.color,
-  navbg: '#f6fbfc',
-  nav: '#f0f0f0',
-  pri: 'black',
-  sec: 'white',
-  accent: ACCENT.color,
-  shade: ACCENT.shade,
-  normal: 'black',
-  icon: 'gray',
-  errorBg: '#FFD2D2',
-  errorText: '#D8000C',
-  successBg: '#DFF2BF',
-  successText: '#4F8A10',
-  warningBg: '#FEEFB3',
-  warningText: '#9F6000',
-};
-export const COLOR_SCHEME_DARK = {
-  night: true,
-  bg: '#1f1f1f',
-  fg: ACCENT.color,
-  navbg: '#1c1c1c',
-  nav: '#2b2b2b',
-  pri: 'white',
-  sec: 'black',
-  accent: ACCENT.color,
-  shade: ACCENT.shade,
-  normal: 'black',
-  icon: 'gray',
-  errorBg: '#FFD2D2',
-  errorText: '#D8000C',
-  successBg: '#DFF2BF',
-  successText: '#4F8A10',
-  warningBg: '#FEEFB3',
-  warningText: '#9F6000',
-};
-
-//FONT FAMILY
-export const FONT = '';
-export const FONT_BOLD = '';
-
-//FONT SIZE
-
-export const SIZE = {
-  xxs: 10 * PixelRatio.getFontScale(),
-  xs: 12 * PixelRatio.getFontScale(),
-  sm: 14 * PixelRatio.getFontScale(),
-  md: 18 * PixelRatio.getFontScale(),
-  lg: 24 * PixelRatio.getFontScale(),
-  xl: 28 * PixelRatio.getFontScale(),
-  xxl: 32 * PixelRatio.getFontScale(),
-  xxxl: 36 * PixelRatio.getFontScale(),
-};
-
-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: 'NotoSans',
-  regular: 'NotoSans',
-  medium: 'NotoSans',
-  semibold: 'NotoSerif',
-  bold: 'NotoSerif-Bold',
-};
diff --git a/apps/mobile/src/components/EditorMenu/index.js b/apps/mobile/src/components/EditorMenu/index.js
index 9df729fed..fe07aac66 100644
--- a/apps/mobile/src/components/EditorMenu/index.js
+++ b/apps/mobile/src/components/EditorMenu/index.js
@@ -1,38 +1,25 @@
-import React, {useEffect, useState, createRef, useRef} from 'react';
+import React from 'react';
 import {
   ScrollView,
   View,
   Text,
   TouchableOpacity,
-  SafeAreaView,
   Platform,
   FlatList,
-  DeviceEventEmitter,
   ActivityIndicator,
   KeyboardAvoidingView,
 } from 'react-native';
-import NavigationService from '../../services/NavigationService';
 import {
-  COLOR_SCHEME,
   SIZE,
-  br,
-  ph,
   pv,
   opacity,
-  FONT,
   WEIGHT,
   COLOR_SCHEME_DARK,
-  setColorScheme,
   COLOR_SCHEME_LIGHT,
-  clearThemeUpdateListener,
-  onThemeUpdate,
 } from '../../common/common';
-
 import Icon from 'react-native-vector-icons/Feather';
-
-import {getElevation, w, h, Toast} from '../../utils/utils';
+import {h} from '../../utils/utils';
 import AsyncStorage from '@react-native-community/async-storage';
-import {useForceUpdate} from '../../views/ListsEditor';
 import {AnimatedSafeAreaView} from '../../views/Home';
 import {TextInput} from 'react-native-gesture-handler';
 import {useAppContext} from '../../provider/useAppContext';
@@ -51,6 +38,187 @@ export const EditorMenu = ({
   let tagToAdd = null;
   let backPressCount = 0;
 
+  _renderListItem = ({item, index}) => (
+    <TouchableOpacity
+      activeOpacity={opacity}
+      onPress={() => {
+        item.close === false ? null : close();
+        item.func();
+      }}
+      style={{
+        width: '100%',
+        alignSelf: 'center',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'flex-end',
+        paddingHorizontal: '5%',
+        paddingVertical: pv + 5,
+      }}>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+        }}>
+        <Icon
+          style={{
+            width: 30,
+          }}
+          name={item.icon}
+          color={colors.pri}
+          size={SIZE.md}
+        />
+        <Text
+          style={{
+            fontFamily: WEIGHT.regular,
+            fontSize: SIZE.sm,
+            color: colors.pri,
+          }}>
+          {item.name}
+        </Text>
+      </View>
+      {item.switch ? (
+        <Icon
+          size={SIZE.lg + 2}
+          color={item.on ? colors.accent : colors.icon}
+          name={item.on ? 'toggle-right' : 'toggle-left'}
+        />
+      ) : (
+        undefined
+      )}
+      {item.check ? (
+        <TouchableOpacity
+          style={{
+            borderWidth: 2,
+            borderColor: item.on ? colors.accent : colors.icon,
+            width: 23,
+            height: 23,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 100,
+            paddingTop: 3,
+          }}>
+          {item.on ? (
+            <Icon size={SIZE.sm - 2} color={colors.accent} name="check" />
+          ) : null}
+        </TouchableOpacity>
+      ) : null}
+    </TouchableOpacity>
+  );
+
+  _renderTag = item => (
+    <TouchableOpacity
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        margin: 5,
+        paddingHorizontal: 5,
+        paddingVertical: 2.5,
+        backgroundColor: colors.accent,
+        borderRadius: 5,
+      }}>
+      <Text
+        style={{
+          fontFamily: WEIGHT.regular,
+          fontSize: SIZE.sm - 2,
+          color: 'white',
+        }}>
+        {item}
+      </Text>
+    </TouchableOpacity>
+  );
+
+  _renderColor = item => (
+    <TouchableOpacity
+      onPress={() => {
+        let props = {...noteProps};
+        if (props.colors.includes(item)) {
+          props.colors.splice(props.colors.indexOf(item), 1);
+        } else {
+          props.colors.push(item);
+        }
+
+        updateProps(props);
+      }}
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        marginRight: 5,
+        marginBottom: 5,
+        borderWidth: 1.5,
+        borderRadius: 100,
+        padding: 3,
+        borderColor: noteProps.colors.includes(item)
+          ? colors.pri
+          : colors.shade,
+      }}>
+      <View
+        style={{
+          width: 40,
+          height: 40,
+          backgroundColor: item,
+          borderRadius: 100,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        {noteProps.colors.includes(item) ? (
+          <Icon name="check" color="white" size={SIZE.md} />
+        ) : null}
+      </View>
+    </TouchableOpacity>
+  );
+
+  _onSubmit = () => {
+    if (!tagToAdd || tagToAdd === '#') return;
+
+    let tag = tagToAdd;
+    if (tag[0] !== '#') {
+      tag = '#' + tag;
+    }
+    if (tag.includes(' ')) {
+      tag = tag.replace(' ', '_');
+    }
+    let oldProps = {...noteProps};
+    oldProps.tags.push(tag);
+    tagsInputRef.setNativeProps({
+      text: '#',
+    });
+    updateProps(oldProps);
+    tagToAdd = '';
+    setTimeout(() => {
+      tagsInputRef.focus();
+    }, 300);
+  };
+
+  _onKeyPress = event => {
+    if (event.nativeEvent.key === 'Backspace') {
+      if (backPressCount === 0 && !tagToAdd) {
+        backPressCount = 1;
+
+        return;
+      }
+      if (backPressCount === 1 && !tagToAdd) {
+        backPressCount = 0;
+
+        let tagInputValue = noteProps.tags[noteProps.tags.length - 1];
+        let oldProps = {...noteProps};
+        if (allTags.length === 1) return;
+
+        oldProps.tags.splice(allTags.length - 1);
+
+        updateProps(oldProps);
+        tagsInputRef.setNativeProps({
+          text: tagInputValue,
+        });
+
+        setTimeout(() => {
+          tagsInputRef.focus();
+        }, 300);
+      }
+    }
+  };
+
   return (
     <AnimatedSafeAreaView
       transition={['backgroundColor', 'opacity']}
@@ -58,7 +226,7 @@ export const EditorMenu = ({
       style={{
         height: '100%',
         opacity: hide ? 0 : 1,
-        backgroundColor: colors.night ? colors.navbg : colors.navbg,
+        backgroundColor: colors.shade,
       }}>
       <KeyboardAvoidingView
         style={{height: '100%'}}
@@ -157,76 +325,7 @@ export const EditorMenu = ({
                 },
               ]}
               keyExtractor={(item, index) => item.name}
-              renderItem={({item, index}) => (
-                <TouchableOpacity
-                  activeOpacity={opacity}
-                  onPress={() => {
-                    item.close === false ? null : close();
-                    item.func();
-                  }}
-                  style={{
-                    width: '100%',
-                    alignSelf: 'center',
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                    alignItems: 'flex-end',
-                    paddingHorizontal: '5%',
-                    paddingVertical: pv + 5,
-                  }}>
-                  <View
-                    style={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                    }}>
-                    <Icon
-                      style={{
-                        width: 30,
-                      }}
-                      name={item.icon}
-                      color={colors.icon}
-                      size={SIZE.md}
-                    />
-                    <Text
-                      style={{
-                        fontFamily: WEIGHT.regular,
-                        fontSize: SIZE.sm,
-                        color: colors.pri,
-                      }}>
-                      {item.name}
-                    </Text>
-                  </View>
-                  {item.switch ? (
-                    <Icon
-                      size={SIZE.lg + 2}
-                      color={item.on ? colors.accent : colors.icon}
-                      name={item.on ? 'toggle-right' : 'toggle-left'}
-                    />
-                  ) : (
-                    undefined
-                  )}
-                  {item.check ? (
-                    <TouchableOpacity
-                      style={{
-                        borderWidth: 2,
-                        borderColor: item.on ? colors.accent : colors.icon,
-                        width: 23,
-                        height: 23,
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        borderRadius: 100,
-                        paddingTop: 3,
-                      }}>
-                      {item.on ? (
-                        <Icon
-                          size={SIZE.sm - 2}
-                          color={colors.accent}
-                          name="check"
-                        />
-                      ) : null}
-                    </TouchableOpacity>
-                  ) : null}
-                </TouchableOpacity>
-              )}
+              renderItem={_renderListItem}
             />
 
             <TouchableOpacity
@@ -250,7 +349,7 @@ export const EditorMenu = ({
                     width: 30,
                   }}
                   name="tag"
-                  color={colors.icon}
+                  color={colors.pri}
                   size={SIZE.md}
                 />
                 <Text
@@ -274,28 +373,7 @@ export const EditorMenu = ({
                 borderRadius: 5,
                 backgroundColor: colors.nav,
               }}>
-              {noteProps.tags.map(item => (
-                <TouchableOpacity
-                  style={{
-                    flexDirection: 'row',
-                    justifyContent: 'flex-start',
-                    alignItems: 'center',
-                    margin: 5,
-                    paddingHorizontal: 5,
-                    paddingVertical: 2.5,
-                    backgroundColor: colors.accent,
-                    borderRadius: 5,
-                  }}>
-                  <Text
-                    style={{
-                      fontFamily: WEIGHT.regular,
-                      fontSize: SIZE.sm - 2,
-                      color: 'white',
-                    }}>
-                    {item}
-                  </Text>
-                </TouchableOpacity>
-              ))}
+              {noteProps.tags.map(_renderTag)}
               <TextInput
                 style={{
                   backgroundColor: 'transparent',
@@ -313,55 +391,8 @@ export const EditorMenu = ({
                   tagToAdd = value;
                   if (tagToAdd.length > 0) backPressCount = 0;
                 }}
-                onKeyPress={event => {
-                  if (event.nativeEvent.key === 'Backspace') {
-                    if (backPressCount === 0 && !tagToAdd) {
-                      backPressCount = 1;
-
-                      return;
-                    }
-                    if (backPressCount === 1 && !tagToAdd) {
-                      backPressCount = 0;
-
-                      let tagInputValue =
-                        noteProps.tags[noteProps.tags.length - 1];
-                      let oldProps = {...noteProps};
-                      if (allTags.length === 1) return;
-
-                      oldProps.tags.splice(allTags.length - 1);
-
-                      updateProps(oldProps);
-                      tagsInputRef.setNativeProps({
-                        text: tagInputValue,
-                      });
-
-                      setTimeout(() => {
-                        tagsInputRef.focus();
-                      }, 300);
-                    }
-                  }
-                }}
-                onSubmitEditing={() => {
-                  if (!tagToAdd || tagToAdd === '#') return;
-
-                  let tag = tagToAdd;
-                  if (tag[0] !== '#') {
-                    tag = '#' + tag;
-                  }
-                  if (tag.includes(' ')) {
-                    tag = tag.replace(' ', '_');
-                  }
-                  let oldProps = {...noteProps};
-                  oldProps.tags.push(tag);
-                  tagsInputRef.setNativeProps({
-                    text: '#',
-                  });
-                  updateProps(oldProps);
-                  tagToAdd = '';
-                  setTimeout(() => {
-                    tagsInputRef.focus();
-                  }, 300);
-                }}
+                onKeyPress={_onKeyPress}
+                onSubmitEditing={_onSubmit}
               />
             </ScrollView>
 
@@ -386,7 +417,7 @@ export const EditorMenu = ({
                     width: 30,
                   }}
                   name="tag"
-                  color={colors.icon}
+                  color={colors.pri}
                   size={SIZE.md}
                 />
                 <Text
@@ -395,7 +426,7 @@ export const EditorMenu = ({
                     fontSize: SIZE.sm,
                     color: colors.pri,
                   }}>
-                  Add to Color
+                  Assign Colors
                 </Text>
               </View>
             </TouchableOpacity>
@@ -416,46 +447,7 @@ export const EditorMenu = ({
                 'purple',
                 'orange',
                 'gray',
-              ].map(item => (
-                <TouchableOpacity
-                  onPress={() => {
-                    let props = {...noteProps};
-                    if (props.colors.includes(item)) {
-                      props.colors.splice(props.colors.indexOf(item), 1);
-                    } else {
-                      props.colors.push(item);
-                    }
-
-                    updateProps(props);
-                  }}
-                  style={{
-                    flexDirection: 'row',
-                    justifyContent: 'flex-start',
-                    alignItems: 'center',
-                    marginRight: 5,
-                    marginBottom: 5,
-                    borderWidth: 1.5,
-                    borderRadius: 100,
-                    padding: 3,
-                    borderColor: noteProps.colors.includes(item)
-                      ? colors.pri
-                      : colors.navbg,
-                  }}>
-                  <View
-                    style={{
-                      width: 40,
-                      height: 40,
-                      backgroundColor: item,
-                      borderRadius: 100,
-                      justifyContent: 'center',
-                      alignItems: 'center',
-                    }}>
-                    {noteProps.colors.includes(item) ? (
-                      <Icon name="check" color="white" size={SIZE.md} />
-                    ) : null}
-                  </View>
-                </TouchableOpacity>
-              ))}
+              ].map(_renderColor)}
             </ScrollView>
           </View>
           <View
diff --git a/apps/mobile/src/components/Menu/index.js b/apps/mobile/src/components/Menu/index.js
index 3ceeda341..66cee95fc 100644
--- a/apps/mobile/src/components/Menu/index.js
+++ b/apps/mobile/src/components/Menu/index.js
@@ -1,37 +1,24 @@
-import React, {useEffect, useState, createRef} from 'react';
+import React from 'react';
 import {
   ScrollView,
   View,
   Text,
   TouchableOpacity,
-  SafeAreaView,
   Platform,
   FlatList,
-  DeviceEventEmitter,
-  PixelRatio,
 } from 'react-native';
 import NavigationService from '../../services/NavigationService';
 import {
-  COLOR_SCHEME,
   SIZE,
-  br,
-  ph,
   pv,
   opacity,
-  FONT,
   WEIGHT,
   COLOR_SCHEME_DARK,
-  setColorScheme,
   COLOR_SCHEME_LIGHT,
-  clearThemeUpdateListener,
-  onThemeUpdate,
 } from '../../common/common';
-
 import Icon from 'react-native-vector-icons/Feather';
-
-import {getElevation, w, h, Toast} from '../../utils/utils';
+import {h} from '../../utils/utils';
 import AsyncStorage from '@react-native-community/async-storage';
-import {useForceUpdate} from '../../views/ListsEditor';
 import {AnimatedSafeAreaView} from '../../views/Home';
 import {useAppContext} from '../../provider/useAppContext';
 
@@ -207,7 +194,7 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
                   width: 30,
                 }}
                 name="tag"
-                color={colors.icon}
+                color={colors.pri}
                 size={SIZE.md}
               />
               <Text
diff --git a/apps/mobile/src/components/NotesList/index.js b/apps/mobile/src/components/NotesList/index.js
index 77b312da2..1f762933f 100644
--- a/apps/mobile/src/components/NotesList/index.js
+++ b/apps/mobile/src/components/NotesList/index.js
@@ -7,12 +7,9 @@ import {
   TouchableOpacity,
   SectionList,
 } from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
-import {COLOR_SCHEME, SIZE, WEIGHT, ph, pv} from '../../common/common';
-import * as Animatable from 'react-native-animatable';
+import {SIZE, WEIGHT} from '../../common/common';
 import NoteItem from '../NoteItem';
 import {DDS} from '../../../App';
-import {w, h} from '../../utils/utils';
 import {useAppContext} from '../../provider/useAppContext';
 export const NotesList = ({
   keyword = null,
diff --git a/apps/mobile/src/views/Editor/index.js b/apps/mobile/src/views/Editor/index.js
index f648187a2..120840b8b 100755
--- a/apps/mobile/src/views/Editor/index.js
+++ b/apps/mobile/src/views/Editor/index.js
@@ -314,55 +314,64 @@ const Editor = ({navigation}) => {
       </Animatable.View>
     </View>
   ) : (
-    <SideMenu
-      isOpen={isOpen}
-      bounceBackOnOverdraw={false}
-      contentContainerStyle={{
-        opacity: 0,
-      }}
-      openMenuOffset={w / 1.2}
-      menuPosition="right"
-      onChange={args => {
-        setTimeout(() => {
-          setOpen(args);
-        }, 500);
-      }}
-      menu={
-        <EditorMenu
-          hide={false}
-          noteProps={noteProps}
-          updateProps={props => {
-            setNoteProps(props);
+    <Animatable.View
+      transition="backgroundColor"
+      duration={300}
+      style={{
+        backgroundColor: colors.bg,
+        flex: 1,
+      }}>
+      <SideMenu
+        isOpen={isOpen}
+        bounceBackOnOverdraw={false}
+        contentContainerStyle={{
+          opacity: 0,
+          backgroundColor: colors.bg,
+        }}
+        openMenuOffset={w / 1.2}
+        menuPosition="right"
+        onChange={args => {
+          setTimeout(() => {
+            setOpen(args);
+          }, 500);
+        }}
+        menu={
+          <EditorMenu
+            hide={false}
+            noteProps={noteProps}
+            updateProps={props => {
+              setNoteProps(props);
 
-            console.log(props, noteProps);
-          }}
-          close={() => {
-            setTimeout(() => {
-              setOpen(args);
-            }, 500);
-          }}
-        />
-      }>
-      <AnimatedSafeAreaView
-        transition="backgroundColor"
-        duration={300}
-        style={{height: '100%', backgroundColor: colors.bg}}>
-        <Dialog
-          title="Close Editor"
-          visible={dialog}
-          icon="x"
-          paragraph="Are you sure you want to close editor?"
-          close={() => {
-            setDialog(false);
-          }}
-          positivePress={() => {
-            navigation.goBack();
-            setDialog(false);
-          }}
-        />
-        {_renderEditor()}
-      </AnimatedSafeAreaView>
-    </SideMenu>
+              console.log(props, noteProps);
+            }}
+            close={() => {
+              setTimeout(() => {
+                setOpen(args);
+              }, 500);
+            }}
+          />
+        }>
+        <AnimatedSafeAreaView
+          transition="backgroundColor"
+          duration={300}
+          style={{height: '100%', backgroundColor: colors.bg}}>
+          <Dialog
+            title="Close Editor"
+            visible={dialog}
+            icon="x"
+            paragraph="Are you sure you want to close editor?"
+            close={() => {
+              setDialog(false);
+            }}
+            positivePress={() => {
+              navigation.goBack();
+              setDialog(false);
+            }}
+          />
+          {_renderEditor()}
+        </AnimatedSafeAreaView>
+      </SideMenu>
+    </Animatable.View>
   );
 };
 
diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js
index 4a3a60a72..2777b4532 100755
--- a/apps/mobile/src/views/Home/index.js
+++ b/apps/mobile/src/views/Home/index.js
@@ -1,4 +1,4 @@
-import React, {useEffect, useState, createRef, useCallback} from 'react';
+import React, {useEffect, useState} from 'react';
 import {
   SafeAreaView,
   TouchableOpacity,
@@ -16,7 +16,6 @@ import {NotesList} from '../../components/NotesList';
 import {db} from '../../../App';
 import Icon from 'react-native-vector-icons/Feather';
 import NavigationService from '../../services/NavigationService';
-import {useForceUpdate} from '../ListsEditor';
 import * as Animatable from 'react-native-animatable';
 import {useIsFocused} from 'react-navigation-hooks';
 import {useAppContext} from '../../provider/useAppContext';
diff --git a/apps/mobile/src/views/Notebook/index.js b/apps/mobile/src/views/Notebook/index.js
index 5366862bc..0c31da531 100644
--- a/apps/mobile/src/views/Notebook/index.js
+++ b/apps/mobile/src/views/Notebook/index.js
@@ -158,92 +158,11 @@ export const Notebook = ({navigation}) => {
             }
             offsetY = y;
           }}
-          ListHeaderComponent={
-            <>
-              {params.hideMore ? (
-                <View style={{marginTop: Platform.OS == 'ios' ? 145 : 185}} />
-              ) : (
-                <AnimatedTouchableOpacity
-                  transition="marginTop"
-                  duration={200}
-                  activeOpacity={opacity}
-                  onPress={() => {
-                    setAddNotebook(true);
-                  }}
-                  style={{
-                    borderWidth: 1,
-                    borderRadius: 5,
-                    marginTop: Platform.OS == 'ios' ? 145 : 185,
-                    width: '90%',
-                    marginHorizontal: '5%',
-                    paddingHorizontal: ph,
-                    borderColor: colors.nav,
-                    paddingVertical: pv + 5,
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    marginBottom: 15,
-                  }}>
-                  <Text
-                    style={{
-                      fontSize: SIZE.md,
-                      fontFamily: WEIGHT.bold,
-                      color: colors.pri,
-                    }}>
-                    View All Notes
-                  </Text>
-                </AnimatedTouchableOpacity>
-              )}
-            </>
-          }
           ListHeaderComponent={
             <View
               style={{
-                marginTop: Platform.OS == 'ios' ? 145 : 185 + 20,
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                width:
-                  numColumns === 2
-                    ? DDS.isTab
-                      ? w * 0.7 * 0.95
-                      : w * 0.95
-                    : w * 0.95,
-
-                alignSelf: 'center',
-                marginLeft:
-                  numColumns === 2 ? (DDS.isTab ? w * 0.7 * 0.025 : 0) : 0,
-                paddingHorizontal: ph + 5,
-              }}>
-              <View>
-                <Text
-                  transition="marginTop"
-                  delay={200}
-                  duration={200}
-                  style={{
-                    fontSize: SIZE.lg,
-                    fontFamily: WEIGHT.medium,
-                    color: colors.pri,
-                    paddingHorizontal: DDS.isTab ? '2.5%' : '5%',
-                    maxWidth: '100%',
-                  }}>
-                  <Text
-                    style={{
-                      color: colors.accent,
-                    }}></Text>
-                </Text>
-              </View>
-
-              <TouchableOpacity
-                onPress={() => {
-                  setNumColumns(numColumns === 1 ? 2 : 1);
-                }}
-                style={{
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}>
-                <Icon name="list" size={SIZE.xl} color={colors.icon} />
-              </TouchableOpacity>
-            </View>
+                marginTop: Platform.OS == 'ios' ? 145 : 185,
+              }}></View>
           }
           numColumns={numColumns}
           key={numColumns}
@@ -327,7 +246,7 @@ export const Notebook = ({navigation}) => {
           <Text
             style={{
               fontSize: SIZE.md,
-              fontFamily: WEIGHT.semibold,
+              fontFamily: WEIGHT.regular,
               color: 'white',
             }}>
             {'  '}Add a new topic