improve settings of app

apps/mobile/App.js

@@ -1,4 +1,6 @@
+import {useNetInfo} from '@react-native-community/netinfo';
 import React, {useEffect, useState} from 'react';
+import {Appearance, StatusBar, useColorScheme} from 'react-native';
 import Orientation from 'react-native-orientation';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {getColorScheme, scale, updateSize} from './src/common/common';
@@ -6,64 +8,56 @@ import {useTracked} from './src/provider';
 import {ACTIONS} from './src/provider/actions';
 import {defaultState} from './src/provider/defaultState';
 import {eSubscribeEvent, eUnSubscribeEvent} from './src/services/eventManager';
-import {eDispatchAction, eStartSyncer, eResetApp} from './src/services/events';
+import {eDispatchAction, eResetApp, eStartSyncer} from './src/services/events';
+import {MMKV} from './src/utils/storage';
 import {db, DDS, ToastEvent} from './src/utils/utils';
-import {useNetInfo} from '@react-native-community/netinfo';
-import RNHTMLtoPDF from 'react-native-html-to-pdf';
-import { MMKV } from './src/utils/storage';
-import {
-  Appearance,
-  useColorScheme,
-  StatusBar} from "react-native";
 const App = () => {
-  const [state, dispatch] = useTracked();
+  const [, dispatch] = useTracked();
   const [init, setInit] = useState(false);
   const netInfo = useNetInfo();
   const colorScheme = useColorScheme();
   const I = DDS.isTab ? require('./index.tablet') : require('./index.mobile');
-  const _onOrientationChange = o => {
+  const _onOrientationChange = (o) => {
     // Currently orientation is locked on tablet.
     /* DDS.checkOrientation();
     setTimeout(() => {
-     
       forceUpdate();
     }, 1000); */
   };
 
   useEffect(() => {
-    systemThemeChange();
+    (async () => {
-  
+      let settings;
-  },[colorScheme])
-
-
-  const systemThemeChange = async () => {
-    let s;
       try {
-      s = await MMKV.getStringAsync('settings');
+        settings = await MMKV.getStringAsync('settings');
-    } catch (e) {
+      } catch (e) {}
+      if (!settings) {
+        return;
       }
-    console.log("HEREE");
+      settings = JSON.parse(settings);
-    console.log('heree');
+
-    if (!s) return;
+      if (settings.useSystemTheme) {
-    s = JSON.parse(s);
+        let newColors = await getColorScheme(settings.useSystemTheme);
-    console.log(s);
+        StatusBar.setBarStyle(
-    if (s.useSystemTheme) {
+          Appearance.getColorScheme() === 'dark'
-      let newColors = await getColorScheme(s.useSystemTheme);
+            ? 'light-content'
-      StatusBar.setBarStyle(Appearance.getColorScheme() === "dark" ? 'light-content' : 'dark-content');
+            : 'dark-content',
+        );
         dispatch({type: ACTIONS.THEME, colors: newColors});
       }
-  }
+    })();
+  }, [colorScheme]);
 
   useEffect(() => {
     if (!netInfo.isConnected || !netInfo.isInternetReachable) {
-      db.user?.get().then(user => {
+      db.user?.get().then((user) => {
         if (user) {
           ToastEvent.show('No internet connection', 'error');
         } else {
         }
       });
     } else {
-      db.user?.get().then(user => {
+      db.user?.get().then((user) => {
         if (user) {
           ToastEvent.show('Internet connection restored', 'success');
         } else {
@@ -74,11 +68,11 @@ const App = () => {
 
   useEffect(() => {
     Orientation.addOrientationListener(_onOrientationChange);
-    eSubscribeEvent(eDispatchAction, type => {
+    eSubscribeEvent(eDispatchAction, (type) => {
       dispatch(type);
     });
     return () => {
-      eUnSubscribeEvent(eDispatchAction, type => {
+      eUnSubscribeEvent(eDispatchAction, (type) => {
         dispatch(type);
       });
       Orientation.removeOrientationListener(_onOrientationChange);
@@ -98,12 +92,12 @@ const App = () => {
 
   const _syncFunc = async () => {
     dispatch({type: ACTIONS.SYNCING, syncing: true});
-    let u = await db.user.get();
+    let user = await db.user.get();
     try {
       await db.sync();
     } catch (e) {}
-    u = await db.user.get();
+    user = await db.user.get();
-    dispatch({type: ACTIONS.USER, user: u});
+    dispatch({type: ACTIONS.USER, user: user});
     dispatch({type: ACTIONS.ALL});
     dispatch({type: ACTIONS.SYNCING, syncing: false});
   };
@@ -139,31 +133,30 @@ const App = () => {
   }, []);
 
   async function Initialize(colors = colors) {
-
+    let settings;
-    let s;
     try {
-      s = await MMKV.getStringAsync('settings');
+      settings = await MMKV.getStringAsync('settings');
     } catch (e) {}
-    if (typeof s !== 'string') {
+    if (!settings) {
-      s = defaultState.settings;
+      settings = defaultState.settings;
-      s = JSON.stringify(s);
+      settings = JSON.stringify(s);
-      s.fontScale = 1;
+      settings.fontScale = 1;
 
-      await MMKV.setStringAsync('settings', s);
+      await MMKV.setStringAsync('settings', settings);
 
-      dispatch({type: ACTIONS.SETTINGS, s});
+      dispatch({type: ACTIONS.SETTINGS, settings});
     } else {
-      s = JSON.parse(s);
+      settings = JSON.parse(settings);
-      if (s.fontScale) {
+      if (settings.fontScale) {
-        scale.fontScale = s.fontScale;
+        scale.fontScale = settings.fontScale;
       } else {
         scale.fontScale = 1;
       }
       updateSize();
-      dispatch({type: ACTIONS.SETTINGS, settings: {...s}});
+      dispatch({type: ACTIONS.SETTINGS, settings: {...settings}});
     }
 
-    let newColors = await getColorScheme(s.useSystemTheme);
+    let newColors = await getColorScheme(settings.useSystemTheme);
     dispatch({type: ACTIONS.THEME, colors: newColors});
   }
 

apps/mobile/html/Web.bundle/site/index.html

@@ -6,7 +6,7 @@
   <style>
     .app-body {
       margin: 0px;
-      overflow:hidden;
+      overflow: hidden;
     }
 
     .floating-toolbar {
@@ -1075,6 +1075,7 @@
       position: absolute;
       margin-top: -18px;
       font-family: 'DM Sans';
+      padding-left: 6px;
     }
 
     #titlebar input:focus {
@@ -1123,6 +1124,8 @@
   function loadAction(premium, noMenu) {
     let titleIn = document.getElementById('titlebar');
 
+
+
     //titleIn.style.width = width;
     titleIn.style['padding-left'] = 0;
     titleIn.style['padding-right'] = 0;
@@ -1148,9 +1151,9 @@
       [{ direction: 'rtl' }], // text direction
 
     ];
-        let mainToolbar = premium? proToolbar : simpleToolbar;
+    let mainToolbar = premium ? proToolbar : simpleToolbar;
 
-(function () { function r(e, n, t) { function o(i, f) { if (!n[i]) { if (!e[i]) { var c = "function" == typeof require && require; if (!f && c) return c(i, !0); if (u) return u(i, !0); var a = new Error("Cannot find module '" + i + "'"); throw a.code = "MODULE_NOT_FOUND", a } var p = n[i] = { exports: {} }; e[i][0].call(p.exports, function (r) { var n = e[i][1][r]; return o(n || r) }, p, p.exports, r, e, n, t) } return n[i].exports } for (var u = "function" == typeof require && require, i = 0; i < t.length; i++)o(t[i]); return o } return r })()({
+    (function () { function r(e, n, t) { function o(i, f) { if (!n[i]) { if (!e[i]) { var c = "function" == typeof require && require; if (!f && c) return c(i, !0); if (u) return u(i, !0); var a = new Error("Cannot find module '" + i + "'"); throw a.code = "MODULE_NOT_FOUND", a } var p = n[i] = { exports: {} }; e[i][0].call(p.exports, function (r) { var n = e[i][1][r]; return o(n || r) }, p, p.exports, r, e, n, t) } return n[i].exports } for (var u = "function" == typeof require && require, i = 0; i < t.length; i++)o(t[i]); return o } return r })()({
       1: [function (require, module, exports) {
         const Quill = require('quill');
 
@@ -1221,6 +1224,11 @@
               quality: 0.9,
               maxWidth: 1024,
               imageType: 'image/jpeg'
+            },
+            history: {
+              delay: 2000,
+              maxStack: 500,
+              userOnly: true
             }
           },
           placeholder: 'Start writing your note',
@@ -1228,6 +1236,8 @@
         });
 
 
+
+
         var Font = Quill.import('formats/font');
         Font.whitelist = fontNames;
         Quill.register(Font, true);
@@ -1586,6 +1596,9 @@
 
         });
 
+        window.addEventListener("focus", () => {
+          //editor.setSelection(editor.getText().length - 1, 0);
+        })
 
         // Receber mensagens do RN
         window.addEventListener('message', data => {
@@ -1609,6 +1622,15 @@
               document.getElementById('titleInput').blur();
               editor.blur();
               break;
+            case "undo":
+              editor.history.undo();
+              break;
+            case "redo":
+              editor.history.redo();
+              break;
+            case "clearHistory":
+              editor.history.clear();
+              break;
             case "dateEdited":
               document.getElementById('infodate').innerText = value;
               break;
@@ -1619,7 +1641,7 @@
               editor.setText(value, 'api')
               setTimeout(() => {
                 if (message.focus === "editor") {
-                editor.focus();
+                  //editor.focus();
                 } else {
                   document.getElementById('titleInput').focus();
                 }
@@ -1635,7 +1657,7 @@
               editor.focus();
               break;
             case "focusTitle":
-            document.getElementById('titleInput').focus();
+              //document.getElementById('titleInput').focus();
               break;
             case "nomenu":
               let isenabled = value;
@@ -1663,7 +1685,7 @@
               const content = value
               editor.setContents(content, 'api');
               setTimeout(() => {
-              editor.setSelection(editor.getText().length - 1, 0);
+                //editor.setSelection(editor.getText().length - 1, 0);
               }, 500)
 
               break;
@@ -1673,7 +1695,7 @@
                 'silent'
               );
               setTimeout(() => {
-              editor.setSelection(editor.getText().length - 1, 0);
+                //editor.setSelection(editor.getText().length - 1, 0);
               }, 0);
               break;
             default:
@@ -16624,7 +16646,7 @@
       }, {}]
     }, {}, [1]);
 
-}
+  }
 </script>
 
 

apps/mobile/index.mobile.js

@@ -30,8 +30,9 @@ export const Initialize = () => {
     if (Platform.OS === 'android') {
       StatusBar.setBackgroundColor('transparent');
       StatusBar.setTranslucent(true);
-      StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
+     
     }
+    StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
   }, []);
 
   const setGestureDisabled = () => {

apps/mobile/index.tablet.js

@@ -76,10 +76,9 @@ export const Initialize = () => {
     if (Platform.OS === 'android') {
       StatusBar.setBackgroundColor('transparent');
       StatusBar.setTranslucent(true);
-      StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
-    } else {
-      StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
     }
+      StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
+    
   }, []);
 
   return (

apps/mobile/src/components/Container/ContainerBottomButton.js

@@ -1,16 +1,14 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
-import {Keyboard, Text, TouchableOpacity, View, Pressable} from 'react-native';
+import { Keyboard, Text, View } from 'react-native';
-import {useSafeArea} from 'react-native-safe-area-context';
+import { useSafeArea } from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {pv, SIZE, WEIGHT} from '../../common/common';
+import { pv, SIZE, WEIGHT } from '../../common/common';
-import {useTracked} from '../../provider';
+import { useTracked } from '../../provider';
 import {
   DDS,
-  getElevation,
+  getElevation
-  hexToRGBA,
-  RGB_Linear_Shade,
 } from '../../utils/utils';
-import {PressableButton} from '../PressableButton';
+import { PressableButton } from '../PressableButton';
 
 export const ContainerBottomButton = ({root}) => {
   const [state, dispatch] = useTracked();

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import {Text} from 'react-native';
+import { Text } from 'react-native';
-import {SIZE, WEIGHT} from '../../common/common';
+import { SIZE, WEIGHT } from '../../common/common';
-import {useTracked} from '../../provider';
+import { useTracked } from '../../provider';
 
 export const HeaderTitle = ({root}) => {
   const [state, dispatch] = useTracked();

apps/mobile/src/provider/defaultState.js

@@ -22,7 +22,9 @@ export const defaultState = {
     showKeyboardOnOpen: false,
     fontScale: 1,
     forcePortraitOnTablet: false,
-    useSystemTheme:true
+    useSystemTheme:true,
+    reminder:'weekly',
+    encryptedBackups:false
   },
   currentScreen: 'home',
   colors: {

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

@@ -34,9 +34,18 @@ import {ACTIONS} from '../../provider/actions';
 import {eSendEvent} from '../../services/eventManager';
 import {eOpenLoginDialog, eResetApp} from '../../services/events';
 import NavigationService from '../../services/NavigationService';
-import {db, DDS, setSetting, ToastEvent, w, RGB_Linear_Shade, hexToRGBA} from '../../utils/utils';
+import {
+  db,
+  DDS,
+  setSetting,
+  ToastEvent,
+  w,
+  RGB_Linear_Shade,
+  hexToRGBA,
+} from '../../utils/utils';
 import {MMKV} from '../../utils/storage';
 import {PressableButton} from '../../components/PressableButton';
+import Seperator from '../../components/Seperator';
 
 export const Settings = ({route, navigation}) => {
   const [state, dispatch] = useTracked();
@@ -329,10 +338,6 @@ export const Settings = ({route, navigation}) => {
             </View>
 
             {[
-              {
-                name: 'Backup my notes',
-                func: () => {},
-              },
               {
                 name: 'Data recovery key',
                 func: async () => {
@@ -345,7 +350,6 @@ export const Settings = ({route, navigation}) => {
                 name: 'Subscription status',
                 func: () => {},
               },
-
               {
                 name: 'Logout',
                 func: async () => {
@@ -477,7 +481,14 @@ export const Settings = ({route, navigation}) => {
             color: colors.pri,
             marginTop: pv + 5,
           }}>
-          Accent Color
+          Accent Color{'\n'}
+          <Text
+            style={{
+              fontSize: SIZE.xs,
+              color: colors.icon,
+            }}>
+            Choose a color to use as accent color
+          </Text>
         </Text>
 
         <View
@@ -509,7 +520,14 @@ export const Settings = ({route, navigation}) => {
           ].map((item) => (
             <PressableButton
               key={item}
-              color={colors.accent === item? RGB_Linear_Shade(!colors.night? -0.2 : 0.2, hexToRGBA(item, 1)) : item}
+              color={
+                colors.accent === item
+                  ? RGB_Linear_Shade(
+                      !colors.night ? -0.2 : 0.2,
+                      hexToRGBA(item, 1),
+                    )
+                  : item
+              }
               selectedColor={item}
               alpha={!colors.night ? -0.1 : 0.1}
               opacity={1}
@@ -530,11 +548,9 @@ export const Settings = ({route, navigation}) => {
                 justifyContent: 'center',
                 alignItems: 'center',
               }}>
-             
               {colors.accent === item ? (
                 <Icon size={SIZE.lg} color="white" name="check" />
               ) : null}
-            
             </PressableButton>
           ))}
         </View>
@@ -575,7 +591,16 @@ export const Settings = ({route, navigation}) => {
               textAlignVertical: 'center',
               color: colors.pri,
             }}>
-            Use System Dark Mode
+            Use System Dark Mode{'\n'}
+            <Text
+              style={{
+                fontSize: SIZE.xs,
+                color: colors.icon,
+              }}>
+              {settings.useSystemTheme
+                ? 'Switch to dark theme based on system settings'
+                : 'Keep the app theme independent from system settings'}
+            </Text>
           </Text>
           <Icon
             size={SIZE.xl}
@@ -613,7 +638,14 @@ export const Settings = ({route, navigation}) => {
               textAlignVertical: 'center',
               color: colors.pri,
             }}>
-            Dark Mode
+            Dark Mode{'\n'}
+            <Text
+              style={{
+                fontSize: SIZE.xs,
+                color: colors.icon,
+              }}>
+              {colors.night ? 'Turn off dark mode' : 'Turn on dark mode'}
+            </Text>
           </Text>
           <Icon
             size={SIZE.xl}
@@ -623,34 +655,10 @@ export const Settings = ({route, navigation}) => {
         </TouchableOpacity>
 
         <TouchableOpacity
-          onPress={async () => {
-            let scale = settings.fontScale;
-
-            scale === 1
-              ? (scale = 1.1)
-              : scale === 1.1
-              ? (scale = 1.2)
-              : scale === 1.2
-              ? (scale = 1.3)
-              : scale === 1.3
-              ? (scale = 1.4)
-              : scale === 1.4
-              ? (scale = 1.5)
-              : scale === 1.5
-              ? (scale = 0.8)
-              : scale === 0.8
-              ? (scale = 0.9)
-              : (scale = 0.9 ? (scale = 1) : (scale = 1));
-
-            await setSetting(settings, 'fontScale', scale);
-
-            eSendEvent(eResetApp);
-          }}
-          activeOpacity={opacity}
           style={{
             width: '100%',
             marginHorizontal: 0,
-            paddingVertical: pv + 5,
+            height: 50,
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'space-between',
@@ -662,25 +670,70 @@ export const Settings = ({route, navigation}) => {
               textAlignVertical: 'center',
               color: colors.pri,
             }}>
-            Font Scaling
+            Font Scaling{'\n'}
+            <Text
+              style={{
+                fontSize: SIZE.xs,
+                color: colors.icon,
+              }}>
+              Scale the size of text in the app.
+            </Text>
           </Text>
 
           <View
             style={{
-              borderBottomWidth: 1,
+              flexDirection: 'row',
-              borderColor: colors.nav,
+              overflow: 'hidden',
-              paddingVertical: 1,
+              borderRadius: 5,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+            {[
+              {
+                title: '0.9x',
+                value: 0.9,
+              },
+              {
+                title: '1.0x',
+                value: 1,
+              },
+              {
+                title: '1.2x',
+                value: 1.2,
+              },
+              {
+                title: '1.5x',
+                value: 1.5,
+              },
+            ].map((item) => (
+              <TouchableOpacity
+                activeOpacity={1}
+                onPress={async () => {
+                  let scale = settings.fontScale;
+                  await setSetting(settings, 'fontScale', scale);
+                  eSendEvent(eResetApp);
+                }}
+                key={item.title}
+                style={{
+                  backgroundColor:
+                    settings.fontScale === item.value
+                      ? colors.accent
+                      : colors.nav,
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  height: 20,
                   paddingHorizontal: 5,
                 }}>
                 <Text
                   style={{
+                    color:
+                      settings.fontScale === item.value ? 'white' : colors.icon,
                     fontSize: SIZE.xs,
-                fontFamily: WEIGHT.regular,
-                textAlignVertical: 'center',
-                color: colors.pri,
                   }}>
-              {settings?.fontScale ? settings.fontScale + 'X' : '1X'}
+                  {item.title}
                 </Text>
+              </TouchableOpacity>
+            ))}
           </View>
         </TouchableOpacity>
 
@@ -731,11 +784,197 @@ export const Settings = ({route, navigation}) => {
             fontFamily: WEIGHT.bold,
             textAlignVertical: 'center',
             color: colors.accent,
-
             borderBottomColor: colors.nav,
             borderBottomWidth: 0.5,
             paddingBottom: 3,
-            marginBottom: pv + 5,
+          }}>
+          Backup & Restore
+        </Text>
+
+        <TouchableOpacity
+          onPress={async () => {
+            await setSetting(
+              settings,
+              'useSystemTheme',
+              !settings.useSystemTheme,
+            );
+
+            if (!settings.useSystemTheme) {
+              MMKV.setStringAsync(
+                'theme',
+                JSON.stringify({night: Appearance.getColorScheme() === 'dark'}),
+              );
+              changeColorScheme(
+                Appearance.getColorScheme() === 'dark'
+                  ? COLOR_SCHEME_DARK
+                  : COLOR_SCHEME_LIGHT,
+              );
+            }
+          }}
+          activeOpacity={opacity}
+          style={{
+            width: '100%',
+            marginHorizontal: 0,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            height: 50,
+          }}>
+          <Text
+            style={{
+              fontSize: SIZE.sm,
+              fontFamily: WEIGHT.regular,
+              textAlignVertical: 'center',
+              color: colors.pri,
+            }}>
+            Backup reminder{'\n'}
+            <Text
+              style={{
+                fontSize: SIZE.xs,
+                color: colors.icon,
+              }}>
+              Remind you to backup data.
+            </Text>
+          </Text>
+
+          <View
+            style={{
+              flexDirection: 'row',
+              overflow: 'hidden',
+              borderRadius: 5,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+            {[
+              {
+                title: 'Daily',
+                value: 'daily',
+              },
+              {
+                title: 'Weekly',
+                value: 'weekly',
+              },
+            ].map((item) => (
+              <TouchableOpacity
+                onPress={async () => {
+                  await setSetting(settings, 'reminder', item.value);
+                }}
+                key={item.value}
+                style={{
+                  backgroundColor:
+                    settings.reminder === 'daily' ? colors.accent : colors.nav,
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  width: 60,
+                  height: 20,
+                }}>
+                <Text
+                  style={{
+                    color:
+                      settings.reminder === 'daily' ? 'white' : colors.icon,
+                    fontSize: SIZE.xs,
+                  }}>
+                  {item.title}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={async () => {
+            await setSetting(
+              settings,
+              'encryptedBackup',
+              !settings.encryptedBackup,
+            );
+          }}
+          activeOpacity={opacity}
+          style={{
+            width: '100%',
+            marginHorizontal: 0,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            height: 50,
+          }}>
+          <Text
+            style={{
+              fontSize: SIZE.sm,
+              fontFamily: WEIGHT.regular,
+              textAlignVertical: 'center',
+              color: colors.pri,
+            }}>
+            Encrypted Backups{'\n'}
+            <Text
+              style={{
+                fontSize: SIZE.xs,
+                color: colors.icon,
+              }}>
+              Encrypt your data before backup
+            </Text>
+          </Text>
+          <Icon
+            size={SIZE.xl}
+            color={settings.useSystemTheme ? colors.accent : colors.icon}
+            name={
+              settings.useSystemTheme ? 'toggle-switch' : 'toggle-switch-off'
+            }
+          />
+        </TouchableOpacity>
+
+        {[
+          {
+            name: 'Backup data',
+            func: () => {
+              Linking.openURL('https://www.notesnook.com/privacy.html');
+            },
+            desc: 'Backup all your data to phone storage',
+          },
+          {
+            name: 'Restore data',
+            func: () => {
+              Linking.openURL('https://www.notesnook.com');
+            },
+            desc: 'Restore backup from your phone.',
+          },
+        ].map((item) => (
+          <TouchableOpacity
+            key={item.name}
+            activeOpacity={opacity}
+            onPress={item.func}>
+            <Text
+              style={{
+                fontSize: SIZE.sm,
+                fontFamily: WEIGHT.regular,
+                textAlignVertical: 'center',
+                color: colors.pri,
+                height: 50,
+                justifyContent: 'center',
+              }}>
+              {item.name}
+              {'\n'}
+              <Text
+                style={{
+                  fontSize: SIZE.xs,
+                  color: colors.icon,
+                }}>
+                {item.desc}
+              </Text>
+            </Text>
+            {item.customComponent ? item.customComponent : null}
+          </TouchableOpacity>
+        ))}
+
+        <Text
+          style={{
+            fontSize: SIZE.xs,
+            fontFamily: WEIGHT.bold,
+            textAlignVertical: 'center',
+            color: colors.accent,
+            borderBottomColor: colors.nav,
+            borderBottomWidth: 0.5,
+            paddingBottom: 3,
           }}>
           Other
         </Text>
@@ -746,12 +985,14 @@ export const Settings = ({route, navigation}) => {
             func: () => {
               Linking.openURL('https://www.notesnook.com/privacy.html');
             },
+            desc: 'Read our privacy policy',
           },
           {
             name: 'About',
             func: () => {
               Linking.openURL('https://www.notesnook.com');
             },
+            desc: null,
           },
         ].map((item) => (
           <TouchableOpacity
@@ -759,8 +1000,8 @@ export const Settings = ({route, navigation}) => {
             activeOpacity={opacity}
             onPress={item.func}
             style={{
-              width: item.step ? '85%' : w - 24,
+              height: 50,
-              paddingVertical: pv + 5,
+              justifyContent: 'center',
             }}>
             <Text
               style={{
@@ -770,15 +1011,19 @@ export const Settings = ({route, navigation}) => {
                 color: colors.pri,
               }}>
               {item.name}
+              {'\n'}
+              <Text
+                style={{
+                  fontSize: SIZE.xs,
+                  color: colors.icon,
+                }}>
+                {item.desc}
+              </Text>
             </Text>
             {item.customComponent ? item.customComponent : null}
           </TouchableOpacity>
         ))}
-        <View
+        <Seperator />
-          style={{
-            height: 300,
-          }}
-        />
       </ScrollView>
     </Animatable.View>
   );