improve settings of app

2025-12-23 06:59:31 +01:00 · 2020-09-12 14:32:06 +05:00
parent 3c42295b74
commit e01a68f7de
8 changed files with 13342 additions and 13082 deletions
--- a/apps/mobile/App.js
+++ b/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();
-  
-  },[colorScheme])
-
-
-  const systemThemeChange = async () => {
-    let s;
+    (async () => {
+      let settings;
      try {
-      s = await MMKV.getStringAsync('settings');
-    } catch (e) {
+        settings = await MMKV.getStringAsync('settings');
+      } catch (e) {}
+      if (!settings) {
+        return;
      }
-    console.log("HEREE");
-    console.log('heree');
-    if (!s) return;
-    s = JSON.parse(s);
-    console.log(s);
-    if (s.useSystemTheme) {
-      let newColors = await getColorScheme(s.useSystemTheme);
-      StatusBar.setBarStyle(Appearance.getColorScheme() === "dark" ? 'light-content' : 'dark-content');
+      settings = JSON.parse(settings);
+
+      if (settings.useSystemTheme) {
+        let newColors = await getColorScheme(settings.useSystemTheme);
+        StatusBar.setBarStyle(
+          Appearance.getColorScheme() === 'dark'
+            ? 'light-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();
-    dispatch({type: ACTIONS.USER, user: u});
+    user = await db.user.get();
+    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 s;
+    let settings;
    try {
-      s = await MMKV.getStringAsync('settings');
+      settings = await MMKV.getStringAsync('settings');
    } catch (e) {}
-    if (typeof s !== 'string') {
-      s = defaultState.settings;
-      s = JSON.stringify(s);
-      s.fontScale = 1;
+    if (!settings) {
+      settings = defaultState.settings;
+      settings = JSON.stringify(s);
+      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);
-      if (s.fontScale) {
-        scale.fontScale = s.fontScale;
+      settings = JSON.parse(settings);
+      if (settings.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});
  }

--- a/apps/mobile/html/Web.bundle/site/index.html
+++ b/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>


--- a/apps/mobile/index.mobile.js
+++ b/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 = () => {
--- a/apps/mobile/index.tablet.js
+++ b/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 (
--- a/apps/mobile/src/components/Container/ContainerBottomButton.js
+++ b/apps/mobile/src/components/Container/ContainerBottomButton.js
@@ -1,16 +1,14 @@
-import React, {useEffect, useState} from 'react';
-import {Keyboard, Text, TouchableOpacity, View, Pressable} from 'react-native';
-import {useSafeArea} from 'react-native-safe-area-context';
+import React, { useEffect, useState } from 'react';
+import { Keyboard, Text, View } from 'react-native';
+import { useSafeArea } from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {pv, SIZE, WEIGHT} from '../../common/common';
-import {useTracked} from '../../provider';
+import { pv, SIZE, WEIGHT } from '../../common/common';
+import { useTracked } from '../../provider';
 import {
  DDS,
-  getElevation,
-  hexToRGBA,
-  RGB_Linear_Shade,
+  getElevation
 } from '../../utils/utils';
-import {PressableButton} from '../PressableButton';
+import { PressableButton } from '../PressableButton';

 export const ContainerBottomButton = ({root}) => {
  const [state, dispatch] = useTracked();
--- a/apps/mobile/src/components/header/HeaderTitle.js
+++ b/apps/mobile/src/components/header/HeaderTitle.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import {Text} from 'react-native';
-import {SIZE, WEIGHT} from '../../common/common';
-import {useTracked} from '../../provider';
+import { Text } from 'react-native';
+import { SIZE, WEIGHT } from '../../common/common';
+import { useTracked } from '../../provider';

 export const HeaderTitle = ({root}) => {
  const [state, dispatch] = useTracked();
--- a/apps/mobile/src/provider/defaultState.js
+++ b/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: {
--- a/apps/mobile/src/views/Settings/index.js
+++ b/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,
-              borderColor: colors.nav,
-              paddingVertical: 1,
+              flexDirection: 'row',
+              overflow: 'hidden',
+              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,
-              paddingVertical: pv + 5,
+              height: 50,
+              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
-          style={{
-            height: 300,
-          }}
-        />
+        <Seperator />
      </ScrollView>
    </Animatable.View>
  );