update

apps/mobile/App.js

@@ -8,16 +8,13 @@ import {
   DeviceEventEmitter,
   Platform,
   Keyboard,
+  Animated,
 } from 'react-native';
-import AsyncStorage from '@react-native-community/async-storage';
 import {
   COLOR_SCHEME,
-  COLOR_SCHEME_DARK,
-  setColorScheme,
   onThemeUpdate,
   clearThemeUpdateListener,
-  COLOR_SCHEME_LIGHT,
+  getColorScheme,
-  setAccentColor,
 } from './src/common/common';
 import Icon from 'react-native-vector-icons/Ionicons';
 import ActionButton from 'react-native-action-button';
@@ -26,52 +23,33 @@ import {h, w} from './src/utils/utils';
 import {Toast} from './src/components/Toast';
 import {Menu} from './src/components/Menu';
 import SideMenu from 'react-native-side-menu';
-import {useForceUpdate} from './src/views/ListsEditor';
 import Storage from 'notes-core/api/database';
 import StorageInterface from './src/utils/storage';
+import {AppProvider} from './src/provider';
+import {DeviceDetectionService} from './src/utils/deviceDetection';
+export const DDS = new DeviceDetectionService();
+
 export const db = new Storage(StorageInterface);
 
 const App = () => {
   const [colors, setColors] = useState(COLOR_SCHEME);
   const [fab, setFab] = useState(true);
-  const [sidebar, setSidebar] = useState('30%');
+  const [sidebar, setSidebar] = useState(w * 0.3);
   const [isOpen, setOpen] = useState(false);
   const [disableGestures, setDisableGesture] = useState(false);
   const [buttonHide, setButtonHide] = useState(false);
   const [isIntialized, setIsInitialized] = useState(false);
 
   useEffect(() => {
-    let theme = COLOR_SCHEME_LIGHT;
+    getColorScheme(colors);
-    AsyncStorage.getItem('accentColor').then(accentColor => {
-      if (typeof accentColor !== 'string') {
-        AsyncStorage.setItem('accentColor', colors.accent);
-      } else {
-        setAccentColor(accentColor);
-      }
-    });
-    AsyncStorage.getItem('theme').then(t => {
-      if (typeof t !== 'string') {
-        AsyncStorage.setItem('theme', JSON.stringify(theme));
-
-        setColorScheme(COLOR_SCHEME_LIGHT);
-      } else {
-        let themeToSet = JSON.parse(t);
-        themeToSet.night
-          ? setColorScheme(COLOR_SCHEME_DARK)
-          : setColorScheme(COLOR_SCHEME_LIGHT);
-        StatusBar.setBarStyle(
-          themeToSet.night ? 'light-content' : 'dark-content',
-        );
-      }
-    });
   }, []);
 
   useEffect(() => {
     DeviceEventEmitter.addListener('openSidebar', () => {
-      Platform.isPad ? setSidebar('30%') : setOpen(true);
+      DDS.isTab ? setSidebar(w * 0.3) : setOpen(true);
     });
     DeviceEventEmitter.addListener('closeSidebar', () => {
-      Platform.isPad ? setSidebar('0%') : setOpen(false);
+      DDS.isTab ? setSidebar(0) : setOpen(false);
     });
     DeviceEventEmitter.addListener('disableGesture', () => {
       setDisableGesture(true);
@@ -82,10 +60,10 @@ const App = () => {
 
     return () => {
       DeviceEventEmitter.removeListener('openSidebar', () => {
-        Platform.isPad ? setSidebar('30%') : setOpen(true);
+        DDS.isTab ? setSidebar('30%') : setOpen(true);
       });
       DeviceEventEmitter.removeListener('closeSidebar', () => {
-        Platform.isPad ? setSidebar('0%') : setOpen(false);
+        DDS.isTab ? setSidebar('0%') : setOpen(false);
       });
       DeviceEventEmitter.removeListener('disableGesture', () => {
         setDisableGesture(true);
@@ -162,76 +140,87 @@ const App = () => {
     db.init().then(() => {
       setIsInitialized(true);
     });
-  });
+  }, []);
 
   if (!isIntialized) {
     return <View />;
   }
   return (
-    <View
+    <AppProvider>
-      style={{
+      <View
-        width: '100%',
+        style={{
-        height: '100%',
+          width: '100%',
-        flexDirection: 'row',
+          height: '100%',
-        backgroundColor: colors.bg,
+          flexDirection: 'row',
-      }}>
+          backgroundColor: colors.bg,
-      {Platform.isPad ? (
+        }}>
-        <>
+        {DDS.isTab ? (
-          <Animatable.View
+          <>
-            transition="width"
+            <Animatable.View
-            duration={200}
+              transition="width"
-            style={{
+              duration={200}
-              width: sidebar,
+              style={{
-            }}>
+                width: sidebar,
-            <Menu
+              }}>
-              close={() => {
+              <Menu
-                setSidebar('0%');
+                hide={buttonHide}
+                colors={colors}
+                close={() => {
+                  //setSidebar('0%');
+                }}
+              />
+            </Animatable.View>
+            <AppContainer
+              style={{
+                width: DDS.isTab ? '70%' : '100%',
+                height: '100%',
+              }}
+              ref={navigatorRef => {
+                NavigationService.setTopLevelNavigator(navigatorRef);
               }}
-            />{' '}
-            : undefined
-          </Animatable.View>
-          <AppContainer
-            style={{
-              width: Platform.isPad ? '70%' : '100%',
-              height: '100%',
-            }}
-            ref={navigatorRef => {
-              NavigationService.setTopLevelNavigator(navigatorRef);
-            }}
-          />
-        </>
-      ) : (
-        <SideMenu
-          isOpen={isOpen}
-          disableGestures={disableGestures}
-          bounceBackOnOverdraw={false}
-          contentContainerStyle={{
-            opacity: 0,
-          }}
-          onChange={args => {
-            setOpen(args);
-          }}
-          menu={
-            <Menu
-              hide={buttonHide}
-              colors={colors}
-              close={() => setOpen(false)}
             />
-          }
+          </>
-          openMenuOffset={w / 1.3}>
+        ) : (
-          <AppContainer
+          <SideMenu
-            style={{
+            isOpen={isOpen}
-              width: Platform.isPad ? '70%' : '100%',
+            disableGestures={disableGestures}
-              height: '100%',
+            bounceBackOnOverdraw={false}
+            contentContainerStyle={{
+              opacity: 0,
             }}
-            ref={navigatorRef => {
+            animationFunction={(prop, value) =>
-              NavigationService.setTopLevelNavigator(navigatorRef);
+              Animated.spring(prop, {
+                toValue: value,
+                friction: 8,
+                useNativeDriver: true,
+              })
+            }
+            onChange={args => {
+              setTimeout(() => {
+                setOpen(args);
+              }, 300);
             }}
-          />
+            menu={
-        </SideMenu>
+              <Menu
-      )}
+                hide={buttonHide}
+                colors={colors}
+                close={() => setOpen(false)}
+              />
+            }
+            openMenuOffset={w / 1.3}>
+            <AppContainer
+              style={{
+                width: DDS.isTab ? '70%' : '100%',
+                height: '100%',
+              }}
+              ref={navigatorRef => {
+                NavigationService.setTopLevelNavigator(navigatorRef);
+              }}
+            />
+          </SideMenu>
+        )}
 
-      {/* {fab ? (
+        {/* {fab ? (
         <ActionButton elevation={5} buttonColor={colors.accent}>
           <ActionButton.Item
             buttonColor="#9b59b6"
@@ -278,8 +267,9 @@ const App = () => {
         undefined
       )} */}
 
-      <Toast />
+        <Toast />
-    </View>
+      </View>
+    </AppProvider>
   );
 };
 

apps/mobile/android/app/src/main/assets/texteditor.html

@@ -971,7 +971,7 @@
                     {delete: url.length},
                     {insert: url, attributes: {link: url}},
                   ]);
-
+                
                   editor.updateContents({
                     ops: ops,
                   });
@@ -989,9 +989,11 @@
             var Font = Quill.import('formats/font');
             Font.whitelist = fontNames;
             Quill.register(Font, true);
+            
            
             // Receber mensagens do RN
             document.addEventListener('message', data => {
+              editor.focus();
               if (data.data.substr(0,9) === '{"night":') {
                 pageTheme.colors = JSON.parse(data.data);
                

apps/mobile/ios/Notes.xcodeproj/project.pbxproj

@@ -27,6 +27,9 @@
 		655394CB23888EBE008A1476 /* Quicksand-SemiBold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 655394C323888EBE008A1476 /* Quicksand-SemiBold.ttf */; };
 		655394CC23888EBE008A1476 /* Quicksand-Light.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 655394C423888EBE008A1476 /* Quicksand-Light.ttf */; };
 		655E77352380917B0049D452 /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 655E772F2380917B0049D452 /* Ionicons.ttf */; };
+		656C396C23A41CA20060E3AB /* NotoSerif-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 656C396923A41CA20060E3AB /* NotoSerif-Bold.ttf */; };
+		656C396D23A41CA20060E3AB /* NotoSans-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 656C396A23A41CA20060E3AB /* NotoSans-Regular.ttf */; };
+		656C396E23A41CA20060E3AB /* NotoSerif-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 656C396B23A41CA20060E3AB /* NotoSerif-Regular.ttf */; };
 		773523A6669C9373D8945A06 /* libPods-Notes-tvOSTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 177E12D91F5B0732079F75AB /* libPods-Notes-tvOSTests.a */; };
 /* End PBXBuildFile section */
 
@@ -73,6 +76,9 @@
 		655394C323888EBE008A1476 /* Quicksand-SemiBold.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Quicksand-SemiBold.ttf"; sourceTree = "<group>"; };
 		655394C423888EBE008A1476 /* Quicksand-Light.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Quicksand-Light.ttf"; sourceTree = "<group>"; };
 		655E772F2380917B0049D452 /* Ionicons.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = Ionicons.ttf; sourceTree = "<group>"; };
+		656C396923A41CA20060E3AB /* NotoSerif-Bold.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "NotoSerif-Bold.ttf"; sourceTree = "<group>"; };
+		656C396A23A41CA20060E3AB /* NotoSans-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "NotoSans-Regular.ttf"; sourceTree = "<group>"; };
+		656C396B23A41CA20060E3AB /* NotoSerif-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "NotoSerif-Regular.ttf"; sourceTree = "<group>"; };
 		6FB6DE7AD66669BE4A951A9E /* Pods-Notes-tvOSTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Notes-tvOSTests.debug.xcconfig"; path = "Target Support Files/Pods-Notes-tvOSTests/Pods-Notes-tvOSTests.debug.xcconfig"; sourceTree = "<group>"; };
 		87D2DFC238DED597B12E218E /* Pods-Notes-tvOSTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Notes-tvOSTests.release.xcconfig"; path = "Target Support Files/Pods-Notes-tvOSTests/Pods-Notes-tvOSTests.release.xcconfig"; sourceTree = "<group>"; };
 		89ABD2DB3BB5CC5C08F50BC5 /* libPods-NotesTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-NotesTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -194,6 +200,9 @@
 		655394BF23888EBE008A1476 /* fonts */ = {
 			isa = PBXGroup;
 			children = (
+				656C396A23A41CA20060E3AB /* NotoSans-Regular.ttf */,
+				656C396923A41CA20060E3AB /* NotoSerif-Bold.ttf */,
+				656C396B23A41CA20060E3AB /* NotoSerif-Regular.ttf */,
 				655394C023888EBE008A1476 /* Quicksand-Bold.ttf */,
 				655394C123888EBE008A1476 /* Quicksand-Medium.ttf */,
 				655394C223888EBE008A1476 /* Quicksand-Regular.ttf */,
@@ -386,6 +395,9 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				656C396D23A41CA20060E3AB /* NotoSans-Regular.ttf in Resources */,
+				656C396E23A41CA20060E3AB /* NotoSerif-Regular.ttf in Resources */,
+				656C396C23A41CA20060E3AB /* NotoSerif-Bold.ttf in Resources */,
 				655394C723888EBE008A1476 /* fonts.css in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				655394C623888EBE008A1476 /* texteditor.html in Resources */,

apps/mobile/ios/Notes/Info.plist

@@ -41,6 +41,9 @@
 	<string></string>
 	<key>UIAppFonts</key>
 	<array>
+		<string>NotoSerif-Regular.ttf</string>
+		<string>NotoSerif-Bold.ttf</string>
+		<string>NotoSans-Regular.ttf</string>
 		<string>Feather.ttf</string>
 		<string>Quicksand-SemiBold.ttf</string>
 		<string>Quicksand-Medium.ttf</string>

apps/mobile/src/common/common.js

@@ -1,4 +1,5 @@
-import {DeviceEventEmitter} from 'react-native';
+import {DeviceEventEmitter, StatusBar, PixelRatio} from 'react-native';
+import AsyncStorage from '@react-native-community/async-storage';
 //COLOR SCHEME
 export const ACCENT = {
   color: '#0560FF',
@@ -18,6 +19,32 @@ export function setColorScheme(colors = COLOR_SCHEME, accent = ACCENT.color) {
   DeviceEventEmitter.emit('onThemeUpdate');
 }
 
+export function getColorScheme(colors) {
+  let theme = colors;
+  AsyncStorage.getItem('accentColor').then(accentColor => {
+    if (typeof accentColor !== 'string') {
+      AsyncStorage.setItem('accentColor', colors.accent);
+    } else {
+      setAccentColor(accentColor);
+    }
+  });
+  AsyncStorage.getItem('theme').then(t => {
+    if (typeof t !== 'string') {
+      AsyncStorage.setItem('theme', JSON.stringify(theme));
+
+      setColorScheme(COLOR_SCHEME_LIGHT);
+    } else {
+      let themeToSet = JSON.parse(t);
+      themeToSet.night
+        ? setColorScheme(COLOR_SCHEME_DARK)
+        : setColorScheme(COLOR_SCHEME_LIGHT);
+      StatusBar.setBarStyle(
+        themeToSet.night ? 'light-content' : 'dark-content',
+      );
+    }
+  });
+}
+
 export function setAccentColor(color) {
   ACCENT.color = color;
   DeviceEventEmitter.emit('onThemeUpdate');
@@ -93,14 +120,14 @@ export const FONT_BOLD = '';
 //FONT SIZE
 
 export const SIZE = {
-  xxs: 10,
+  xxs: 10 * PixelRatio.getFontScale(),
-  xs: 12,
+  xs: 12 * PixelRatio.getFontScale(),
-  sm: 16,
+  sm: 14 * PixelRatio.getFontScale(),
-  md: 18,
+  md: 18 * PixelRatio.getFontScale(),
-  lg: 22,
+  lg: 24 * PixelRatio.getFontScale(),
-  xl: 28,
+  xl: 28 * PixelRatio.getFontScale(),
-  xxl: 32,
+  xxl: 32 * PixelRatio.getFontScale(),
-  xxxl: 40,
+  xxxl: 36 * PixelRatio.getFontScale(),
 };
 
 export const br = 5; // border radius
@@ -111,9 +138,9 @@ export const opacity = 0.85; // active opacity
 // GLOBAL FONT
 
 export const WEIGHT = {
-  light: 'Quicksand-Light',
+  light: 'NotoSans',
-  regular: 'Quicksand-Regular',
+  regular: 'NotoSans',
-  medium: 'Quicksand-Medium',
+  medium: 'NotoSans',
-  semibold: 'Quicksand-SemiBold',
+  semibold: 'NotoSerif',
-  bold: 'Quicksand-Bold',
+  bold: 'NotoSerif-Bold',
 };

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

@@ -9,6 +9,7 @@ import {
   SafeAreaView,
   Platform,
   Modal,
+  KeyboardAvoidingView,
 } from 'react-native';
 import NavigationService from '../../services/NavigationService';
 import {
@@ -26,7 +27,7 @@ import Icon from 'react-native-vector-icons/Feather';
 import {getElevation, h, w, timeSince, ToastEvent} from '../../utils/utils';
 import {FlatList, TextInput} from 'react-native-gesture-handler';
 import {useForceUpdate} from '../../views/ListsEditor';
-import {db} from '../../../App';
+import {db, DDS} from '../../../App';
 
 let refs = [];
 
@@ -123,7 +124,8 @@ export const AddNotebookDialog = ({visible, close}) => {
       animated
       animationType="fade"
       onRequestClose={() => (refs = [])}>
-      <View
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : null}
         style={{
           width: '100%',
           height: '100%',
@@ -134,7 +136,7 @@ export const AddNotebookDialog = ({visible, close}) => {
         <View
           style={{
             ...getElevation(5),
-            width: '80%',
+            width: DDS.isTab ? '50%' : '80%',
             maxHeight: 350,
 
             borderRadius: 5,
@@ -152,10 +154,9 @@ export const AddNotebookDialog = ({visible, close}) => {
             <Text
               style={{
                 color: colors.accent,
-                fontFamily: WEIGHT.semibold,
+                fontFamily: WEIGHT.bold,
-                marginLeft: 10,
+                marginLeft: 5,
-                fontSize: SIZE.lg,
+                fontSize: SIZE.md,
-                marginTop: -5,
               }}>
               New Notebook
             </Text>
@@ -184,7 +185,7 @@ export const AddNotebookDialog = ({visible, close}) => {
           <Text
             style={{
               fontSize: SIZE.sm,
-              fontFamily: WEIGHT.semibold,
+              fontFamily: WEIGHT.bold,
               color: colors.pri,
             }}>
             Topics:
@@ -276,7 +277,7 @@ export const AddNotebookDialog = ({visible, close}) => {
             </TouchableOpacity>
           </View>
         </View>
-      </View>
+      </KeyboardAvoidingView>
     </Modal>
   );
 };

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

@@ -85,10 +85,9 @@ export const AddTopicDialog = ({
             <Text
               style={{
                 color: colors.accent,
-                fontFamily: WEIGHT.semibold,
+                fontFamily: WEIGHT.bold,
-                marginLeft: 10,
+                marginLeft: 5,
-                fontSize: SIZE.lg,
+                fontSize: SIZE.md,
-                marginTop: -5,
               }}>
               {toEdit ? 'Edit Topic' : 'Add New Topic'}
             </Text>

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

@@ -65,10 +65,9 @@ export const Dialog = ({
             <Text
               style={{
                 color: colors.accent,
-                fontFamily: WEIGHT.semibold,
+                fontFamily: WEIGHT.bold,
-                marginLeft: 10,
+                marginLeft: 5,
-                fontSize: SIZE.lg,
+                fontSize: SIZE.md + 2,
-                marginTop: -5,
               }}>
               {title}
             </Text>
@@ -79,7 +78,7 @@ export const Dialog = ({
               style={{
                 color: colors.icon,
                 fontFamily: WEIGHT.regular,
-                fontSize: SIZE.sm - 1,
+                fontSize: SIZE.sm - 2,
                 textAlign: 'center',
                 marginTop: 10,
               }}>

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

@@ -9,6 +9,7 @@ import {
   FlatList,
   DeviceEventEmitter,
   ActivityIndicator,
+  KeyboardAvoidingView,
 } from 'react-native';
 import NavigationService from '../../services/NavigationService';
 import {
@@ -59,355 +60,365 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
   return (
     <AnimatedSafeAreaView
       transition={['backgroundColor', 'opacity']}
-      duration={1000}
+      duration={300}
       style={{
         height: '100%',
         opacity: hide ? 0 : 1,
         backgroundColor: colors.night ? colors.navbg : colors.navbg,
       }}>
-      <ScrollView
+      <KeyboardAvoidingView
-        contentContainerStyle={{
+        style={{height: '100%'}}
-          justifyContent: 'space-between',
+        behavior={Platform.OS === 'ios' ? 'padding' : null}>
-          height: '100%',
+        <ScrollView
-        }}>
+          contentContainerStyle={{
-        <View>
+            justifyContent: 'space-between',
-          <View
+            height: '100%',
-            style={{
+          }}>
-              height: 2,
+          <View>
-              width: '100%',
-              marginBottom: 5,
-              marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03,
-            }}
-          />
-          <FlatList
-            data={[
-              {
-                name: 'Dark Mode',
-                icon: 'moon',
-                func: () => {
-                  if (!colors.night) {
-                    AsyncStorage.setItem(
-                      'theme',
-                      JSON.stringify(COLOR_SCHEME_DARK),
-                    );
-                    setColorScheme(COLOR_SCHEME_DARK);
-                  } else {
-                    AsyncStorage.setItem(
-                      'theme',
-                      JSON.stringify(COLOR_SCHEME_LIGHT),
-                    );
-                    setColorScheme(COLOR_SCHEME_LIGHT);
-                  }
-                },
-                switch: true,
-                on: colors.night ? true : false,
-                close: false,
-              },
-              {
-                name: 'Pinned',
-                icon: 'tag',
-                func: () => NavigationService.push('Home'),
-                close: true,
-                check: true,
-                on: true,
-              },
-
-              {
-                name: 'Add to Favorites',
-                icon: 'star',
-                func: () =>
-                  NavigationService.push('Folders', {
-                    title: 'Notebooks',
-                  }),
-                close: true,
-                check: true,
-                on: false,
-              },
-              {
-                name: 'Share ',
-                icon: 'share',
-                func: () => NavigationService.push('Lists'),
-                close: true,
-              },
-              {
-                name: 'Move to Notebook',
-                icon: 'arrow-right',
-                func: () => NavigationService.push('Favorites'),
-                close: true,
-              },
-
-              {
-                name: 'Delete',
-                icon: 'trash',
-                func: () => NavigationService.push('Trash'),
-                close: true,
-              },
-              {
-                name: 'Locked',
-                icon: 'lock',
-                func: () => NavigationService.push('Settings'),
-                close: true,
-                check: true,
-                on: false,
-              },
-            ]}
-            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: 10,
-                }}>
-                <View
-                  style={{
-                    flexDirection: 'row',
-                    alignItems: 'flex-end',
-                  }}>
-                  <Icon
-                    style={{
-                      width: 30,
-                    }}
-                    name={item.icon}
-                    color={colors.icon}
-                    size={SIZE.md}
-                  />
-                  <Text
-                    style={{
-                      fontFamily: WEIGHT.medium,
-                      fontSize: SIZE.sm - 1,
-                      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>
-            )}
-          />
-
-          <TouchableOpacity
-            style={{
-              width: '100%',
-              alignSelf: 'center',
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'flex-end',
-              paddingHorizontal: '5%',
-              marginTop: 15,
-            }}>
             <View
               style={{
-                flexDirection: 'row',
+                height: 2,
-                justifyContent: 'flex-start',
+                width: '100%',
-                alignItems: 'flex-end',
+                marginBottom: 5,
-              }}>
+                marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03,
-              <Icon
+              }}
-                style={{
+            />
-                  width: 30,
+            <FlatList
-                }}
+              data={[
-                name="tag"
+                {
-                color={colors.icon}
+                  name: 'Dark Mode',
-                size={SIZE.md}
+                  icon: 'moon',
-              />
+                  func: () => {
-              <Text
+                    if (!colors.night) {
-                style={{
+                      AsyncStorage.setItem(
-                  fontFamily: WEIGHT.medium,
+                        'theme',
-                  fontSize: SIZE.sm - 1,
+                        JSON.stringify(COLOR_SCHEME_DARK),
-                  color: colors.pri,
+                      );
-                }}>
+                      setColorScheme(COLOR_SCHEME_DARK);
-                Add Tags
+                    } else {
-              </Text>
+                      AsyncStorage.setItem(
-            </View>
+                        'theme',
-          </TouchableOpacity>
+                        JSON.stringify(COLOR_SCHEME_LIGHT),
+                      );
+                      setColorScheme(COLOR_SCHEME_LIGHT);
+                    }
+                  },
+                  switch: true,
+                  on: colors.night ? true : false,
+                  close: false,
+                },
+                {
+                  name: 'Pinned',
+                  icon: 'tag',
+                  func: () => NavigationService.push('Home'),
+                  close: true,
+                  check: true,
+                  on: true,
+                },
 
-          <ScrollView
+                {
-            contentContainerStyle={{
+                  name: 'Add to Favorites',
-              flexDirection: 'row',
+                  icon: 'star',
-              flexWrap: 'wrap',
+                  func: () =>
-              marginHorizontal: '5%',
+                    NavigationService.push('Folders', {
-              marginBottom: 0,
+                      title: 'Notebooks',
-              marginTop: 10,
+                    }),
-              borderRadius: 5,
+                  close: true,
-              backgroundColor: colors.nav,
+                  check: true,
-            }}>
+                  on: false,
-            {tags.map(item => (
+                },
-              <TouchableOpacity
+                {
+                  name: 'Share ',
+                  icon: 'share',
+                  func: () => NavigationService.push('Lists'),
+                  close: true,
+                },
+                {
+                  name: 'Move to Notebook',
+                  icon: 'arrow-right',
+                  func: () => NavigationService.push('Favorites'),
+                  close: true,
+                },
+
+                {
+                  name: 'Delete',
+                  icon: 'trash',
+                  func: () => NavigationService.push('Trash'),
+                  close: true,
+                },
+                {
+                  name: 'Locked',
+                  icon: 'lock',
+                  func: () => NavigationService.push('Settings'),
+                  close: true,
+                  check: true,
+                  on: false,
+                },
+              ]}
+              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.semibold,
+                        fontSize: SIZE.sm - 2,
+                        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>
+              )}
+            />
+
+            <TouchableOpacity
+              style={{
+                width: '100%',
+                alignSelf: 'center',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'flex-end',
+                paddingHorizontal: '5%',
+                marginTop: 15,
+              }}>
+              <View
                 style={{
                   flexDirection: 'row',
                   justifyContent: 'flex-start',
                   alignItems: 'center',
-                  margin: 5,
-                  paddingHorizontal: 5,
-                  paddingVertical: 2.5,
-                  backgroundColor: colors.accent,
-                  borderRadius: 5,
                 }}>
+                <Icon
+                  style={{
+                    width: 30,
+                  }}
+                  name="tag"
+                  color={colors.icon}
+                  size={SIZE.md}
+                />
                 <Text
                   style={{
-                    fontFamily: WEIGHT.medium,
+                    fontFamily: WEIGHT.semibold,
-                    fontSize: SIZE.sm - 2,
+                    fontSize: SIZE.sm - 1,
-                    color: 'white',
+                    color: colors.pri,
                   }}>
-                  {item}
+                  Add Tags
                 </Text>
-              </TouchableOpacity>
+              </View>
-            ))}
+            </TouchableOpacity>
-            <TextInput
-              style={{
-                backgroundColor: 'transparent',
-                minWidth: 100,
-                color: colors.pri,
-                paddingHorizontal: 5,
-                paddingVertical: 2.5,
-                margin: 5,
-              }}
-              ref={ref => (tagsInputRef = ref)}
-              placeholderTextColor={colors.icon}
-              placeholder="Add a tag"
-              defaultValue="#"
-              onChangeText={value => {
-                tagToAdd = value;
-                if (tagToAdd.length > 0) backPressCount = 0;
-              }}
-              onKeyPress={event => {
-                if (event.nativeEvent.key === 'Backspace') {
-                  if (backPressCount === 0 && !tagToAdd) {
-                    backPressCount = 1;
 
-                    return;
+            <ScrollView
-                  }
+              contentContainerStyle={{
-                  if (backPressCount === 1 && !tagToAdd) {
-                    backPressCount = 0;
-
-                    let tagInputValue = tags[tags.length - 1];
-                    let allTags = tags;
-                    if (allTags.length === 1) return;
-
-                    allTags.splice(allTags.length - 1);
-
-                    setTags(allTags);
-                    tagsInputRef.setNativeProps({
-                      text: tagInputValue,
-                    });
-                    forceUpdate();
-                    setTimeout(() => {
-                      tagsInputRef.focus();
-                    }, 300);
-                  }
-                }
-              }}
-              onSubmitEditing={() => {
-                if (!tagToAdd || tagToAdd === '#') return;
-
-                let tag = tagToAdd;
-                if (tag[0] !== '#') {
-                  tag = '#' + tag;
-                }
-                if (tag.includes(' ')) {
-                  tag = tag.replace(' ', '_');
-                }
-                let allTags = [...tags];
-                allTags.push(tag);
-                tagsInputRef.setNativeProps({
-                  text: '#',
-                });
-                setTags(allTags);
-                tagToAdd = '';
-                setTimeout(() => {
-                  tagsInputRef.focus();
-                }, 300);
-              }}
-            />
-          </ScrollView>
-
-          <TouchableOpacity
-            onPress={() => {
-              close();
-              NavigationService.navigate('Tags');
-            }}
-            style={{
-              width: '100%',
-              alignSelf: 'center',
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'flex-end',
-              paddingHorizontal: '5%',
-              marginTop: 15,
-            }}>
-            <View
-              style={{
                 flexDirection: 'row',
-                justifyContent: 'flex-start',
+                flexWrap: 'wrap',
-                alignItems: 'flex-end',
+                marginHorizontal: '5%',
+                marginBottom: 0,
+                marginTop: 10,
+                borderRadius: 5,
+                backgroundColor: colors.nav,
               }}>
-              <Icon
+              {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.medium,
+                      fontSize: SIZE.sm - 2,
+                      color: 'white',
+                    }}>
+                    {item}
+                  </Text>
+                </TouchableOpacity>
+              ))}
+              <TextInput
                 style={{
-                  width: 30,
+                  backgroundColor: 'transparent',
-                }}
+                  minWidth: 100,
-                name="tag"
+                  fontFamily: WEIGHT.semibold,
-                color={colors.icon}
-                size={SIZE.md}
-              />
-              <Text
-                style={{
-                  fontFamily: WEIGHT.medium,
-                  fontSize: SIZE.sm - 1,
                   color: colors.pri,
-                }}>
+                  paddingHorizontal: 5,
-                Add Color
+                  paddingVertical: 2.5,
-              </Text>
+                  margin: 5,
-            </View>
+                }}
-          </TouchableOpacity>
+                ref={ref => (tagsInputRef = ref)}
+                placeholderTextColor={colors.icon}
+                placeholder="#hashtag"
+                onChangeText={value => {
+                  tagToAdd = value;
+                  if (tagToAdd.length > 0) backPressCount = 0;
+                }}
+                onKeyPress={event => {
+                  if (event.nativeEvent.key === 'Backspace') {
+                    if (backPressCount === 0 && !tagToAdd) {
+                      backPressCount = 1;
 
-          <ScrollView
+                      return;
-            contentContainerStyle={{
+                    }
-              flexDirection: 'row',
+                    if (backPressCount === 1 && !tagToAdd) {
-              flexWrap: 'wrap',
+                      backPressCount = 0;
-              paddingHorizontal: '5%',
+
-              marginBottom: 15,
+                      let tagInputValue = tags[tags.length - 1];
-              marginTop: 10,
+                      let allTags = tags;
-            }}>
+                      if (allTags.length === 1) return;
-            {['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map(
+
-              item => (
+                      allTags.splice(allTags.length - 1);
+
+                      setTags(allTags);
+                      tagsInputRef.setNativeProps({
+                        text: tagInputValue,
+                      });
+                      forceUpdate();
+                      setTimeout(() => {
+                        tagsInputRef.focus();
+                      }, 300);
+                    }
+                  }
+                }}
+                onSubmitEditing={() => {
+                  if (!tagToAdd || tagToAdd === '#') return;
+
+                  let tag = tagToAdd;
+                  if (tag[0] !== '#') {
+                    tag = '#' + tag;
+                  }
+                  if (tag.includes(' ')) {
+                    tag = tag.replace(' ', '_');
+                  }
+                  let allTags = [...tags];
+                  allTags.push(tag);
+                  tagsInputRef.setNativeProps({
+                    text: '#',
+                  });
+                  setTags(allTags);
+                  tagToAdd = '';
+                  setTimeout(() => {
+                    tagsInputRef.focus();
+                  }, 300);
+                }}
+              />
+            </ScrollView>
+
+            <TouchableOpacity
+              onPress={() => {
+                close();
+                NavigationService.navigate('Tags');
+              }}
+              style={{
+                width: '100%',
+                alignSelf: 'center',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'flex-end',
+                paddingHorizontal: '5%',
+                marginTop: 15,
+              }}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'flex-start',
+                  alignItems: 'center',
+                }}>
+                <Icon
+                  style={{
+                    width: 30,
+                  }}
+                  name="tag"
+                  color={colors.icon}
+                  size={SIZE.md}
+                />
+                <Text
+                  style={{
+                    fontFamily: WEIGHT.semibold,
+                    fontSize: SIZE.sm - 2,
+                    color: colors.pri,
+                  }}>
+                  Add Color
+                </Text>
+              </View>
+            </TouchableOpacity>
+
+            <ScrollView
+              contentContainerStyle={{
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                paddingHorizontal: '5%',
+                marginBottom: 15,
+                marginTop: 10,
+              }}>
+              {[
+                'red',
+                'yellow',
+                'green',
+                'blue',
+                'purple',
+                'orange',
+                'gray',
+              ].map(item => (
                 <TouchableOpacity
                   onPress={() => {
                     setSelectedColor(item);
@@ -438,32 +449,30 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
                     ) : null}
                   </View>
                 </TouchableOpacity>
-              ),
+              ))}
-            )}
+            </ScrollView>
-          </ScrollView>
+          </View>
-        </View>
+          <View
-        <View
-          style={{
-            paddingHorizontal: '5%',
-            borderTopColor: colors.icon,
-            borderTopWidth: 1,
-            paddingVertical: pv,
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}>
-          <Text
             style={{
-              color: colors.icon,
+              paddingHorizontal: '5%',
-              fontFamily: WEIGHT.medium,
+              paddingVertical: pv + 5,
-              fontSize: SIZE.xs + 2,
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
             }}>
-            Last Synced: 5 secs ago.
+            <Text
-          </Text>
+              style={{
-          {}
+                color: colors.icon,
-          <ActivityIndicator color={colors.accent} />
+                fontFamily: WEIGHT.regular,
-        </View>
+                fontSize: SIZE.xs,
-      </ScrollView>
+              }}>
+              Last Synced: 5 secs ago.
+            </Text>
+            {}
+            <ActivityIndicator color={colors.accent} />
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
     </AnimatedSafeAreaView>
   );
 };

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

@@ -8,6 +8,7 @@ import {
   Platform,
   FlatList,
   DeviceEventEmitter,
+  PixelRatio,
 } from 'react-native';
 import NavigationService from '../../services/NavigationService';
 import {
@@ -51,7 +52,7 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
   return (
     <AnimatedSafeAreaView
       transition="backgroundColor"
-      duration={1000}
+      duration={300}
       style={{
         height: '100%',
         opacity: hide ? 0 : 1,
@@ -65,6 +66,7 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
           marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03,
         }}
       />
+
       <ScrollView
         contentContainerStyle={{
           justifyContent: 'space-between',
@@ -151,14 +153,14 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
                   alignSelf: 'center',
                   flexDirection: 'row',
                   justifyContent: 'space-between',
-                  alignItems: 'flex-end',
+                  alignItems: 'center',
                   paddingHorizontal: '5%',
-                  paddingVertical: 15,
+                  paddingVertical: pv + 5,
                 }}>
                 <View
                   style={{
                     flexDirection: 'row',
-                    alignItems: 'flex-end',
+                    alignItems: 'center',
                   }}>
                   <Icon
                     style={{
@@ -170,8 +172,8 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
                   />
                   <Text
                     style={{
-                      fontFamily: WEIGHT.medium,
+                      fontFamily: WEIGHT.regular,
-                      fontSize: SIZE.sm - 1,
+                      fontSize: SIZE.sm,
                       color: colors.pri,
                     }}>
                     {item.name}
@@ -208,7 +210,7 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
               style={{
                 flexDirection: 'row',
                 justifyContent: 'flex-start',
-                alignItems: 'flex-end',
+                alignItems: 'center',
               }}>
               <Icon
                 style={{
@@ -220,21 +222,13 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
               />
               <Text
                 style={{
-                  fontFamily: WEIGHT.medium,
+                  fontFamily: WEIGHT.regular,
-                  fontSize: SIZE.sm - 1,
+                  fontSize: SIZE.sm,
                   color: colors.pri,
                 }}>
                 Tags
               </Text>
             </View>
-            <Text
-              style={{
-                fontSize: SIZE.xs,
-                fontFamily: WEIGHT.regular,
-                color: colors.pri,
-              }}>
-              View All
-            </Text>
           </TouchableOpacity>
 
           <ScrollView
@@ -264,12 +258,13 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
                   flexDirection: 'row',
                   justifyContent: 'flex-start',
                   alignItems: 'center',
-                  margin: 5,
+                  padding: 7,
+                  paddingLeft: 3.5,
                 }}>
                 <Text
                   style={{
                     fontFamily: WEIGHT.regular,
-                    fontSize: SIZE.sm - 2,
+                    fontSize: SIZE.xs,
                     color: colors.icon,
                   }}>
                   #{item}
@@ -296,8 +291,8 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
                   }}>
                   <View
                     style={{
-                      width: 25,
+                      width: 35,
-                      height: 25,
+                      height: 35,
                       backgroundColor: item,
                       borderRadius: 100,
                     }}
@@ -359,22 +354,25 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
             }}
             activeOpacity={opacity}
             style={{
-              paddingVertical: pv,
+              paddingVertical: pv + 5,
-              paddingHorizontal: ph,
-              borderRadius: 5,
-              width: '100%',
-              justifyContent: 'center',
-              alignItems: 'center',
 
-              backgroundColor: colors.accent,
+              width: '100%',
+              borderRadius: 5,
+              justifyContent: 'flex-start',
+              alignItems: 'center',
+              flexDirection: 'row',
+              borderBottomColor: colors.accent,
+              borderBottomWidth: 1,
             }}>
+            <Icon name="log-in" color={colors.accent} size={SIZE.lg} />
+
             <Text
               style={{
-                fontFamily: WEIGHT.medium,
+                fontFamily: WEIGHT.regular,
-                color: 'white',
+                color: colors.accent,
-                fontSize: SIZE.sm,
+                fontSize: SIZE.md,
               }}>
-              Login to Sync
+              {'  '}Login
             </Text>
           </TouchableOpacity>
 

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

@@ -1,35 +1,16 @@
-import React, {useState, createRef} from 'react';
+import React, {useState} from 'react';
-import {
+import {View, Text, TouchableOpacity, Dimensions} from 'react-native';
-  View,
-  Text,
-  TouchableOpacity,
-  ScrollView,
-  Dimensions,
-  FlatList,
-  TouchableWithoutFeedback,
-  Platform,
-} from 'react-native';
 
-import {
+import {COLOR_SCHEME, SIZE, br, ph, pv, WEIGHT} from '../../common/common';
-  COLOR_SCHEME,
-  SIZE,
-  br,
-  ph,
-  pv,
-  opacity,
-  FONT,
-  WEIGHT,
-} from '../../common/common';
 
 import Icon from 'react-native-vector-icons/Feather';
-import {Reminder} from '../Reminder';
+import {timeSince, ToastEvent} from '../../utils/utils';
-import {getElevation, timeSince, ToastEvent} from '../../utils/utils';
 import NavigationService from '../../services/NavigationService';
 import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu';
 import {Dialog} from '../Dialog';
 import {VaultDialog} from '../VaultDialog';
 import {db} from '../../../App';
-
+import {DDS} from '../../../App';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
@@ -72,15 +53,14 @@ const NoteItem = props => {
   return (
     <View
       style={{
-        marginHorizontal: w * 0.05,
+        marginHorizontal: '5%',
         paddingVertical: pv,
-
         borderRadius: br,
-        justifyContent: 'center',
+        justifyContent: 'flex-start',
         alignItems: 'center',
         flexDirection: 'row',
         paddingHorizontal: ph,
-        width: Platform.isPad ? '95%' : '90%',
+        width: '100%',
         alignSelf: 'center',
         borderBottomWidth: 1,
         borderBottomColor: colors.nav,
@@ -106,8 +86,8 @@ const NoteItem = props => {
           });
         }}
         style={{
-          paddingLeft: ph,
+          paddingLeft: 0,
-          width: '100%',
+          width: '95%',
         }}>
         <>
           <Text
@@ -116,7 +96,7 @@ const NoteItem = props => {
               color: colors.pri,
               fontSize: SIZE.md,
               fontFamily: WEIGHT.bold,
-              maxWidth: '100%',
+              maxWidth: '95%',
               marginBottom: 5,
             }}>
             {item.title.replace('\n', '')}
@@ -128,14 +108,16 @@ const NoteItem = props => {
               width: '100%',
             }}>
             <Text
-              numberOfLines={2}
+              numberOfLines={props.numColumns === 2 ? 3 : null}
               style={{
-                fontSize: SIZE.xs + 2,
+                fontSize: SIZE.xs + 1,
-                color: colors.icon,
+                lineHeight: SIZE.sm + 2,
+                color: colors.pri,
                 fontFamily: WEIGHT.regular,
                 width: '100%',
                 maxWidth: '100%',
                 paddingRight: ph,
+                height: props.numColumns === 2 ? SIZE.sm * 3.5 : null,
               }}>
               {item.headline}
             </Text>
@@ -149,20 +131,20 @@ const NoteItem = props => {
               <Icon
                 style={{width: 30}}
                 name="lock"
-                size={SIZE.sm}
+                size={SIZE.xs}
                 color={colors.icon}
               />
               <Icon
                 style={{width: 30}}
                 name="star"
-                size={SIZE.sm}
+                size={SIZE.xs}
                 color={colors.icon}
               />
 
               <Text
                 style={{
                   color: colors.accent,
-                  fontSize: SIZE.xxs + 2,
+                  fontSize: SIZE.xxs,
                   textAlignVertical: 'center',
                   fontFamily: WEIGHT.regular,
                 }}>
@@ -175,7 +157,7 @@ const NoteItem = props => {
 
       <View
         style={{
-          width: w * 0.05,
+          width: DDS.isTab ? w * 0.7 * 0.05 : w * 0.05,
           justifyContent: 'center',
           minHeight: 70,
           alignItems: 'center',
@@ -201,16 +183,22 @@ const NoteItem = props => {
             </TouchableOpacity>
           }>
           <MenuItem
+            style={{
+              height: 35,
+            }}
             textStyle={{
               color: colors.pri,
 
               fontFamily: WEIGHT.regular,
-              fontSize: SIZE.sm,
+              fontSize: SIZE.xs,
             }}>
-            <Icon name="star" size={SIZE.sm} color={colors.icon} />
+            <Icon name="star" size={SIZE.xs} color={colors.icon} />
             {'  '}Pin
           </MenuItem>
           <MenuItem
+            style={{
+              height: 35,
+            }}
             onPress={() => {
               hideMenu();
               ToastEvent.show(
@@ -225,19 +213,23 @@ const NoteItem = props => {
               color: colors.pri,
 
               fontFamily: WEIGHT.regular,
-              fontSize: SIZE.sm,
+              fontSize: SIZE.xs,
             }}>
-            <Icon name="star" size={SIZE.sm} color={colors.icon} />
+            <Icon name="star" size={SIZE.xs} color={colors.icon} />
             {'  '}Favorite
           </MenuItem>
 
           <MenuItem
+            style={{
+              height: 35,
+            }}
             textStyle={{
               color: colors.pri,
+
               fontFamily: WEIGHT.regular,
-              fontSize: SIZE.sm,
+              fontSize: SIZE.xs,
             }}>
-            <Icon name="share" size={SIZE.sm} color={colors.icon} />
+            <Icon name="share" size={SIZE.xs} color={colors.icon} />
             {'  '}Share
           </MenuItem>
 
@@ -246,18 +238,22 @@ const NoteItem = props => {
               hideMenu();
               NavigationService.push('Folders', {
                 note: item,
+
                 title: 'Choose Notebook',
                 isMove: true,
                 hideMore: true,
               });
             }}
+            style={{
+              height: 35,
+            }}
             textStyle={{
               color: colors.pri,
 
               fontFamily: WEIGHT.regular,
-              fontSize: SIZE.sm,
+              fontSize: SIZE.xs,
             }}>
-            <Icon name="arrow-right" size={SIZE.sm} color={colors.icon} />
+            <Icon name="arrow-right" size={SIZE.xs} color={colors.icon} />
             {'  '}Move
           </MenuItem>
           <MenuItem
@@ -265,12 +261,16 @@ const NoteItem = props => {
               show = 'vault';
               hideMenu(true);
             }}
+            style={{
+              height: 35,
+            }}
             textStyle={{
               color: colors.pri,
+
               fontFamily: WEIGHT.regular,
-              fontSize: SIZE.sm,
+              fontSize: SIZE.xs,
             }}>
-            <Icon name="lock" size={SIZE.sm} color={colors.icon} />
+            <Icon name="lock" size={SIZE.xs} color={colors.icon} />
             {'  '}Lock
           </MenuItem>
 
@@ -279,13 +279,15 @@ const NoteItem = props => {
               show = 'delete';
               hideMenu();
             }}
+            style={{
+              height: 35,
+            }}
             textStyle={{
               color: colors.pri,
-
               fontFamily: WEIGHT.regular,
-              fontSize: SIZE.sm,
+              fontSize: SIZE.xs,
             }}>
-            <Icon name="trash" size={SIZE.sm} color={colors.icon} />
+            <Icon name="trash" size={SIZE.xs} color={colors.icon} />
             {'  '}Delete
           </MenuItem>
           <MenuDivider />
@@ -295,12 +297,12 @@ const NoteItem = props => {
               color: colors.icon,
 
               fontFamily: WEIGHT.regular,
-              fontSize: SIZE.xs,
+              fontSize: SIZE.xxs,
             }}
             style={{
               paddingVertical: 0,
               margin: 0,
-              height: 30,
+              height: 35,
             }}>
             Notebook: School Notes
           </MenuItem>
@@ -310,12 +312,12 @@ const NoteItem = props => {
               color: colors.icon,
 
               fontFamily: WEIGHT.regular,
-              fontSize: SIZE.xs,
+              fontSize: SIZE.xxs,
             }}
             style={{
               paddingVertical: 0,
               margin: 0,
-              height: 30,
+              height: 35,
               paddingBottom: 10,
             }}>
             {'  '}- Topic: Physics
@@ -325,14 +327,14 @@ const NoteItem = props => {
             disabled={true}
             textStyle={{
               color: colors.icon,
-
+              height: 35,
               fontFamily: WEIGHT.regular,
-              fontSize: SIZE.xs,
+              fontSize: SIZE.xxs,
             }}
             style={{
               paddingVertical: 0,
               margin: 0,
-              height: 30,
+              height: 35,
               paddingBottom: 10,
             }}>
             Created on: {new Date(item.dateCreated).toISOString().slice(0, 10)}

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

@@ -2,7 +2,15 @@ import React, {useState} from 'react';
 import {View, Text, TouchableOpacity} from 'react-native';
 import NavigationService from '../../services/NavigationService';
 import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu';
-import {COLOR_SCHEME, SIZE, ph, pv, opacity, WEIGHT} from '../../common/common';
+import {
+  COLOR_SCHEME,
+  SIZE,
+  ph,
+  pv,
+  opacity,
+  WEIGHT,
+  br,
+} from '../../common/common';
 import Icon from 'react-native-vector-icons/Feather';
 import {w, ToastEvent} from '../../utils/utils';
 import {db} from '../../../App';
@@ -17,6 +25,7 @@ export const NotebookItem = ({
   isMove = false,
   noteToMove = null,
   notebookID,
+  numColumns,
   refresh = () => {},
 }) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
@@ -75,11 +84,17 @@ export const NotebookItem = ({
   return (
     <View
       style={{
-        paddingHorizontal: ph,
         marginHorizontal: '5%',
+        paddingVertical: pv,
+        borderRadius: br,
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        flexDirection: 'row',
+        paddingHorizontal: ph,
+        width: '100%',
+        alignSelf: 'center',
         borderBottomWidth: 1,
         borderBottomColor: colors.nav,
-        paddingVertical: pv,
       }}>
       <Dialog
         visible={isVisible}
@@ -103,12 +118,14 @@ export const NotebookItem = ({
           flexDirection: 'row',
           justifyContent: 'space-between',
           alignItems: 'center',
+          width: '100%',
         }}>
         <TouchableOpacity onPress={navigate}>
           <Text
+            numberOfLines={1}
             style={{
               fontFamily: WEIGHT.bold,
-              fontSize: SIZE.md,
+              fontSize: SIZE.sm,
               color: colors.pri,
               maxWidth: '100%',
             }}>
@@ -116,11 +133,15 @@ export const NotebookItem = ({
           </Text>
           {isTopic ? null : (
             <Text
+              numberOfLines={numColumns === 2 ? 3 : 2}
               style={{
                 fontFamily: WEIGHT.regular,
-                fontSize: SIZE.xs + 1,
+                fontSize: SIZE.xs,
-                color: colors.pri,
+                lineHeight: SIZE.sm,
+                color: colors.icon,
                 maxWidth: '100%',
+                paddingVertical: 5,
+                height: numColumns === 2 ? SIZE.sm * 3.5 : null,
               }}>
               {item.description}
             </Text>
@@ -149,7 +170,7 @@ export const NotebookItem = ({
                     style={{
                       color: 'white',
                       fontFamily: WEIGHT.regular,
-                      fontSize: SIZE.xxs + 1,
+                      fontSize: SIZE.xxs,
                       maxWidth: '100%',
                     }}>
                     {topic.title}
@@ -170,20 +191,20 @@ export const NotebookItem = ({
               <Icon
                 style={{width: 30}}
                 name="lock"
-                size={SIZE.sm}
+                size={SIZE.xs}
                 color={colors.icon}
               />
               <Icon
                 style={{width: 30}}
                 name="star"
-                size={SIZE.sm}
+                size={SIZE.xs}
                 color={colors.icon}
               />
 
               <Text
                 style={{
                   color: colors.accent,
-                  fontSize: SIZE.xxs + 1,
+                  fontSize: SIZE.xxs,
                   textAlignVertical: 'center',
                   fontFamily: WEIGHT.regular,
                 }}>

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

@@ -1,10 +1,11 @@
 import React, {useState} from 'react';
-import {View, Text, FlatList, Platform} from 'react-native';
+import {View, Text, FlatList, Platform, TouchableOpacity} from 'react-native';
-
+import Icon from 'react-native-vector-icons/Feather';
-import {COLOR_SCHEME, SIZE, WEIGHT} from '../../common/common';
+import {COLOR_SCHEME, SIZE, WEIGHT, ph} from '../../common/common';
 import * as Animatable from 'react-native-animatable';
 import NoteItem from '../NoteItem';
-
+import {DDS} from '../../../App';
+import {w, h} from '../../utils/utils';
 export const NotesList = ({
   keyword = null,
   notes,
@@ -13,7 +14,7 @@ export const NotesList = ({
   isSearch = false,
 }) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
-
+  const [numColumns, setNumColumns] = useState(1);
   return (
     <FlatList
       data={notes}
@@ -40,33 +41,89 @@ export const NotesList = ({
         onScroll(y);
       }}
       ListHeaderComponent={
-        <>
+        <View
-          {isSearch ? (
+          style={{
-            <Text
+            marginTop: margin + 20,
-              transition="marginTop"
+            flexDirection: 'row',
-              delay={200}
+            justifyContent: 'space-between',
-              duration={200}
+            width:
-              style={{
+              numColumns === 2
-                fontSize: SIZE.lg,
+                ? DDS.isTab
-                marginTop: margin,
+                  ? w * 0.7 * 0.95
-                fontFamily: WEIGHT.medium,
+                  : w * 0.95
-                color: colors.pri,
+                : w * 0.95,
-                paddingHorizontal: Platform.isPad ? '2.5%' : '5%',
+            alignSelf: 'center',
-                maxWidth: '100%',
+            marginLeft:
-              }}>
+              numColumns === 2 ? (DDS.isTab ? w * 0.7 * 0.025 : 0) : 0,
-              Search Results for{' '}
+            paddingHorizontal: ph + 5,
+          }}>
+          <View>
+            {isSearch ? (
               <Text
+                transition="marginTop"
+                delay={200}
+                duration={200}
                 style={{
-                  color: colors.accent,
+                  fontSize: SIZE.lg,
+                  marginTop: margin,
+                  fontFamily: WEIGHT.medium,
+                  color: colors.pri,
+                  paddingHorizontal: DDS.isTab ? '2.5%' : '5%',
+                  maxWidth: '100%',
                 }}>
-                {keyword}{' '}
+                Search Results for{' '}
+                <Text
+                  style={{
+                    color: colors.accent,
+                  }}>
+                  {keyword}
+                </Text>
               </Text>
-            </Text>
+            ) : (
-          ) : (
+              undefined
-            <View style={{marginTop: margin}}></View>
+            )}
-          )}
+          </View>
-        </>
+
+          <TouchableOpacity
+            onPress={() => {
+              setNumColumns(numColumns === 1 ? 2 : 1);
+            }}
+            style={{
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+            <Icon name="list" size={SIZE.xl} color={colors.icon} />
+          </TouchableOpacity>
+        </View>
       }
+      numColumns={numColumns}
+      key={numColumns}
+      columnWrapperStyle={
+        numColumns === 1
+          ? null
+          : {
+              width:
+                notes.length === 1
+                  ? DDS.isTab
+                    ? '95%'
+                    : '90%'
+                  : DDS.isTab
+                  ? '45%'
+                  : '42.5%',
+            }
+      }
+      contentContainerStyle={{
+        width:
+          numColumns === 2
+            ? DDS.isTab
+              ? '100%'
+              : null
+            : DDS.isTab
+            ? '95%'
+            : '90%',
+        alignItems: numColumns === 2 ? 'flex-start' : null,
+        alignSelf: 'center',
+      }}
       ListFooterComponent={
         <View
           style={{
@@ -84,7 +141,9 @@ export const NotesList = ({
           </Text>
         </View>
       }
-      renderItem={({item, index}) => <NoteItem item={item} index={index} />}
+      renderItem={({item, index}) => (
+        <NoteItem item={item} numColumns={numColumns} index={index} />
+      )}
     />
   );
 };

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

@@ -97,7 +97,7 @@ export const Reminder = props => {
           <Text
             style={{
               color: props.invert ? colors.accent : 'white',
-              fontSize: SIZE.xxl,
+              fontSize: SIZE.xl,
               fontFamily: WEIGHT.light,
             }}>
             <Text

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

@@ -13,7 +13,7 @@ import {
 import Icon from 'react-native-vector-icons/Ionicons';
 import {getElevation} from '../../utils/utils';
 import * as Animatable from 'react-native-animatable';
-
+import {DDS} from '../../../App';
 export const Search = props => {
   const [colors, setColors] = useState(COLOR_SCHEME);
   const [focus, setFocus] = useState(false);
@@ -41,7 +41,7 @@ export const Search = props => {
           flexDirection: 'row',
           justifyContent: 'space-between',
           alignItems: 'center',
-          width: Platform.isPad ? '95%' : '90%',
+          width: DDS.isTab ? '95%' : '90%',
           alignSelf: 'center',
           borderRadius: br,
           borderWidth: props.hide ? 0 : 1.5,
@@ -61,6 +61,7 @@ export const Search = props => {
             fontFamily: WEIGHT.regular,
             color: colors.pri,
             maxWidth: '90%',
+            paddingVertical: 10,
             width: '90%',
             fontSize: SIZE.md,
           }}
@@ -79,7 +80,7 @@ export const Search = props => {
           placeholderTextColor={colors.icon}
         />
         <Icon
-          style={{paddingRight: Platform.isPad ? '1.25%' : '2.5%'}}
+          style={{paddingRight: DDS.isTab ? '1.25%' : '2.5%'}}
           onPress={() => {
             props.clear();
             props.value.length > 0 ? props.clearSearch() : null;

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

@@ -5,7 +5,7 @@ import {SIZE, WEIGHT} from '../../common/common';
 import {h, SideMenuEvent} from '../../utils/utils';
 import * as Animatable from 'react-native-animatable';
 import NavigationService from '../../services/NavigationService';
-
+import {DDS} from '../../../App';
 export const Header = ({
   heading,
   colors,
@@ -15,6 +15,8 @@ export const Header = ({
   menu,
   sendHeight = e => {},
 }) => {
+  const [isOpen, setOpen] = useState(DDS.isTab ? true : false);
+
   return (
     <Animatable.View
       onLayout={e => {
@@ -30,7 +32,7 @@ export const Header = ({
         zIndex: 10,
         justifyContent: 'space-between',
         alignItems: 'center',
-        paddingHorizontal: Platform.isPad ? '2.5%' : '5%',
+        paddingHorizontal: DDS.isTab ? '2.5%' : '5%',
         paddingTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.06,
         marginBottom: hide
           ? h * 0.03
@@ -59,11 +61,10 @@ export const Header = ({
             <Icon
               style={{
                 marginLeft: -10,
-                marginTop: 5,
               }}
               color={colors.pri}
               name={'chevron-left'}
-              size={hide ? SIZE.xl : SIZE.xxl}
+              size={SIZE.xl}
             />
           </TouchableOpacity>
         ) : (
@@ -73,22 +74,21 @@ export const Header = ({
           <TouchableOpacity
             hitSlop={{top: 20, bottom: 20, left: 50, right: 40}}
             onPress={() => {
-              SideMenuEvent.open();
+              if (isOpen) {
+                SideMenuEvent.close();
+                setOpen(false);
+              } else {
+                SideMenuEvent.open();
+                setOpen(true);
+              }
             }}
             style={{
-              justifyContent: 'flex-start',
+              justifyContent: 'center',
               alignItems: 'flex-start',
               height: 40,
-              width: 42,
+              width: 45,
             }}>
-            <Icon
+            <Icon color={colors.pri} name={'menu'} size={SIZE.xl} />
-              style={{
-                marginTop: 6,
-              }}
-              color={colors.pri}
-              name={'menu'}
-              size={hide ? SIZE.xl : SIZE.xxl - 2}
-            />
           </TouchableOpacity>
         ) : (
           undefined
@@ -98,7 +98,7 @@ export const Header = ({
           transition="fontSize"
           duration={300}
           style={{
-            fontSize: hide ? SIZE.xl : SIZE.xxl,
+            fontSize: hide ? SIZE.xl : SIZE.xl,
             color: colors.pri,
             fontFamily: WEIGHT.bold,
           }}>

apps/mobile/src/provider/index.js

@@ -0,0 +1,20 @@
+import React, {createContext} from 'react';
+import {useImmer} from 'use-immer';
+
+const AppContext = createContext();
+
+const defaultState = {
+  userLoggedIn: false,
+};
+
+const AppProvider = ({children}) => {
+  const [state, dispatch] = useImmer({...defaultState});
+
+  return (
+    <AppContext.Provider value={[state, dispatch]}>
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+export {AppContext, AppProvider};

apps/mobile/src/provider/useAppContext.js

@@ -0,0 +1,23 @@
+import {useContext} from 'react';
+import {AppContext} from '.';
+
+const useAppContext = () => {
+  const [state, dispatch] = useContext(AppContext);
+
+  if (dispatch === undefined) {
+    throw new Error('Must have dispatch defined');
+  }
+
+  function logInUser(isLoggedIn) {
+    dispatch(draft => {
+      draft.userLoggedIn = true;
+    });
+  }
+
+  return {
+    ...state,
+    logInUser,
+  };
+};
+
+export {useAppContext};

apps/mobile/src/services/NavigationService.js

@@ -20,7 +20,6 @@ import Trash from '../views/Trash';
 import Notes from '../views/Notes';
 import Tags from '../views/Tags';
 import Notebook from '../views/Notebook';
-import Move from '../views/Move';
 import AccountSettings from '../views/AccountSettings';
 
 const fade = props => {
@@ -95,9 +94,7 @@ const TopLevelNavigator = createStackNavigator(
     Notebook: {
       screen: Notebook,
     },
-    Move: {
+
-      screen: Move,
-    },
     AccountSettings: {
       screen: AccountSettings,
     },
@@ -106,6 +103,11 @@ const TopLevelNavigator = createStackNavigator(
     initialRouteName: 'Home',
     defaultNavigationOptions: {
       gesturesEnabled: false,
+      headerStyle: {
+        backgroundColor: 'transparent',
+        borderBottomWidth: 0,
+        height: 0,
+      },
     },
     transitionConfig: () => ({
       screenInterpolator: props => {

apps/mobile/src/utils/deviceDetection.js

@@ -0,0 +1,62 @@
+import React, {PixelRatio, Platform, Dimensions} from 'react-native';
+const windowSize = Dimensions.get('window');
+
+export class DeviceDetectionService {
+  constructor() {
+    this.pixelDensity = PixelRatio.get();
+    this.width = windowSize.width;
+    this.height = windowSize.height;
+    this.adjustedWidth = this.width * this.pixelDensity;
+    this.adjustedHeight = this.height * this.pixelDensity;
+
+    this.isPhoneOrTablet();
+    this.isIosOrAndroid();
+    this.detectIphoneX();
+  }
+
+  isPhoneOrTablet() {
+    if (Platform.isPad) {
+      this.isTab = true;
+      this.isPhone = false;
+    }
+    if (
+      this.pixelDensity < 2 &&
+      (this.adjustedWidth >= 1000 || this.adjustedHeight >= 1000)
+    ) {
+      this.isTab = true;
+      this.isPhone = false;
+    } else if (
+      this.pixelDensity === 2 &&
+      (this.adjustedWidth >= 1920 || this.adjustedHeight >= 1920)
+    ) {
+      this.isTab = true;
+      this.isPhone = false;
+    } else {
+      this.isTab = false;
+      this.isPhone = true;
+    }
+  }
+
+  isIosOrAndroid() {
+    if (Platform.OS === 'ios') {
+      this.isIos = true;
+      this.isAndroid = false;
+    } else {
+      this.isIos = false;
+      this.isAndroid = true;
+    }
+  }
+
+  detectIphoneX() {
+    if (
+      Platform.OS === 'ios' &&
+      !Platform.isTVOS &&
+      !Platform.isTVOS &&
+      (windowSize.height === 812 || windowSize.width === 812)
+    ) {
+      this.isIphoneX = true;
+    } else {
+      this.isIphoneX = false;
+    }
+  }
+}

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

@@ -50,7 +50,7 @@ export const AccountSettings = ({navigation}) => {
   return (
     <AnimatedSafeAreaView
       transition="backgroundColor"
-      duration={1000}
+      duration={300}
       style={{
         height: '100%',
         backgroundColor: colors.bg,

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

@@ -32,12 +32,13 @@ import {NavigationEvents} from 'react-navigation';
 import {db} from '../../../App';
 import {SideMenuEvent} from '../../utils/utils';
 import {Dialog} from '../../components/Dialog';
-
+import {DDS} from '../../../App';
 import * as Animatable from 'react-native-animatable';
 import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu';
 import SideMenu from 'react-native-side-menu';
 import {EditorMenu} from '../../components/EditorMenu';
 import {AnimatedSafeAreaView} from '../Home';
+import {useAppContext} from '../../provider/useAppContext';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
@@ -56,12 +57,11 @@ const Editor = ({navigation}) => {
   // STATE
 
   const [colors, setColors] = useState(COLOR_SCHEME);
-  const [keyboardHeight, setKeyboardHeight] = useState(0);
   const [dialog, setDialog] = useState(false);
   const [resize, setResize] = useState(false);
-  const [sidebar, setSidebar] = useState('30%');
   const [isOpen, setOpen] = useState(false);
   const [hide, setHide] = useState(true);
+  const [sidebar, setSidebar] = useState(DDS.isTab ? true : false);
   // VARIABLES
 
   let updateInterval = null;
@@ -69,25 +69,23 @@ const Editor = ({navigation}) => {
   let keyboardDidHideListener = null;
   let setMenuRef;
   const forceUpdate = useForceUpdate();
-
+  const {userLoggedIn, logInUser} = useAppContext();
   // FUNCTIONS
 
   const _keyboardDidShow = e => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setKeyboardHeight(e.endCoordinates.height);
     if (!isOpen) {
-      setHide(true);
+      setTimeout(() => {
+        setHide(true);
+      }, 300);
     }
   };
 
   const post = value => EditorWebView.postMessage(value);
 
   const _keyboardDidHide = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setKeyboardHeight(0);
     setTimeout(() => {
       setHide(false);
-    }, 2000);
+    }, 10000);
   };
 
   const onChange = data => {
@@ -125,6 +123,11 @@ const Editor = ({navigation}) => {
     if (content && content.delta) {
       post(JSON.stringify(content.delta));
     }
+
+    EditorWebView.requestFocus();
+    setTimeout(() => {
+      post(null);
+    }, 500);
   };
   const onTitleTextChange = value => {
     title = value;
@@ -148,15 +151,13 @@ const Editor = ({navigation}) => {
               alignSelf: 'center',
               marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.04,
             }}>
-            <AnimatedTouchableOpacity
+            <TouchableOpacity
               onPress={() => {
                 setDialog(true);
               }}
-              transition={['width', 'height']}
-              duration={250}
               style={{
-                width: resize ? 35 : 40,
+                width: 40,
-                height: resize ? 35 : 40,
+                height: 40,
               }}>
               <Icon
                 style={{
@@ -165,9 +166,9 @@ const Editor = ({navigation}) => {
                 }}
                 name="chevron-left"
                 color={colors.icon}
-                size={resize ? SIZE.xl : SIZE.xxl}
+                size={SIZE.xl}
               />
-            </AnimatedTouchableOpacity>
+            </TouchableOpacity>
 
             <TextInput
               placeholder="Untitled Note"
@@ -177,35 +178,32 @@ const Editor = ({navigation}) => {
               style={{
                 width: '80%',
                 fontFamily: WEIGHT.bold,
-                fontSize: SIZE.xxl,
+                fontSize: SIZE.xl,
                 color: colors.pri,
-                maxWidth: '90%',
+                maxWidth: '80%',
                 paddingVertical: 0,
               }}
               onChangeText={onTitleTextChange}
               onSubmitEditing={saveNote}
             />
 
-            <AnimatedTouchableOpacity
+            <TouchableOpacity
-              transition={['width', 'height']}
-              duration={250}
               onPress={() => {
-                setOpen(true);
+                DDS.isTab ? setSidebar(!sidebar) : setOpen(!isOpen);
               }}
               style={{
-                width: resize ? 35 : 40,
+                width: 40,
-                height: resize ? 35 : 40,
+                height: 40,
                 justifyContent: 'center',
-
                 alignItems: 'center',
                 paddingTop: 3,
               }}>
               <Icon
-                name="menu"
+                name={sidebar || isOpen ? 'x' : 'menu'}
                 color={colors.icon}
-                size={resize ? SIZE.xl : SIZE.xxl}
+                size={SIZE.xl}
               />
-            </AnimatedTouchableOpacity>
+            </TouchableOpacity>
           </View>
 
           <WebView
@@ -268,6 +266,7 @@ const Editor = ({navigation}) => {
   // EFFECTS
 
   useEffect(() => {
+    console.log(userLoggedIn);
     let handleBack = BackHandler.addEventListener(
       'hardwareBackPress',
       handleBackEvent,
@@ -320,7 +319,7 @@ const Editor = ({navigation}) => {
     SideMenuEvent.close();
     SideMenuEvent.disable();
     return () => {
-      Platform.isPad ? SideMenuEvent.open() : null;
+      DDS.isTab ? SideMenuEvent.open() : null;
 
       SideMenuEvent.enable();
     };
@@ -348,7 +347,46 @@ const Editor = ({navigation}) => {
     }, 1000);
   }, []);
 
-  return (
+  return DDS.isTab ? (
+    <View
+      style={{
+        flexDirection: 'row',
+        width: '100%',
+      }}>
+      <AnimatedSafeAreaView
+        transition={['backgroundColor', 'width']}
+        duration={300}
+        style={{
+          height: '100%',
+          backgroundColor: colors.bg,
+          width: sidebar ? '70%' : '100%',
+        }}>
+        <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>
+      <Animatable.View
+        transition={['width', 'opacity']}
+        duration={300}
+        style={{
+          width: sidebar ? '30%' : '0%',
+          opacity: sidebar ? 1 : 0,
+        }}>
+        <EditorMenu />
+      </Animatable.View>
+    </View>
+  ) : (
     <SideMenu
       isOpen={isOpen}
       bounceBackOnOverdraw={false}
@@ -358,7 +396,9 @@ const Editor = ({navigation}) => {
       openMenuOffset={w / 1.2}
       menuPosition="right"
       onChange={args => {
-        setOpen(args);
+        setTimeout(() => {
+          setOpen(args);
+        }, 300);
       }}
       menu={
         <EditorMenu
@@ -370,7 +410,7 @@ const Editor = ({navigation}) => {
       }>
       <AnimatedSafeAreaView
         transition="backgroundColor"
-        duration={1000}
+        duration={300}
         style={{height: '100%', backgroundColor: colors.bg}}>
         <Dialog
           title="Close Editor"

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

@@ -49,7 +49,7 @@ export const Favorites = ({navigation}) => {
   return (
     <AnimatedSafeAreaView
       transition="backgroundColor"
-      duration={1000}
+      duration={300}
       style={{
         height: '100%',
         backgroundColor: colors.bg,

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

@@ -33,7 +33,7 @@ import {useForceUpdate} from '../ListsEditor';
 import {AddNotebookDialog} from '../../components/AddNotebookDialog';
 import {NotebookItem} from '../../components/NotebookItem';
 import {Search} from '../../components/SearchInput';
-import {db} from '../../../App';
+import {db, DDS} from '../../../App';
 import {Header} from '../../components/header';
 import {AnimatedSafeAreaView} from '../Home';
 import * as Animatable from 'react-native-animatable';
@@ -45,6 +45,7 @@ export const Folders = ({navigation}) => {
   const [hideHeader, setHideHeader] = useState(false);
   const [buttonHide, setButtonHide] = useState(false);
   const [margin, setMargin] = useState(190);
+  const [numColumns, setNumColumns] = useState(1);
   const forceUpdate = useForceUpdate();
   const params = navigation.state.params;
   let offsetY = 0;
@@ -87,7 +88,7 @@ export const Folders = ({navigation}) => {
   return (
     <AnimatedSafeAreaView
       transition="backgroundColor"
-      duration={1000}
+      duration={300}
       style={{
         height: '100%',
         backgroundColor: colors.bg,
@@ -112,7 +113,7 @@ export const Folders = ({navigation}) => {
         }}>
         <Animatable.View
           transition="backgroundColor"
-          duration={1000}
+          duration={300}
           style={{
             position: 'absolute',
             backgroundColor: colors.bg,
@@ -165,12 +166,97 @@ export const Folders = ({navigation}) => {
           }}
           ListHeaderComponent={
             <View
-              transition="marginTop"
-              duration={200}
               style={{
-                marginTop: margin,
+                marginTop: margin + 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>
+          }
+          numColumns={numColumns}
+          key={numColumns}
+          columnWrapperStyle={
+            numColumns === 1
+              ? null
+              : {
+                  width:
+                    notebooks.length === 1
+                      ? DDS.isTab
+                        ? '95%'
+                        : '90%'
+                      : DDS.isTab
+                      ? '45%'
+                      : '42.5%',
+                }
+          }
+          contentContainerStyle={{
+            width:
+              numColumns === 2
+                ? DDS.isTab
+                  ? '100%'
+                  : null
+                : DDS.isTab
+                ? '95%'
+                : '90%',
+            alignItems: numColumns === 2 ? 'flex-start' : null,
+            alignSelf: 'center',
+          }}
+          ListFooterComponent={
+            <View
+              style={{
+                height: 150,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+              <Text
+                style={{
+                  color: colors.navbg,
+                  fontSize: SIZE.sm,
+                  fontFamily: WEIGHT.regular,
+                }}>
+                - End -
+              </Text>
+            </View>
           }
           data={notebooks}
           keyExtractor={(item, index) => item.dateCreated.toString()}
@@ -180,6 +266,7 @@ export const Folders = ({navigation}) => {
               isMove={params.isMove}
               noteToMove={params.note}
               item={item}
+              numColumns={numColumns}
               refresh={() => setNotebooks(db.getNotebooks())}
               index={index}
               colors={colors}
@@ -199,18 +286,18 @@ export const Folders = ({navigation}) => {
 
             paddingVertical: pv + 5,
             flexDirection: 'row',
-            justifyContent: 'space-between',
+            justifyContent: 'flex-start',
             alignItems: 'center',
             marginBottom: 15,
             backgroundColor: colors.accent,
           }}>
+          <Icon name="plus" color="white" size={SIZE.lg} />
           <Text
             style={{
               fontSize: SIZE.md,
               fontFamily: WEIGHT.semibold,
               color: 'white',
             }}>
-            <Icon name="plus" color="white" size={SIZE.lg} />
             {'  '} Create a new notebook
           </Text>
         </TouchableOpacity>

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

@@ -24,6 +24,7 @@ import {
   clearThemeUpdateListener,
 } from '../../common/common';
 import Icon from 'react-native-vector-icons/Ionicons';
+import {DDS} from '../../../App';
 import {Reminder} from '../../components/Reminder';
 import {ListItem} from '../../components/ListItem';
 import {getElevation} from '../../utils/utils';
@@ -95,9 +96,9 @@ const renderForgotPassword = colors => {
   return (
     <View
       style={{
-        justifyContent: Platform.isPad ? 'center' : 'space-between',
+        justifyContent: DDS.isTab ? 'center' : 'space-between',
         height: '80%',
-        width: Platform.isPad ? '60%' : '100%',
+        width: DDS.isTab ? '60%' : '100%',
         alignSelf: 'center',
       }}>
       <View>

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

@@ -31,6 +31,8 @@ import NavigationService from '../../services/NavigationService';
 import {useForceUpdate} from '../ListsEditor';
 import * as Animatable from 'react-native-animatable';
 import {useNavigationEvents, useIsFocused} from 'react-navigation-hooks';
+import {useAppContext} from '../../provider/useAppContext';
+import {DDS} from '../../../App';
 export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
   SafeAreaView,
 );
@@ -48,6 +50,7 @@ export const Home = ({navigation}) => {
   const [keyword, setKeyword] = useState('');
   const forceUpdate = useForceUpdate();
   const isFocused = useIsFocused();
+  const {userLoggedIn, logInUser} = useAppContext();
   // Variables
   let offsetY = 0;
   let countUp = 1;
@@ -59,7 +62,14 @@ export const Home = ({navigation}) => {
   let allNotes = [];
 
   // Effects
+
   useEffect(() => {
+    console.log('deviceType', DDS.isTab);
+    console.log(userLoggedIn);
+  }, [userLoggedIn]);
+  useEffect(() => {
+    logInUser(true);
+
     if (!isFocused) return;
     fetchNotes();
   }, [isFocused]);
@@ -165,30 +175,10 @@ export const Home = ({navigation}) => {
 
   // Render
 
-  return Platform.isPad ? (
+  return (
-    <SafeAreaView style={[styles.container, {backgroundColor: colors.bg}]}>
-      <KeyboardAvoidingView style={{backgroundColor: colors.bg}}>
-        <Header colors={colors} heading="Home" canGoBack={false} />
-
-        <Search
-          onChangeText={onChangeText}
-          onSubmitEditing={onSubmitEditing}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          value={text}
-          onClose={() => {
-            setHidden(false);
-            setText('');
-          }}
-        />
-
-        <NotesList keyword={text} />
-      </KeyboardAvoidingView>
-    </SafeAreaView>
-  ) : (
     <AnimatedSafeAreaView
       transition="backgroundColor"
-      duration={1000}
+      duration={300}
       style={{
         height: '100%',
         backgroundColor: colors.night ? colors.bg : colors.bg,
@@ -204,7 +194,7 @@ export const Home = ({navigation}) => {
         />
         <Animatable.View
           transition="backgroundColor"
-          duration={1000}
+          duration={300}
           style={{
             position: 'absolute',
             backgroundColor: colors.night ? colors.bg : colors.bg,
@@ -248,6 +238,7 @@ export const Home = ({navigation}) => {
 
         <NotesList
           margin={margin}
+          numOfColumns={DDS.isTab ? 2 : 1}
           onScroll={y => {
             if (buttonHide) return;
             if (y < 30) setHideHeader(false);
@@ -276,7 +267,7 @@ export const Home = ({navigation}) => {
             }}
             activeOpacity={opacity}
             style={{
-              width: '90%',
+              width: DDS.isTab ? '95%' : '90%',
               alignSelf: 'center',
               borderRadius: br,
               backgroundColor: colors.accent,
@@ -286,21 +277,21 @@ export const Home = ({navigation}) => {
             }}>
             <View
               style={{
-                justifyContent: 'space-between',
+                justifyContent: 'flex-start',
                 alignItems: 'center',
                 flexDirection: 'row',
                 width: '100%',
                 padding: pv,
                 paddingVertical: pv + 5,
               }}>
+              <Icon name="plus" color="white" size={SIZE.lg} />
               <Text
                 style={{
                   fontSize: SIZE.md,
                   color: 'white',
-                  fontFamily: WEIGHT.bold,
+                  fontFamily: WEIGHT.regular,
                   textAlignVertical: 'center',
                 }}>
-                <Icon name="plus" color="white" size={SIZE.lg} />
                 {'  '}Add a new note
               </Text>
             </View>
@@ -313,6 +304,11 @@ export const Home = ({navigation}) => {
 
 Home.navigationOptions = {
   header: null,
+  headerStyle: {
+    backgroundColor: 'transparent',
+    borderBottomWidth: 0,
+    height: 0,
+  },
 };
 
 export default Home;

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

@@ -43,13 +43,13 @@ export const Lists = ({navigation}) => {
         }}>
         <Text
           style={{
-            fontSize: SIZE.xxl,
+            fontSize: SIZE.xl,
             color: colors.pri,
             fontFamily: WEIGHT.bold,
           }}>
           Lists
         </Text>
-        <Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
+        <Icon name="md-more" color={colors.icon} size={SIZE.xl} />
       </View>
 
       <ListItem />

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

@@ -77,7 +77,7 @@ const ListsEditor = ({navigation}) => {
           placeholder="Untitled List"
           placeholderTextColor={colors.icon}
         />
-        <Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
+        <Icon name="md-more" color={colors.icon} size={SIZE.xl} />
       </View>
 
       <TextInput

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

@@ -31,7 +31,7 @@ import {FlatList, TextInput} from 'react-native-gesture-handler';
 import {NavigationEvents} from 'react-navigation';
 import {Header} from '../../components/header';
 import {useForceUpdate} from '../ListsEditor';
-
+import {DDS} from '../../../App';
 export const Login = ({navigation}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
   const forceUpdate = useForceUpdate();
@@ -102,9 +102,9 @@ const renderLogin = colors => {
   return (
     <View
       style={{
-        justifyContent: Platform.isPad ? 'center' : 'space-between',
+        justifyContent: DDS.isTab ? 'center' : 'space-between',
         height: '80%',
-        width: Platform.isPad ? '60%' : '100%',
+        width: DDS.isTab ? '60%' : '100%',
         alignSelf: 'center',
       }}>
       <View>
@@ -210,7 +210,7 @@ const renderLogin = colors => {
       <View
         style={{
           width: '100%',
-          position: Platform.isPad ? 'absolute' : 'relative',
+          position: DDS.isTab ? 'absolute' : 'relative',
           bottom: '0%',
         }}>
         <TouchableOpacity

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

@@ -1,112 +0,0 @@
-import React, {useEffect, useState} from 'react';
-import {
-  ScrollView,
-  View,
-  Text,
-  TouchableOpacity,
-  Dimensions,
-  Image,
-  SafeAreaView,
-  Platform,
-  FlatList,
-} from 'react-native';
-import NavigationService from '../../services/NavigationService';
-import {
-  COLOR_SCHEME,
-  SIZE,
-  br,
-  ph,
-  pv,
-  opacity,
-  FONT,
-  WEIGHT,
-} from '../../common/common';
-import Icon from 'react-native-vector-icons/Feather';
-import {Reminder} from '../../components/Reminder';
-import {ListItem} from '../../components/ListItem';
-import {Header} from '../../components/header';
-import NoteItem from '../../components/NoteItem';
-import {NotebookItem} from '../../components/NotebookItem';
-import {AddNotebookDialog} from '../../components/AddNotebookDialog';
-
-const w = Dimensions.get('window').width;
-const h = Dimensions.get('window').height;
-
-export const Move = ({navigation}) => {
-  const [colors, setColors] = useState(COLOR_SCHEME);
-  const [addNotebook, setAddNotebook] = useState(false);
-
-  return (
-    <SafeAreaView>
-      <AddNotebookDialog
-        visible={addNotebook}
-        close={() => setAddNotebook(false)}
-      />
-      <Header colors={colors} heading="Move to" canGoBack={false} />
-      <FlatList
-        style={{
-          width: '100%',
-        }}
-        data={[
-          {
-            name: 'Class Notes',
-            Qty: '8',
-          },
-          {
-            name: 'Notes of water tabs',
-            Qty: '3',
-          },
-          {
-            name: 'My Lists',
-            Qty: '3',
-          },
-        ]}
-        ListHeaderComponent={
-          <TouchableOpacity
-            activeOpacity={opacity}
-            onPress={() => {
-              setAddNotebook(true);
-            }}
-            style={{
-              borderWidth: 1,
-              borderRadius: 5,
-              width: '90%',
-              marginHorizontal: '5%',
-              paddingHorizontal: ph,
-              borderColor: colors.nav,
-              paddingVertical: pv + 5,
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              marginBottom: 15,
-              backgroundColor: colors.accent,
-            }}>
-            <Text
-              style={{
-                fontSize: SIZE.md,
-                fontFamily: WEIGHT.semibold,
-                color: 'white',
-              }}>
-              Create a new notebook
-            </Text>
-            <Icon name="plus" color="white" size={SIZE.lg} />
-          </TouchableOpacity>
-        }
-        renderItem={({item, index}) => (
-          <NotebookItem
-            hideMore={true}
-            item={item}
-            index={index}
-            colors={colors}
-          />
-        )}
-      />
-    </SafeAreaView>
-  );
-};
-
-Move.navigationOptions = {
-  header: null,
-};
-
-export default Move;

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

@@ -36,6 +36,7 @@ import {AddTopicDialog} from '../../components/AddTopicDialog';
 import {AnimatedSafeAreaView} from '../Home';
 import * as Animatable from 'react-native-animatable';
 import {NavigationEvents} from 'react-navigation';
+import {DDS} from '../../../App';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 const AnimatedTouchableOpacity = Animatable.createAnimatableComponent(
@@ -48,6 +49,7 @@ export const Notebook = ({navigation}) => {
   const [hideHeader, setHideHeader] = useState(false);
   const [margin, setMargin] = useState(190);
   const [buttonHide, setButtonHide] = useState(false);
+  const [numColumns, setNumColumns] = useState(1);
   const [addTopic, setAddTopic] = useState(false);
   const forceUpdate = useForceUpdate();
   // Variables
@@ -90,7 +92,7 @@ export const Notebook = ({navigation}) => {
   return (
     <AnimatedSafeAreaView
       transition="backgroundColor"
-      duration={1000}
+      duration={300}
       style={{
         height: '100%',
         backgroundColor: colors.bg,
@@ -113,7 +115,7 @@ export const Notebook = ({navigation}) => {
         />
         <Animatable.View
           transition="backgroundColor"
-          duration={1000}
+          duration={300}
           style={{
             position: 'absolute',
             backgroundColor: colors.bg,
@@ -203,6 +205,100 @@ export const Notebook = ({navigation}) => {
               )}
             </>
           }
+          ListHeaderComponent={
+            <View
+              style={{
+                marginTop: margin + 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>
+          }
+          numColumns={numColumns}
+          key={numColumns}
+          columnWrapperStyle={
+            numColumns === 1
+              ? null
+              : {
+                  width:
+                    params.notebook.topics.length === 1
+                      ? DDS.isTab
+                        ? '95%'
+                        : '90%'
+                      : DDS.isTab
+                      ? '45%'
+                      : '42.5%',
+                }
+          }
+          contentContainerStyle={{
+            width:
+              numColumns === 2
+                ? DDS.isTab
+                  ? '100%'
+                  : null
+                : DDS.isTab
+                ? '95%'
+                : '90%',
+            alignItems: numColumns === 2 ? 'flex-start' : null,
+            alignSelf: 'center',
+          }}
+          ListFooterComponent={
+            <View
+              style={{
+                height: 150,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+              <Text
+                style={{
+                  color: colors.navbg,
+                  fontSize: SIZE.sm,
+                  fontFamily: WEIGHT.regular,
+                }}>
+                - End -
+              </Text>
+            </View>
+          }
           renderItem={({item, index}) => (
             <NotebookItem
               hideMore={params.hideMore}
@@ -231,18 +327,18 @@ export const Notebook = ({navigation}) => {
             paddingHorizontal: ph,
             paddingVertical: pv + 5,
             flexDirection: 'row',
-            justifyContent: 'space-between',
+            justifyContent: 'flex-start',
             alignItems: 'center',
             marginBottom: 15,
             backgroundColor: colors.accent,
           }}>
+          <Icon name="plus" color="white" size={SIZE.lg} />
           <Text
             style={{
               fontSize: SIZE.md,
               fontFamily: WEIGHT.semibold,
               color: 'white',
             }}>
-            <Icon name="plus" color="white" size={SIZE.lg} />
             {'  '}Add a new topic
           </Text>
         </TouchableOpacity>

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

@@ -79,7 +79,7 @@ export const Notes = ({navigation}) => {
   return (
     <AnimatedSafeAreaView
       transition="backgroundColor"
-      duration={1000}
+      duration={300}
       style={{
         height: '100%',
         backgroundColor: colors.bg,
@@ -90,7 +90,7 @@ export const Notes = ({navigation}) => {
         }}>
         <Animatable.View
           transition="backgroundColor"
-          duration={1000}
+          duration={300}
           style={{
             position: 'absolute',
             backgroundColor: colors.bg,

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

@@ -69,7 +69,7 @@ const ReminderEditor = ({navigation}) => {
           }}>
           Set a Reminder
         </Text>
-        <Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
+        <Icon name="md-more" color={colors.icon} size={SIZE.xl} />
       </View>
 
       <Text

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

@@ -42,13 +42,13 @@ export const Reminders = ({navigation}) => {
         }}>
         <Text
           style={{
-            fontSize: SIZE.xxl,
+            fontSize: SIZE.xl,
             color: colors.pri,
             fontFamily: WEIGHT.bold,
           }}>
           Reminders
         </Text>
-        <Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
+        <Icon name="md-more" color={colors.icon} size={SIZE.xl} />
       </View>
 
       <Reminder invert={true} />

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

@@ -55,7 +55,7 @@ export const Settings = ({navigation}) => {
   return (
     <AnimatedSafeAreaView
       transition="backgroundColor"
-      duration={1000}
+      duration={300}
       style={{
         backgroundColor: colors.bg,
         height: '100%',

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

@@ -31,7 +31,7 @@ import {FlatList, TextInput} from 'react-native-gesture-handler';
 import {NavigationEvents} from 'react-navigation';
 import {Header} from '../../components/header';
 import {useForceUpdate} from '../ListsEditor';
-
+import {DDS} from '../../../App';
 export const Signup = ({navigation}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
   const forceUpdate = useForceUpdate();
@@ -95,9 +95,9 @@ const renderSignup = colors => {
   return (
     <View
       style={{
-        justifyContent: Platform.isPad ? 'center' : 'space-between',
+        justifyContent: DDS.isTab ? 'center' : 'space-between',
         height: '80%',
-        width: Platform.isPad ? '60%' : '100%',
+        width: DDS.isTab ? '60%' : '100%',
         alignSelf: 'center',
       }}>
       <View>
@@ -184,7 +184,7 @@ const renderSignup = colors => {
       <View
         style={{
           width: '100%',
-          position: Platform.isPad ? 'absolute' : 'relative',
+          position: DDS.isTab ? 'absolute' : 'relative',
           bottom: '0%',
         }}>
         <TouchableOpacity

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

@@ -51,15 +51,17 @@ export const Trash = ({navigation}) => {
     <SafeAreaView
       style={{
         backgroundColor: colors.bg,
+        height: '100%',
       }}>
       <Header colors={colors} heading="Trash" canGoBack={false} />
       <FlatList
         numColumns={2}
         columnWrapperStyle={{
           width: '45%',
+          marginHorizontal: '2.5%',
         }}
         style={{
-          height: '80%',
+          width: '100%',
         }}
         data={[
           {
@@ -85,21 +87,20 @@ export const Trash = ({navigation}) => {
           width: '90%',
           marginHorizontal: '5%',
           paddingHorizontal: ph,
-
           paddingVertical: pv + 5,
           flexDirection: 'row',
-          justifyContent: 'space-between',
+          justifyContent: 'flex-start',
           alignItems: 'center',
-          marginBottom: 15,
+          marginBottom: 20,
           backgroundColor: colors.accent,
         }}>
+        <Icon name="trash" color="white" size={SIZE.lg} />
         <Text
           style={{
             fontSize: SIZE.md,
             fontFamily: WEIGHT.semibold,
             color: 'white',
           }}>
-          <Icon name="plus" color="white" size={SIZE.lg} />
           {'  '}Clear all Trash
         </Text>
       </TouchableOpacity>