web: bump version to 3.1.0-beta.5

This commit basically reverts 1b63b2dccf.
Using service worker for this by default is a bad idea because:

1. It takes some time for the service worker to be installed and ready
which slows down first launch significantly
2. Service worker is not as reliable when updating from version to
version

We can, however, use it as a fallback i.e for devices that don't yet
support shared worker.

.github/workflows/android.publish.internal.yml

@@ -4,7 +4,7 @@ on: workflow_dispatch
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     timeout-minutes: 40
     env:
       CMAKE_C_COMPILER_LAUNCHER: ccache
@@ -22,7 +22,7 @@ jobs:
       - name: Use specific Java version for the builds
         uses: joschi/setup-jdk@v2
         with:
-          java-version: "11"
+          java-version: "17"
           architecture: "x64"
 
       - name: Install node modules
@@ -58,7 +58,7 @@ jobs:
           ccache -p
 
       - name: Cache gradle
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             ~/.gradle/caches
@@ -129,7 +129,7 @@ jobs:
           serviceAccountJsonPlainText: ${{ secrets.SERVICE_ACCOUNT_JSON }}
           packageName: com.streetwriters.notesnook
           releaseFiles: ${{steps.sign_app.outputs.signedReleaseFile}}
-          track: alpha
+          track: beta
           status: completed
           whatsNewDirectory: apps/mobile/native/android/releasenotes/
 
@@ -138,7 +138,7 @@ jobs:
         with:
           draft: true
           tag_name: ${{ steps.package-version.outputs.current-version}}-beta-android
-          name: Notesnook Android v${{ steps.package-version.outputs.current-version}} Beta
+          name: Notesnook Android v${{ steps.package-version.outputs.current-version}}
           repository: streetwriters/notesnook
           token: ${{ secrets.GITHUB_TOKEN }}
           files: |
@@ -146,6 +146,7 @@ jobs:
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-armeabi-v7a.apk
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86.apk
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86_64.apk
+            ${{steps.sign_app.outputs.signedReleaseFile}}
 
       - name: Upload sourcemaps
         uses: actions/upload-artifact@v4

apps/desktop/electron-builder.config.js

@@ -18,6 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 const path = require("path");
+const pkg = require("./package.json");
 
 const buildRoot = process.env.NN_BUILD_ROOT || ".";
 const buildFiles = [
@@ -35,6 +36,7 @@ const linuxExecutableName = process.env.NN_PRODUCT_NAME
   ? process.env.NN_PRODUCT_NAME.toLowerCase().replace(/\s+/g, "-")
   : "notesnook";
 const year = new Date().getFullYear();
+const isBeta = pkg.version.includes("-beta");
 
 module.exports = {
   appId: appId,
@@ -194,7 +196,8 @@ module.exports = {
     {
       provider: "github",
       repo: "notesnook",
-      owner: "streetwriters"
+      owner: "streetwriters",
+      channel: isBeta ? "beta" : "latest"
     }
   ]
 };

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "3.0.32",
+  "version": "3.1.0-beta.5",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/cjs/index.js",

apps/desktop/src/main.ts

@@ -147,6 +147,11 @@ async function createWindow() {
   await AssetManager.loadIcons();
   setupDesktopIntegration(config.desktopSettings);
 
+  mainWindow.webContents.session.setPermissionRequestHandler(
+    (webContents, permission, callback) => {
+      callback(permission === "geolocation" ? false : true);
+    }
+  );
   mainWindow.webContents.session.setSpellCheckerDictionaryDownloadURL(
     "http://dictionaries.notesnook.com/"
   );

apps/mobile/app/app.tsx

@@ -19,26 +19,30 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { i18n } from "@lingui/core";
 import { I18nProvider } from "@lingui/react";
 import {
+  ScopedThemeProvider,
   THEME_COMPATIBILITY_VERSION,
   useThemeEngineStore
 } from "@notesnook/theme";
 import React, { useEffect } from "react";
-import { I18nManager, View } from "react-native";
+import { I18nManager, StatusBar } from "react-native";
 import "react-native-gesture-handler";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
-import AppLockedOverlay from "./components/app-lock-overlay";
+import DialogProvider from "./components/dialog-provider";
 import { withErrorBoundry } from "./components/exception-handler";
 import GlobalSafeAreaProvider from "./components/globalsafearea";
+import { Toast } from "./components/toast";
 import { useAppEvents } from "./hooks/use-app-events";
-import { ApplicationHolder } from "./navigation";
 import { NotePreviewConfigure } from "./screens/note-preview-configure";
+import { RootNavigation } from "./navigation/navigation-stack";
 import { themeTrpcClient } from "./screens/settings/theme-selector";
 import Notifications from "./services/notifications";
 import SettingsService from "./services/settings";
 import { TipManager } from "./services/tip-manager";
-import { useThemeStore } from "./stores/use-theme-store";
+import { changeSystemBarColors, useThemeStore } from "./stores/use-theme-store";
 import { useUserStore } from "./stores/use-user-store";
+import RNBootSplash from "react-native-bootsplash";
+import AppLocked from "./components/app-lock";
 
 I18nManager.allowRTL(false);
 I18nManager.forceRTL(false);
@@ -48,11 +52,13 @@ if (appLockEnabled || appLockMode !== "none") {
   useUserStore.getState().lockApp(true);
 }
 
+RNBootSplash.hide();
 const App = (props: { configureMode: "note-preview" }) => {
   useAppEvents();
   //@ts-ignore
   globalThis["IS_MAIN_APP_RUNNING"] = true;
   useEffect(() => {
+    changeSystemBarColors();
     SettingsService.onFirstLaunch();
     setTimeout(async () => {
       await Notifications.get();
@@ -64,42 +70,27 @@ const App = (props: { configureMode: "note-preview" }) => {
   }, []);
 
   return (
-    <View
-      style={{
-        height: "100%",
-        width: "100%",
-        justifyContent: "center",
-        alignItems: "center"
-      }}
-    >
-      <View
-        style={{
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          zIndex: -1
-        }}
-        pointerEvents="none"
-      >
-        <SafeAreaProvider>
-          <GlobalSafeAreaProvider />
-        </SafeAreaProvider>
-      </View>
-
+    <SafeAreaProvider>
+      <StatusBar translucent={true} backgroundColor="transparent" />
       <GestureHandlerRootView
         style={{
           height: "100%",
           width: "100%"
         }}
       >
+        <GlobalSafeAreaProvider />
         {props.configureMode === "note-preview" ? (
           <NotePreviewConfigure />
         ) : (
-          <ApplicationHolder />
+          <RootNavigation />
         )}
+        <ScopedThemeProvider value="dialog">
+          <Toast />
+        </ScopedThemeProvider>
+        <DialogProvider />
+        <AppLocked />
       </GestureHandlerRootView>
-      <AppLockedOverlay />
-    </View>
+    </SafeAreaProvider>
   );
 };
 
@@ -141,13 +132,15 @@ export const withTheme = (Element: (props: any) => JSX.Element) => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const nextTheme = colorScheme === "dark" ? darkTheme : lightTheme;
-    if (JSON.stringify(nextTheme) !== JSON.stringify(currTheme)) {
-      useThemeEngineStore
-        .getState()
-        .setTheme(colorScheme === "dark" ? darkTheme : lightTheme);
-      currTheme = nextTheme;
-    }
+    useEffect(() => {
+      const nextTheme = colorScheme === "dark" ? darkTheme : lightTheme;
+      if (JSON.stringify(nextTheme) !== JSON.stringify(currTheme)) {
+        useThemeEngineStore
+          .getState()
+          .setTheme(colorScheme === "dark" ? darkTheme : lightTheme);
+        currTheme = nextTheme;
+      }
+    }, [colorScheme, darkTheme, lightTheme]);
 
     return (
       <I18nProvider i18n={i18n}>

apps/mobile/app/components/announcements/announcement.js

@@ -24,6 +24,7 @@ import { useMessageStore } from "../../stores/use-message-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { allowedOnPlatform, renderItem } from "./functions";
 import { getContainerBorder } from "../../utils/colors";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Announcement = ({ color }) => {
   const { colors } = useThemeColors();
@@ -36,9 +37,8 @@ export const Announcement = ({ color }) => {
       style={{
         backgroundColor: colors.primary.background,
         width: "100%",
-        paddingHorizontal: 12,
-        paddingTop: 12,
-        paddingBottom: 12
+        paddingHorizontal: DefaultAppStyles.GAP,
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       <View
@@ -54,7 +54,7 @@ export const Announcement = ({ color }) => {
         <View
           style={{
             width: "100%",
-            marginTop: 12
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           {announcement?.body

apps/mobile/app/components/announcements/body.js

@@ -20,12 +20,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Body = ({ text, style = {} }) => {
   return (
     <Paragraph
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style)
       }}
     >

apps/mobile/app/components/announcements/cta.js

@@ -23,12 +23,13 @@ import { Linking, View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { eCloseAnnouncementDialog } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { PricingPlans } from "../premium/pricing-plans";
 import SheetProvider from "../sheet-provider";
 import { Button } from "../ui/button";
 import { allowedOnPlatform, getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Cta = ({ actions, style = {}, color, inline }) => {
   const { colors } = useThemeColors();
@@ -61,7 +62,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style),
         flexDirection: inline ? "row" : "column"
       }}
@@ -75,7 +76,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={SIZE.sm}
+                fontSize={AppFontSize.sm}
                 type="transparent"
                 textStyle={{
                   textDecorationLine: "underline"
@@ -83,7 +84,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 onPress={() => onPress(item)}
                 bold
                 style={{
-                  height: 30,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
                   alignSelf: "flex-start",
                   paddingHorizontal: 0
                 }}
@@ -95,7 +96,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={SIZE.sm}
+                fontSize={AppFontSize.sm}
                 type="plain"
                 onPress={() => onPress(item)}
                 width={null}
@@ -118,7 +119,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={SIZE.md}
+                fontSize={AppFontSize.md}
                 buttonType={{
                   color: color ? color : colors.primary.accent,
                   text: color
@@ -130,7 +131,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 onPress={() => onPress(item)}
                 width={250}
                 style={{
-                  marginBottom: 5,
+                  marginBottom: DefaultAppStyles.GAP_VERTICAL,
                   borderRadius: 100
                 }}
               />
@@ -141,14 +142,14 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
                 type="plain"
                 onPress={() => onPress(item)}
                 width={null}
                 height={30}
                 style={{
                   minWidth: "50%",
-                  marginTop: 5
+                  marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
                 }}
                 textStyle={{
                   textDecorationLine: "underline"

apps/mobile/app/components/announcements/description.js

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
 
@@ -30,7 +30,7 @@ export const Description = ({ text, style = {}, inline }) => {
         ...getStyle(style),
         textAlign: inline ? "left" : style?.textAlign
       }}
-      size={inline ? SIZE.sm : SIZE.md}
+      size={inline ? AppFontSize.sm : AppFontSize.md}
     >
       {text}
     </Paragraph>

apps/mobile/app/components/announcements/functions.js

@@ -28,6 +28,7 @@ import { List } from "./list";
 import { Photo } from "./photo";
 import { SubHeading } from "./subheading";
 import { Title } from "./title";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export function allowedOnPlatform(platforms) {
   if (!platforms) return true;
@@ -53,7 +54,7 @@ const Features = () => {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         alignItems: "center",
         width: "100%"
       }}

apps/mobile/app/components/announcements/list.js

@@ -22,12 +22,13 @@ import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const List = ({ items, listType, style = {} }) => {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         paddingLeft: listType === "ordered" ? 25 : 25,
         ...getStyle(style)
       }}
@@ -36,7 +37,7 @@ export const List = ({ items, listType, style = {} }) => {
         <View
           key={item.text}
           style={{
-            paddingVertical: 6,
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL,
             flexDirection: "row"
           }}
         >

apps/mobile/app/components/announcements/subheading.js

@@ -18,17 +18,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import Heading from "../ui/typography/heading";
 import { getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const SubHeading = ({ text, style = {} }) => {
   return (
     <Heading
-      size={SIZE.md + 2}
+      size={AppFontSize.md + 2}
       style={{
-        marginHorizontal: 12,
-        marginTop: 12,
+        marginHorizontal: DefaultAppStyles.GAP,
+        marginTop: DefaultAppStyles.GAP_VERTICAL,
         ...getStyle(style)
       }}
     >

apps/mobile/app/components/announcements/title.js

@@ -20,10 +20,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { useMessageStore } from "../../stores/use-message-store";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import { getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Title = ({ text, style = {}, inline }) => {
   const announcements = useMessageStore((state) => state.announcements);
@@ -36,19 +37,19 @@ export const Title = ({ text, style = {}, inline }) => {
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
-        marginBottom: inline ? 5 : 0
+        marginBottom: inline ? DefaultAppStyles.GAP_VERTICAL_SMALL : 0
       }}
     >
       <Heading
         style={{
-          marginHorizontal: 12,
-          marginTop: 12,
+          marginHorizontal: DefaultAppStyles.GAP,
+          marginTop: DefaultAppStyles.GAP_VERTICAL,
           ...getStyle(style),
           textAlign: inline ? "left" : style?.textAlign,
           flexShrink: 1
         }}
         numberOfLines={1}
-        size={inline ? SIZE.md : SIZE.xl}
+        size={inline ? AppFontSize.md : AppFontSize.xl}
       >
         {inline ? text?.toUpperCase() : text}
       </Heading>
@@ -67,7 +68,7 @@ export const Title = ({ text, style = {}, inline }) => {
           right: 0
         }}
         iconSize={24}
-        fontSize={SIZE.xs}
+        fontSize={AppFontSize.xs}
         style={{
           borderRadius: 100,
           paddingVertical: 0,
@@ -80,9 +81,9 @@ export const Title = ({ text, style = {}, inline }) => {
   ) : (
     <Heading
       style={{
-        marginHorizontal: 12,
+        marginHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style),
-        marginTop: style?.marginTop || 12
+        marginTop: style?.marginTop || DefaultAppStyles.GAP_VERTICAL
       }}
     >
       {text}

apps/mobile/app/components/app-lock/index.tsx

@@ -44,7 +44,6 @@ import SettingsService from "../../services/settings";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { NotesnookModule } from "../../utils/notesnook-module";
-import { SIZE } from "../../utils/size";
 import { Toast } from "../toast";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
@@ -54,6 +53,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { strings } from "@notesnook/intl";
+import { AppFontSize } from "../../utils/size";
 
 const getUser = () => {
   const user = MMKV.getString("user");
@@ -82,7 +82,7 @@ const verifyUserPassword = async (password: string) => {
   }
 };
 
-const AppLockedOverlay = () => {
+const AppLocked = () => {
   const initialLaunchBiometricRequest = useRef(true);
   const { colors } = useThemeColors();
   const user = getUser();
@@ -182,7 +182,13 @@ const AppLockedOverlay = () => {
       (prevState === "background" || initialLaunchBiometricRequest.current)
     ) {
       if (SettingsService.shouldLockAppOnEnterForeground()) {
+        if (useSettingStore.getState().appDidEnterBackgroundForAction) {
+          useSettingStore.getState().setAppDidEnterBackgroundForAction(false);
+          return;
+        }
+
         DatabaseLogger.info("Locking app on entering foreground");
+
         useUserStore.getState().lockApp(true);
       }
       if (
@@ -283,6 +289,14 @@ const AppLockedOverlay = () => {
                 keyboardType={
                   appLockHasPasswordSecurity ? keyboardType : "default"
                 }
+                onLayout={async () => {
+                  if (
+                    !biometricsAuthEnabled ||
+                    !(await BiometricService.isBiometryAvailable())
+                  ) {
+                    passwordInputRef.current?.focus();
+                  }
+                }}
                 placeholder={
                   appLockHasPasswordSecurity
                     ? keyboardType === "numeric"
@@ -315,7 +329,7 @@ const AppLockedOverlay = () => {
                     borderRadius: 150,
                     marginBottom: 10
                   }}
-                  fontSize={SIZE.md}
+                  fontSize={AppFontSize.md}
                 />
               </>
             ) : null}
@@ -336,4 +350,4 @@ const AppLockedOverlay = () => {
   ) : null;
 };
 
-export default AppLockedOverlay;
+export default AppLocked;

apps/mobile/app/components/attachments/actions.tsx

@@ -45,7 +45,7 @@ import {
   eDBItemUpdate,
   eOnLoadNote
 } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import { presentDialog } from "../dialog/functions";
@@ -58,6 +58,7 @@ import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const Actions = ({
   attachment,
@@ -226,14 +227,15 @@ const Actions = ({
         style={{
           borderBottomWidth: 1,
           borderBottomColor: colors.primary.border,
-          marginBottom: notes && notes.length > 0 ? 0 : 12
+          marginBottom:
+            notes && notes.length > 0 ? 0 : DefaultAppStyles.GAP_VERTICAL
         }}
       >
         <Heading
           style={{
-            paddingHorizontal: 12
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
-          size={SIZE.lg}
+          size={AppFontSize.lg}
         >
           {filename}
         </Heading>
@@ -241,21 +243,21 @@ const Actions = ({
         <View
           style={{
             flexDirection: "row",
-            marginBottom: 10,
-            paddingHorizontal: 12,
-            marginTop: 6,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
+            paddingHorizontal: DefaultAppStyles.GAP,
+            marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
             gap: 10
           }}
         >
-          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+          <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
             {attachment.mimeType}
           </Paragraph>
-          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+          <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
             {formatBytes(attachment.size)}
           </Paragraph>
 
           {notes.length ? (
-            <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+            <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
               {strings.notes(notes.length)}
             </Paragraph>
           ) : null}
@@ -268,7 +270,7 @@ const Actions = ({
                 context: "local"
               });
             }}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             color={colors.secondary.paragraph}
           >
             {attachment.hash}
@@ -283,16 +285,16 @@ const Actions = ({
           style={{
             borderBottomWidth: 1,
             borderBottomColor: colors.primary.border,
-            marginBottom: 12,
-            paddingVertical: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           <>
             <Heading
               style={{
-                paddingHorizontal: 12
+                paddingHorizontal: DefaultAppStyles.GAP
               }}
-              size={SIZE.sm}
+              size={AppFontSize.sm}
             >
               {strings.listOf()} {strings.dataTypesPlural.note()}:
             </Heading>
@@ -307,14 +309,14 @@ const Actions = ({
                   openNote(item, (item as any).type === "trash");
                 }}
                 style={{
-                  paddingVertical: 12,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL,
                   alignItems: "flex-start",
 
-                  paddingHorizontal: 12
+                  paddingHorizontal: DefaultAppStyles.GAP
                 }}
                 key={item.id}
               >
-                <Paragraph size={SIZE.xs}>{item.title}</Paragraph>
+                <Paragraph size={AppFontSize.xs}>{item.title}</Paragraph>
               </Pressable>
             ))}
           </>
@@ -335,7 +337,7 @@ const Actions = ({
           icon={item.icon}
           loading={loading?.name === item.name}
           type="plain"
-          fontSize={SIZE.sm}
+          fontSize={AppFontSize.sm}
           style={{
             borderRadius: 0,
             justifyContent: "flex-start",
@@ -347,7 +349,7 @@ const Actions = ({
 
       <View
         style={{
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         {failed ? (

apps/mobile/app/components/attachments/attachment-item.tsx

@@ -25,13 +25,14 @@ import { TouchableOpacity, View } from "react-native";
 import { db } from "../../common/database";
 import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
 import { useDBItem } from "../../hooks/use-db-item";
-import { SIZE } from "../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../utils/size";
 import { IconButton } from "../ui/icon-button";
 import { ProgressCircleComponent } from "../ui/svg/lazy";
 import Paragraph from "../ui/typography/paragraph";
 import Actions from "./actions";
 import { strings } from "@notesnook/intl";
 import { Pressable } from "../ui/pressable";
+import { DefaultAppStyles } from "../../utils/styles";
 
 function getFileExtension(filename: string) {
   const ext = /^.+\.([^.]+)$/.exec(filename);
@@ -76,8 +77,8 @@ export const AttachmentItem = ({
         flexDirection: "row",
         marginVertical: 5,
         justifyContent: "space-between",
-        padding: 12,
-        paddingVertical: 6,
+        padding: DefaultAppStyles.GAP,
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL,
         minHeight: 45
       }}
     >
@@ -101,7 +102,7 @@ export const AttachmentItem = ({
                 paddingHorizontal: 2,
                 width: 30,
                 height: 30,
-                borderRadius: 5
+                borderRadius: defaultBorderRadius
               }}
             >
               <Paragraph
@@ -124,7 +125,7 @@ export const AttachmentItem = ({
               }}
             >
               <Paragraph
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 style={{
                   flexWrap: "wrap"
                 }}
@@ -136,7 +137,10 @@ export const AttachmentItem = ({
               </Paragraph>
 
               {!hideWhenNotDownloading ? (
-                <Paragraph color={colors.secondary.paragraph} size={SIZE.xxs}>
+                <Paragraph
+                  color={colors.secondary.paragraph}
+                  size={AppFontSize.xxs}
+                >
                   {strings.fileSize()}: {formatBytes(attachment.size)}
                 </Paragraph>
               ) : null}
@@ -159,7 +163,7 @@ export const AttachmentItem = ({
               }}
             >
               <ProgressCircleComponent
-                size={SIZE.xxl}
+                size={AppFontSize.xxl}
                 progress={
                   currentProgress?.value ? currentProgress?.value / 100 : 0
                 }

apps/mobile/app/components/attachments/index.tsx

@@ -38,7 +38,7 @@ import { downloadAttachments } from "../../common/filesystem/download-attachment
 import { AttachmentGroupProgress } from "../../screens/settings/attachment-group-progress";
 import { presentSheet, ToastManager } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Dialog } from "../dialog";
 import { presentDialog } from "../dialog/functions";
 import { Header } from "../header";
@@ -50,6 +50,7 @@ import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { AttachmentItem } from "./attachment-item";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const DEFAULT_SORTING: SortOptions = {
   sortBy: "dateEdited",
@@ -325,30 +326,31 @@ export const AttachmentDialog = ({
           title={strings.manageAttachments()}
           renderedInRoute="SettingsGroup"
           canGoBack
-          headerRightButtons={[
-            {
-              onPress() {
-                onCheck();
-              },
-              title: strings.recheckAll()
-            },
-            {
-              onPress() {
-                if (!attachments) return;
-                presentDialog({
-                  title: strings.doActions.download.attachment(
-                    attachments.placeholders.length
-                  ),
-                  positiveText: strings.network.download(),
-                  positivePress: async () => {
-                    downloadAttachments(await attachments.ids());
-                  },
-                  negativeText: strings.cancel()
-                });
-              },
-              title: strings.downloadAllAttachments()
-            }
-          ]}
+          // TODO: Add headerRightButtons
+          // headerRightButtons={[
+          //   {
+          //     onPress() {
+          //       onCheck();
+          //     },
+          //     title: strings.recheckAll()
+          //   },
+          //   {
+          //     onPress() {
+          //       if (!attachments) return;
+          //       presentDialog({
+          //         title: strings.doActions.download.attachment(
+          //           attachments.placeholders.length
+          //         ),
+          //         positiveText: strings.network.download(),
+          //         positivePress: async () => {
+          //           downloadAttachments(await attachments.ids());
+          //         },
+          //         negativeText: strings.cancel()
+          //       });
+          //     },
+          //     title: strings.downloadAllAttachments()
+          //   }
+          // ]}
         />
       ) : (
         <View
@@ -356,7 +358,7 @@ export const AttachmentDialog = ({
             flexDirection: "row",
             justifyContent: "space-between",
             alignItems: "center",
-            paddingHorizontal: 12
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           <Heading>{strings.dataTypesPluralCamelCase.attachment()}</Heading>
@@ -369,21 +371,15 @@ export const AttachmentDialog = ({
             <IconButton
               name="check-all"
               style={{
-                height: 40,
-                width: 40,
                 marginRight: 10
               }}
               color={colors.primary.paragraph}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
               onPress={onCheck}
             />
 
             <IconButton
               name="download"
-              style={{
-                height: 40,
-                width: 40
-              }}
               color={colors.primary.paragraph}
               onPress={() => {
                 if (!attachments) return;
@@ -398,7 +394,7 @@ export const AttachmentDialog = ({
                   negativeText: strings.cancel()
                 });
               }}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
             />
           </View>
         </View>
@@ -408,7 +404,7 @@ export const AttachmentDialog = ({
         style={{
           width: "100%",
           alignSelf: "center",
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           height: "100%"
         }}
       >
@@ -428,7 +424,7 @@ export const AttachmentDialog = ({
               alignItems: "center",
               width: "100%",
               borderRadius: 10,
-              padding: 10,
+              padding: DefaultAppStyles.GAP_SMALL,
               borderWidth: 1,
               borderColor: colors.primary.border,
               gap: 12,
@@ -473,7 +469,7 @@ export const AttachmentDialog = ({
             <IconButton
               type={rechecker.isWorking ? "errorShade" : "plain"}
               name={rechecker.isWorking ? "close" : "check"}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
               color={
                 rechecker.isWorking ? colors.error.icon : colors.primary.accent
               }
@@ -494,7 +490,7 @@ export const AttachmentDialog = ({
               backgroundColor: colors.primary.background,
               flexWrap: "wrap",
               flexDirection: "row",
-              paddingVertical: 12
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
             contentContainerStyle={{
               alignItems: "center"
@@ -511,10 +507,10 @@ export const AttachmentDialog = ({
                   }
                   key={item.title}
                   title={item.title}
-                  fontSize={SIZE.sm}
+                  fontSize={AppFontSize.sm}
                   style={{
                     borderRadius: 100,
-                    paddingHorizontal: 12,
+                    paddingHorizontal: DefaultAppStyles.GAP,
                     height: 40,
                     minWidth: 80
                   }}

apps/mobile/app/components/auth/auth-modal.js

@@ -37,6 +37,7 @@ import { hideAuth, initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const AuthMode = {
   login: 0,
@@ -133,7 +134,7 @@ const AuthModal = () => {
           style={{
             flexDirection: "row",
             alignItems: "center",
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             width: "100%",
             height: 50,
             justifyContent:
@@ -167,7 +168,7 @@ const AuthModal = () => {
                 marginTop: 2
               }}
               style={{
-                paddingHorizontal: 6
+                paddingHorizontal: DefaultAppStyles.GAP_SMALL
               }}
             />
           )}

apps/mobile/app/components/auth/change-password.js

@@ -36,6 +36,7 @@ import { Dialog } from "../dialog";
 import BackupService from "../../services/backup";
 import { sleep } from "../../utils/time";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const ChangePassword = () => {
   const passwordInputRef = useRef();
@@ -103,7 +104,7 @@ export const ChangePassword = () => {
     <View
       style={{
         width: "100%",
-        padding: 12
+        padding: DefaultAppStyles.GAP
       }}
     >
       <Dialog context="change-password-dialog" />
@@ -148,7 +149,7 @@ export const ChangePassword = () => {
 
       <Button
         style={{
-          marginTop: 10,
+          marginTop: DefaultAppStyles.GAP_VERTICAL,
           width: "100%"
         }}
         loading={loading}

apps/mobile/app/components/auth/common.js

@@ -20,23 +20,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { createRef } from "react";
 import { eSendEvent } from "../../services/event-manager";
 import { eCloseLoginDialog } from "../../utils/events";
+import Navigation from "../../services/navigation";
+export const AuthMode = {
+  login: 0,
+  signup: 1,
+  welcomeSignup: 2,
+  trialSignup: 3
+};
 
 export const initialAuthMode = createRef(0);
 export function hideAuth() {
   eSendEvent(eCloseLoginDialog);
-
-  // if (initialAuthMode.current === 2) {
-  //   Navigation.replace(
-  //     {
-  //       name: 'Notes'
-  //     },
-  //     {
-  //       menu: true
-  //     }
-  //   );
-  // } else {
-  //   Navigation.goBack();
-  // }
-
-  // tabBarRef.current?.unlock();
+  if (initialAuthMode.current === AuthMode.welcomeSignup) {
+    Navigation.replace("FluidPanelsView");
+  } else {
+    Navigation.goBack();
+  }
 }

apps/mobile/app/components/auth/forgot-password.js

@@ -33,6 +33,7 @@ import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const ForgotPassword = () => {
   const { colors } = useThemeColors("sheet");
@@ -107,7 +108,7 @@ export const ForgotPassword = () => {
         {sent ? (
           <View
             style={{
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               justifyContent: "center",
               alignItems: "center",
               paddingBottom: 50
@@ -138,7 +139,7 @@ export const ForgotPassword = () => {
               backgroundColor: colors.primary.background,
               zIndex: 10,
               width: "100%",
-              padding: 12
+              padding: DefaultAppStyles.GAP
             }}
           >
             <DialogHeader title={strings.accountRecovery()} />
@@ -164,7 +165,7 @@ export const ForgotPassword = () => {
 
             <Button
               style={{
-                marginTop: 10,
+                marginTop: DefaultAppStyles.GAP_VERTICAL,
                 width: "100%"
               }}
               loading={loading}

apps/mobile/app/components/auth/index.js

@@ -17,35 +17,98 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import React, { useState } from "react";
 import { View } from "react-native";
-import { useNavigationFocus } from "../../hooks/use-navigation-focus";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
+import Navigation from "../../services/navigation";
 import { Toast } from "../toast";
-import { initialAuthMode } from "./common";
+import { Button } from "../ui/button";
+import { IconButton } from "../ui/icon-button";
+import { AuthMode, initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
-
-export const AuthMode = {
-  login: 0,
-  signup: 1,
-  welcomeSignup: 2,
-  trialSignup: 3
-};
+import { useNavigationFocus } from "../../hooks/use-navigation-focus";
+import { DefaultAppStyles } from "../../utils/styles";
+import { useSettingStore } from "../../stores/use-setting-store";
 
 const Auth = ({ navigation, route }) => {
   const [currentAuthMode, setCurrentAuthMode] = useState(
     route?.params?.mode || AuthMode.login
   );
+  const deviceMode = useSettingStore((state) => state.deviceMode);
+  const { colors } = useThemeColors();
+  const insets = useGlobalSafeAreaInsets();
   initialAuthMode.current = route?.params.mode || AuthMode.login;
-  useNavigationFocus(navigation, {
-    onFocus: () => {
-      //tabBarRef?.current.lock();
-      initialAuthMode.current = route?.params.mode || AuthMode.login;
-    }
-  });
+  useNavigationFocus(navigation, {});
 
   return (
     <View style={{ flex: 1 }}>
+      <View
+        style={{
+          position: "absolute",
+          paddingTop: insets.top,
+          top: 0,
+          zIndex: 999,
+          backgroundColor:
+            deviceMode === "mobile" ? colors.secondary.background : null,
+          width: "100%"
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            paddingHorizontal: DefaultAppStyles.GAP,
+            width: "100%",
+            height: 50,
+            justifyContent:
+              initialAuthMode.current !== AuthMode.welcomeSignup
+                ? "space-between"
+                : "flex-end"
+          }}
+        >
+          {initialAuthMode.current === AuthMode.welcomeSignup ? null : (
+            <IconButton
+              name="arrow-left"
+              onPress={() => {
+                if (initialAuthMode.current === 2) {
+                  Navigation.replace("FluidPanelsView");
+                } else {
+                  Navigation.goBack();
+                }
+              }}
+              color={colors.primary.paragraph}
+            />
+          )}
+
+          {initialAuthMode.current !== AuthMode.welcomeSignup ? null : (
+            <Button
+              title={strings.skip()}
+              onPress={() => {
+                if (initialAuthMode.current === 2) {
+                  Navigation.replace("FluidPanelsView");
+                } else {
+                  Navigation.goBack();
+                }
+              }}
+              iconSize={16}
+              type="plain"
+              iconPosition="right"
+              icon="chevron-right"
+              height={25}
+              iconStyle={{
+                marginTop: 2
+              }}
+              style={{
+                paddingHorizontal: DefaultAppStyles.GAP_SMALL
+              }}
+            />
+          )}
+        </View>
+      </View>
+
       {currentAuthMode !== AuthMode.login ? (
         <Signup
           changeMode={(mode) => setCurrentAuthMode(mode)}

apps/mobile/app/components/auth/login.js

@@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
@@ -24,10 +25,9 @@ import { SheetManager } from "react-native-actions-sheet";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent } from "../../services/event-manager";
 import Sync from "../../services/sync";
-import { useSettingStore } from "../../stores/use-setting-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { eUserLoggedIn } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import SheetProvider from "../sheet-provider";
 import { Progress } from "../sheets/progress";
@@ -38,7 +38,7 @@ import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
 import { useLogin } from "./use-login";
-import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -71,8 +71,8 @@ export const Login = ({ changeMode }) => {
       }
     }, 5000);
   });
-  const deviceMode = useSettingStore((state) => state.deviceMode);
   const { width, height } = useWindowDimensions();
+  const isTablet = width > 600;
   useEffect(() => {
     async () => {
       setStep(LoginSteps.emailAuth);
@@ -96,23 +96,24 @@ export const Login = ({ changeMode }) => {
           backgroundColor: colors.primary.background,
           zIndex: 10,
           width: "100%",
+          height: "100%",
           alignSelf: "center"
         }}
       >
         <View
           style={{
             justifyContent: "flex-end",
-            paddingHorizontal: 20,
+            paddingHorizontal: DefaultAppStyles.GAP,
             backgroundColor: colors.secondary.background,
             borderBottomWidth: 0.8,
-            marginBottom: 12,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
             borderBottomColor: colors.primary.border,
-            alignSelf: deviceMode !== "mobile" ? "center" : undefined,
-            borderWidth: deviceMode !== "mobile" ? 1 : null,
-            borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
-            borderRadius: deviceMode !== "mobile" ? 20 : null,
-            marginTop: deviceMode !== "mobile" ? 50 : null,
-            width: deviceMode === "mobile" ? null : "50%",
+            alignSelf: isTablet ? "center" : undefined,
+            borderWidth: isTablet ? 1 : null,
+            borderColor: isTablet ? colors.primary.border : null,
+            borderRadius: isTablet ? 20 : null,
+            marginTop: isTablet ? 50 : null,
+            width: !isTablet ? null : "70%",
             minHeight: height * 0.4
           }}
         >
@@ -143,10 +144,10 @@ export const Login = ({ changeMode }) => {
           <Heading
             style={{
               marginBottom: 25,
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
             extraBold
-            size={SIZE.xxl}
+            size={AppFontSize.xxl}
           >
             {strings.loginToYourAccount()}
           </Heading>
@@ -163,7 +164,7 @@ export const Login = ({ changeMode }) => {
               : "99.9%",
             backgroundColor: colors.primary.background,
             alignSelf: "center",
-            paddingHorizontal: 20
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           <Input
@@ -216,7 +217,7 @@ export const Login = ({ changeMode }) => {
                 title={strings.forgotPassword()}
                 style={{
                   alignSelf: "flex-end",
-                  height: 30,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
                   paddingHorizontal: 0
                 }}
                 onPress={() => {
@@ -226,7 +227,7 @@ export const Login = ({ changeMode }) => {
                 textStyle={{
                   textDecorationLine: "underline"
                 }}
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
                 type="plain"
               />
             </>
@@ -244,11 +245,8 @@ export const Login = ({ changeMode }) => {
                 login();
               }}
               style={{
-                width: 250,
-                borderRadius: 100
+                width: 250
               }}
-              height={50}
-              fontSize={SIZE.md}
               type="accent"
               title={!loading ? strings.continue() : null}
             />
@@ -258,19 +256,16 @@ export const Login = ({ changeMode }) => {
                 title={strings.cancelLogin()}
                 style={{
                   alignSelf: "center",
-                  height: 30,
-                  marginTop: 10
+                  marginTop: DefaultAppStyles.GAP_VERTICAL,
+                  width: 250
                 }}
                 onPress={() => {
                   if (loading) return;
                   setStep(LoginSteps.emailAuth);
                   setLoading(false);
                 }}
-                textStyle={{
-                  textDecorationLine: "underline"
-                }}
-                fontSize={SIZE.xs}
-                type="errorShade"
+                fontSize={AppFontSize.xs}
+                type="secondaryAccented"
               />
             )}
 
@@ -283,17 +278,17 @@ export const Login = ({ changeMode }) => {
                 activeOpacity={0.8}
                 style={{
                   alignSelf: "center",
-                  marginTop: 12,
-                  paddingVertical: 12
+                  marginTop: DefaultAppStyles.GAP_VERTICAL,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL
                 }}
               >
                 <Paragraph
-                  size={SIZE.xs + 1}
+                  size={AppFontSize.xs}
                   color={colors.secondary.paragraph}
                 >
                   {strings.dontHaveAccount()}{" "}
                   <Paragraph
-                    size={SIZE.xs + 1}
+                    size={AppFontSize.xs}
                     style={{ color: colors.primary.accent }}
                   >
                     {strings.signUp()}

apps/mobile/app/components/auth/session-expired.js

@@ -34,7 +34,7 @@ import Sync from "../../services/sync";
 import { clearAllStores } from "../../stores";
 import { useUserStore } from "../../stores/use-user-store";
 import { eLoginSessionExpired, eUserLoggedIn } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import BaseDialog from "../dialog/base-dialog";
@@ -48,18 +48,8 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
 import { strings } from "@notesnook/intl";
-
-function getObfuscatedEmail(email) {
-  if (!email) return "";
-  const [username, provider] = email.split("@");
-  if (username.length === 1) return `****@${provider}`;
-  return email.replace(/(.{1})(.*)(?=@)/, function (gp1, gp2, gp3) {
-    for (let i = 0; i < gp3.length; i++) {
-      gp2 += "*";
-    }
-    return gp2;
-  });
-}
+import { getObfuscatedEmail } from "../../utils/functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const SessionExpired = () => {
   const { colors } = useThemeColors();
@@ -168,7 +158,7 @@ export const SessionExpired = () => {
         <View
           style={{
             width: focused ? "100%" : "99.9%",
-            padding: 12,
+            padding: DefaultAppStyles.GAP,
             justifyContent: "center",
             flex: 1,
             backgroundColor: colors.primary.background
@@ -193,7 +183,7 @@ export const SessionExpired = () => {
               color={colors.error.icon}
               size={50}
             />
-            <Heading size={SIZE.xxxl} color={colors.primary.heading}>
+            <Heading size={AppFontSize.xxxl} color={colors.primary.heading}>
               {strings.sessionExpired()}
             </Heading>
             <Paragraph
@@ -224,7 +214,7 @@ export const SessionExpired = () => {
 
           <Button
             style={{
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               width: 250,
               borderRadius: 100
             }}
@@ -236,7 +226,7 @@ export const SessionExpired = () => {
 
           <Button
             style={{
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               width: "100%"
             }}
             onPress={() => {

apps/mobile/app/components/auth/signup.js

@@ -17,6 +17,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import React, { useRef, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { db } from "../../common/database";
@@ -24,19 +26,17 @@ import { DDS } from "../../services/device-detection";
 import { ToastManager } from "../../services/event-manager";
 import { clearMessage, setEmailVerifyMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
-import { useThemeColors } from "@notesnook/theme";
+import SettingsService from "../../services/settings";
 import { useUserStore } from "../../stores/use-user-store";
 import { openLinkInBrowser } from "../../utils/functions";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
-import { useSettingStore } from "../../stores/use-setting-store";
-import SettingsService from "../../services/settings";
-import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Signup = ({ changeMode, trial }) => {
   const { colors } = useThemeColors();
@@ -50,8 +50,8 @@ export const Signup = ({ changeMode, trial }) => {
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
   const setLastSynced = useUserStore((state) => state.setLastSynced);
-  const deviceMode = useSettingStore((state) => state.deviceMode);
   const { width, height } = useWindowDimensions();
+  const isTablet = width > 600;
   const validateInfo = () => {
     if (!password.current || !email.current || !confirmPassword.current) {
       ToastManager.show({
@@ -105,23 +105,24 @@ export const Signup = ({ changeMode, trial }) => {
           backgroundColor: colors.primary.background,
           zIndex: 10,
           width: "100%",
+          height: "100%",
           alignSelf: "center"
         }}
       >
         <View
           style={{
             justifyContent: "flex-end",
-            paddingHorizontal: 20,
+            paddingHorizontal: DefaultAppStyles.GAP,
             backgroundColor: colors.secondary.background,
-            marginBottom: 20,
             borderBottomWidth: 0.8,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
             borderBottomColor: colors.primary.border,
-            alignSelf: deviceMode !== "mobile" ? "center" : undefined,
-            borderWidth: deviceMode !== "mobile" ? 1 : null,
-            borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
-            borderRadius: deviceMode !== "mobile" ? 20 : null,
-            marginTop: deviceMode !== "mobile" ? 50 : null,
-            width: deviceMode === "mobile" ? null : "50%",
+            alignSelf: isTablet ? "center" : undefined,
+            borderWidth: isTablet ? 1 : null,
+            borderColor: isTablet ? colors.primary.border : null,
+            borderRadius: isTablet ? 20 : null,
+            marginTop: isTablet ? 50 : null,
+            width: !isTablet ? null : "70%",
             minHeight: height * 0.4
           }}
         >
@@ -153,9 +154,9 @@ export const Signup = ({ changeMode, trial }) => {
             extraBold
             style={{
               marginBottom: 25,
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
-            size={SIZE.xxl}
+            size={AppFontSize.xxl}
           >
             {strings.createYourAccount()}
           </Heading>
@@ -164,7 +165,7 @@ export const Signup = ({ changeMode, trial }) => {
         <View
           style={{
             width: DDS.isTab ? "50%" : "100%",
-            paddingHorizontal: 20,
+            paddingHorizontal: DefaultAppStyles.GAP,
             backgroundColor: colors.primary.background,
             alignSelf: "center"
           }}
@@ -233,12 +234,12 @@ export const Signup = ({ changeMode, trial }) => {
             style={{
               marginBottom: 25
             }}
-            size={SIZE.xs}
+            size={AppFontSize.xxs}
             color={colors.secondary.paragraph}
           >
             {strings.signupAgreement[0]()}
             <Paragraph
-              size={SIZE.xs}
+              size={AppFontSize.xxs}
               onPress={() => {
                 openLinkInBrowser("https://notesnook.com/tos", colors);
               }}
@@ -247,11 +248,12 @@ export const Signup = ({ changeMode, trial }) => {
               }}
               color={colors.primary.accent}
             >
+              {" "}
               {strings.signupAgreement[1]()}
-            </Paragraph>
+            </Paragraph>{" "}
             {strings.signupAgreement[2]()}
             <Paragraph
-              size={SIZE.xs}
+              size={AppFontSize.xxs}
               onPress={() => {
                 openLinkInBrowser("https://notesnook.com/privacy", colors);
               }}
@@ -260,8 +262,9 @@ export const Signup = ({ changeMode, trial }) => {
               }}
               color={colors.primary.accent}
             >
+              {" "}
               {strings.signupAgreement[3]()}
-            </Paragraph>
+            </Paragraph>{" "}
             {strings.signupAgreement[4]()}
           </Paragraph>
 
@@ -270,11 +273,8 @@ export const Signup = ({ changeMode, trial }) => {
             type="accent"
             loading={loading}
             onPress={signup}
-            fontSize={SIZE.md}
             style={{
-              marginRight: 12,
-              width: 250,
-              borderRadius: 100
+              width: 250
             }}
           />
 
@@ -286,14 +286,14 @@ export const Signup = ({ changeMode, trial }) => {
             activeOpacity={0.8}
             style={{
               alignSelf: "center",
-              marginTop: 12,
-              paddingVertical: 12
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
           >
-            <Paragraph size={SIZE.xs + 1} color={colors.secondary.paragraph}>
+            <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
               {strings.alreadyHaveAccount()}{" "}
               <Paragraph
-                size={SIZE.xs + 1}
+                size={AppFontSize.xs}
                 style={{ color: colors.primary.accent }}
               >
                 {strings.login()}

apps/mobile/app/components/auth/two-factor.js

@@ -30,13 +30,14 @@ import {
   ToastManager
 } from "../../services/event-manager";
 import { eCloseSheet } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
 import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
   const { colors } = useThemeColors();
@@ -204,9 +205,9 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               }}
               onSubmitEditing={onNext}
               caretHidden
+              height={60}
               inputStyle={{
-                fontSize: SIZE.lg,
-                height: 60,
+                fontSize: AppFontSize.lg,
                 textAlign: "center",
                 letterSpacing: 10,
                 width: 250
@@ -216,11 +217,13 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               }
               enablesReturnKeyAutomatically
               containerStyle={{
-                height: 60,
                 borderWidth: 0,
                 width: undefined,
                 minWidth: "50%"
               }}
+              wrapperStyle={{
+                height: 60
+              }}
             />
 
             <Button
@@ -229,9 +232,12 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               width={250}
               loading={loading}
               onPress={onNext}
-              style={{
-                borderRadius: 100
-              }}
+            />
+            <Button
+              title={strings.cancel()}
+              type="secondaryAccented"
+              onPress={onCancel}
+              width={250}
             />
 
             <Button
@@ -242,13 +248,6 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               onPress={onRequestSecondaryMethod}
               height={30}
             />
-
-            <Button
-              title={strings.cancel()}
-              type="plain"
-              onPress={onCancel}
-              height={30}
-            />
           </>
         ) : (
           <>
@@ -262,8 +261,8 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
                   });
                 }}
                 style={{
-                  paddingHorizontal: 12,
-                  paddingVertical: 12,
+                  paddingHorizontal: DefaultAppStyles.GAP,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL,
                   marginTop: 0,
                   flexDirection: "row",
                   borderRadius: 0,
@@ -275,8 +274,6 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
                 <IconButton
                   type="secondaryAccented"
                   style={{
-                    width: 40,
-                    height: 40,
                     marginRight: 10
                   }}
                   size={15}
@@ -288,7 +285,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
                     flexShrink: 1
                   }}
                 >
-                  <Paragraph size={SIZE.md}>{item.title}</Paragraph>
+                  <Paragraph size={AppFontSize.md}>{item.title}</Paragraph>
                 </View>
               </Pressable>
             ))}

apps/mobile/app/components/container/floating-button.tsx

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { useThemeColors } from "@notesnook/theme";
 import { useRoute } from "@react-navigation/native";
 import React, { useCallback, useEffect } from "react";
-import { Keyboard, View } from "react-native";
+import { Keyboard, TouchableOpacity, View, ViewStyle } from "react-native";
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -33,20 +33,30 @@ import { editorState } from "../../screens/editor/tiptap/utils";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { getElevationStyle } from "../../utils/elevation";
-import { SIZE, normalize } from "../../utils/size";
-import { Pressable } from "../ui/pressable";
+import { AppFontSize, normalize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 
 interface FloatingButtonProps {
   onPress: () => void;
   color?: string;
   shouldShow?: boolean;
   alwaysVisible?: boolean;
+  icon?: string;
+  testID?: string;
+  position?: "left" | "right";
+  size?: "small" | "large";
+  style?: ViewStyle;
 }
 
 const FloatingButton = ({
   onPress,
   color,
-  alwaysVisible = false
+  alwaysVisible = false,
+  icon,
+  testID,
+  position = "right",
+  size = "large",
+  style
 }: FloatingButtonProps) => {
   const { colors } = useThemeColors();
   const deviceMode = useSettingStore((state) => state.deviceMode);
@@ -108,20 +118,26 @@ const FloatingButton = ({
       style={[
         {
           position: "absolute",
-          right: 12,
+          right: position === "right" ? DefaultAppStyles.GAP : undefined,
+          left: position === "left" ? DefaultAppStyles.GAP : undefined,
           bottom: 20,
-          zIndex: 10
+          zIndex: 10,
+          ...style
         },
         animatedStyle
       ]}
     >
-      <Pressable
-        testID={notesnook.buttons.add}
-        type="accent"
-        accentColor={color}
+      <TouchableOpacity
+        testID={testID || notesnook.buttons.add}
+        activeOpacity={0.95}
         style={{
           ...getElevationStyle(5),
-          borderRadius: 100
+          borderRadius: size === "small" ? 15 : 20,
+          borderTopWidth: 0,
+          borderBottomWidth: 0,
+          borderLeftWidth: 0,
+          borderRightWidth: 0,
+          backgroundColor: colors.primary.background
         }}
         onPress={onPress}
       >
@@ -129,23 +145,27 @@ const FloatingButton = ({
           style={{
             alignItems: "center",
             justifyContent: "center",
-            height: normalize(60),
-            width: normalize(60)
+            height: normalize(size === "small" ? 40 : 60),
+            width: normalize(size === "small" ? 40 : 60),
+            backgroundColor: colors.primary.shade,
+            borderRadius: size === "small" ? 15 : 20
           }}
         >
           <Icon
             name={
-              route.name === "Notebooks"
+              icon
+                ? icon
+                : route.name === "Notebooks"
                 ? "notebook-plus"
                 : route.name === "Trash"
                 ? "delete"
                 : "plus"
             }
-            color={colors.primary.accentForeground}
-            size={SIZE.xxl}
+            color={colors.primary.accent}
+            size={size === "small" ? AppFontSize.xl : AppFontSize.xxxl}
           />
         </View>
-      </Pressable>
+      </TouchableOpacity>
     </Animated.View>
   );
 };

apps/mobile/app/components/delay-layout/default-placeholder.tsx

@@ -23,6 +23,8 @@ import { useMessageStore } from "../../stores/use-message-store";
 import { useThemeColors } from "@notesnook/theme";
 import { ColorValues } from "../../utils/colors";
 import { hexToRGBA } from "../../utils/colors";
+import { defaultBorderRadius } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const DefaultPlaceholder = ({ color }: { color: string }) => {
   const { colors } = useThemeColors();
@@ -40,7 +42,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
     <View
       style={{
         width: "100%",
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       {hasAnnoucements ? (
@@ -51,7 +53,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             borderRadius: 10,
             marginBottom: 20,
             backgroundColor: colors.secondary.background,
-            padding: 12
+            padding: DefaultAppStyles.GAP
           }}
         >
           <View
@@ -59,7 +61,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               width: 150,
               height: 20,
               backgroundColor: colors.primary.hover,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginBottom: 10
             }}
           />
@@ -68,7 +70,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               width: 250,
               height: 14,
               backgroundColor: colors.primary.hover,
-              borderRadius: 5
+              borderRadius: defaultBorderRadius
             }}
           />
 
@@ -78,7 +80,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               height: 15,
               backgroundColor: shadeColor,
               borderRadius: 3,
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
           />
         </View>
@@ -93,7 +95,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             marginBottom: 20,
             flexDirection: "row",
             alignItems: "center",
-            paddingHorizontal: 20
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           <View
@@ -111,7 +113,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
                 width: 150,
                 height: 12,
                 backgroundColor: colors.secondary.background,
-                borderRadius: 5,
+                borderRadius: defaultBorderRadius,
                 marginBottom: 10
               }}
             />
@@ -120,7 +122,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
                 width: 250,
                 height: 16,
                 backgroundColor: colors.secondary.background,
-                borderRadius: 5
+                borderRadius: defaultBorderRadius
               }}
             />
           </View>
@@ -134,7 +136,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           backgroundColor: colors.secondary.background,
           borderRadius: 10,
           marginBottom: 20,
-          padding: 5,
+          padding: DefaultAppStyles.GAP_SMALL,
           justifyContent: "space-between",
           flexDirection: "row",
           alignItems: "center"
@@ -179,7 +181,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           width: 200,
           height: 16,
           backgroundColor: colors.secondary.background,
-          borderRadius: 5
+          borderRadius: defaultBorderRadius
         }}
       />
       <View
@@ -187,15 +189,15 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           width: "85%",
           height: 13,
           backgroundColor: colors.secondary.background,
-          borderRadius: 5,
-          marginTop: 10
+          borderRadius: defaultBorderRadius,
+          marginTop: DefaultAppStyles.GAP_VERTICAL
         }}
       />
 
       <View
         style={{
           flexDirection: "row",
-          marginTop: 10
+          marginTop: DefaultAppStyles.GAP_VERTICAL
         }}
       >
         <View
@@ -203,7 +205,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             width: 50,
             height: 10,
             backgroundColor: colors.secondary.background,
-            borderRadius: 5
+            borderRadius: defaultBorderRadius
           }}
         />
         <View
@@ -211,7 +213,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             width: 60,
             height: 10,
             backgroundColor: colors.secondary.background,
-            borderRadius: 5,
+            borderRadius: defaultBorderRadius,
             marginLeft: 10
           }}
         />

apps/mobile/app/components/delay-layout/index.tsx

@@ -17,11 +17,10 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React from "react";
-import { ViewProps } from "react-native";
-import Animated, { FadeOutUp } from "react-native-reanimated";
-import { useDelayLayout } from "../../hooks/use-delay-layout";
 import { useThemeColors } from "@notesnook/theme";
+import React from "react";
+import { View, ViewProps } from "react-native";
+import { useDelayLayout } from "../../hooks/use-delay-layout";
 import { DefaultPlaceholder } from "./default-placeholder";
 import { SettingsPlaceholder } from "./settings-placeholder";
 
@@ -49,8 +48,7 @@ export default function DelayLayout({
   const Placeholder = placeholder[props.type || "default"];
 
   return loading || props.wait ? (
-    <Animated.View
-      exiting={animated ? FadeOutUp : undefined}
+    <View
       style={{
         backgroundColor: colors.primary.background,
         flex: 1,
@@ -58,7 +56,7 @@ export default function DelayLayout({
       }}
     >
       <Placeholder color={props.color || colors.primary.accent} />
-    </Animated.View>
+    </View>
   ) : (
     <>{props.children}</>
   );

apps/mobile/app/components/delay-layout/settings-placeholder.tsx

@@ -20,6 +20,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
+import { defaultBorderRadius } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const SettingsPlaceholder = () => {
   const { colors } = useThemeColors();
@@ -31,7 +33,7 @@ export const SettingsPlaceholder = () => {
           width: 100,
           height: 12,
           backgroundColor: colors.primary.shade,
-          borderRadius: 5,
+          borderRadius: defaultBorderRadius,
           marginLeft: 12,
           marginBottom: 12
         }}
@@ -44,7 +46,7 @@ export const SettingsPlaceholder = () => {
           marginBottom: 20,
           flexDirection: "row",
           alignItems: "center",
-          paddingHorizontal: 16
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         <View
@@ -62,7 +64,7 @@ export const SettingsPlaceholder = () => {
               width: 150,
               height: 12,
               backgroundColor: colors.secondary.background,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginBottom: 10
             }}
           />
@@ -71,7 +73,7 @@ export const SettingsPlaceholder = () => {
               width: 250,
               height: 16,
               backgroundColor: colors.secondary.background,
-              borderRadius: 5
+              borderRadius: defaultBorderRadius
             }}
           />
         </View>
@@ -85,7 +87,7 @@ export const SettingsPlaceholder = () => {
           marginBottom: 20,
           flexDirection: "row",
           alignItems: "center",
-          paddingHorizontal: 16,
+          paddingHorizontal: DefaultAppStyles.GAP,
           justifyContent: "space-between"
         }}
       >
@@ -104,7 +106,7 @@ export const SettingsPlaceholder = () => {
               width: 150,
               height: 12,
               backgroundColor: colors.secondary.background,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginBottom: 10
             }}
           />
@@ -113,7 +115,7 @@ export const SettingsPlaceholder = () => {
               width: 250,
               height: 16,
               backgroundColor: colors.secondary.background,
-              borderRadius: 5
+              borderRadius: defaultBorderRadius
             }}
           />
         </View>

apps/mobile/app/components/dialog/base-dialog.tsx

@@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { ScopedThemeProvider } from "@notesnook/theme";
 import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
 import {
   ColorValue,
@@ -30,11 +31,8 @@ import {
 } from "react-native";
 import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { BouncingView } from "../ui/transitions/bouncing-view";
-import { ScopedThemeProvider } from "@notesnook/theme";
-import SettingsService from "../../services/settings";
 import { useUserStore } from "../../stores/use-user-store";
-import { useAppState } from "../../hooks/use-app-state";
+import { BouncingView } from "../ui/transitions/bouncing-view";
 
 export interface BaseDialogProps extends PropsWithChildren {
   animation?: "fade" | "none" | "slide" | undefined;

apps/mobile/app/components/dialog/dialog-buttons.js

@@ -17,16 +17,17 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { ActivityIndicator, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
-import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
+import { getColorLinearShade } from "../../utils/colors";
+import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
-import { getColorLinearShade } from "../../utils/colors";
-import { strings } from "@notesnook/intl";
 
 const DialogButtons = ({
   onPressPositive,
@@ -46,9 +47,7 @@ const DialogButtons = ({
         {
           backgroundColor: colors.secondary.background,
           height: 60,
-          borderBottomRightRadius: 5,
-          borderBottomLeftRadius: 5,
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           borderTopWidth: 0.7,
           borderTopColor: getColorLinearShade(
             colors.secondary.background,
@@ -58,9 +57,7 @@ const DialogButtons = ({
         }
       ]}
     >
-      {loading ? (
-        <ActivityIndicator color={colors.primary.accent} size={SIZE.lg} />
-      ) : doneText ? (
+      {doneText ? (
         <View
           style={{
             flexDirection: "row",
@@ -70,7 +67,7 @@ const DialogButtons = ({
           <Icon
             color={colors.primary.accent}
             name="check-circle-outline"
-            size={SIZE.md}
+            size={AppFontSize.md}
           />
           <Paragraph color={colors.primary.accent}>{" " + doneText}</Paragraph>
         </View>
@@ -86,7 +83,7 @@ const DialogButtons = ({
       >
         <Button
           onPress={onPressNegative}
-          fontSize={SIZE.md}
+          fontSize={AppFontSize.sm}
           testID={notesnook.ids.default.dialog.no}
           type="plain"
           bold
@@ -95,11 +92,12 @@ const DialogButtons = ({
         {onPressPositive ? (
           <Button
             onPress={onPressPositive}
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.sm}
             testID={notesnook.ids.default.dialog.yes}
             style={{
               marginLeft: 10
             }}
+            loading={loading}
             bold
             type={positiveType || "transparent"}
             title={positiveTitle}
@@ -117,6 +115,6 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "center",
     flexDirection: "row",
-    marginTop: 10
+    marginTop: DefaultAppStyles.GAP_VERTICAL
   }
 });

apps/mobile/app/components/dialog/dialog-header.tsx

@@ -20,11 +20,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { Text, View, ViewStyle } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import { PressableProps } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 
 type DialogHeaderProps = {
   icon?: string;
@@ -82,7 +83,7 @@ const DialogHeader = ({
           >
             <Heading
               style={{ textAlign: centered ? "center" : "left" }}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
             >
               {title}{" "}
               {titlePart ? (
@@ -97,7 +98,7 @@ const DialogHeader = ({
                 onPress={button.onPress}
                 style={{
                   borderRadius: 100,
-                  paddingHorizontal: 12
+                  paddingHorizontal: DefaultAppStyles.GAP
                 }}
                 loading={button.loading}
                 fontSize={13}

apps/mobile/app/components/dialog/index.js

@@ -17,33 +17,35 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useEffect, useRef, useState } from "react";
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 import { DDS } from "../../services/device-detection";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
+import { getContainerBorder } from "../../utils/colors";
 import { getElevationStyle } from "../../utils/elevation";
 import { eCloseSimpleDialog, eOpenSimpleDialog } from "../../utils/events";
+import { defaultBorderRadius } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
 import { Toast } from "../toast";
+import { Button } from "../ui/button";
 import Input from "../ui/input";
+import { Notice } from "../ui/notice";
 import Seperator from "../ui/seperator";
 import BaseDialog from "./base-dialog";
 import DialogButtons from "./dialog-buttons";
 import DialogHeader from "./dialog-header";
-import { useCallback } from "react";
-import { Button } from "../ui/button";
-import { getContainerBorder } from "../../utils/colors";
-import { Notice } from "../ui/notice";
-import { strings } from "@notesnook/intl";
 
 export const Dialog = ({ context = "global" }) => {
   const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
   const [checked, setChecked] = useState(false);
+  const [loading, setLoading] = useState(false);
   const values = useRef({
     inputValue: undefined
   });
@@ -72,14 +74,23 @@ export const Dialog = ({ context = "global" }) => {
   const onPressPositive = async () => {
     if (dialogInfo.positivePress) {
       inputRef.current?.blur();
-      let result = await dialogInfo.positivePress(
-        values.current.inputValue || dialogInfo.defaultValue,
-        checked
-      );
+      setLoading(true);
+      let result;
+      try {
+        result = await dialogInfo.positivePress(
+          values.current.inputValue || dialogInfo.defaultValue,
+          checked
+        );
+      } catch (e) {
+        /** Empty */
+      }
+      setLoading(false);
+
       if (result === false) {
         return;
       }
     }
+
     setChecked(false);
     values.current.inputValue = undefined;
     setVisible(false);
@@ -125,10 +136,11 @@ export const Dialog = ({ context = "global" }) => {
     ...getElevationStyle(5),
     width: DDS.isTab ? 400 : "85%",
     maxHeight: 450,
-    borderRadius: 5,
+    borderRadius: defaultBorderRadius,
     backgroundColor: colors.primary.background,
     paddingTop: 12,
-    ...getContainerBorder(colors.primary.border, 0.5)
+    ...getContainerBorder(colors.primary.border, 0.5),
+    overflow: "hidden"
   };
 
   return visible ? (
@@ -164,7 +176,7 @@ export const Dialog = ({ context = "global" }) => {
         {dialogInfo.input ? (
           <View
             style={{
-              paddingHorizontal: 12
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
             <Input
@@ -188,7 +200,7 @@ export const Dialog = ({ context = "global" }) => {
         {dialogInfo?.notice ? (
           <View
             style={{
-              paddingHorizontal: 12
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
             <Notice
@@ -209,6 +221,7 @@ export const Dialog = ({ context = "global" }) => {
                   ? "check-circle-outline"
                   : "checkbox-blank-circle-outline"
               }
+              iconColor={checked ? colors.secondary.icon : colors.primary.icon}
               style={{
                 justifyContent: "flex-start"
               }}
@@ -224,6 +237,7 @@ export const Dialog = ({ context = "global" }) => {
         <DialogButtons
           onPressNegative={onNegativePress}
           onPressPositive={dialogInfo.positivePress && onPressPositive}
+          loading={loading}
           positiveTitle={dialogInfo.positiveText}
           negativeTitle={dialogInfo.negativeText}
           positiveType={dialogInfo.positiveType}

apps/mobile/app/components/dialogs/applock-password/index.tsx

@@ -39,7 +39,7 @@ import {
   eCloseAppLocKPasswordDailog,
   eOpenAppLockPasswordDialog
 } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import BaseDialog from "../../dialog/base-dialog";
 import DialogButtons from "../../dialog/dialog-buttons";
@@ -50,6 +50,7 @@ import { IconButton } from "../../ui/icon-button";
 import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const AppLockPassword = () => {
   const { colors } = useThemeColors();
@@ -128,7 +129,7 @@ export const AppLockPassword = () => {
 
         <View
           style={{
-            paddingHorizontal: 12
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           {mode === "change" ? (
@@ -192,7 +193,7 @@ export const AppLockPassword = () => {
                     height: 25,
                     marginRight: 5
                   }}
-                  size={SIZE.lg}
+                  size={AppFontSize.lg}
                 />
               )
             }
@@ -248,7 +249,7 @@ export const AppLockPassword = () => {
                     setSecureTextEntry(true);
                   });
                 }}
-                iconSize={SIZE.lg}
+                iconSize={AppFontSize.lg}
                 type="plain"
                 iconColor={
                   accountPass ? colors.primary.accent : colors.primary.icon
@@ -259,7 +260,7 @@ export const AppLockPassword = () => {
                   alignSelf: "flex-start",
                   justifyContent: "flex-start",
                   paddingHorizontal: 0,
-                  height: 30
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
                 }}
               />
             </>

apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx

@@ -27,12 +27,13 @@ import {
 import { Image as ImageType } from "react-native-image-crop-picker";
 import { useThemeColors } from "@notesnook/theme";
 import { presentSheet } from "../../../services/event-manager";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
 import { Notice } from "../../ui/notice";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export default function AttachImage({
   response,
@@ -50,21 +51,26 @@ export default function AttachImage({
     <View
       style={{
         alignItems: "center",
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <View
         style={{
           backgroundColor: colors.secondary.background,
-          marginBottom: 12,
+          marginBottom: DefaultAppStyles.GAP_VERTICAL,
           height: 140,
           width: "100%",
           borderRadius: 10,
-          padding: 5,
-          paddingHorizontal: 12
+          padding: DefaultAppStyles.GAP_SMALL,
+          paddingHorizontal: DefaultAppStyles.GAP_SMALL
         }}
       >
-        <Paragraph style={{ color: colors.primary.paragraph, marginBottom: 6 }}>
+        <Paragraph
+          style={{
+            color: colors.primary.paragraph,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL_SMALL
+          }}
+        >
           {strings.attachImageHeading(response?.length || 1)}
         </Paragraph>
         <ScrollView horizontal>
@@ -80,7 +86,7 @@ export default function AttachImage({
                 style={{
                   width: 100,
                   height: 100,
-                  borderRadius: 5,
+                  borderRadius: defaultBorderRadius,
                   backgroundColor: "black",
                   marginRight: 6
                 }}
@@ -96,7 +102,7 @@ export default function AttachImage({
         style={{
           flexDirection: "row",
           alignSelf: "center",
-          marginBottom: 12,
+          marginBottom: DefaultAppStyles.GAP_VERTICAL,
           alignItems: "center",
           width: "100%"
         }}
@@ -105,7 +111,7 @@ export default function AttachImage({
         }}
       >
         <IconButton
-          size={SIZE.lg}
+          size={AppFontSize.lg}
           name={compress ? "checkbox-marked" : "checkbox-blank-outline"}
           color={compress ? colors.primary.accent : colors.primary.icon}
           style={{
@@ -122,7 +128,7 @@ export default function AttachImage({
             flexShrink: 1,
             marginLeft: 3
           }}
-          size={SIZE.sm}
+          size={AppFontSize.sm}
         >
           {strings.compress()} ({strings.recommended().toLowerCase()})
         </Paragraph>
@@ -135,7 +141,7 @@ export default function AttachImage({
           size="small"
           style={{
             width: "100%",
-            marginBottom: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL
           }}
         />
       ) : (
@@ -145,7 +151,7 @@ export default function AttachImage({
           size="small"
           style={{
             width: "100%",
-            marginBottom: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL
           }}
         />
       )}

apps/mobile/app/components/dialogs/color-picker/index.tsx

@@ -34,6 +34,7 @@ import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import { Pressable } from "../../ui/pressable";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const HEX_COLOR_REGEX_ALPHA =
   /^#(?:(?:[\da-fA-F]{3}){1,2}|(?:[\da-fA-F]{4}){1,2})$/;
@@ -105,16 +106,16 @@ const ColorPicker = ({
 
           <View
             style={{
-              paddingHorizontal: 12
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
             <View
               style={{
                 flexDirection: "row",
                 alignItems: "center",
-                paddingTop: 10,
-                columnGap: 10,
-                marginBottom: 10
+                paddingTop: DefaultAppStyles.GAP_VERTICAL,
+                columnGap: DefaultAppStyles.GAP_VERTICAL,
+                marginBottom: DefaultAppStyles.GAP_VERTICAL
               }}
             >
               <Input
@@ -155,7 +156,7 @@ const ColorPicker = ({
             <Button
               title={strings.addColor()}
               style={{
-                marginBottom: 10
+                marginBottom: DefaultAppStyles.GAP_VERTICAL
               }}
               onPress={async () => {
                 if (!selectedColor)

apps/mobile/app/components/dialogs/jump-to-section/index.tsx

@@ -39,10 +39,11 @@ import {
   eOpenJumpToDialog,
   eScrollEvent
 } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import BaseDialog from "../../dialog/base-dialog";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const JumpToSectionDialog = () => {
   const scrollRef = useRef<RefObject<FlatList>>();
@@ -152,13 +153,13 @@ const JumpToSectionDialog = () => {
           maxHeight: "65%",
           borderRadius: 10,
           alignSelf: "center",
-          padding: 10,
+          padding: DefaultAppStyles.GAP_SMALL,
           paddingTop: 30
         }}
       >
         {loading ? (
           <ActivityIndicator
-            size={SIZE.lg}
+            size={AppFontSize.lg}
             color={colors.primary.accent}
             style={{
               marginBottom: 20
@@ -188,15 +189,15 @@ const JumpToSectionDialog = () => {
                     style={{
                       minWidth: "20%",
                       width: null,
-                      paddingHorizontal: 12,
+                      paddingHorizontal: DefaultAppStyles.GAP,
                       margin: 5,
                       borderRadius: 100,
-                      height: 30,
+                      paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
                       marginVertical: 10
                     }}
                   >
                     <Paragraph
-                      size={SIZE.sm}
+                      size={AppFontSize.sm}
                       color={
                         currentIndex === index
                           ? colors.static.white

apps/mobile/app/components/dialogs/loading/index.tsx

@@ -28,6 +28,7 @@ import {
 } from "../../../services/event-manager";
 import { useState } from "react";
 import { eCloseLoading, eOpenLoading } from "../../../utils/events";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const LoadingDialog = () => {
   const { colors } = useThemeColors();
@@ -67,7 +68,7 @@ export const LoadingDialog = () => {
           style={{
             flexDirection: "row",
             width: 100,
-            marginTop: 15
+            marginTop: DefaultAppStyles.GAP
           }}
         >
           <ProgressBarComponent

apps/mobile/app/components/dialogs/pdf-preview/index.js

@@ -19,10 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Dimensions, TextInput, View } from "react-native";
-import {
-  addOrientationListener,
-  removeOrientationListener
-} from "react-native-orientation";
+import Orientation from "react-native-orientation-locker";
 import Pdf from "react-native-pdf";
 import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
 import downloadAttachment from "../../../common/filesystem/download-attachment";
@@ -34,7 +31,7 @@ import {
   eUnSubscribeEvent
 } from "../../../services/event-manager";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Dialog } from "../../dialog";
 import BaseDialog from "../../dialog/base-dialog";
 import { presentDialog } from "../../dialog/functions";
@@ -46,6 +43,7 @@ import { sleep } from "../../../utils/time";
 import { MMKV } from "../../../common/database/mmkv";
 import { deleteCacheFileByPath } from "../../../common/filesystem/io";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const WIN_WIDTH = Dimensions.get("window").width;
 const WIN_HEIGHT = Dimensions.get("window").height;
@@ -98,9 +96,9 @@ const PDFPreview = () => {
   };
 
   useEffect(() => {
-    addOrientationListener(onOrientationChange);
+    Orientation.addDeviceOrientationListener(onOrientationChange);
     return () => {
-      removeOrientationListener(onOrientationChange);
+      Orientation.removeDeviceOrientationListener(onOrientationChange);
     };
   }, []);
 
@@ -184,7 +182,7 @@ const PDFPreview = () => {
               />
               <Paragraph
                 style={{
-                  marginTop: 10
+                  marginTop: DefaultAppStyles.GAP_VERTICAL
                 }}
                 color={colors.static.white}
               >
@@ -200,7 +198,7 @@ const PDFPreview = () => {
                   marginTop: insets.top,
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  paddingHorizontal: 12,
+                  paddingHorizontal: DefaultAppStyles.GAP,
                   paddingLeft: 6
                 }}
               >
@@ -216,7 +214,7 @@ const PDFPreview = () => {
                     style={{
                       marginRight: 12
                     }}
-                    size={SIZE.xxl}
+                    size={AppFontSize.xxl}
                   />
                 </View>
 

apps/mobile/app/components/dialogs/progress/index.tsx

@@ -21,7 +21,7 @@ import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect } from "react";
 import { View } from "react-native";
 import { eSendEvent, eSubscribeEvent } from "../../../services/event-manager";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Dialog } from "../../dialog";
 import BaseDialog from "../../dialog/base-dialog";
 import DialogContainer from "../../dialog/dialog-container";
@@ -29,6 +29,7 @@ import { Button } from "../../ui/button";
 import { ProgressBarComponent } from "../../ui/svg/lazy";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export type ProgressOptions = {
   progress?: string;
@@ -111,7 +112,7 @@ export default function Progress() {
     >
       <DialogContainer
         style={{
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           paddingBottom: 10
         }}
         noBorder={data?.fillBackground ? true : false}
@@ -121,7 +122,7 @@ export default function Progress() {
           style={{
             justifyContent: "center",
             alignItems: "center",
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             gap: 10,
             paddingBottom: 20
           }}
@@ -131,7 +132,7 @@ export default function Progress() {
               textAlign: "center"
             }}
             color={colors.primary.paragraph}
-            size={SIZE.lg}
+            size={AppFontSize.lg}
           >
             {data?.title}
           </Heading>
@@ -148,7 +149,7 @@ export default function Progress() {
             style={{
               flexDirection: "row",
               width: 100,
-              paddingVertical: 12
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <ProgressBarComponent

apps/mobile/app/components/dialogs/result/index.js

@@ -27,13 +27,14 @@ import {
 import { useThemeColors } from "@notesnook/theme";
 import { getElevationStyle } from "../../../utils/elevation";
 import { eCloseResultDialog, eOpenResultDialog } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import BaseDialog from "../../dialog/base-dialog";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { ProFeatures } from "./pro-features";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const ResultDialog = () => {
   const { colors } = useThemeColors();
@@ -78,15 +79,15 @@ const ResultDialog = () => {
         }}
       >
         <Heading
-          size={SIZE.lg}
+          size={AppFontSize.lg}
           textBreakStrategy="balanced"
           style={{
             alignSelf: "center",
             textAlign: "center",
-            marginTop: 10,
+            marginTop: DefaultAppStyles.GAP_VERTICAL,
             maxWidth: "100%",
-            marginBottom: 10,
-            paddingHorizontal: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           {dialogData.title}
@@ -94,12 +95,12 @@ const ResultDialog = () => {
 
         <Paragraph
           color={colors.secondary.paragraph}
-          size={SIZE.md}
+          size={AppFontSize.md}
           style={{
             alignSelf: "center",
             textAlign: "center",
             maxWidth: "80%",
-            lineHeight: SIZE.sm + 5
+            lineHeight: AppFontSize.sm + 5
           }}
         >
           {dialogData.paragraph}
@@ -109,7 +110,7 @@ const ResultDialog = () => {
 
         <View
           style={{
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             alignItems: "center",
             width: "100%"
           }}
@@ -124,17 +125,17 @@ const ResultDialog = () => {
             width: "100%",
             borderBottomRightRadius: 10,
             borderBottomLeftRadius: 10,
-            paddingVertical: 10
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           <Button
             title={dialogData.button}
             width={null}
             style={{
-              paddingHorizontal: 12
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
             onPress={close}
-            fontSize={SIZE.md + 2}
+            fontSize={AppFontSize.md + 2}
           />
         </View>
       </View>

apps/mobile/app/components/dialogs/result/pro-features.js

@@ -27,9 +27,10 @@ import {
   eCloseResultDialog,
   eOpenPremiumDialog
 } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 export const ProFeatures = ({ count = 6 }) => {
   const { colors } = useThemeColors();
 
@@ -67,13 +68,17 @@ export const ProFeatures = ({ count = 6 }) => {
               width: "100%",
               height: 40,
               paddingHorizontal: 0,
-              marginBottom: 10,
+              marginBottom: DefaultAppStyles.GAP_VERTICAL,
               alignItems: "center",
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               justifyContent: "flex-start"
             }}
           >
-            <Icon size={SIZE.lg} color={colors.primary.accent} name="check" />
+            <Icon
+              size={AppFontSize.lg}
+              color={colors.primary.accent}
+              name="check"
+            />
             <Paragraph style={{ marginLeft: 5, flexShrink: 1 }}>
               {item.content}
             </Paragraph>
@@ -86,7 +91,7 @@ export const ProFeatures = ({ count = 6 }) => {
           await sleep(300);
           eSendEvent(eOpenPremiumDialog);
         }}
-        size={SIZE.xs}
+        size={AppFontSize.xs}
         style={{
           textDecorationLine: "underline",
           color: colors.secondary.paragraph

apps/mobile/app/components/dialogs/vault/index.js

@@ -41,7 +41,7 @@ import {
   eUpdateNoteInEditor
 } from "../../../utils/events";
 import { deleteItems } from "../../../utils/functions";
-import { tabBarRef } from "../../../utils/global-refs";
+import { fluidTabsRef } from "../../../utils/global-refs";
 import { convertNoteToText } from "../../../utils/note-to-text";
 import { sleep } from "../../../utils/time";
 import BaseDialog from "../../dialog/base-dialog";
@@ -53,6 +53,7 @@ import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export class VaultDialog extends Component {
   constructor(props) {
@@ -553,7 +554,7 @@ export class VaultDialog extends Component {
         item: note
       });
       if (!DDS.isTab) {
-        tabBarRef.current?.goToPage(1);
+        fluidTabsRef.current?.goToPage("editor");
       }
     });
   }
@@ -677,7 +678,7 @@ export class VaultDialog extends Component {
 
           <View
             style={{
-              paddingHorizontal: 12
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
             {(novault ||
@@ -750,7 +751,7 @@ export class VaultDialog extends Component {
                     : "checkbox-blank-circle-outline"
                 }
                 style={{
-                  marginTop: 10
+                  marginTop: DefaultAppStyles.GAP_VERTICAL
                 }}
                 width="100%"
                 title={strings.deleteAllNotes()}
@@ -847,7 +848,7 @@ export class VaultDialog extends Component {
                   });
                 }}
                 style={{
-                  marginTop: 10
+                  marginTop: DefaultAppStyles.GAP_VERTICAL
                 }}
                 icon="fingerprint"
                 width="100%"

apps/mobile/app/components/fluid-panels/index.tsx

@@ -37,12 +37,13 @@ import Animated, {
   WithSpringConfig,
   withTiming
 } from "react-native-reanimated";
+import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
 import { getAppState } from "../../screens/editor/tiptap/utils";
 import { eSendEvent } from "../../services/event-manager";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { eClearEditor } from "../../utils/events";
 import { useSideBarDraggingStore } from "../side-menu/dragging-store";
-import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
+import { rootNavigatorRef } from "../../utils/global-refs";
 
 interface TabProps extends ViewProps {
   dimensions: { width: number; height: number };
@@ -53,20 +54,22 @@ interface TabProps extends ViewProps {
   onDrawerStateChange: (state: boolean) => void;
 }
 
+type FluidTabPage = "home" | "editor";
+
 export interface TabsRef {
-  goToPage: (page: number, animated?: boolean) => void;
+  goToPage: (page: FluidTabPage, animated?: boolean) => void;
   goToIndex: (index: number, animated?: boolean) => 0 | undefined;
   unlock: () => boolean;
   lock: () => boolean;
   openDrawer: (animated?: boolean) => void;
   closeDrawer: (animated?: boolean) => void;
-  page: () => number;
+  page: () => FluidTabPage;
   setScrollEnabled: () => true;
   isDrawerOpen: () => boolean;
   node: RefObject<Animated.View>;
 }
 
-export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
+export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
   {
     children,
     dimensions,
@@ -81,9 +84,6 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
   const appState = useMemo(() => getAppState(), []);
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const fullscreen = useSettingStore((state) => state.fullscreen);
-  const introCompleted = useSettingStore(
-    (state) => state.settings.introCompleted
-  );
   const translateX = useSharedValue(
     widths
       ? appState &&
@@ -118,26 +118,40 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
   const isIPhone = Platform.OS === "ios";
 
   useEffect(() => {
-    if (introCompleted) {
-      if (deviceMode === "tablet" || fullscreen) {
-        translateX.value = 0;
-      } else {
-        if (prevWidths.current?.sidebar !== widths.sidebar) {
-          translateX.value =
-            appState && appState?.movedAway === false
-              ? editorPosition
-              : widths.sidebar;
-          if (translateX.value === editorPosition) {
-            onChangeTab?.({ i: 2, from: 1 });
-          }
+    if (deviceMode === "tablet" || fullscreen) {
+      translateX.value = 0;
+    } else {
+      if (prevWidths.current?.sidebar !== widths.sidebar) {
+        translateX.value =
+          appState && appState?.movedAway === false
+            ? editorPosition
+            : widths.sidebar;
+        if (translateX.value === editorPosition) {
+          onChangeTab?.({ i: 2, from: 1 });
         }
       }
-      isLoaded.current = true;
-      prevWidths.current = widths;
     }
+    isLoaded.current = true;
+    prevWidths.current = widths;
+  }, [
+    deviceMode,
+    widths,
+    fullscreen,
+    translateX,
+    editorPosition,
+    appState,
+    onChangeTab
+  ]);
 
+  useEffect(() => {
     const sub = BackHandler.addEventListener("hardwareBackPress", () => {
-      if (isDrawerOpen.value) {
+      if (isDrawerOpen.value && !forcedLock.value) {
+        const routeNames = rootNavigatorRef.current?.getState().routes;
+        if (routeNames) {
+          const currentRoute = routeNames[routeNames.length - 1].name;
+          if (currentRoute !== "FluidPanelsView") return false;
+        }
+
         translateX.value = withTiming(homePosition);
         onDrawerStateChange(false);
         isDrawerOpen.value = false;
@@ -149,34 +163,28 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
       sub && sub.remove();
     };
   }, [
-    introCompleted,
-    deviceMode,
-    widths,
-    fullscreen,
-    translateX,
-    isDrawerOpen,
+    forcedLock.value,
     homePosition,
+    isDrawerOpen,
     onDrawerStateChange,
-    editorPosition,
-    appState
+    translateX
   ]);
 
   useImperativeHandle(
     ref,
     (): TabsRef => ({
-      goToPage: (page: number, animated = true) => {
+      goToPage: (page: FluidTabPage, animated = true) => {
         if (deviceMode === "tablet") {
           translateX.value = animated ? withTiming(0) : 0;
           return;
         }
-        page = page + 1;
-        if (page === 1) {
+        if (page === "home") {
           onDrawerStateChange(false);
           translateX.value = !animated
             ? homePosition
             : withTiming(homePosition);
           currentTab.value = 1;
-        } else if (page === 2) {
+        } else if (page === "editor") {
           onDrawerStateChange(false);
           translateX.value = !animated
             ? editorPosition
@@ -242,7 +250,7 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
         onDrawerStateChange(false);
         isDrawerOpen.value = false;
       },
-      page: () => currentTab.value,
+      page: () => (currentTab.value === 1 ? "home" : "editor"),
       setScrollEnabled: () => true,
       node: node
     }),
@@ -294,8 +302,8 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
   const gesture = Gesture.Pan()
     .maxPointers(1)
     .enabled(enabled && !disabled)
-    .activeOffsetX([-5, 5])
-    .failOffsetY([-15, 15])
+    .activeOffsetX([-10, 10])
+    .failOffsetY([-10, 10])
     .onBegin((event) => {
       locked.value = false;
       gestureStartValue.value = {

apps/mobile/app/components/header/index.tsx

@@ -17,60 +17,52 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useCallback, useEffect, useState } from "react";
-import { Platform, StyleSheet, View } from "react-native";
-import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
+import { View } from "react-native";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import useNavigationStore, {
-  RouteName
-} from "../../stores/use-navigation-store";
+import { RouteName } from "../../stores/use-navigation-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { eScrollEvent } from "../../utils/events";
+import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
+import { IconButtonProps } from "../ui/icon-button";
+import { Pressable } from "../ui/pressable";
+import Heading from "../ui/typography/heading";
+import Paragraph from "../ui/typography/paragraph";
 import { LeftMenus } from "./left-menus";
 import { RightMenus } from "./right-menus";
-import { Title } from "./title";
-
-type HeaderRightButton = {
-  title: string;
-  onPress: () => void;
-};
 
 export const Header = ({
   renderedInRoute,
   onLeftMenuButtonPress,
   title,
-  titleHiddenOnRender,
-  headerRightButtons,
   id,
-  accentColor,
-  isBeta,
   canGoBack,
-  onPressDefaultRightButton,
   hasSearch,
-  onSearch
+  onSearch,
+  rightButton
 }: {
   onLeftMenuButtonPress?: () => void;
   renderedInRoute?: RouteName;
   id?: string;
   title: string;
-  headerRightButtons?: HeaderRightButton[];
-  titleHiddenOnRender?: boolean;
-  accentColor?: string;
-  isBeta?: boolean;
   canGoBack?: boolean;
   onPressDefaultRightButton?: () => void;
   hasSearch?: boolean;
   onSearch?: () => void;
+  rightButton?: IconButtonProps;
 }) => {
   const { colors } = useThemeColors();
-  const insets = useGlobalSafeAreaInsets();
   const [borderHidden, setBorderHidden] = useState(true);
-  const selectionMode = useSelectionStore((state) => state.selectionMode);
-  const isFocused = useNavigationStore((state) => state.focusedRouteId === id);
+  const [selectedItemsList, selectionMode] = useSelectionStore((state) => [
+    state.selectedItemsList,
+    state.selectionMode
+  ]);
 
   const onScroll = useCallback(
     (data: { x: number; y: number; id?: string; route: string }) => {
@@ -93,88 +85,48 @@ export const Header = ({
     };
   }, [borderHidden, onScroll]);
 
-  return selectionMode && isFocused ? null : (
-    <>
-      <View
-        style={[
-          styles.container,
-          {
-            marginTop: Platform.OS === "android" ? insets.top : null,
-            backgroundColor: colors.primary.background,
-            overflow: "hidden",
-            borderBottomWidth: 1,
-            borderBottomColor: borderHidden
-              ? "transparent"
-              : colors.secondary.background,
-            justifyContent: "space-between"
-          }
-        ]}
-      >
-        <>
-          <View style={styles.leftBtnContainer}>
-            <LeftMenus
-              canGoBack={canGoBack}
-              onLeftButtonPress={onLeftMenuButtonPress}
-            />
+  const HeaderWrapper = hasSearch ? Pressable : View;
 
-            <Title
-              isHiddenOnRender={titleHiddenOnRender}
-              renderedInRoute={renderedInRoute}
-              id={id}
-              accentColor={accentColor}
-              title={title}
-              isBeta={isBeta}
-            />
-          </View>
-          <RightMenus
-            renderedInRoute={renderedInRoute}
-            id={id}
-            headerRightButtons={headerRightButtons}
-            onPressDefaultRightButton={onPressDefaultRightButton}
-            search={hasSearch}
-            onSearch={onSearch}
-          />
-        </>
-      </View>
-    </>
+  return (
+    <View
+      style={{
+        paddingHorizontal: DefaultAppStyles.GAP
+      }}
+    >
+      <HeaderWrapper
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          marginTop: DefaultAppStyles.GAP_SMALL,
+          borderRadius: 10,
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL - 2,
+          borderWidth: hasSearch ? 1 : 0,
+          borderColor: colors.primary.border,
+          paddingHorizontal: !hasSearch ? 0 : DefaultAppStyles.GAP_SMALL,
+          alignItems: "center"
+        }}
+        testID="search-header"
+        onPress={() => {
+          onSearch?.();
+        }}
+      >
+        <LeftMenus
+          canGoBack={canGoBack}
+          onLeftButtonPress={onLeftMenuButtonPress}
+        />
+
+        {hasSearch ? (
+          <Paragraph>
+            {selectionMode
+              ? `${selectedItemsList.length} selected`
+              : strings.searchInRoute(title)}
+          </Paragraph>
+        ) : (
+          <Heading size={AppFontSize.lg}>{title}</Heading>
+        )}
+
+        <RightMenus rightButton={rightButton} />
+      </HeaderWrapper>
+    </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    zIndex: 11,
-    height: 50,
-    maxHeight: 50,
-    justifyContent: "center",
-    alignItems: "center",
-    paddingHorizontal: 12,
-    width: "100%"
-  },
-  leftBtnContainer: {
-    flexDirection: "row",
-    justifyContent: "flex-start",
-    alignItems: "center",
-    flexShrink: 1
-  },
-  leftBtn: {
-    justifyContent: "center",
-    alignItems: "center",
-    height: 40,
-    width: 40,
-    borderRadius: 100,
-    marginLeft: -5,
-    marginRight: 25
-  },
-  rightBtnContainer: {
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  rightBtn: {
-    justifyContent: "center",
-    alignItems: "flex-end",
-    height: 40,
-    width: 40,
-    paddingRight: 0
-  }
-});

apps/mobile/app/components/header/left-menus.tsx

@@ -20,10 +20,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { notesnook } from "../../../e2e/test.ids";
-import { DDS } from "../../services/device-detection";
 import Navigation from "../../services/navigation";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { tabBarRef } from "../../utils/global-refs";
+import { fluidTabsRef } from "../../utils/global-refs";
 import { IconButton } from "../ui/icon-button";
 
 export const LeftMenus = ({
@@ -41,7 +40,7 @@ export const LeftMenus = ({
     if (onLeftButtonPress) return onLeftButtonPress();
 
     if (!canGoBack) {
-      if (tabBarRef.current?.isDrawerOpen()) {
+      if (fluidTabsRef.current?.isDrawerOpen()) {
         Navigation.closeDrawer();
       } else {
         Navigation.openDrawer();
@@ -54,23 +53,14 @@ export const LeftMenus = ({
   return isTablet && !canGoBack ? null : (
     <IconButton
       testID={notesnook.ids.default.header.buttons.left}
-      style={{
-        justifyContent: "center",
-        alignItems: "center",
-        height: 40,
-        width: 40,
-        borderRadius: 100,
-        marginRight: DDS.isLargeTablet() ? 10 : 7
-      }}
       left={40}
       top={40}
-      right={DDS.isLargeTablet() ? 10 : 10}
       onPress={_onLeftButtonPress}
       onLongPress={() => {
         Navigation.popToTop();
       }}
       name={canGoBack ? "arrow-left" : "menu"}
-      color={colors.primary.paragraph}
+      color={colors.primary.icon}
     />
   );
 };

apps/mobile/app/components/header/right-menus.tsx

@@ -17,127 +17,30 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useRef } from "react";
-import { Platform, StyleSheet, View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
-import { Menu } from "react-native-material-menu";
-import { notesnook } from "../../../e2e/test.ids";
-import {
-  HeaderRightButton,
-  RouteName
-} from "../../stores/use-navigation-store";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { SIZE } from "../../utils/size";
-import { sleep } from "../../utils/time";
-import { Button } from "../ui/button";
-import { IconButton } from "../ui/icon-button";
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { IconButton, IconButtonProps } from "../ui/icon-button";
 
 export const RightMenus = ({
-  headerRightButtons,
-  renderedInRoute,
-  id,
-  onPressDefaultRightButton,
-  search,
-  onSearch
+  rightButton
 }: {
-  headerRightButtons?: HeaderRightButton[];
-  renderedInRoute?: RouteName;
-  id?: string;
-  onPressDefaultRightButton?: () => void;
-  search?: boolean;
-  onSearch?: () => void;
+  rightButton?: IconButtonProps;
 }) => {
   const { colors } = useThemeColors();
-  const { colors: contextMenuColors } = useThemeColors("contextMenu");
-  const deviceMode = useSettingStore((state) => state.deviceMode);
-  const menuRef = useRef<Menu>(null);
 
   return (
     <View style={styles.rightBtnContainer}>
-      {search ? (
-        <IconButton
-          onPress={onSearch}
-          testID="icon-search"
-          name="magnify"
-          color={colors.primary.paragraph}
-          style={styles.rightBtn}
-        />
-      ) : null}
-
-      {deviceMode !== "mobile" ? (
-        <Button
-          onPress={onPressDefaultRightButton}
-          testID={notesnook.ids.default.addBtn}
-          icon={renderedInRoute === "Trash" ? "delete" : "plus"}
-          iconSize={SIZE.xl}
-          type="accent"
-          hitSlop={{
-            top: 10,
-            right: 10,
-            bottom: 10,
-            left: 0
-          }}
+      {rightButton ? (
+        <IconButton {...rightButton} color={colors.primary.icon} />
+      ) : (
+        <View
           style={{
-            marginLeft: 10,
-            width: 32,
-            height: 32,
-            borderRadius: 100,
-            paddingHorizontal: 0,
-            borderWidth: 1,
-            borderColor: colors.primary.accent
+            width: 40,
+            height: 40
           }}
         />
-      ) : null}
-
-      {headerRightButtons && headerRightButtons.length > 0 ? (
-        <Menu
-          ref={menuRef}
-          animationDuration={200}
-          style={{
-            borderRadius: 5,
-            backgroundColor: contextMenuColors.primary.background,
-            marginTop: 35
-          }}
-          onRequestClose={() => {
-            //@ts-ignore
-            menuRef.current?.hide();
-          }}
-          anchor={
-            <IconButton
-              onPress={() => {
-                //@ts-ignore
-                menuRef.current?.show();
-              }}
-              name="dots-vertical"
-              color={colors.primary.paragraph}
-              style={styles.rightBtn}
-            />
-          }
-        >
-          {headerRightButtons.map((item) => (
-            <Button
-              style={{
-                justifyContent: "flex-start",
-                borderRadius: 0,
-                alignSelf: "flex-start",
-                width: "100%"
-              }}
-              type="plain"
-              buttonType={{
-                text: contextMenuColors.primary.paragraph
-              }}
-              key={item.title}
-              title={item.title}
-              onPress={async () => {
-                //@ts-ignore
-                menuRef.current?.hide();
-                if (Platform.OS === "ios") await sleep(300);
-                item.onPress();
-              }}
-            />
-          ))}
-        </Menu>
-      ) : null}
+      )}
     </View>
   );
 };
@@ -149,10 +52,6 @@ const styles = StyleSheet.create({
   },
   rightBtn: {
     justifyContent: "center",
-    alignItems: "center",
-    height: 40,
-    width: 40,
-    marginLeft: 10,
-    paddingRight: 0
+    alignItems: "center"
   }
 });

apps/mobile/app/components/header/title.tsx

@@ -25,7 +25,7 @@ import {
   eUnSubscribeEvent
 } from "../../services/event-manager";
 import { eScrollEvent } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import Tag from "../ui/tag";
 import Heading from "../ui/typography/heading";
 
@@ -75,7 +75,7 @@ export const Title = ({
       {!visible ? (
         <Heading
           numberOfLines={1}
-          size={SIZE.lg}
+          size={AppFontSize.lg}
           style={{
             flexWrap: "wrap",
             marginTop: Platform.OS === "ios" ? -1 : 0
@@ -83,7 +83,7 @@ export const Title = ({
           color={accentColor || colors.primary.heading}
         >
           {isTag ? (
-            <Heading size={SIZE.xl} color={colors.primary.accent}>
+            <Heading size={AppFontSize.xl} color={colors.primary.accent}>
               #
             </Heading>
           ) : null}

apps/mobile/app/components/image-preview/index.tsx

@@ -38,6 +38,7 @@ import RNFetchBlob from "react-native-blob-util";
 import Share from "react-native-share";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { useSettingStore } from "../../stores/use-setting-store";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const ImagePreview = () => {
   const { colors } = useThemeColors("dialog");
@@ -124,7 +125,7 @@ const ImagePreview = () => {
             justifyContent: "flex-end",
             alignItems: "center",
             height: 50,
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             gap: 10
           }}
         >

apps/mobile/app/components/intro/index.tsx

@@ -23,31 +23,28 @@ import React from "react";
 import { Linking, ScrollView, useWindowDimensions, View } from "react-native";
 import { SwiperFlatList } from "react-native-swiper-flatlist";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
-import { eSendEvent } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
-import SettingsService from "../../services/settings";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { getElevationStyle } from "../../utils/elevation";
-import { eOpenLoginDialog } from "../../utils/events";
-import { SIZE } from "../../utils/size";
-import { AuthMode } from "../auth";
+import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import SettingsService from "../../services/settings";
+import { AuthMode } from "../auth/common";
+import { DefaultAppStyles } from "../../utils/styles";
 
-const Intro = ({ navigation }) => {
+const Intro = () => {
   const { colors } = useThemeColors();
   const { width, height } = useWindowDimensions();
-  const deviceMode = useSettingStore((state) => state.deviceMode);
   const insets = useGlobalSafeAreaInsets();
+  const isTablet = width > 600;
+
   const renderItem = React.useCallback(
-    ({ item }) => (
+    ({ item }: { item: (typeof strings.introData)[0] }) => (
       <View
         style={{
           justifyContent: "center",
-          width: deviceMode !== "mobile" ? width / 2 : width,
-          paddingHorizontal:
-            deviceMode !== "mobile" ? (width / 2) * 0.05 : width * 0.05
+          width: isTablet ? width / 2 : width,
+          paddingHorizontal: isTablet ? (width / 2) * 0.05 : width * 0.05
         }}
       >
         <View
@@ -76,7 +73,7 @@ const Intro = ({ navigation }) => {
         </View>
         <View
           style={{
-            marginTop: 10,
+            marginTop: DefaultAppStyles.GAP_VERTICAL,
             maxWidth: "90%",
             width: "100%"
           }}
@@ -88,21 +85,21 @@ const Intro = ({ navigation }) => {
                 marginBottom: 5
               }}
               extraBold
-              size={SIZE.xxl}
+              size={AppFontSize.xxl}
             >
               {heading()}
             </Heading>
           ))}
 
           {item.body ? (
-            <Paragraph size={SIZE.sm}>{item.body()}</Paragraph>
+            <Paragraph size={AppFontSize.sm}>{item.body()}</Paragraph>
           ) : null}
 
           {item.tesimonial ? (
             <Paragraph
               style={{
                 fontStyle: "italic",
-                fontSize: SIZE.lg
+                fontSize: AppFontSize.lg
               }}
               onPress={() => {
                 Linking.openURL(item.link);
@@ -114,31 +111,37 @@ const Intro = ({ navigation }) => {
         </View>
       </View>
     ),
-    [colors.primary.accent, colors.secondary.background, deviceMode, width]
+    [colors.primary.accent, colors.secondary.background, isTablet, width]
   );
 
   return (
     <ScrollView
       testID="notesnook.splashscreen"
       style={{
-        width: "100%"
+        width: "100%",
+        backgroundColor: colors.primary.background
       }}
     >
       <View
-        style={{
-          width: deviceMode !== "mobile" ? width / 2 : "100%",
-          backgroundColor: colors.secondary.background,
-          borderBottomWidth: 1,
-          borderBottomColor: colors.primary.border,
-          alignSelf: deviceMode !== "mobile" ? "center" : undefined,
-          borderWidth: deviceMode !== "mobile" ? 1 : null,
-          borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
-          borderRadius: deviceMode !== "mobile" ? 20 : null,
-          marginTop: deviceMode !== "mobile" ? 50 : null,
-          paddingTop: insets.top + 10,
-          paddingBottom: insets.top + 10,
-          minHeight: height * 0.7 - (insets.top + insets.bottom)
-        }}
+        style={[
+          {
+            width: "100%",
+            backgroundColor: colors.secondary.background,
+            borderBottomWidth: 1,
+            borderBottomColor: colors.primary.border,
+            paddingTop: insets.top + 10,
+            paddingBottom: insets.top + 10,
+            minHeight: height * 0.7 - (insets.top + insets.bottom)
+          },
+          isTablet && {
+            width: width / 2,
+            alignSelf: "center",
+            borderWidth: 1,
+            borderColor: colors.primary.border,
+            borderRadius: 20,
+            marginTop: 50
+          }
+        ]}
       >
         <SwiperFlatList
           autoplay
@@ -170,23 +173,12 @@ const Intro = ({ navigation }) => {
         <Button
           width={250}
           onPress={async () => {
-            eSendEvent(eOpenLoginDialog, AuthMode.welcomeSignup);
-            setTimeout(() => {
-              SettingsService.set({
-                introCompleted: true
-              });
-              Navigation.replace("Notes", {
-                canGoBack: false
-              });
-            }, 1000);
+            SettingsService.set({ introCompleted: true });
+            Navigation.push("Auth", {
+              mode: AuthMode.welcomeSignup
+            });
           }}
-          style={{
-            paddingHorizontal: 24,
-            alignSelf: "center",
-            ...getElevationStyle(5),
-            borderRadius: 100
-          }}
-          fontSize={SIZE.md}
+          fontSize={AppFontSize.md}
           type="accent"
           title={strings.getStarted()}
         />

apps/mobile/app/components/list-items/headers/header.tsx

@@ -24,12 +24,13 @@ import { useMessageStore } from "../../../stores/use-message-store";
 import { useSelectionStore } from "../../../stores/use-selection-store";
 import { Announcement } from "../../announcements/announcement";
 import { Card } from "../../list/card";
+import { RouteParams } from "../../../stores/use-navigation-store";
 
 export type ListHeaderProps = {
   noAnnouncement?: boolean;
   color?: string;
   messageCard?: boolean;
-  screen?: string;
+  screen?: keyof RouteParams;
   shouldShow?: boolean;
 };
 
@@ -50,19 +51,11 @@ export const Header = React.memo(
         {announcements.length !== 0 && !noAnnouncement ? (
           <Announcement color={color || colors.primary.accent} />
         ) : (screen as any) === "Search" ? null : !shouldShow ? (
-          <View
-            style={{
-              marginBottom: 5,
-              padding: 0,
-              width: "100%",
-              justifyContent: "center",
-              alignItems: "center"
-            }}
-          >
+          <>
             {messageCard ? (
               <Card color={color || colors.primary.accent} />
             ) : null}
-          </View>
+          </>
         ) : null}
       </>
     );

apps/mobile/app/components/list-items/headers/notebook-header.tsx

@@ -17,140 +17,115 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { getFormattedDate } from "@notesnook/common";
 import { Notebook } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
-import React, { useState } from "react";
+import React from "react";
 import { View } from "react-native";
-import { db } from "../../../common/database";
-import { ToastManager } from "../../../services/event-manager";
-import { useMenuStore } from "../../../stores/use-menu-store";
-import { SIZE } from "../../../utils/size";
-import { IconButton } from "../../ui/icon-button";
+import { AppFontSize } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
+import AppIcon from "../../ui/AppIcon";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import { getFormattedDate } from "@notesnook/common";
-import { strings } from "@notesnook/intl";
+import { IconButton } from "../../ui/icon-button";
+import { Pressable } from "../../ui/pressable";
+import NotebookScreen from "../../../screens/notebook";
+import { db } from "../../../common/database";
 
 export const NotebookHeader = ({
   notebook,
-  onEditNotebook,
-  totalNotes = 0
+  totalNotes = 0,
+  breadcrumbs
 }: {
   notebook: Notebook;
-  onEditNotebook: () => void;
   totalNotes: number;
+  breadcrumbs: { id: string; title: string }[];
 }) => {
   const { colors } = useThemeColors();
-  const [isPinnedToMenu, setIsPinnedToMenu] = useState(
-    db.shortcuts.exists(notebook.id)
-  );
-  const setMenuPins = useMenuStore((state) => state.setMenuPins);
-
-  const onPinNotebook = async () => {
-    try {
-      if (isPinnedToMenu) {
-        await db.shortcuts.remove(notebook.id);
-      } else {
-        await db.shortcuts.add({
-          item: {
-            id: notebook.id,
-            type: "notebook"
-          }
-        });
-        ToastManager.show({
-          heading: strings.shortcutCreated(),
-          type: "success"
-        });
-      }
-      setIsPinnedToMenu(db.shortcuts.exists(notebook.id));
-      setMenuPins();
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
   return (
     <View
       style={{
-        marginBottom: 5,
-        padding: 0,
-        width: "100%",
-        paddingVertical: 15,
-        paddingHorizontal: 12,
-        alignSelf: "center",
-        borderRadius: 10,
-        paddingTop: 25
+        paddingHorizontal: DefaultAppStyles.GAP,
+        marginTop: DefaultAppStyles.GAP,
+        backgroundColor: colors.secondary.background
       }}
     >
-      <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
-        {getFormattedDate(notebook.dateModified, "date-time")}
-      </Paragraph>
       <View
         style={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center"
+          width: "100%",
+          gap: DefaultAppStyles.GAP_VERTICAL,
+          paddingVertical: DefaultAppStyles.GAP
         }}
       >
-        <Heading
-          style={{
-            flexShrink: 1
-          }}
-          size={SIZE.lg}
-        >
-          {notebook.title}
-        </Heading>
+        {breadcrumbs && breadcrumbs.length > 0 ? (
+          <View
+            style={{
+              width: "100%",
+              flexDirection: "row",
+              alignItems: "center",
+              flexWrap: "wrap",
+              paddingBottom: DefaultAppStyles.GAP_VERTICAL_SMALL
+            }}
+          >
+            {breadcrumbs.map((item, index) => (
+              <Pressable
+                onPress={async () => {
+                  const notebook = await db.notebooks.notebook(item.id);
+                  if (!notebook) return;
+                  NotebookScreen.navigate(notebook, true);
+                }}
+                key={item.id}
+                style={{
+                  width: undefined,
+                  flexDirection: "row",
+                  paddingHorizontal: 0,
+                  alignItems: "center"
+                }}
+              >
+                {index === 0 ? null : (
+                  <IconButton
+                    name="chevron-right"
+                    size={16}
+                    top={0}
+                    left={0}
+                    right={0}
+                    bottom={0}
+                    style={{ width: 20, height: 25 }}
+                  />
+                )}
+                <Paragraph size={AppFontSize.xs}>{item.title}</Paragraph>
+              </Pressable>
+            ))}
+          </View>
+        ) : null}
+
+        <AppIcon name="notebook" size={AppFontSize.xxl} />
+
+        <View>
+          <Heading size={AppFontSize.lg}>{notebook.title}</Heading>
+          {notebook.description ? (
+            <Paragraph size={AppFontSize.sm} color={colors.primary.paragraph}>
+              {notebook.description}
+            </Paragraph>
+          ) : null}
+        </View>
 
         <View
           style={{
-            flexDirection: "row"
+            flexDirection: "row",
+            gap: DefaultAppStyles.GAP_SMALL
           }}
         >
-          <IconButton
-            name={isPinnedToMenu ? "link-variant-off" : "link-variant"}
-            onPress={onPinNotebook}
-            tooltipText={"Create shortcut in side menu"}
-            style={{
-              marginRight: 15,
-              width: 40,
-              height: 40
-            }}
-            type="transparent"
-            color={isPinnedToMenu ? colors.primary.accent : colors.primary.icon}
-            size={SIZE.lg}
-          />
-          <IconButton
-            size={SIZE.lg}
-            onPress={onEditNotebook}
-            tooltipText="Edit this notebook"
-            name="pencil"
-            type="transparent"
-            color={colors.primary.icon}
-            style={{
-              width: 40,
-              height: 40
-            }}
-          />
+          <Paragraph size={AppFontSize.xxs} color={colors.secondary.paragraph}>
+            {strings.notes(totalNotes || 0)}
+          </Paragraph>
+
+          <Paragraph color={colors.secondary.paragraph} size={AppFontSize.xxs}>
+            {getFormattedDate(notebook.dateModified, "date-time")}
+          </Paragraph>
         </View>
       </View>
-
-      {notebook.description ? (
-        <Paragraph size={SIZE.sm} color={colors.primary.paragraph}>
-          {notebook.description}
-        </Paragraph>
-      ) : null}
-
-      <Paragraph
-        style={{
-          marginTop: 10,
-          fontStyle: "italic",
-          fontFamily: undefined
-        }}
-        size={SIZE.xs}
-        color={colors.secondary.paragraph}
-      >
-        {strings.notes(totalNotes || 0)}
-      </Paragraph>
     </View>
   );
 };

apps/mobile/app/components/list-items/headers/section-header.tsx

@@ -21,16 +21,16 @@ import { GroupHeader, GroupOptions, ItemType } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { TouchableOpacity, View, useWindowDimensions } from "react-native";
+import { View } from "react-native";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 import { presentSheet } from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
 import { RouteName } from "../../../stores/use-navigation-store";
-import { getContainerBorder } from "../../../utils/colors";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
 import Sort from "../../sheets/sort";
-import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
+import { Pressable } from "../../ui/pressable";
 import Heading from "../../ui/typography/heading";
 
 type SectionHeaderProps = {
@@ -56,8 +56,6 @@ export const SectionHeader = React.memo<
     onOpenJumpToDialog
   }: SectionHeaderProps) {
     const { colors } = useThemeColors();
-    const { fontScale } = useWindowDimensions();
-    const groupBy = strings.groupByStrings[groupOptions.groupBy]();
     const isCompactModeEnabled = useIsCompactModeEnabled(
       dataType as "note" | "notebook"
     );
@@ -65,104 +63,126 @@ export const SectionHeader = React.memo<
     return (
       <View
         style={{
-          flexDirection: "row",
-          alignItems: "center",
-          width: "95%",
-          justifyContent: "space-between",
-          paddingHorizontal: 12,
-          height: 35 * fontScale,
-          backgroundColor: colors.secondary.background,
-          alignSelf: "center",
-          borderRadius: 5,
-          marginVertical: 5,
-          ...getContainerBorder(colors.secondary.background, 0.8)
+          width: "100%",
+          paddingHorizontal: DefaultAppStyles.GAP,
+          marginBottom: DefaultAppStyles.GAP_VERTICAL
         }}
       >
-        <TouchableOpacity
-          onPress={() => {
-            onOpenJumpToDialog();
-          }}
-          activeOpacity={0.9}
-          hitSlop={{ top: 10, left: 10, right: 30, bottom: 15 }}
-          style={{
-            height: "100%",
-            justifyContent: "center"
-          }}
-        >
-          <Heading
-            color={color || colors.primary.accent}
-            size={SIZE.sm}
-            style={{
-              alignSelf: "center",
-              textAlignVertical: "center"
-            }}
-          >
-            {!item.title || item.title === "" ? strings.pinned() : item.title}
-          </Heading>
-        </TouchableOpacity>
-
         <View
           style={{
             flexDirection: "row",
-            alignItems: "center"
+            alignItems: "center",
+            width: "100%",
+            alignSelf: "center",
+            justifyContent: "space-between",
+            borderBottomWidth: 1,
+            borderColor: colors.primary.border,
+            paddingBottom: 1,
+            paddingTop:
+              index === 0
+                ? DefaultAppStyles.GAP_VERTICAL
+                : DefaultAppStyles.GAP_VERTICAL_SMALL
           }}
         >
-          {index === 0 ? (
-            <>
-              <Button
-                onPress={() => {
-                  presentSheet({
-                    component: <Sort screen={screen} type={dataType} />
-                  });
-                }}
-                title={groupBy}
-                icon={
-                  groupOptions.sortDirection === "asc"
-                    ? "sort-ascending"
-                    : "sort-descending"
-                }
-                height={25}
-                style={{
-                  borderRadius: 100,
-                  paddingHorizontal: 0,
-                  backgroundColor: "transparent",
-                  marginRight:
-                    dataType === "note" ||
-                    screen === "Notes" ||
-                    dataType === "notebook"
-                      ? 10
-                      : 0
-                }}
-                type="plain"
-                iconPosition="right"
-              />
+          <Pressable
+            onPress={() => {
+              onOpenJumpToDialog();
+            }}
+            hitSlop={{ top: 10, left: 10, right: 30, bottom: 15 }}
+            style={{
+              justifyContent: "flex-start",
+              flexDirection: "row",
+              width: "auto"
+            }}
+          >
+            <Heading
+              size={AppFontSize.xxs}
+              style={{
+                alignSelf: "center",
+                textAlignVertical: "center"
+              }}
+              color={colors.primary.accent}
+            >
+              {!item.title || item.title === ""
+                ? strings.pinned().toUpperCase()
+                : item.title.toUpperCase()}
+            </Heading>
+          </Pressable>
 
-              <IconButton
-                style={{
-                  width: 25,
-                  height: 25
-                }}
-                hidden={
-                  dataType !== "note" &&
-                  dataType !== "notebook" &&
-                  screen !== "Notes"
-                }
-                testID="icon-compact-mode"
-                color={colors.secondary.icon}
-                name={isCompactModeEnabled ? "view-list" : "view-list-outline"}
-                onPress={() => {
-                  SettingsService.set({
-                    [dataType !== "notebook"
-                      ? "notesListMode"
-                      : "notebooksListMode"]: !isCompactModeEnabled
-                      ? "compact"
-                      : "normal"
-                  });
-                }}
-                size={SIZE.lg - 2}
-              />
-            </>
-          ) : null}
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              gap: DefaultAppStyles.GAP_SMALL
+            }}
+          >
+            {index === 0 ? (
+              <>
+                <IconButton
+                  name={
+                    groupOptions.sortDirection === "asc"
+                      ? "sort-ascending"
+                      : "sort-descending"
+                  }
+                  color={colors.secondary.icon}
+                  testID="icon-sort"
+                  onPress={() => {
+                    if (!screen) return;
+                    presentSheet({
+                      component: (
+                        <Sort
+                          screen={screen}
+                          type={dataType}
+                          hideGroupOptions={screen === "Reminders"}
+                        />
+                      )
+                    });
+                  }}
+                  style={{
+                    width: 25,
+                    height: 25
+                  }}
+                  size={AppFontSize.lg - 2}
+                />
+                <IconButton
+                  hidden={
+                    dataType !== "note" &&
+                    dataType !== "notebook" &&
+                    screen !== "Notes"
+                  }
+                  style={{
+                    width: 25,
+                    height: 25
+                  }}
+                  testID="icon-compact-mode"
+                  color={colors.secondary.icon}
+                  name={
+                    isCompactModeEnabled ? "view-list" : "view-list-outline"
+                  }
+                  onPress={() => {
+                    SettingsService.set({
+                      [dataType !== "notebook"
+                        ? "notesListMode"
+                        : "notebooksListMode"]: !isCompactModeEnabled
+                        ? "compact"
+                        : "normal"
+                    });
+                  }}
+                  size={AppFontSize.lg - 2}
+                />
+              </>
+            ) : null}
+
+            {/* <IconButton
+              style={{
+                width: 25,
+                height: 25
+              }}
+              color={colors.secondary.icon}
+              name={"chevron-down"}
+              size={SIZE.lg - 2}
+            /> */}
+          </View>
         </View>
       </View>
     );

apps/mobile/app/components/list-items/note/index.tsx

@@ -29,24 +29,31 @@ import { EntityLevel, decode } from "entities";
 import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { notesnook } from "../../../../e2e/test.ids";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
-import NotebookScreen from "../../../screens/notebook";
-import { TaggedNotes } from "../../../screens/notes/tagged";
 import useNavigationStore from "../../../stores/use-navigation-store";
 import { useRelationStore } from "../../../stores/use-relation-store";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 
+import {
+  getFormattedDate,
+  NotebooksWithDateEdited,
+  TagsWithDateEdited
+} from "@notesnook/common";
+import { strings } from "@notesnook/intl";
+import { notesnook } from "../../../../e2e/test.ids";
+import useIsSelected from "../../../hooks/use-selected";
 import { useTabStore } from "../../../screens/editor/tiptap/use-tab-store";
-import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
+import { useSelectionStore } from "../../../stores/use-selection-store";
+import { DefaultAppStyles } from "../../../utils/styles";
 import { Properties } from "../../properties";
-import { Button } from "../../ui/button";
+import AppIcon from "../../ui/AppIcon";
 import { IconButton } from "../../ui/icon-button";
 import { ReminderTime } from "../../ui/reminder-time";
 import { TimeSince } from "../../ui/time-since";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import { strings } from "@notesnook/intl";
+import dayjs from "dayjs";
+import { useRoute } from "@react-navigation/native";
 
 type NoteItemProps = {
   item: Note | BaseTrashItem<Note>;
@@ -74,6 +81,7 @@ const NoteItem = ({
   locked,
   noOpen = false
 }: NoteItemProps) => {
+  const route = useRoute();
   const isEditingNote = useTabStore(
     (state) =>
       state.tabs.find((t) => t.id === state.currentTab)?.session?.noteId ===
@@ -85,7 +93,8 @@ const NoteItem = ({
   );
   const _update = useRelationStore((state) => state.updater);
   const primaryColors = isEditingNote ? colors.selected : colors.primary;
-
+  const selectionMode = useSelectionStore((state) => state.selectionMode);
+  const [selected] = useIsSelected(item);
   return (
     <>
       <View
@@ -94,69 +103,27 @@ const NoteItem = ({
           flexShrink: 1
         }}
       >
-        {!compactMode ? (
-          <View
+        {compactMode ? null : (
+          <Paragraph
             style={{
-              flexDirection: "row",
-              alignItems: "center",
-              zIndex: 10,
-              elevation: 10,
-              marginBottom: 2.5,
-              flexWrap: "wrap"
+              fontSize: AppFontSize.xxxs,
+              color: colors.secondary.paragraph
             }}
           >
-            {notebooks?.items
-              ?.filter(
-                (item) =>
-                  item.id !== useNavigationStore.getState().focusedRouteId
-              )
-              .map((item) => (
-                <Button
-                  title={
-                    item.title.length > 25
-                      ? item.title.slice(0, 25) + "..."
-                      : item.title
-                  }
-                  tooltipText={item.title}
-                  key={item.id}
-                  height={25}
-                  icon="book-outline"
-                  type="secondary"
-                  fontSize={SIZE.xs}
-                  iconSize={SIZE.sm}
-                  textStyle={{
-                    marginRight: 0
-                  }}
-                  style={{
-                    borderRadius: 5,
-                    marginRight: 5,
-                    paddingHorizontal: 6,
-                    marginBottom: 5
-                  }}
-                  onPress={() => {
-                    NotebookScreen.navigate(item, true);
-                  }}
-                />
-              ))}
-
-            <ReminderTime
-              reminder={reminder}
-              color={color?.colorCode}
-              onPress={() => {
-                Properties.present(reminder);
-              }}
-              style={{
-                height: 25
-              }}
-            />
-          </View>
-        ) : null}
+            {getFormattedDate(
+              date,
+              dayjs(date).isBefore(dayjs().subtract(1, "day").hour(23))
+                ? "date"
+                : "time"
+            )}
+          </Paragraph>
+        )}
 
         {compactMode ? (
           <Paragraph
             numberOfLines={1}
             color={color?.colorCode || primaryColors.heading}
-            size={SIZE.sm}
+            size={AppFontSize.sm}
             style={{
               paddingRight: 10
             }}
@@ -167,7 +134,7 @@ const NoteItem = ({
           <Heading
             numberOfLines={1}
             color={color?.colorCode || primaryColors.heading}
-            size={SIZE.md}
+            size={AppFontSize.sm}
             style={{
               paddingRight: 10
             }}
@@ -197,8 +164,10 @@ const NoteItem = ({
               justifyContent: "flex-start",
               alignItems: "center",
               width: "100%",
-              marginTop: 5,
-              height: SIZE.md + 2
+              marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
+              columnGap: 8,
+              rowGap: 4,
+              flexWrap: "wrap"
             }}
           >
             {!isTrash ? (
@@ -206,10 +175,7 @@ const NoteItem = ({
                 {item.conflicted ? (
                   <Icon
                     name="alert-circle"
-                    style={{
-                      marginRight: 6
-                    }}
-                    size={SIZE.sm}
+                    size={AppFontSize.sm}
                     color={colors.error.accent}
                   />
                 ) : null}
@@ -218,10 +184,7 @@ const NoteItem = ({
                   <Icon
                     testID="sync-off"
                     name="sync-off"
-                    size={SIZE.sm}
-                    style={{
-                      marginRight: 6
-                    }}
+                    size={AppFontSize.sm}
                     color={primaryColors.icon}
                   />
                 ) : null}
@@ -230,41 +193,27 @@ const NoteItem = ({
                   <Icon
                     testID="pencil-lock"
                     name="pencil-lock"
-                    size={SIZE.sm}
-                    style={{
-                      marginRight: 6
-                    }}
+                    size={AppFontSize.sm}
                     color={primaryColors.icon}
                   />
                 ) : null}
 
-                <TimeSince
-                  style={{
-                    fontSize: SIZE.xs,
-                    color: colors.secondary.paragraph,
-                    marginRight: 6
-                  }}
-                  time={date}
-                  updateFrequency={Date.now() - date < 60000 ? 2000 : 60000}
-                />
-
                 {attachmentsCount > 0 ? (
                   <View
                     style={{
                       flexDirection: "row",
                       alignItems: "center",
-                      marginRight: 6,
                       gap: 2
                     }}
                   >
                     <Icon
                       name="attachment"
-                      size={SIZE.sm}
+                      size={AppFontSize.sm}
                       color={primaryColors.icon}
                     />
                     <Paragraph
                       color={colors.secondary.paragraph}
-                      size={SIZE.xs}
+                      size={AppFontSize.xxs}
                     >
                       {attachmentsCount}
                     </Paragraph>
@@ -275,10 +224,7 @@ const NoteItem = ({
                   <Icon
                     testID="icon-pinned"
                     name="pin-outline"
-                    size={SIZE.sm}
-                    style={{
-                      marginRight: 6
-                    }}
+                    size={AppFontSize.sm}
                     color={color?.colorCode || primaryColors.accent}
                   />
                 ) : null}
@@ -287,10 +233,7 @@ const NoteItem = ({
                   <Icon
                     name="lock"
                     testID="note-locked-icon"
-                    size={SIZE.sm}
-                    style={{
-                      marginRight: 6
-                    }}
+                    size={AppFontSize.sm}
                     color={primaryColors.icon}
                   />
                 ) : null}
@@ -299,37 +242,82 @@ const NoteItem = ({
                   <Icon
                     testID="icon-star"
                     name="star-outline"
-                    size={SIZE.sm}
-                    style={{
-                      marginRight: 6
-                    }}
+                    size={AppFontSize.sm}
                     color="orange"
                   />
                 ) : null}
 
+                {reminder ? (
+                  <ReminderTime
+                    reminder={reminder}
+                    disabled
+                    color={color?.colorCode}
+                    textStyle={{
+                      fontSize: AppFontSize.xxxs
+                    }}
+                    iconSize={AppFontSize.xxxs}
+                    style={{
+                      height: "auto"
+                    }}
+                  />
+                ) : null}
+
+                {notebooks?.items
+                  ?.filter(
+                    (item) =>
+                      route.name !== "Notebook" ||
+                      item.id !== useNavigationStore.getState().focusedRouteId
+                  )
+                  .map((item) => (
+                    <View
+                      key={item.id}
+                      style={{
+                        borderRadius: 4,
+                        backgroundColor: colors.secondary.background,
+                        paddingHorizontal: DefaultAppStyles.GAP_SMALL / 2,
+                        borderWidth: 0.5,
+                        borderColor: primaryColors.border,
+                        paddingVertical: 1,
+                        flexDirection: "row",
+                        alignItems: "center",
+                        gap: DefaultAppStyles.GAP_SMALL / 2
+                      }}
+                    >
+                      <AppIcon
+                        name="book-outline"
+                        size={AppFontSize.xxxs}
+                        color={colors.secondary.icon}
+                      />
+                      <Paragraph
+                        size={AppFontSize.xxxs}
+                        color={colors.secondary.paragraph}
+                      >
+                        {item.title}
+                      </Paragraph>
+                    </View>
+                  ))}
+
                 {!isTrash && !compactMode && tags
                   ? tags.items?.map((item) =>
                       item.id ? (
-                        <Button
-                          title={"#" + item.title}
+                        <View
                           key={item.id}
-                          height={23}
-                          type="plain"
-                          textStyle={{
-                            textDecorationLine: "underline",
-                            color: colors.secondary.paragraph
-                          }}
-                          hitSlop={{ top: 8, bottom: 12, left: 0, right: 0 }}
-                          fontSize={SIZE.xs}
                           style={{
-                            borderRadius: 5,
-                            paddingHorizontal: 6,
-                            marginRight: 4,
-                            zIndex: 10,
-                            maxWidth: tags.items?.length > 1 ? 130 : null
+                            borderRadius: 4,
+                            backgroundColor: colors.secondary.background,
+                            paddingHorizontal: DefaultAppStyles.GAP_SMALL / 2,
+                            borderWidth: 0.5,
+                            borderColor: primaryColors.border,
+                            paddingVertical: 1
                           }}
-                          onPress={() => TaggedNotes.navigate(item, true)}
-                        />
+                        >
+                          <Paragraph
+                            size={AppFontSize.xxxs}
+                            color={colors.secondary.paragraph}
+                          >
+                            #{item.title}
+                          </Paragraph>
+                        </View>
                       ) : null
                     )
                   : null}
@@ -338,7 +326,7 @@ const NoteItem = ({
               <>
                 <Paragraph
                   color={colors.secondary.paragraph}
-                  size={SIZE.xs}
+                  size={AppFontSize.xxs}
                   style={{
                     marginRight: 6
                   }}
@@ -352,7 +340,7 @@ const NoteItem = ({
 
                 <Paragraph
                   color={primaryColors.accent}
-                  size={SIZE.xs}
+                  size={AppFontSize.xxs}
                   style={{
                     marginRight: 6
                   }}
@@ -378,7 +366,7 @@ const NoteItem = ({
                 style={{
                   marginRight: 6
                 }}
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 color={colors.error.accent}
               />
             ) : null}
@@ -387,11 +375,11 @@ const NoteItem = ({
               <Icon
                 name="lock"
                 testID="note-locked-icon"
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 style={{
                   marginRight: 6
                 }}
-                color={colors.secondary.background}
+                color={primaryColors.icon}
               />
             ) : null}
 
@@ -399,17 +387,17 @@ const NoteItem = ({
               <Icon
                 testID="icon-star"
                 name="star-outline"
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 style={{
                   marginRight: 6
                 }}
-                color="orange"
+                color={colors.static.orange}
               />
             ) : null}
 
             <TimeSince
               style={{
-                fontSize: SIZE.xs,
+                fontSize: AppFontSize.xxs,
                 color: colors.secondary.paragraph,
                 marginRight: 6
               }}
@@ -419,20 +407,39 @@ const NoteItem = ({
           </>
         ) : null}
 
-        <IconButton
-          testID={notesnook.listitem.menu}
-          color={primaryColors.paragraph}
-          name="dots-horizontal"
-          size={SIZE.xl}
-          onPress={() => !noOpen && Properties.present(item)}
-          style={{
-            justifyContent: "center",
-            height: 35,
-            width: 35,
-            borderRadius: 100,
-            alignItems: "center"
-          }}
-        />
+        {selectionMode === "note" || selectionMode === "trash" ? (
+          <>
+            <View
+              style={{
+                height: 35,
+                width: 35,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              <AppIcon
+                name={selected ? "checkbox-outline" : "checkbox-blank-outline"}
+                color={selected ? colors.selected.icon : colors.primary.icon}
+                size={AppFontSize.lg}
+              />
+            </View>
+          </>
+        ) : (
+          <IconButton
+            testID={notesnook.listitem.menu}
+            color={colors.secondary.icon}
+            name="dots-horizontal"
+            size={AppFontSize.lg}
+            onPress={() => !noOpen && Properties.present(item)}
+            style={{
+              justifyContent: "center",
+              height: 35,
+              width: 35,
+              borderRadius: 100,
+              alignItems: "center"
+            }}
+          />
+        )}
       </View>
     </>
   );

apps/mobile/app/components/list-items/note/wrapper.tsx

@@ -29,7 +29,7 @@ import {
   presentSheet
 } from "../../../services/event-manager";
 import { eOnLoadNote, eShowMergeDialog } from "../../../utils/events";
-import { tabBarRef } from "../../../utils/global-refs";
+import { fluidTabsRef } from "../../../utils/global-refs";
 
 import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
 import NotePreview from "../../note-history/preview";
@@ -66,7 +66,7 @@ export const openNote = async (
       item: note
     });
     if (!DDS.isTab) {
-      tabBarRef.current?.goToPage(1);
+      fluidTabsRef.current?.goToPage("editor");
     }
   }
 };
@@ -101,6 +101,7 @@ export const NoteWrapper = React.memo<
         onPress={() => openNote(item as Note, isTrash, isRenderedInActionSheet)}
         isSheet={isRenderedInActionSheet}
         item={item}
+        index={index}
         color={restProps.color?.colorCode}
       >
         <NoteItem {...restProps} item={item} index={index} isTrash={isTrash} />

apps/mobile/app/components/list-items/notebook/index.tsx

@@ -19,18 +19,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { getFormattedDate } from "@notesnook/common";
 import { BaseTrashItem, Notebook, TrashItem } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../../e2e/test.ids";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
-import { SIZE } from "../../../utils/size";
+import useIsSelected from "../../../hooks/use-selected";
+import { useSelectionStore } from "../../../stores/use-selection-store";
+import { AppFontSize } from "../../../utils/size";
 import { Properties } from "../../properties";
+import AppIcon from "../../ui/AppIcon";
 import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 type NotebookItemProps = {
   item: Notebook | BaseTrashItem<Notebook>;
@@ -50,6 +54,8 @@ export const NotebookItem = ({
   const compactMode = useIsCompactModeEnabled(
     (item as TrashItem).itemType || item.type
   );
+  const selectionMode = useSelectionStore((state) => state.selectionMode);
+  const [selected] = useIsSelected(item);
 
   return (
     <>
@@ -61,7 +67,7 @@ export const NotebookItem = ({
       >
         {compactMode ? (
           <Paragraph
-            size={SIZE.sm}
+            size={AppFontSize.sm}
             numberOfLines={1}
             style={{
               flexWrap: "wrap"
@@ -71,7 +77,7 @@ export const NotebookItem = ({
           </Paragraph>
         ) : (
           <Heading
-            size={SIZE.md}
+            size={AppFontSize.md}
             numberOfLines={1}
             style={{
               flexWrap: "wrap"
@@ -83,7 +89,7 @@ export const NotebookItem = ({
 
         {!item.description || compactMode ? null : (
           <Paragraph
-            size={SIZE.sm}
+            size={AppFontSize.sm}
             numberOfLines={2}
             style={{
               flexWrap: "wrap"
@@ -99,15 +105,15 @@ export const NotebookItem = ({
               flexDirection: "row",
               justifyContent: "flex-start",
               alignItems: "center",
-              marginTop: 5,
-              height: SIZE.md + 2
+              marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
+              height: AppFontSize.md + 2
             }}
           >
             {isTrash ? (
               <>
                 <Paragraph
                   color={colors.secondary.paragraph}
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                   style={{
                     textAlignVertical: "center",
                     marginRight: 6
@@ -121,7 +127,7 @@ export const NotebookItem = ({
                 </Paragraph>
                 <Paragraph
                   color={colors.primary.accent}
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                   style={{
                     textAlignVertical: "center",
                     marginRight: 6
@@ -134,7 +140,7 @@ export const NotebookItem = ({
             ) : (
               <Paragraph
                 color={colors.secondary.paragraph}
-                size={SIZE.xs}
+                size={AppFontSize.xs}
                 style={{
                   marginRight: 6
                 }}
@@ -144,7 +150,7 @@ export const NotebookItem = ({
             )}
             <Paragraph
               color={colors.secondary.paragraph}
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               style={{
                 marginRight: 6
               }}
@@ -155,7 +161,7 @@ export const NotebookItem = ({
             {item.pinned ? (
               <Icon
                 name="pin-outline"
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 style={{
                   marginRight: 10,
                   marginTop: 2
@@ -176,7 +182,7 @@ export const NotebookItem = ({
           <>
             <Paragraph
               color={colors.primary.icon}
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               style={{
                 marginRight: 6
               }}
@@ -185,21 +191,39 @@ export const NotebookItem = ({
             </Paragraph>
           </>
         ) : null}
-
-        <IconButton
-          color={colors.primary.heading}
-          name="dots-horizontal"
-          testID={notesnook.ids.notebook.menu}
-          size={SIZE.xl}
-          onPress={() => Properties.present(item)}
-          style={{
-            justifyContent: "center",
-            height: 35,
-            width: 35,
-            borderRadius: 100,
-            alignItems: "center"
-          }}
-        />
+        {selectionMode === "notebook" || selectionMode === "trash" ? (
+          <>
+            <View
+              style={{
+                height: 35,
+                width: 35,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              <AppIcon
+                name={selected ? "checkbox-outline" : "checkbox-blank-outline"}
+                color={selected ? colors.selected.icon : colors.primary.icon}
+                size={AppFontSize.lg}
+              />
+            </View>
+          </>
+        ) : (
+          <IconButton
+            color={colors.primary.heading}
+            name="dots-horizontal"
+            testID={notesnook.ids.notebook.menu}
+            size={AppFontSize.xl}
+            onPress={() => Properties.present(item)}
+            style={{
+              justifyContent: "center",
+              height: 35,
+              width: 35,
+              borderRadius: 100,
+              alignItems: "center"
+            }}
+          />
+        )}
       </View>
     </>
   );

apps/mobile/app/components/list-items/reminder/index.tsx

@@ -22,7 +22,7 @@ import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../../e2e/test.ids";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { Properties } from "../../properties";
 import ReminderSheet from "../../sheets/reminder";
 import { IconButton } from "../../ui/icon-button";
@@ -31,6 +31,10 @@ import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import SelectionWrapper, { selectItem } from "../selection-wrapper";
 import { strings } from "@notesnook/intl";
+import { useSelectionStore } from "../../../stores/use-selection-store";
+import useIsSelected from "../../../hooks/use-selected";
+import AppIcon from "../../ui/AppIcon";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const ReminderItem = React.memo(
   ({
@@ -48,6 +52,8 @@ const ReminderItem = React.memo(
 
       ReminderSheet.present(item, undefined, isSheet);
     };
+    const selectionMode = useSelectionStore((state) => state.selectionMode);
+    const [selected] = useIsSelected(item);
     return (
       <SelectionWrapper onPress={openReminder} item={item} isSheet={isSheet}>
         <View
@@ -62,7 +68,7 @@ const ReminderItem = React.memo(
             style={{
               flexWrap: "wrap"
             }}
-            size={SIZE.md}
+            size={AppFontSize.md}
           >
             {item.title}
           </Heading>
@@ -82,18 +88,18 @@ const ReminderItem = React.memo(
             style={{
               flexDirection: "row",
               flexWrap: "wrap",
-              marginTop: 5
+              marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
             }}
           >
             {item.disabled ? (
               <View
                 style={{
                   backgroundColor: colors.secondary.background,
-                  borderRadius: 5,
+                  borderRadius: defaultBorderRadius,
                   flexDirection: "row",
-                  paddingHorizontal: 6,
+                  paddingHorizontal: DefaultAppStyles.GAP_SMALL,
                   alignItems: "center",
-                  marginTop: 5,
+                  marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
                   justifyContent: "flex-start",
                   alignSelf: "flex-start",
                   marginRight: 10,
@@ -102,11 +108,11 @@ const ReminderItem = React.memo(
               >
                 <Icon
                   name="bell-off-outline"
-                  size={SIZE.md}
+                  size={AppFontSize.md}
                   color={colors.error.icon}
                 />
                 <Paragraph
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                   color={colors.secondary.paragraph}
                   style={{ marginLeft: 5 }}
                 >
@@ -118,24 +124,24 @@ const ReminderItem = React.memo(
               <View
                 style={{
                   backgroundColor: colors.secondary.background,
-                  borderRadius: 5,
+                  borderRadius: defaultBorderRadius,
                   flexDirection: "row",
-                  paddingHorizontal: 6,
+                  paddingHorizontal: DefaultAppStyles.GAP_SMALL,
                   alignItems: "center",
-                  marginTop: 5,
+                  marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
                   justifyContent: "flex-start",
                   alignSelf: "flex-start",
-                  marginRight: 10,
+                  marginRight: DefaultAppStyles.GAP_SMALL,
                   height: 30
                 }}
               >
                 <Icon
                   name="reload"
-                  size={SIZE.md}
+                  size={AppFontSize.md}
                   color={colors.primary.accent}
                 />
                 <Paragraph
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                   color={colors.secondary.paragraph}
                   style={{ marginLeft: 5 }}
                 >
@@ -147,29 +153,49 @@ const ReminderItem = React.memo(
             <ReminderTime
               reminder={item}
               checkIsActive={false}
-              fontSize={SIZE.xs}
+              fontSize={AppFontSize.xxs}
               style={{
                 justifyContent: "flex-start",
-                height: 25,
+                paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2,
                 alignSelf: "flex-start"
               }}
             />
           </View>
         </View>
-        <IconButton
-          testID={notesnook.listitem.menu}
-          color={colors.primary.paragraph}
-          name="dots-horizontal"
-          size={SIZE.xl}
-          onPress={() => Properties.present(item, [], isSheet)}
-          style={{
-            justifyContent: "center",
-            height: 35,
-            width: 35,
-            borderRadius: 100,
-            alignItems: "center"
-          }}
-        />
+
+        {selectionMode === "note" || selectionMode === "trash" ? (
+          <>
+            <View
+              style={{
+                height: 35,
+                width: 35,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              <AppIcon
+                name={selected ? "checkbox-outline" : "checkbox-blank-outline"}
+                color={selected ? colors.selected.icon : colors.primary.icon}
+                size={AppFontSize.lg}
+              />
+            </View>
+          </>
+        ) : (
+          <IconButton
+            testID={notesnook.listitem.menu}
+            color={colors.primary.paragraph}
+            name="dots-horizontal"
+            size={AppFontSize.xl}
+            onPress={() => Properties.present(item, isSheet)}
+            style={{
+              justifyContent: "center",
+              height: 35,
+              width: 35,
+              borderRadius: 100,
+              alignItems: "center"
+            }}
+          />
+        )}
       </SelectionWrapper>
     );
   },

apps/mobile/app/components/list-items/selection-wrapper/back-fill.tsx

@@ -39,16 +39,15 @@ export const Filler = ({ item, color }: { item: Item; color?: string }) => {
       style={{
         position: "absolute",
         width: "110%",
-        height: "150%",
-        backgroundColor: colors.selected.background,
-        borderLeftWidth: 5,
-        borderLeftColor: isEditingNote
-          ? color
-            ? color
-            : colors.selected.accent
-          : "transparent"
+        height: "100%",
+        backgroundColor: colors.selected.accent
+        // borderLeftWidth: 5,
+        // borderLeftColor: isEditingNote
+        //   ? color
+        //     ? color
+        //     : colors.selected.accent
+        //   : "transparent"
       }}
-      collapsable={false}
     />
   ) : null;
 };

apps/mobile/app/components/list-items/selection-wrapper/index.tsx

@@ -17,14 +17,14 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { Item, TrashItem } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React, { PropsWithChildren, useRef } from "react";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
+import { useTabStore } from "../../../screens/editor/tiptap/use-tab-store";
 import { useSelectionStore } from "../../../stores/use-selection-store";
+import { DefaultAppStyles } from "../../../utils/styles";
 import { Pressable } from "../../ui/pressable";
-import { Filler } from "./back-fill";
-import { SelectionIcon } from "./selection";
-import { Item, TrashItem } from "@notesnook/core";
 
 export function selectItem(item: Item) {
   if (useSelectionStore.getState().selectionMode === item.type) {
@@ -49,6 +49,7 @@ type SelectionWrapperProps = PropsWithChildren<{
   testID?: string;
   isSheet?: boolean;
   color?: string;
+  index?: number;
 }>;
 
 const SelectionWrapper = ({
@@ -57,10 +58,16 @@ const SelectionWrapper = ({
   testID,
   isSheet,
   children,
-  color
+  color,
+  index = 0
 }: SelectionWrapperProps) => {
   const itemId = useRef(item.id);
   const { colors, isDark } = useThemeColors();
+  const isEditingNote = useTabStore(
+    (state) =>
+      state.tabs.find((t) => t.id === state.currentTab)?.session?.noteId ===
+      item.id
+  );
   const compactMode = useIsCompactModeEnabled(
     (item as TrashItem).itemType || item.type
   );
@@ -79,7 +86,13 @@ const SelectionWrapper = ({
 
   return (
     <Pressable
-      customColor={isSheet ? colors.secondary.background : "transparent"}
+      customColor={
+        isEditingNote
+          ? colors.selected.background
+          : isSheet
+          ? colors.primary.hover
+          : "transparent"
+      }
       testID={testID}
       onLongPress={onLongPress}
       onPress={onPress}
@@ -91,15 +104,14 @@ const SelectionWrapper = ({
         justifyContent: "space-between",
         alignItems: "center",
         width: "100%",
+        alignSelf: "center",
         overflow: "hidden",
-        paddingHorizontal: 12,
-        paddingVertical: compactMode ? 4 : 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
+        paddingVertical: compactMode ? 4 : DefaultAppStyles.GAP_VERTICAL,
         borderRadius: isSheet ? 10 : 0,
-        marginBottom: isSheet ? 12 : undefined
+        marginBottom: isSheet ? DefaultAppStyles.GAP_VERTICAL : undefined
       }}
     >
-      {item.type === "note" ? <Filler item={item} color={color} /> : null}
-      <SelectionIcon item={item} />
       {children}
     </Pressable>
   );

apps/mobile/app/components/list-items/selection-wrapper/selection.tsx

@@ -24,7 +24,7 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 import useIsSelected from "../../../hooks/use-selected";
 import { useSelectionStore } from "../../../stores/use-selection-store";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Item, TrashItem } from "@notesnook/core";
 
 export const SelectionIcon = ({ item }: { item: Item }) => {
@@ -52,7 +52,7 @@ export const SelectionIcon = ({ item }: { item: Item }) => {
     >
       {selected ? (
         <Icon
-          size={compactMode ? SIZE.xl - 2 : SIZE.xl}
+          size={compactMode ? AppFontSize.xl - 2 : AppFontSize.xl}
           color={selected ? colors.selected.accent : colors.primary.icon}
           name={"check"}
         />

apps/mobile/app/components/list-items/tag/index.tsx

@@ -23,13 +23,14 @@ import React from "react";
 import { View } from "react-native";
 import { notesnook } from "../../../../e2e/test.ids";
 import { TaggedNotes } from "../../../screens/notes/tagged";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import SelectionWrapper, { selectItem } from "../selection-wrapper";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const TagItem = React.memo(
   ({
@@ -60,9 +61,9 @@ const TagItem = React.memo(
             flexShrink: 1
           }}
         >
-          <Heading size={SIZE.md}>
+          <Heading size={AppFontSize.md}>
             <Heading
-              size={SIZE.md}
+              size={AppFontSize.md}
               style={{
                 color: colors.primary.accent
               }}
@@ -73,9 +74,9 @@ const TagItem = React.memo(
           </Heading>
           <Paragraph
             color={colors.secondary.paragraph}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             style={{
-              marginTop: 5
+              marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
             }}
           >
             {strings.notes(totalNotes)}
@@ -85,7 +86,7 @@ const TagItem = React.memo(
         <IconButton
           color={colors.primary.heading}
           name="dots-horizontal"
-          size={SIZE.xl}
+          size={AppFontSize.xl}
           onPress={() => {
             Properties.present(item);
           }}

apps/mobile/app/components/list/card.tsx

@@ -17,20 +17,28 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { Dimensions, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useMessageStore } from "../../stores/use-message-store";
-import { useThemeColors } from "@notesnook/theme";
-import { getContainerBorder, hexToRGBA } from "../../utils/colors";
-import { SIZE } from "../../utils/size";
+import { Message, useMessageStore } from "../../stores/use-message-store";
+import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
 
-export const Card = ({ color }: { color?: string }) => {
+export const Card = ({
+  color,
+  customMessage
+}: {
+  color?: string;
+  customMessage?: Omit<Message, "data">;
+}) => {
   const { colors } = useThemeColors();
   color = color ? color : colors.primary.accent;
-  const messageBoardState = useMessageStore((state) => state.message);
+  const messageBoardState = useMessageStore(
+    (state) => customMessage || state.message
+  );
   const announcements = useMessageStore((state) => state.announcements);
   const fontScale = Dimensions.get("window").fontScale;
 
@@ -38,18 +46,19 @@ export const Card = ({ color }: { color?: string }) => {
     (announcements && announcements.length) ? null : (
     <View
       style={{
-        width: "95%"
+        width: "100%",
+        paddingHorizontal: DefaultAppStyles.GAP,
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       <Pressable
         onPress={messageBoardState.onPress}
         type="plain"
         style={{
-          paddingVertical: 12,
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL,
           flexDirection: "row",
           alignItems: "center",
           justifyContent: "space-between",
-          paddingHorizontal: 0,
           width: "100%"
         }}
       >
@@ -63,24 +72,14 @@ export const Card = ({ color }: { color?: string }) => {
           <View
             style={{
               width: 40 * fontScale,
-              backgroundColor:
-                messageBoardState.type === "error"
-                  ? hexToRGBA(colors.error.accent, 0.15)
-                  : hexToRGBA(color, 0.15),
               height: 40 * fontScale,
               borderRadius: 100,
               alignItems: "center",
-              justifyContent: "center",
-              ...getContainerBorder(
-                messageBoardState.type === "error"
-                  ? colors.error.accent
-                  : color || colors.primary.accent,
-                0.4
-              )
+              justifyContent: "center"
             }}
           >
             <Icon
-              size={SIZE.lg}
+              size={AppFontSize.xxxl}
               color={
                 messageBoardState.type === "error" ? colors.error.icon : color
               }
@@ -95,18 +94,19 @@ export const Card = ({ color }: { color?: string }) => {
               marginRight: 10
             }}
           >
-            <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
-              {messageBoardState.message}
-            </Paragraph>
             <Paragraph
               style={{
                 flexWrap: "nowrap",
                 flexShrink: 1
               }}
+              size={AppFontSize.sm}
               color={colors.primary.heading}
             >
               {messageBoardState.actionText}
             </Paragraph>
+            <Paragraph color={colors.secondary.paragraph} size={AppFontSize.xs}>
+              {messageBoardState.message}
+            </Paragraph>
           </View>
         </View>
 
@@ -124,7 +124,7 @@ export const Card = ({ color }: { color?: string }) => {
               color={
                 messageBoardState.type === "error" ? colors.error.icon : color
               }
-              size={SIZE.lg}
+              size={AppFontSize.lg}
             />
           </View>
         )}

apps/mobile/app/components/list/empty.tsx

@@ -19,12 +19,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { ActivityIndicator, useWindowDimensions, View } from "react-native";
+import { ActivityIndicator, View } from "react-native";
 import { notesnook } from "../../../e2e/test.ids";
-import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { TTip, useTip } from "../../services/tip-manager";
+import { RouteParams } from "../../stores/use-navigation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Tip } from "../tip";
 import { Button } from "../ui/button";
 import Seperator from "../ui/seperator";
@@ -46,7 +46,7 @@ type EmptyListProps = {
   title?: string;
   color?: string;
   dataType: string;
-  screen?: string;
+  screen?: keyof RouteParams;
 };
 
 export const Empty = React.memo(function Empty({
@@ -58,8 +58,6 @@ export const Empty = React.memo(function Empty({
   screen
 }: EmptyListProps) {
   const { colors } = useThemeColors();
-  const insets = useGlobalSafeAreaInsets();
-  const { height } = useWindowDimensions();
   const introCompleted = useSettingStore(
     (state) => state.settings.introCompleted
   );
@@ -74,7 +72,7 @@ export const Empty = React.memo(function Empty({
     <View
       style={[
         {
-          height: height - (140 + insets.top),
+          flex: 1,
           width: "80%",
           justifyContent: "center",
           alignSelf: "center"
@@ -98,18 +96,13 @@ export const Empty = React.memo(function Empty({
           {placeholder?.button && (
             <Button
               testID={notesnook.buttons.add}
-              type="accent"
+              type="secondaryAccented"
               title={placeholder?.button}
               iconPosition="right"
               icon="arrow-right"
               onPress={placeholder?.action}
-              buttonType={{
-                text: "white"
-              }}
               style={{
-                alignSelf: "flex-start",
-                borderRadius: 5,
-                height: 40
+                alignSelf: "flex-start"
               }}
             />
           )}
@@ -124,12 +117,12 @@ export const Empty = React.memo(function Empty({
             }}
           >
             <Heading>{placeholder?.title}</Heading>
-            <Paragraph size={SIZE.sm} textBreakStrategy="balanced">
+            <Paragraph size={AppFontSize.sm} textBreakStrategy="balanced">
               {placeholder?.loading}
             </Paragraph>
             <Seperator />
             <ActivityIndicator
-              size={SIZE.lg}
+              size={AppFontSize.lg}
               color={color || colors.primary.accent}
             />
           </View>

apps/mobile/app/components/list/index.tsx

@@ -24,9 +24,9 @@ import React, { useEffect, useRef } from "react";
 import {
   NativeScrollEvent,
   NativeSyntheticEvent,
-  RefreshControl
+  RefreshControl,
+  View
 } from "react-native";
-import Animated, { FadeInDown } from "react-native-reanimated";
 import { notesnook } from "../../../e2e/test.ids";
 import { useGroupOptions } from "../../hooks/use-group-options";
 import { eSendEvent } from "../../services/event-manager";
@@ -34,15 +34,16 @@ import Sync from "../../services/sync";
 import { RouteName } from "../../stores/use-navigation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { eScrollEvent } from "../../utils/events";
-import { tabBarRef } from "../../utils/global-refs";
-import { Footer } from "../list-items/footer";
+import { fluidTabsRef } from "../../utils/global-refs";
 import { Header } from "../list-items/headers/header";
 import { Empty, PlaceholderData } from "./empty";
 import { ListItemWrapper } from "./list-item.wrapper";
+import { useSelectionStore } from "../../stores/use-selection-store";
 
 type ListProps = {
   data: VirtualizedGrouping<Item> | undefined;
   dataType: Item["type"];
+  mode?: "drawer" | "sheet";
   onRefresh?: () => void;
   loading?: boolean;
   headerTitle?: string;
@@ -145,70 +146,80 @@ export default function List(props: ListProps) {
 
   return (
     <>
-      <Animated.View
+      <View
         style={{
           flex: 1
         }}
-        entering={props.renderedInRoute === "Search" ? undefined : FadeInDown}
       >
-        <ListView
-          style={styles}
-          ref={scrollRef}
-          testID={notesnook.list.id}
-          data={props.data?.placeholders || []}
-          renderItem={renderItem}
-          onScroll={onListScroll}
-          nestedScrollEnabled={true}
-          onMomentumScrollEnd={() => {
-            tabBarRef.current?.unlock();
-          }}
-          getItemType={(item: number, index: number) => {
-            return props.data?.type(index);
-          }}
-          estimatedItemSize={isCompactModeEnabled ? 60 : 120}
-          directionalLockEnabled={true}
-          keyboardShouldPersistTaps="always"
-          keyboardDismissMode="interactive"
-          refreshControl={
-            props.isRenderedInActionSheet ? null : (
-              <RefreshControl
-                tintColor={colors.primary.accent}
-                colors={[colors.primary.accent]}
-                progressBackgroundColor={colors.secondary.background}
-                onRefresh={_onRefresh}
-                refreshing={false}
-              />
-            )
-          }
-          ListEmptyComponent={
-            props.placeholder ? (
-              <Empty
-                loading={props.loading}
-                title={props.headerTitle}
-                dataType={props.dataType}
+        {props.data?.placeholders?.length === 0 ? (
+          <>
+            {props.CustomLisHeader ? (
+              props.CustomLisHeader
+            ) : !props.headerTitle ? null : (
+              <Header
                 color={props.customAccentColor}
-                placeholder={props.placeholder}
                 screen={props.renderedInRoute}
               />
-            ) : null
-          }
-          ListFooterComponent={
-            <Footer height={props.renderedInRoute === "Notebook" ? 300 : 150} />
-          }
-          ListHeaderComponent={
-            <>
-              {props.CustomLisHeader ? (
-                props.CustomLisHeader
-              ) : !props.headerTitle ? null : (
-                <Header
-                  color={props.customAccentColor}
-                  screen={props.renderedInRoute}
+            )}
+            <Empty
+              loading={props.loading}
+              title={props.headerTitle}
+              dataType={props.dataType}
+              color={props.customAccentColor}
+              placeholder={props.placeholder}
+              screen={props.renderedInRoute}
+            />
+          </>
+        ) : (
+          <ListView
+            style={styles}
+            ref={scrollRef}
+            testID={notesnook.list.id}
+            data={props.data?.placeholders || []}
+            renderItem={renderItem}
+            onScroll={onListScroll}
+            nestedScrollEnabled={true}
+            onMomentumScrollEnd={() => {
+              fluidTabsRef.current?.unlock();
+            }}
+            getItemType={(item: number, index: number) => {
+              return props.data?.type(index);
+            }}
+            estimatedItemSize={isCompactModeEnabled ? 60 : 120}
+            directionalLockEnabled={true}
+            keyboardShouldPersistTaps="always"
+            keyboardDismissMode="interactive"
+            ListFooterComponent={
+              <View
+                style={{ height: props.data?.placeholders?.length ? 100 : 0 }}
+              />
+            }
+            refreshControl={
+              props.isRenderedInActionSheet ? null : (
+                <RefreshControl
+                  tintColor={colors.primary.accent}
+                  colors={[colors.primary.accent]}
+                  progressBackgroundColor={colors.secondary.background}
+                  onRefresh={_onRefresh}
+                  refreshing={false}
                 />
-              )}
-            </>
-          }
-        />
-      </Animated.View>
+              )
+            }
+            ListHeaderComponent={
+              <>
+                {props.CustomLisHeader ? (
+                  props.CustomLisHeader
+                ) : !props.headerTitle ? null : (
+                  <Header
+                    color={props.customAccentColor}
+                    screen={props.renderedInRoute}
+                  />
+                )}
+              </>
+            }
+          />
+        )}
+      </View>
     </>
   );
 }

apps/mobile/app/components/list/reorderable-list.tsx

@@ -26,8 +26,8 @@ import {
   DraxListRenderItemContent
 } from "react-native-drax";
 
-import { tabBarRef } from "../../utils/global-refs";
-import { SIZE } from "../../utils/size";
+import { fluidTabsRef } from "../../utils/global-refs";
+import { AppFontSize } from "../../utils/size";
 import { useSideBarDraggingStore } from "../side-menu/dragging-store";
 import { IconButton } from "../ui/icon-button";
 
@@ -61,9 +61,9 @@ function ReorderableList<T extends { id: string }>({
   const listRef = useRef<FlatList | null>(null);
 
   if (dragging) {
-    tabBarRef.current?.lock();
+    fluidTabsRef.current?.lock();
   } else {
-    tabBarRef.current?.unlock();
+    fluidTabsRef.current?.unlock();
   }
 
   useEffect(() => {
@@ -79,13 +79,14 @@ function ReorderableList<T extends { id: string }>({
         <View
           style={{
             flexDirection: "row",
-            paddingHorizontal: 12
+            width: "100%"
           }}
         >
           <View
             style={{
+              opacity: isHidden ? 0.4 : 1,
               flexGrow: 1,
-              opacity: isHidden ? 0.4 : 1
+              flexShrink: 1
             }}
           >
             {renderDraggableItem(info, props)}
@@ -94,13 +95,12 @@ function ReorderableList<T extends { id: string }>({
             <IconButton
               name={!isHidden ? "minus" : "plus"}
               color={colors.primary.icon}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
               top={0}
               bottom={0}
               onPress={() => {
                 const _hiddenItems = hiddenItemsState.slice();
                 const index = _hiddenItems.indexOf(info.item.id);
-
                 if (index === -1) {
                   _hiddenItems.push(info.item?.id);
                 } else {

apps/mobile/app/components/merge-conflicts/index.js

@@ -38,7 +38,7 @@ import Navigation from "../../services/navigation";
 import Sync from "../../services/sync";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { eOnLoadNote, eShowMergeDialog } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import BaseDialog from "../dialog/base-dialog";
 import DialogButtons from "../dialog/dialog-buttons";
 import DialogContainer from "../dialog/dialog-container";
@@ -49,6 +49,7 @@ import Seperator from "../ui/seperator";
 import Paragraph from "../ui/typography/paragraph";
 import { diff } from "diffblazer";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const MergeConflicts = () => {
   const { colors } = useThemeColors();
@@ -142,7 +143,7 @@ const MergeConflicts = () => {
           flexDirection: "row",
           justifyContent: "space-between",
           alignItems: "center",
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           paddingLeft: 6
         }}
       >
@@ -164,7 +165,7 @@ const MergeConflicts = () => {
           <Paragraph
             style={{ flexWrap: "wrap" }}
             color={colors.secondary.paragraph}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
           >
             <Text
               style={{
@@ -201,9 +202,9 @@ const MergeConflicts = () => {
               height={30}
               style={{
                 borderRadius: 100,
-                paddingHorizontal: 12
+                paddingHorizontal: DefaultAppStyles.GAP
               }}
-              fontSize={SIZE.xs}
+              fontSize={AppFontSize.xs}
             />
           ) : null}
           <View style={{ width: 10 }} />
@@ -218,9 +219,9 @@ const MergeConflicts = () => {
               height={30}
               style={{
                 borderRadius: 100,
-                paddingHorizontal: 12
+                paddingHorizontal: DefaultAppStyles.GAP
               }}
-              fontSize={SIZE.xs}
+              fontSize={AppFontSize.xs}
               color={colors.error.paragraph}
               onPress={() => {
                 setDialogVisible(true);
@@ -233,12 +234,12 @@ const MergeConflicts = () => {
                 height={30}
                 style={{
                   borderRadius: 100,
-                  paddingHorizontal: 12,
+                  paddingHorizontal: DefaultAppStyles.GAP,
                   minWidth: 60,
                   marginLeft: 10
                 }}
                 type="accent"
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
                 title={
                   keeping && !isDiscarded ? strings.undo() : strings.keep()
                 }

apps/mobile/app/components/note-history/index.tsx

@@ -30,7 +30,7 @@ import { db } from "../../common/database";
 import { useDBItem } from "../../hooks/use-db-item";
 import { presentSheet } from "../../services/event-manager";
 import { openLinkInBrowser } from "../../utils/functions";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import DialogHeader from "../dialog/dialog-header";
 import SheetProvider from "../sheet-provider";
 import { Pressable } from "../ui/pressable";
@@ -38,6 +38,7 @@ import Seperator from "../ui/seperator";
 import Paragraph from "../ui/typography/paragraph";
 import NotePreview from "./preview";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const HistoryItem = ({
   index,
@@ -88,16 +89,16 @@ const HistoryItem = ({
       style={{
         justifyContent: "space-between",
         alignItems: "center",
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         height: 45,
-        marginBottom: 10,
+        marginBottom: DefaultAppStyles.GAP_VERTICAL,
         flexDirection: "row"
       }}
     >
       {!item ? null : (
         <>
           <Paragraph>{getDate(item.dateCreated, item.dateModified)}</Paragraph>
-          <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+          <Paragraph color={colors.secondary.paragraph} size={AppFontSize.xs}>
             {getTimeAgo(item.dateModified)}
           </Paragraph>
         </>
@@ -148,7 +149,7 @@ export default function NoteHistory({
 
       <View
         style={{
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           height: !history?.placeholders.length
             ? 300
             : (history.placeholders.length + 1) * 55,
@@ -170,7 +171,7 @@ export default function NoteHistory({
             >
               {_loading ? (
                 <ActivityIndicator
-                  size={SIZE.xl}
+                  size={AppFontSize.xl}
                   color={colors.primary.accent}
                 />
               ) : (
@@ -187,7 +188,7 @@ export default function NoteHistory({
         />
       </View>
       <Paragraph
-        size={SIZE.xs}
+        size={AppFontSize.xs}
         color={colors.secondary.paragraph}
         style={{
           alignSelf: "center"

apps/mobile/app/components/note-history/preview.js

@@ -36,6 +36,7 @@ import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
 import { diff } from "diffblazer";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 /**
  *
@@ -158,7 +159,7 @@ export default function NotePreview({ session, content, note }) {
 
       <View
         style={{
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         <Button
@@ -173,7 +174,7 @@ export default function NotePreview({ session, content, note }) {
           type="error"
           width="100%"
           style={{
-            marginTop: 12
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
         />
       </View>

apps/mobile/app/components/premium/compact-features.js

@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { FeatureBlock } from "./feature";
 import { ScrollView } from "react-native-actions-sheet";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const CompactFeatures = ({
   vertical,
@@ -84,7 +85,7 @@ export const CompactFeatures = ({
       style={{
         width: "100%",
         maxHeight: maxHeight,
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       {data.map((item) => (

apps/mobile/app/components/premium/component.js

@@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { useThemeColors } from "@notesnook/theme";
 import React, { useState } from "react";
 import { ActivityIndicator, Platform, ScrollView, View } from "react-native";
 import { LAUNCH_ROCKET } from "../../assets/images/assets";
@@ -24,17 +25,13 @@ import { db } from "../../common/database";
 import { usePricing } from "../../hooks/use-pricing";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
+import Navigation from "../../services/navigation";
 import { useUserStore } from "../../stores/use-user-store";
 import { getElevationStyle } from "../../utils/elevation";
-import {
-  eClosePremiumDialog,
-  eCloseSheet,
-  eOpenLoginDialog
-} from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { eClosePremiumDialog, eCloseSheet } from "../../utils/events";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
-import { AuthMode } from "../auth";
+import { AuthMode } from "../auth/common";
 import SheetProvider from "../sheet-provider";
 import { Toast } from "../toast";
 import { Button } from "../ui/button";
@@ -47,6 +44,7 @@ import { Walkthrough } from "../walkthroughs";
 import { features } from "./features";
 import { Group } from "./group";
 import { PricingPlans } from "./pricing-plans";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Component = ({ close, promo }) => {
   const { colors } = useThemeColors();
@@ -66,9 +64,9 @@ export const Component = ({ close, promo }) => {
       });
     } else {
       close();
-      setTimeout(() => {
-        eSendEvent(eOpenLoginDialog, AuthMode.trialSignup);
-      }, 400);
+      Navigation.navigate("Auth", {
+        mode: AuthMode.trialSignup
+      });
     }
   };
 
@@ -137,14 +135,14 @@ export const Component = ({ close, promo }) => {
 
         <Heading
           key="heading"
-          size={SIZE.lg}
+          size={AppFontSize.lg}
           style={{
             alignSelf: "center",
             paddingTop: 20
           }}
         >
           Notesnook{" "}
-          <Heading size={SIZE.lg} color={colors.primary.accent}>
+          <Heading size={AppFontSize.lg} color={colors.primary.accent}>
             Pro
           </Heading>
         </Heading>
@@ -154,7 +152,7 @@ export const Component = ({ close, promo }) => {
             style={{
               marginBottom: 20
             }}
-            size={SIZE.md}
+            size={AppFontSize.md}
             color={colors.primary.accent}
           />
         ) : (
@@ -163,7 +161,7 @@ export const Component = ({ close, promo }) => {
               alignSelf: "center",
               marginBottom: 20
             }}
-            size={SIZE.md}
+            size={AppFontSize.md}
           >
             (
             {Platform.OS === "android"
@@ -176,9 +174,9 @@ export const Component = ({ close, promo }) => {
 
         <Paragraph
           key="description"
-          size={SIZE.md}
+          size={AppFontSize.md}
           style={{
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             textAlign: "center",
             alignSelf: "center",
             paddingBottom: 20,
@@ -206,7 +204,7 @@ export const Component = ({ close, promo }) => {
             type="accent"
             width={250}
             style={{
-              paddingHorizontal: 12,
+              paddingHorizontal: DefaultAppStyles.GAP,
               marginBottom: 15,
               borderRadius: 100
             }}
@@ -222,7 +220,7 @@ export const Component = ({ close, promo }) => {
           type={userCanRequestTrial ? "secondaryAccented" : "accent"}
           width={250}
           style={{
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             marginBottom: 15,
             borderRadius: 100
           }}
@@ -231,18 +229,18 @@ export const Component = ({ close, promo }) => {
         {!user || userCanRequestTrial ? (
           <Paragraph
             color={colors.secondary.paragraph}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             style={{
               alignSelf: "center",
               textAlign: "center",
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               maxWidth: "80%"
             }}
           >
             {user
               ? 'On clicking "Try free for 14 days", your free trial will be activated.'
               : "After sign up you will be asked to activate your free trial."}{" "}
-            <Paragraph size={SIZE.xs} style={{ fontWeight: "bold" }}>
+            <Paragraph size={AppFontSize.xs} style={{ fontWeight: "bold" }}>
               No credit card is required.
             </Paragraph>
           </Paragraph>
@@ -257,7 +255,7 @@ export const Component = ({ close, promo }) => {
         <View
           key="plans"
           style={{
-            paddingHorizontal: 12
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           <PricingPlans showTrialOption={false} promo={promo} />
@@ -272,7 +270,7 @@ export const Component = ({ close, promo }) => {
           }
           type="accent"
           style={{
-            paddingHorizontal: 24,
+            paddingHorizontal: DefaultAppStyles.GAP * 2,
             position: "absolute",
             borderRadius: 100,
             bottom: 30,

apps/mobile/app/components/premium/expiring.js

@@ -32,7 +32,7 @@ import {
   eOpenResultDialog,
   eOpenTrialEndingDialog
 } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import BaseDialog from "../dialog/base-dialog";
 import DialogContainer from "../dialog/dialog-container";
@@ -42,6 +42,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { CompactFeatures } from "./compact-features";
 import { Offer } from "./offer";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Expiring = () => {
   const { colors } = useThemeColors();
@@ -94,7 +95,7 @@ export const Expiring = () => {
           >
             <View
               style={{
-                paddingHorizontal: 12,
+                paddingHorizontal: DefaultAppStyles.GAP,
                 width: "100%"
               }}
             >
@@ -127,7 +128,7 @@ export const Expiring = () => {
                         paddingTop: 0,
                         paddingBottom: 20
                       }}
-                      size={SIZE.md + 2}
+                      size={AppFontSize.md + 2}
                     >
                       Upgrade now to continue using all the pro features after
                       your trial ends
@@ -143,11 +144,11 @@ export const Expiring = () => {
                     await sleep(300);
                     eSendEvent(eOpenPremiumDialog, promo);
                   }}
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                   style={{
                     textDecorationLine: "underline",
                     color: colors.secondary.paragraph,
-                    marginTop: 10
+                    marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}
                 >
                   {"See what's included in Basic & Pro plans"}
@@ -176,11 +177,11 @@ export const Expiring = () => {
                     promo?.discount > 30 ? null : promo
                   );
                 }}
-                fontSize={SIZE.md + 2}
+                fontSize={AppFontSize.md + 2}
                 style={{
                   marginBottom: status.extend ? 0 : 10,
-                  marginTop: 10,
-                  paddingHorizontal: 24
+                  marginTop: DefaultAppStyles.GAP_VERTICAL,
+                  paddingHorizontal: DefaultAppStyles.GAP * 2
                 }}
               />
 
@@ -201,10 +202,10 @@ export const Expiring = () => {
                       button: "Continue"
                     });
                   }}
-                  fontSize={SIZE.xs}
+                  fontSize={AppFontSize.xs}
                   height={30}
                   style={{
-                    marginBottom: 10
+                    marginBottom: DefaultAppStyles.GAP_VERTICAL
                   }}
                 />
               )}

apps/mobile/app/components/premium/feature.js

@@ -21,9 +21,10 @@ import React from "react";
 import { Text, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { ProTag } from "./pro-tag";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const FeatureBlock = ({
   vertical,
@@ -40,11 +41,11 @@ export const FeatureBlock = ({
       style={{
         flexDirection: "row",
         alignItems: "center",
-        paddingHorizontal: 12,
-        marginBottom: 10,
+        paddingHorizontal: DefaultAppStyles.GAP,
+        marginBottom: DefaultAppStyles.GAP_VERTICAL,
         backgroundColor: colors.secondary.background,
         borderRadius: 10,
-        paddingVertical: 12
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       <Paragraph
@@ -53,7 +54,7 @@ export const FeatureBlock = ({
           marginLeft: 5,
           flexShrink: 1
         }}
-        size={SIZE.sm}
+        size={AppFontSize.sm}
       >
         {content}
       </Paragraph>
@@ -63,14 +64,14 @@ export const FeatureBlock = ({
       style={{
         height: 100,
         justifyContent: "center",
-        padding: 10,
+        padding: DefaultAppStyles.GAP_SMALL,
         marginRight: 10,
-        borderRadius: 5,
+        borderRadius: defaultBorderRadius,
         minWidth: 100
       }}
     >
-      <Icon color={colors.primary.icon} name={icon} size={SIZE.xl} />
-      <Paragraph size={SIZE.md}>
+      <Icon color={colors.primary.icon} name={icon} size={AppFontSize.xl} />
+      <Paragraph size={AppFontSize.md}>
         <Text style={{ color: colors.primary.accent }}>{highlight}</Text>
         {content ? "\n" + content : null}
       </Paragraph>
@@ -78,14 +79,14 @@ export const FeatureBlock = ({
       {pro ? (
         <>
           <View style={{ height: 5 }} />
-          <ProTag width={50} size={SIZE.xs} background={proTagBg} />
+          <ProTag width={50} size={AppFontSize.xs} background={proTagBg} />
         </>
       ) : (
         <View
           style={{
             width: 30,
             height: 3,
-            marginTop: 10,
+            marginTop: DefaultAppStyles.GAP_VERTICAL,
             borderRadius: 100,
             backgroundColor: colors.primary.accent
           }}

apps/mobile/app/components/premium/group.js

@@ -20,11 +20,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { ScrollView, View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { FeatureBlock } from "./feature";
 import { ProTag } from "./pro-tag";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Group = ({ item, index }) => {
   const { colors } = useThemeColors();
@@ -32,24 +33,31 @@ export const Group = ({ item, index }) => {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
-        backgroundColor: index % 2 !== 0 ? colors.primary.background : colors.secondary.background,
+        paddingHorizontal: DefaultAppStyles.GAP,
+        backgroundColor:
+          index % 2 !== 0
+            ? colors.primary.background
+            : colors.secondary.background,
         paddingVertical: 40
       }}
     >
       {item?.pro ? (
         <ProTag
-          size={SIZE.sm}
-          background={index % 2 === 0 ? colors.primary.background : colors.secondary.background}
+          size={AppFontSize.sm}
+          background={
+            index % 2 === 0
+              ? colors.primary.background
+              : colors.secondary.background
+          }
         />
       ) : null}
       <Heading>{item.title}</Heading>
-      <Paragraph size={SIZE.md}>{item.detail}</Paragraph>
+      <Paragraph size={AppFontSize.md}>{item.detail}</Paragraph>
 
       {item.features && (
         <ScrollView
           style={{
-            marginTop: 20
+            marginTop: DefaultAppStyles.GAP
           }}
           horizontal
           showsHorizontalScrollIndicator={false}
@@ -60,7 +68,11 @@ export const Group = ({ item, index }) => {
               {...item}
               detail={item.detail}
               pro={item.pro}
-              proTagBg={index % 2 === 0 ? colors.primary.background : colors.secondary.background}
+              proTagBg={
+                index % 2 === 0
+                  ? colors.primary.background
+                  : colors.secondary.background
+              }
             />
           ))}
         </ScrollView>
@@ -68,9 +80,9 @@ export const Group = ({ item, index }) => {
       {item.info ? (
         <Paragraph
           style={{
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
-          size={SIZE.xs}
+          size={AppFontSize.xs}
           color={colors.secondary.paragraph}
         >
           {item.info}

apps/mobile/app/components/premium/offer.js

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { Text } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 
 export const Offer = ({
@@ -36,7 +36,7 @@ export const Offer = ({
         textAlign: "center",
         paddingVertical: padding
       }}
-      size={SIZE.xxxl}
+      size={AppFontSize.xxxl}
     >
       GET {off}
       <Text style={{ color: colors.primary.accent }}>%</Text> OFF!{"\n"}

apps/mobile/app/components/premium/premium-toast.js

@@ -35,11 +35,12 @@ import {
   eOpenPremiumDialog,
   eShowGetPremium
 } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const PremiumToast = ({ context = "global", offset = 0 }) => {
   const { colors } = useThemeColors();
@@ -95,7 +96,7 @@ export const PremiumToast = ({ context = "global", offset = 0 }) => {
           backgroundColor: colors.secondary.background,
           zIndex: 999,
           ...getElevationStyle(20),
-          padding: 12,
+          padding: DefaultAppStyles.GAP,
           borderRadius: 10,
           flexDirection: "row",
           alignSelf: "center",
@@ -120,7 +121,7 @@ export const PremiumToast = ({ context = "global", offset = 0 }) => {
               flexWrap: "wrap"
             }}
             color={colors.primary.accent}
-            size={SIZE.md}
+            size={AppFontSize.md}
           >
             {msg.title}
           </Heading>
@@ -129,7 +130,7 @@ export const PremiumToast = ({ context = "global", offset = 0 }) => {
             style={{
               flexWrap: "wrap"
             }}
-            size={SIZE.sm}
+            size={AppFontSize.sm}
             color={colors.primary.paragraph}
           >
             {msg.desc}

apps/mobile/app/components/premium/pricing-item.tsx

@@ -19,11 +19,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { Platform, View } from "react-native";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import RNIap from "react-native-iap";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const PricingItem = ({
   product,
@@ -49,7 +50,7 @@ export const PricingItem = ({
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         paddingVertical: compact ? 15 : 10,
         width: compact ? null : "100%",
         minWidth: 150,
@@ -59,13 +60,13 @@ export const PricingItem = ({
     >
       {!compact && (
         <View>
-          <Heading size={SIZE.lg - 2}>
+          <Heading size={AppFontSize.lg - 2}>
             {product?.type === "yearly" || product?.offerType === "yearly"
               ? "Yearly"
               : "Monthly"}
           </Heading>
           {product?.info && (
-            <Paragraph size={SIZE.xs}>{product.info}</Paragraph>
+            <Paragraph size={AppFontSize.xs}>{product.info}</Paragraph>
           )}
         </View>
       )}
@@ -75,13 +76,13 @@ export const PricingItem = ({
           style={{
             textDecorationLine: strikethrough ? "line-through" : undefined
           }}
-          size={SIZE.sm}
+          size={AppFontSize.sm}
         >
           <Heading
             style={{
               textDecorationLine: strikethrough ? "line-through" : undefined
             }}
-            size={SIZE.lg - 2}
+            size={AppFontSize.lg - 2}
           >
             {Platform.OS === "android"
               ? (product.data as RNIap.SubscriptionAndroid | undefined)

apps/mobile/app/components/premium/pricing-plans.tsx

@@ -17,6 +17,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import React, { useCallback, useEffect, useState } from "react";
 import { ActivityIndicator, Platform, Text, View } from "react-native";
 import * as RNIap from "react-native-iap";
@@ -27,18 +29,19 @@ import {
   presentSheet,
   ToastManager
 } from "../../services/event-manager";
+import Navigation from "../../services/navigation";
 import PremiumService from "../../services/premium";
-import { useThemeColors } from "@notesnook/theme";
+import { useSettingStore } from "../../stores/use-setting-store";
 import { useUserStore } from "../../stores/use-user-store";
 import {
   eClosePremiumDialog,
   eCloseSheet,
-  eCloseSimpleDialog,
-  eOpenLoginDialog
+  eCloseSimpleDialog
 } from "../../utils/events";
 import { openLinkInBrowser } from "../../utils/functions";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
+import { AuthMode } from "../auth/common";
 import { Dialog } from "../dialog";
 import BaseDialog from "../dialog/base-dialog";
 import { presentDialog } from "../dialog/functions";
@@ -47,8 +50,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { Walkthrough } from "../walkthroughs";
 import { PricingItem } from "./pricing-item";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const UUID_PREFIX = "0bdaea";
 const UUID_VERSION = "4";
@@ -264,7 +266,7 @@ export const PricingPlans = ({
   return loading ? (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         justifyContent: "center",
         alignItems: "center",
         height: 100
@@ -275,7 +277,7 @@ export const PricingPlans = ({
   ) : (
     <View
       style={{
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       {buying ? (
@@ -290,7 +292,7 @@ export const PricingPlans = ({
             style={{
               alignSelf: "center"
             }}
-            size={SIZE.lg}
+            size={AppFontSize.lg}
           >
             {(Platform.OS === "android"
               ? (monthlyPlan?.product as RNIap.SubscriptionAndroid | undefined)
@@ -309,9 +311,9 @@ export const PricingPlans = ({
             type="accent"
             width={250}
             style={{
-              paddingHorizontal: 12,
-              marginBottom: 15,
-              marginTop: 15,
+              paddingHorizontal: DefaultAppStyles.GAP,
+              marginBottom: DefaultAppStyles.GAP,
+              marginTop: DefaultAppStyles.GAP,
               borderRadius: 100
             }}
           />
@@ -332,7 +334,7 @@ export const PricingPlans = ({
             type="secondaryAccented"
             width={250}
             style={{
-              paddingHorizontal: 12,
+              paddingHorizontal: DefaultAppStyles.GAP,
               marginBottom: 15
             }}
           />
@@ -373,7 +375,7 @@ export const PricingPlans = ({
               <Heading
                 style={{
                   paddingTop: 15,
-                  fontSize: SIZE.lg
+                  fontSize: AppFontSize.lg
                 }}
               >
                 Special offer for you
@@ -390,7 +392,7 @@ export const PricingPlans = ({
                     alignSelf: "center",
                     textAlign: "center"
                   }}
-                  size={SIZE.xxl}
+                  size={AppFontSize.xxl}
                 >
                   {Platform.OS === "android"
                     ? (product.data as RNIap.SubscriptionAndroid)
@@ -411,7 +413,7 @@ export const PricingPlans = ({
                       alignSelf: "center",
                       textAlign: "center"
                     }}
-                    size={SIZE.md}
+                    size={AppFontSize.md}
                   >
                     then {getStandardPrice()} {product?.offerType}.
                   </Paragraph>
@@ -503,7 +505,7 @@ export const PricingPlans = ({
                 <Button
                   height={35}
                   style={{
-                    marginTop: 10
+                    marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}
                   onPress={() => {
                     presentDialog({
@@ -557,24 +559,24 @@ export const PricingPlans = ({
                     onPress={() => {
                       eSendEvent(eClosePremiumDialog);
                       eSendEvent(eCloseSheet);
-                      setTimeout(() => {
-                        eSendEvent(eOpenLoginDialog, 1);
-                      }, 400);
+                      Navigation.navigate("Auth", {
+                        mode: AuthMode.login
+                      });
                     }}
                     title={"Sign up for free"}
                     type="accent"
                     width={250}
                     style={{
-                      paddingHorizontal: 12,
+                      paddingHorizontal: DefaultAppStyles.GAP,
                       marginTop: product?.type === "promo" ? 0 : 30,
-                      marginBottom: 10
+                      marginBottom: DefaultAppStyles.GAP_VERTICAL
                     }}
                   />
                   {Platform.OS !== "ios" &&
                   promo &&
                   !promo.promoCode.startsWith("com.streetwriters.notesnook") ? (
                     <Paragraph
-                      size={SIZE.md}
+                      size={AppFontSize.md}
                       textBreakStrategy="balanced"
                       style={{
                         alignSelf: "center",
@@ -612,7 +614,7 @@ export const PricingPlans = ({
                       setProduct(undefined);
                     }}
                     style={{
-                      marginTop: 5
+                      marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
                     }}
                     height={30}
                     fontSize={13}
@@ -629,18 +631,18 @@ export const PricingPlans = ({
       {!user || !upgrade ? (
         <Paragraph
           color={colors.secondary.paragraph}
-          size={SIZE.xs}
+          size={AppFontSize.xs}
           style={{
             alignSelf: "center",
             textAlign: "center",
-            marginTop: 10,
+            marginTop: DefaultAppStyles.GAP_VERTICAL,
             maxWidth: "80%"
           }}
         >
           {user
             ? 'On clicking "Try free for 14 days", your free trial will be activated.'
             : "After sign up you will be asked to activate your free trial."}{" "}
-          <Paragraph size={SIZE.xs} style={{ fontWeight: "bold" }}>
+          <Paragraph size={AppFontSize.xs} style={{ fontWeight: "bold" }}>
             No credit card is required.
           </Paragraph>
         </Paragraph>
@@ -651,11 +653,11 @@ export const PricingPlans = ({
           {Platform.OS === "ios" ? (
             <Paragraph
               textBreakStrategy="balanced"
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               color={colors.secondary.paragraph}
               style={{
                 alignSelf: "center",
-                marginTop: 10,
+                marginTop: DefaultAppStyles.GAP_VERTICAL,
                 textAlign: "center"
               }}
             >
@@ -665,11 +667,11 @@ export const PricingPlans = ({
             </Paragraph>
           ) : (
             <Paragraph
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               color={colors.secondary.paragraph}
               style={{
                 alignSelf: "center",
-                marginTop: 10,
+                marginTop: DefaultAppStyles.GAP_VERTICAL,
                 textAlign: "center"
               }}
             >
@@ -685,7 +687,7 @@ export const PricingPlans = ({
             }}
           >
             <Paragraph
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               color={colors.secondary.paragraph}
               style={{
                 maxWidth: "100%",
@@ -694,7 +696,7 @@ export const PricingPlans = ({
             >
               By subscribing, you agree to our{" "}
               <Paragraph
-                size={SIZE.xs}
+                size={AppFontSize.xs}
                 onPress={() => {
                   openLinkInBrowser("https://notesnook.com/tos")
                     .catch(() => {})
@@ -709,7 +711,7 @@ export const PricingPlans = ({
               </Paragraph>
               and{" "}
               <Paragraph
-                size={SIZE.xs}
+                size={AppFontSize.xs}
                 onPress={() => {
                   openLinkInBrowser("https://notesnook.com/privacy")
                     .catch(() => {})

apps/mobile/app/components/premium/pro-tag.js

@@ -22,6 +22,7 @@ import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useThemeColors } from "@notesnook/theme";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 
 /**
  *
@@ -39,7 +40,7 @@ export const ProTag = ({ width, size, background }) => {
         width: width || 60,
         justifyContent: "center",
         alignItems: "center",
-        paddingVertical: 2.5,
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2,
         flexDirection: "row"
       }}
     >

apps/mobile/app/components/properties/color-tags.tsx

@@ -31,12 +31,13 @@ import { useMenuStore } from "../../stores/use-menu-store";
 import { useRelationStore } from "../../stores/use-relation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { refreshNotesPage } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import ColorPicker from "../dialogs/color-picker";
 import { Button } from "../ui/button";
 import NativeTooltip from "../../utils/tooltip";
 import { Pressable } from "../ui/pressable";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
   const { colors } = useThemeColors();
@@ -85,7 +86,12 @@ const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
       }}
     >
       {isLinked ? (
-        <Icon testID="icon-check" name="check" color="white" size={SIZE.lg} />
+        <Icon
+          testID="icon-check"
+          name="check"
+          color="white"
+          size={AppFontSize.lg}
+        />
       ) : null}
     </Pressable>
   );
@@ -128,37 +134,37 @@ export const ColorTags = ({ item }: { item: Note }) => {
           flexShrink: 2
         }}
       >
-        <FlashList
-          data={colorNotes}
-          estimatedItemSize={30}
-          horizontal
-          extraData={updater}
-          bounces={false}
-          renderItem={renderItem}
-          showsHorizontalScrollIndicator={false}
-          ListFooterComponent={
-            !colorNotes || !colorNotes.length ? (
-              <Button
-                onPress={async () => {
-                  useSettingStore.getState().setSheetKeyboardHandler(false);
-                  setVisible(true);
-                }}
-                buttonType={{
-                  text: colors.primary.accent
-                }}
-                title={strings.addColor()}
-                type="secondary"
-                icon="plus"
-                iconPosition="right"
-                height={30}
-                fontSize={SIZE.xs}
-                style={{
-                  marginRight: 5,
-                  borderRadius: 100,
-                  paddingHorizontal: 8
-                }}
-              />
-            ) : (
+        {!colorNotes || !colorNotes.length ? (
+          <Button
+            onPress={async () => {
+              useSettingStore.getState().setSheetKeyboardHandler(false);
+              setVisible(true);
+            }}
+            buttonType={{
+              text: colors.primary.accent
+            }}
+            title={strings.addColor()}
+            type="secondary"
+            icon="plus"
+            iconPosition="right"
+            height={30}
+            fontSize={AppFontSize.xs}
+            style={{
+              marginRight: 5,
+              paddingHorizontal: DefaultAppStyles.GAP_SMALL,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
+            }}
+          />
+        ) : (
+          <FlashList
+            data={colorNotes}
+            estimatedItemSize={30}
+            horizontal
+            extraData={updater}
+            bounces={false}
+            renderItem={renderItem}
+            showsHorizontalScrollIndicator={false}
+            ListFooterComponent={
               <Pressable
                 style={{
                   width: 35,
@@ -178,12 +184,12 @@ export const ColorTags = ({ item }: { item: Note }) => {
                   testID="icon-plus"
                   name="plus"
                   color={colors.primary.icon}
-                  size={SIZE.lg}
+                  size={AppFontSize.lg}
                 />
               </Pressable>
-            )
-          }
-        />
+            }
+          />
+        )}
       </View>
     </>
   );

apps/mobile/app/components/properties/date-meta.js

@@ -20,10 +20,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { getFormattedDate } from "@notesnook/common";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 export const DateMeta = ({ item }) => {
   const { colors } = useThemeColors();
 
@@ -44,13 +45,13 @@ export const DateMeta = ({ item }) => {
         style={{
           flexDirection: "row",
           justifyContent: "space-between",
-          paddingVertical: 3
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2
         }}
       >
-        <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+        <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
           {strings.dateDescFromKey(key)}
         </Paragraph>
-        <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+        <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
           {getFormattedDate(item[key], "date-time")}
         </Paragraph>
       </View>
@@ -59,11 +60,10 @@ export const DateMeta = ({ item }) => {
   return (
     <View
       style={{
-        paddingVertical: 5,
-        marginTop: 5,
         borderTopWidth: 1,
         borderTopColor: colors.primary.border,
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP,
+        paddingTop: DefaultAppStyles.GAP_VERTICAL_SMALL
       }}
     >
       {getDateMeta().map(renderItem)}

apps/mobile/app/components/properties/index.js

@@ -16,18 +16,19 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
+import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { Platform, View } from "react-native";
+import { View } from "react-native";
 import { FlatList } from "react-native-actions-sheet";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { ColorValues } from "../../utils/colors";
 import { eOnLoadNote } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { fluidTabsRef } from "../../utils/global-refs";
+import { AppFontSize } from "../../utils/size";
 import SheetProvider from "../sheet-provider";
-import { useSideBarDraggingStore } from "../side-menu/dragging-store";
 import { IconButton } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
 import { ReminderTime } from "../ui/reminder-time";
@@ -36,10 +37,9 @@ import Paragraph from "../ui/typography/paragraph";
 import { DateMeta } from "./date-meta";
 import { Items } from "./items";
 import Notebooks from "./notebooks";
-import { Synced } from "./synced";
 import { TagStrip, Tags } from "./tags";
-import { tabBarRef } from "../../utils/global-refs";
-import { strings } from "@notesnook/intl";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const Line = ({ top = 6, bottom = 6 }) => {
   const { colors } = useThemeColors();
@@ -82,13 +82,14 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
       data={[0]}
       keyExtractor={() => "properties-scroll-item"}
       renderItem={() => (
-        <View>
+        <View
+          style={{
+            gap: DefaultAppStyles.GAP_VERTICAL
+          }}
+        >
           <View
             style={{
-              paddingHorizontal: 12,
-              marginTop: 5,
-              zIndex: 10,
-              marginBottom: 5
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
             <View
@@ -101,7 +102,8 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
                 style={{
                   flexDirection: "row",
                   alignItems: "center",
-                  flexShrink: 1
+                  flexShrink: 1,
+                  gap: 5
                 }}
               >
                 {item.type === "color" ? (
@@ -116,16 +118,15 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
                       marginRight: 10
                     }}
                   />
+                ) : item.type === "tag" ? (
+                  <Icon
+                    name="pound"
+                    size={AppFontSize.lg}
+                    color={colors.primary.icon}
+                  />
                 ) : null}
 
-                <Heading size={SIZE.lg}>
-                  {item.type === "tag" && !isColor ? (
-                    <Heading size={SIZE.xl} color={colors.primary.accent}>
-                      #
-                    </Heading>
-                  ) : null}
-                  {item.title}
-                </Heading>
+                <Heading size={AppFontSize.lg}>{item.title}</Heading>
               </View>
 
               {item.type === "note" ? (
@@ -133,7 +134,7 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
                   name="open-in-new"
                   type="plain"
                   color={colors.primary.icon}
-                  size={SIZE.lg}
+                  size={AppFontSize.lg}
                   style={{
                     alignSelf: "flex-start"
                   }}
@@ -144,7 +145,7 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
                       newTab: true
                     });
                     if (!DDS.isTab) {
-                      tabBarRef.current?.goToPage(1);
+                      fluidTabsRef.current?.goToPage("editor");
                     }
                   }}
                 />
@@ -165,35 +166,28 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
                 style={{
                   justifyContent: "flex-start",
                   borderWidth: 0,
-                  height: 30,
                   alignSelf: "flex-start",
                   backgroundColor: "transparent",
-                  paddingHorizontal: 0
+                  paddingHorizontal: 0,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
                 }}
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
               />
             ) : null}
           </View>
 
           <DateMeta item={item} />
-          <Line bottom={0} />
+          <Line bottom={0} top={0} />
 
           {item.type === "note" ? (
             <>
               <Tags close={close} item={item} />
-              <Line bottom={0} />
+              <Line bottom={0} top={0} />
             </>
           ) : null}
           {item.type === "note" ? (
-            <View
-              style={{
-                paddingHorizontal: 12
-              }}
-            >
-              <Notebooks note={item} close={close} />
-            </View>
+            <Notebooks note={item} close={close} />
           ) : null}
-
           <Items
             item={item}
             buttons={buttons}
@@ -202,8 +196,6 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
             }}
           />
 
-          <Synced item={item} close={close} />
-
           {DDS.isTab ? (
             <View
               style={{
@@ -218,87 +210,36 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
   );
 };
 
-Properties.present = async (item, buttons = [], isSheet) => {
+Properties.present = async (item, isSheet) => {
   if (!item) return;
   let type = item?.type;
-  let props = [];
-  let android = [];
+  let dbItem;
   switch (type) {
     case "trash":
-      props[0] = item;
-      props.push(["delete", "restore"]);
+      dbItem = item;
       break;
     case "note":
-      android = Platform.OS === "android" ? ["pin-to-notifications"] : [];
-      props[0] = await db.notes.note(item.id);
-      props.push([
-        "notebooks",
-        "add-reminder",
-        "share",
-        "export",
-        "copy",
-        "publish",
-        "pin",
-        "favorite",
-        "attachments",
-        "lock-unlock",
-        "trash",
-        "remove-from-notebook",
-        "history",
-        "read-only",
-        "reminders",
-        "local-only",
-        "duplicate",
-        "copy-link",
-        "references",
-        ...android,
-        ...buttons
-      ]);
+      dbItem = await db.notes.note(item.id);
       break;
     case "notebook":
-      props[0] = await db.notebooks.notebook(item.id);
-      props.push([
-        "edit-notebook",
-        "pin",
-        "add-shortcut",
-        "trash",
-        "default-notebook",
-        "add-notebook",
-        "move-notes",
-        "move-notebook"
-      ]);
+      dbItem = await db.notebooks.notebook(item.id);
       break;
     case "tag":
-      props[0] = await db.tags.tag(item.id);
-      props.push(["add-shortcut", "trash", "rename-tag"]);
+      dbItem = await db.tags.tag(item.id);
       break;
     case "color":
-      props[0] = await db.colors.color(item.id);
-
-      props.push([
-        "trash",
-        "rename-color",
-        ...(useSideBarDraggingStore.getState().dragging ? [] : ["reorder"])
-      ]);
+      dbItem = await db.colors.color(item.id);
       break;
     case "reminder": {
-      props[0] = await db.reminders.reminder(item.id);
-      props.push(["edit-reminder", "trash", "disable-reminder"]);
+      dbItem = await db.reminders.reminder(item.id);
       break;
     }
   }
-  if (!props[0]) return;
+
   presentSheet({
     context: isSheet ? "local" : undefined,
     component: (ref, close) => (
-      <Properties
-        close={() => {
-          close();
-        }}
-        actionSheetRef={ref}
-        item={props[0]}
-        buttons={props[1]}
-      />
+      <Properties close={close} actionSheetRef={ref} item={dbItem} />
     )
   });
 };

apps/mobile/app/components/properties/items.js

@@ -1,266 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import { useThemeColors } from "@notesnook/theme";
-import React from "react";
-import { Dimensions, ScrollView, View } from "react-native";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useActions } from "../../hooks/use-actions";
-import { useStoredRef } from "../../hooks/use-stored-ref";
-import { DDS } from "../../services/device-detection";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { SIZE } from "../../utils/size";
-import { Button } from "../ui/button";
-import { Pressable } from "../ui/pressable";
-import Paragraph from "../ui/typography/paragraph";
-
-export const Items = ({ item, buttons, close }) => {
-  const { colors } = useThemeColors();
-  const topBarSorting = useStoredRef("topbar-sorting-ref", {});
-
-  const dimensions = useSettingStore((state) => state.dimensions);
-  const actions = useActions({ item, close });
-  const data = actions.filter((i) => buttons.indexOf(i.id) > -1 && !i.hidden);
-  let width = dimensions.width > 600 ? 600 : dimensions.width;
-  const shouldShrink =
-    Dimensions.get("window").fontScale > 1 &&
-    Dimensions.get("window").width < 450;
-  let columnItemsCount = DDS.isLargeTablet() ? 7 : shouldShrink ? 4 : 5;
-  let columnItemWidth = DDS.isTab
-    ? (width - 12) / columnItemsCount
-    : (width - 12) / columnItemsCount;
-
-  const _renderRowItem = ({ item }) => (
-    <View
-      key={item.id}
-      testID={"icon-" + item.id}
-      style={{
-        alignItems: "center",
-        width: columnItemWidth,
-        marginBottom: 10
-      }}
-    >
-      <Pressable
-        onPress={item.func}
-        type={item.on ? "shade" : "secondary"}
-        style={{
-          height: columnItemWidth - 12,
-          width: columnItemWidth - 12,
-          borderRadius: 10,
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
-          textAlignVertical: "center",
-          marginBottom: DDS.isTab ? 7 : 3.5
-        }}
-      >
-        <Icon
-          allowFontScaling
-          name={item.icon}
-          size={DDS.isTab ? SIZE.xxl : shouldShrink ? SIZE.xxl : SIZE.lg}
-          color={
-            item.on
-              ? colors.primary.accent
-              : item.id.match(/(delete|trash)/g)
-              ? colors.error.icon
-              : colors.secondary.icon
-          }
-        />
-      </Pressable>
-
-      <Paragraph
-        size={SIZE.xs}
-        textBreakStrategy="simple"
-        style={{ textAlign: "center" }}
-      >
-        {item.title}
-      </Paragraph>
-    </View>
-  );
-
-  const renderColumnItem = (item) => (
-    <Button
-      key={item.name + item.title}
-      buttonType={{
-        text: item.on
-          ? colors.primary.accent
-          : item.name === "Delete" || item.name === "PermDelete"
-          ? colors.error.paragraph
-          : colors.primary.paragraph
-      }}
-      onPress={item.func}
-      title={item.title}
-      icon={item.icon}
-      type={item.on ? "shade" : "plain"}
-      fontSize={SIZE.sm}
-      style={{
-        borderRadius: 0,
-        justifyContent: "flex-start",
-        alignSelf: "flex-start",
-        width: "100%"
-      }}
-    />
-  );
-
-  const renderTopBarItem = (item, index) => {
-    return (
-      <Pressable
-        onPress={() => {
-          item.func();
-          setImmediate(() => {
-            const currentValue = topBarSorting.current[item.id] || 0;
-            topBarSorting.current = {
-              ...topBarSorting.current,
-              [item.id]: currentValue + 1
-            };
-          });
-        }}
-        key={item.id}
-        testID={"icon-" + item.id}
-        activeOpacity={1}
-        style={{
-          alignSelf: "flex-start",
-          paddingHorizontal: 0,
-          flex: 1
-        }}
-      >
-        <View
-          onPress={item.func}
-          style={{
-            height: topBarItemWidth,
-            justifyContent: "center",
-            alignItems: "center",
-            textAlign: "center",
-            textAlignVertical: "center",
-            marginBottom: DDS.isTab ? 7 : 3.5,
-            borderRadius: 100
-          }}
-        >
-          <Icon
-            name={item.icon}
-            allowFontScaling
-            size={DDS.isTab ? SIZE.xxl : SIZE.md + 4}
-            color={
-              item.on
-                ? colors.primary.accent
-                : item.name === "Delete" || item.name === "PermDelete"
-                ? colors.error.icon
-                : colors.secondary.icon
-            }
-          />
-        </View>
-
-        <Paragraph
-          textBreakStrategy="simple"
-          size={SIZE.xxs}
-          style={{ textAlign: "center" }}
-        >
-          {item.title}
-        </Paragraph>
-      </Pressable>
-    );
-  };
-
-  const topBarItemsList = [
-    "pin",
-    "favorite",
-    "copy",
-    "share",
-    "lock-unlock",
-    "publish",
-    "export",
-    "copy-link",
-    "duplicate",
-    "local-only",
-    "read-only"
-  ];
-
-  const bottomBarItemsList = [
-    "notebooks",
-    "add-reminder",
-    "pin-to-notifications",
-    "history",
-    "reminders",
-    "attachments",
-    "references",
-    "trash"
-  ];
-
-  const topBarItems = data
-    .filter((item) => topBarItemsList.indexOf(item.id) > -1)
-    .sort((a, b) =>
-      topBarItemsList.indexOf(a.id) > topBarItemsList.indexOf(b.id) ? 1 : -1
-    )
-    .sort((a, b) => {
-      return (
-        (topBarSorting.current[b.id] || 0) - (topBarSorting.current[a.id] || 0)
-      );
-    });
-
-  const bottomGridItems = data
-    .filter((item) => bottomBarItemsList.indexOf(item.id) > -1)
-    .sort((a, b) =>
-      bottomBarItemsList.indexOf(a.id) > bottomBarItemsList.indexOf(b.id)
-        ? 1
-        : -1
-    );
-
-  let topBarItemWidth =
-    (width - (topBarItems.length * 10 + 14)) / topBarItems.length;
-  topBarItemWidth;
-
-  if (topBarItemWidth < 60) {
-    topBarItemWidth = 60;
-  }
-
-  return item.type === "note" ? (
-    <>
-      <ScrollView
-        horizontal
-        style={{
-          paddingHorizontal: 12,
-          marginTop: 6,
-          marginBottom: 6
-        }}
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={{
-          paddingRight: 25,
-          gap: 15
-        }}
-      >
-        {topBarItems.map(renderTopBarItem)}
-      </ScrollView>
-
-      <View
-        style={{
-          flexDirection: "row",
-          flexWrap: "wrap",
-          alignContent: "flex-start",
-          marginTop: item.type !== "note" ? 10 : 0,
-          paddingTop: 10,
-          marginLeft: 6
-        }}
-      >
-        {bottomGridItems.map((item) => _renderRowItem({ item }))}
-      </View>
-    </>
-  ) : (
-    <View data={data}>{data.map(renderColumnItem)}</View>
-  );
-};

apps/mobile/app/components/properties/items.tsx

@@ -0,0 +1,348 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { Item } from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
+import React from "react";
+import { Dimensions, View } from "react-native";
+import SwiperFlatList from "react-native-swiper-flatlist";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { Action, ActionId, useActions } from "../../hooks/use-actions";
+import { useStoredRef } from "../../hooks/use-stored-ref";
+import { DDS } from "../../services/device-detection";
+import { useSettingStore } from "../../stores/use-setting-store";
+import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
+import { Button } from "../ui/button";
+import { Pressable } from "../ui/pressable";
+import Paragraph from "../ui/typography/paragraph";
+
+const TOP_BAR_ITEMS: ActionId[] = [
+  "pin",
+  "favorite",
+  "lock-unlock",
+  "publish",
+  "local-only",
+  "read-only",
+  "pin-to-notifications"
+];
+
+const BOTTOM_BAR_ITEMS: ActionId[] = [
+  "notebooks",
+  "add-reminder",
+  "history",
+  "reminders",
+  "attachments",
+  "references",
+  "copy",
+  "share",
+  "export",
+  "copy-link",
+  "duplicate",
+  "trash"
+];
+
+const COLUMN_BAR_ITEMS: ActionId[] = [
+  "select",
+  "add-notebook",
+  "edit-notebook",
+  "move-notes",
+  "move-notebook",
+  "pin",
+  "default-notebook",
+  "add-shortcut",
+  "reorder",
+  "rename-color",
+  "rename-tag",
+  "restore",
+  "trash",
+  "delete"
+];
+
+export const Items = ({ item, close }: { item: Item; close: () => void }) => {
+  const { colors } = useThemeColors();
+  const topBarSorting = useStoredRef<{ [name: string]: number }>(
+    "topbar-sorting-ref",
+    {}
+  );
+  const dimensions = useSettingStore((state) => state.dimensions);
+  const actions = useActions({ item, close });
+  const selectedActions = actions.filter((i) => !i.hidden);
+  const deviceMode = useSettingStore((state) => state.deviceMode);
+  const width = Math.min(dimensions.width, 600);
+
+  const shouldShrink =
+    Dimensions.get("window").fontScale > 1 &&
+    Dimensions.get("window").width < 450;
+
+  const columnItemsCount = deviceMode === "tablet" ? 7 : shouldShrink ? 4 : 5;
+
+  const columnItemWidth =
+    deviceMode !== "mobile"
+      ? (width - DefaultAppStyles.GAP) / columnItemsCount
+      : (width - DefaultAppStyles.GAP) / columnItemsCount;
+
+  const topBarItems = selectedActions
+    .filter((item) => TOP_BAR_ITEMS.indexOf(item.id) > -1)
+    .sort((a, b) =>
+      TOP_BAR_ITEMS.indexOf(a.id) > TOP_BAR_ITEMS.indexOf(b.id) ? 1 : -1
+    )
+    .sort((a, b) => {
+      return (
+        (topBarSorting.current[b.id] || 0) - (topBarSorting.current[a.id] || 0)
+      );
+    });
+
+  const bottomGridItems = selectedActions
+    .filter((item) => BOTTOM_BAR_ITEMS.indexOf(item.id) > -1)
+    .sort((a, b) =>
+      BOTTOM_BAR_ITEMS.indexOf(a.id) > BOTTOM_BAR_ITEMS.indexOf(b.id) ? 1 : -1
+    );
+
+  const columnItems = selectedActions
+    .filter((item) => COLUMN_BAR_ITEMS.indexOf(item.id) > -1)
+    .sort((a, b) =>
+      COLUMN_BAR_ITEMS.indexOf(a.id) > COLUMN_BAR_ITEMS.indexOf(b.id) ? 1 : -1
+    );
+
+  const topBarItemHeight = Math.min(
+    (width - (topBarItems.length * 10 + 14)) / topBarItems.length,
+    60
+  );
+
+  const renderRowItem = React.useCallback(
+    ({ item }: { item: Action }) => (
+      <View
+        key={item.id}
+        style={{
+          alignItems: "center",
+          width: columnItemWidth - 8
+        }}
+      >
+        <Pressable
+          onPress={item.onPress}
+          type={item.checked ? "shade" : "secondary"}
+          testID={"icon-" + item.id}
+          style={{
+            height: columnItemWidth / 1.5,
+            width: columnItemWidth - 8,
+            borderRadius: 10,
+            justifyContent: "center",
+            alignItems: "center",
+            marginBottom: DDS.isTab ? 7 : 3.5
+          }}
+        >
+          <Icon
+            allowFontScaling
+            name={item.icon}
+            size={
+              DDS.isTab
+                ? AppFontSize.xxl
+                : shouldShrink
+                ? AppFontSize.xxl
+                : AppFontSize.lg
+            }
+            color={
+              item.checked
+                ? item.activeColor || colors.primary.accent
+                : item.id.match(/(delete|trash)/g)
+                ? colors.error.icon
+                : colors.secondary.icon
+            }
+          />
+        </Pressable>
+
+        <Paragraph
+          size={AppFontSize.xxs}
+          textBreakStrategy="simple"
+          style={{ textAlign: "center" }}
+        >
+          {item.title}
+        </Paragraph>
+      </View>
+    ),
+    [
+      colors.error.icon,
+      colors.primary.accent,
+      colors.secondary.icon,
+      columnItemWidth,
+      shouldShrink
+    ]
+  );
+
+  const renderColumnItem = React.useCallback(
+    (item: Action) => (
+      <Button
+        key={item.id}
+        buttonType={{
+          text: item.checked
+            ? item.activeColor || colors.primary.accent
+            : item.id === "delete" || item.id === "trash"
+            ? colors.error.paragraph
+            : colors.primary.paragraph
+        }}
+        testID={"icon-" + item.id}
+        onPress={item.onPress}
+        title={item.title}
+        icon={item.icon}
+        type={item.checked ? "inverted" : "plain"}
+        fontSize={AppFontSize.sm}
+        style={{
+          borderRadius: 0,
+          justifyContent: "flex-start",
+          alignSelf: "flex-start",
+          width: "100%"
+        }}
+      />
+    ),
+    [colors.error.paragraph, colors.primary.accent, colors.primary.paragraph]
+  );
+
+  const renderTopBarItem = React.useCallback(
+    (item: Action) => {
+      return (
+        <Pressable
+          onPress={() => {
+            item.onPress();
+            setImmediate(() => {
+              const currentValue = topBarSorting.current[item.id] || 0;
+              topBarSorting.current = {
+                ...topBarSorting.current,
+                [item.id]: currentValue + 1
+              };
+            });
+          }}
+          key={item.id}
+          testID={"icon-" + item.id}
+          style={{
+            width: columnItemWidth - 8
+          }}
+        >
+          <View
+            style={{
+              height: columnItemWidth / 2,
+              width: columnItemWidth - DefaultAppStyles.GAP_SMALL,
+              justifyContent: "center",
+              alignItems: "center"
+            }}
+          >
+            <Icon
+              name={item.icon}
+              allowFontScaling
+              size={DDS.isTab ? AppFontSize.xxl : AppFontSize.md + 4}
+              color={
+                item.checked
+                  ? item.activeColor || colors.primary.accent
+                  : item.id === "delete" || item.id === "trash"
+                  ? colors.error.icon
+                  : colors.secondary.icon
+              }
+            />
+          </View>
+
+          <Paragraph
+            textBreakStrategy="simple"
+            size={AppFontSize.xxs}
+            style={{ textAlign: "center" }}
+          >
+            {item.title}
+          </Paragraph>
+        </Pressable>
+      );
+    },
+    [
+      colors.error.icon,
+      colors.primary.accent,
+      colors.secondary.icon,
+      columnItemWidth,
+      topBarSorting
+    ]
+  );
+
+  const getTopBarItemChunksOfFour = () => {
+    const chunks = [];
+    for (let i = 0; i < topBarItems.length; i += 5) {
+      chunks.push(topBarItems.slice(i, i + 5));
+    }
+    return chunks;
+  };
+
+  return (
+    <View
+      style={{
+        gap: DefaultAppStyles.GAP
+      }}
+    >
+      {item.type === "note" ? (
+        <>
+          <View>
+            <SwiperFlatList
+              data={getTopBarItemChunksOfFour()}
+              autoplay={false}
+              showPagination
+              paginationStyleItemActive={{
+                borderRadius: 2,
+                backgroundColor: colors.selected.background,
+                height: 6,
+                marginHorizontal: 2
+              }}
+              paginationStyleItemInactive={{
+                borderRadius: 2,
+                backgroundColor: colors.secondary.background,
+                height: 6,
+                marginHorizontal: 2
+              }}
+              paginationStyle={{
+                position: "relative",
+                marginHorizontal: 2,
+                marginBottom: 0,
+                marginTop: DefaultAppStyles.GAP
+              }}
+              renderItem={({ item, index }) => (
+                <View
+                  style={{
+                    flexDirection: "row",
+                    paddingHorizontal: DefaultAppStyles.GAP,
+                    gap: 5,
+                    width: width
+                  }}
+                >
+                  {item.map(renderTopBarItem)}
+                </View>
+              )}
+            />
+          </View>
+
+          <View
+            style={{
+              flexDirection: "row",
+              flexWrap: "wrap",
+              gap: 5,
+              paddingHorizontal: DefaultAppStyles.GAP
+            }}
+          >
+            {bottomGridItems.map((item) => renderRowItem({ item }))}
+          </View>
+        </>
+      ) : (
+        <View>{columnItems.map(renderColumnItem)}</View>
+      )}
+    </View>
+  );
+};

apps/mobile/app/components/properties/notebooks.js

@@ -25,11 +25,12 @@ import { db } from "../../common/database";
 import NotebookScreen from "../../screens/notebook";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { eClearEditor } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import { Pressable } from "../ui/pressable";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export default function Notebooks({ note, close, full }) {
   const { colors } = useThemeColors();
@@ -59,12 +60,12 @@ export default function Notebooks({ note, close, full }) {
       type={full ? "transparent" : "secondary"}
       style={{
         justifyContent: "flex-start",
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         flexDirection: "row",
         alignItems: "center",
         flexShrink: 1,
         flexGrow: 1,
-        padding: 6,
+        padding: DefaultAppStyles.GAP_SMALL,
         borderRadius: 10,
         minHeight: 42
       }}
@@ -72,7 +73,7 @@ export default function Notebooks({ note, close, full }) {
       <Icon
         name="book-outline"
         color={colors.primary.accent}
-        size={SIZE.sm}
+        size={AppFontSize.sm}
         style={{
           marginRight: 5
         }}
@@ -82,7 +83,7 @@ export default function Notebooks({ note, close, full }) {
         style={{
           maxWidth: "50%"
         }}
-        size={SIZE.sm}
+        size={AppFontSize.sm}
       >
         {item.title}
       </Heading>
@@ -92,40 +93,46 @@ export default function Notebooks({ note, close, full }) {
   return noteNotebooks.length === 0 ? null : (
     <View
       style={{
-        width: "100%",
-        borderRadius: 10,
-        marginTop: 6
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
-      {full
-        ? noteNotebooks.map(renderItem)
-        : noteNotebooks.slice(0, 1).map(renderItem)}
+      <View
+        style={{
+          width: "100%",
+          borderRadius: 10,
+          marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
+        }}
+      >
+        {full
+          ? noteNotebooks.map(renderItem)
+          : noteNotebooks.slice(0, 1).map(renderItem)}
 
-      {noteNotebooks.length > 1 && !full ? (
-        <Button
-          title={strings.viewAllLinkedNotebooks()}
-          fontSize={SIZE.xs}
-          style={{
-            alignSelf: "flex-end",
-            marginRight: 12,
-            paddingHorizontal: 0,
-            backgroundColor: "transparent"
-          }}
-          type="plain"
-          textStyle={{
-            textDecorationLine: "underline"
-          }}
-          height={20}
-          onPress={() => {
-            presentSheet({
-              context: "properties",
-              component: (ref, close) => (
-                <Notebooks note={note} close={close} full={true} />
-              )
-            });
-          }}
-        />
-      ) : undefined}
+        {noteNotebooks.length > 1 && !full ? (
+          <Button
+            title={strings.viewAllLinkedNotebooks()}
+            fontSize={AppFontSize.xs}
+            style={{
+              alignSelf: "flex-end",
+              marginRight: 12,
+              paddingHorizontal: 0,
+              backgroundColor: "transparent"
+            }}
+            type="plain"
+            textStyle={{
+              textDecorationLine: "underline"
+            }}
+            height={20}
+            onPress={() => {
+              presentSheet({
+                context: "properties",
+                component: (ref, close) => (
+                  <Notebooks note={note} close={close} full={true} />
+                )
+              });
+            }}
+          />
+        ) : undefined}
+      </View>
     </View>
   );
 }

apps/mobile/app/components/properties/synced.js

@@ -19,92 +19,44 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { View, useWindowDimensions } from "react-native";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useUserStore } from "../../stores/use-user-store";
 import { openLinkInBrowser } from "../../utils/functions";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import { strings } from "@notesnook/intl";
 export const Synced = ({ item, close }) => {
   const { colors } = useThemeColors();
   const user = useUserStore((state) => state.user);
   const lastSynced = useUserStore((state) => state.lastSynced);
-
-  const dimensions = useWindowDimensions();
-  const shouldShrink = dimensions.fontScale > 1 && dimensions.width < 450;
   return user && lastSynced >= item.dateModified ? (
-    <View
+    <Button
       style={{
-        paddingVertical: 0,
-        width: "100%",
-        paddingHorizontal: 12,
         alignItems: "center",
         flexDirection: "row",
         justifyContent: "flex-start",
-        alignSelf: "center",
-        paddingTop: 10,
-        marginTop: 10,
-        borderTopWidth: 1,
-        borderTopColor: colors.primary.border
+        alignSelf: "flex-start",
+        height: "auto",
+        padding: DefaultAppStyles.GAP_VERTICAL_SMALL,
+        paddingHorizontal: DefaultAppStyles.GAP_SMALL
       }}
-    >
-      <Icon
-        name="shield-key-outline"
-        color={colors.primary.accent}
-        size={shouldShrink ? SIZE.xxl : SIZE.xxxl}
-      />
-
-      <View
-        style={{
-          flex: 1,
-          marginLeft: 5,
-          flexShrink: 1
-        }}
-      >
-        <Heading
-          color={colors.primary.heading}
-          size={SIZE.xs}
-          style={{
-            flexWrap: "wrap"
-          }}
-        >
-          {strings.noteSyncedNoticeHeading()}
-        </Heading>
-        {shouldShrink ? null : (
-          <Paragraph
-            style={{
-              flexWrap: "wrap"
-            }}
-            size={SIZE.xs}
-            color={colors.primary.paragraph}
-          >
-            {strings.noteSyncedNoticeDesc(item.itemType || item.type)}
-          </Paragraph>
-        )}
-      </View>
-
-      <Button
-        onPress={async () => {
-          try {
-            close();
-            await sleep(300);
-            await openLinkInBrowser(
-              "https://help.notesnook.com/how-is-my-data-encrypted",
-              colors
-            );
-          } catch (e) {
-            console.error(e);
-          }
-        }}
-        title={strings.learnMore()}
-        fontSize={SIZE.xs}
-        height={30}
-        type="secondaryAccented"
-      />
-    </View>
+      fontSize={AppFontSize.xxxs}
+      iconSize={AppFontSize.xs}
+      icon="shield-key-outline"
+      type="shade"
+      title="Encrypted and synced"
+      onPress={async () => {
+        try {
+          close();
+          await sleep(300);
+          await openLinkInBrowser(
+            "https://help.notesnook.com/how-is-my-data-encrypted",
+            colors
+          );
+        } catch (e) {
+          console.error(e);
+        }
+      }}
+    />
   ) : null;
 };

apps/mobile/app/components/properties/tags.js

@@ -22,12 +22,13 @@ import { View } from "react-native";
 import { db } from "../../common/database";
 import { TaggedNotes } from "../../screens/notes/tagged";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import ManageTagsSheet from "../sheets/manage-tags";
 import { Button } from "../ui/button";
 import { ColorTags } from "./color-tags";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Tags = ({ item, close }) => {
   const { colors } = useThemeColors();
@@ -35,11 +36,10 @@ export const Tags = ({ item, close }) => {
   return item.id ? (
     <View
       style={{
-        marginTop: 5,
         flexDirection: "row",
         flexWrap: "wrap",
         alignItems: "center",
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         alignSelf: "center",
         justifyContent: "space-between",
         width: "100%"
@@ -56,11 +56,10 @@ export const Tags = ({ item, close }) => {
         type="secondary"
         icon="plus"
         iconPosition="right"
-        height={30}
-        fontSize={SIZE.sm - 1}
+        fontSize={AppFontSize.xs}
         style={{
-          height: 35,
-          borderRadius: 100
+          paddingHorizontal: DefaultAppStyles.GAP_SMALL,
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
         }}
       />
       <ColorTags item={item} />
@@ -86,7 +85,7 @@ export const TagStrip = ({ item, close }) => {
         flexDirection: "row",
         flexWrap: "wrap",
         alignItems: "center",
-        marginTop: 10,
+        marginTop: DefaultAppStyles.GAP_VERTICAL,
         gap: 5
       }}
     >
@@ -117,7 +116,7 @@ const TagItem = ({ tag, close }) => {
       title={"#" + tag.title}
       type="plain"
       height={20}
-      fontSize={SIZE.xs}
+      fontSize={AppFontSize.xs}
       style={style}
       textStyle={{
         color: colors.secondary.paragraph

apps/mobile/app/components/selection-header/index.tsx

@@ -29,24 +29,23 @@ import {
 } from "react-native";
 import { Menu } from "react-native-material-menu";
 import { db } from "../../common/database";
-import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { ToastManager } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
+import { useTrashStore } from "../../stores/use-trash-store";
 import { deleteItems } from "../../utils/functions";
-import { tabBarRef } from "../../utils/global-refs";
+import { fluidTabsRef } from "../../utils/global-refs";
 import { updateNotebook } from "../../utils/notebooks";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
 import { presentDialog } from "../dialog/functions";
-import MoveNoteSheet from "../sheets/add-to";
 import ExportNotesSheet from "../sheets/export-notes";
 import ManageTagsSheet from "../sheets/manage-tags";
-import { MoveNotebookSheet } from "../sheets/move-notebook";
-import { Button } from "../ui/button";
+import { MoveNotebook } from "../../screens/move-notebook";
 import { IconButton } from "../ui/icon-button";
-import Heading from "../ui/typography/heading";
+import NativeTooltip from "../../utils/tooltip";
 
 export const SelectionHeader = React.memo(
   ({
@@ -61,23 +60,20 @@ export const SelectionHeader = React.memo(
     renderedInRoute?: string;
   }) => {
     const menuRef = useRef<Menu>(null);
-    const { colors: contextMenuColors } = useThemeColors("contextMenu");
     const { colors } = useThemeColors();
     const selectionMode = useSelectionStore((state) => state.selectionMode);
     const selectedItemsList = useSelectionStore(
       (state) => state.selectedItemsList
     );
     const clearSelection = useSelectionStore((state) => state.clearSelection);
-    const insets = useGlobalSafeAreaInsets();
     const allSelected =
       items?.placeholders?.length === selectedItemsList.length;
     const focusedRouteId = useNavigationStore((state) => state.focusedRouteId);
-
     useEffect(() => {
       if (selectionMode) {
-        tabBarRef.current?.lock();
+        fluidTabsRef.current?.lock();
       } else {
-        tabBarRef.current?.unlock();
+        fluidTabsRef.current?.unlock();
       }
     }, [selectionMode]);
 
@@ -103,8 +99,11 @@ export const SelectionHeader = React.memo(
     const deleteItem = async () => {
       if (!type) return;
       presentDialog({
-        title: strings.doActions.delete.unknown(type, selectedItemsList.length),
-        paragraph: strings.actionConfirmations.delete.unknown(
+        title: strings.doActions.permanentlyDelete.unknown(
+          type,
+          selectedItemsList.length
+        ),
+        paragraph: strings.actionConfirmations.permanentlyDelete.unknown(
           type,
           selectedItemsList.length
         ),
@@ -113,7 +112,7 @@ export const SelectionHeader = React.memo(
         positivePress: async () => {
           if (!selectedItemsList.length) return;
           await db.trash.delete(...selectedItemsList);
-          Navigation.queueRoutesForUpdate();
+          useTrashStore.getState().refresh();
           clearSelection();
         },
         positiveType: "errorShade"
@@ -139,61 +138,24 @@ export const SelectionHeader = React.memo(
       <View
         style={{
           width: "100%",
-          height: Platform.OS === "android" ? 50 + insets.top : 50,
-          paddingTop: Platform.OS === "android" ? insets.top : null,
           backgroundColor: colors.primary.background,
-          justifyContent: "space-between",
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL,
           alignItems: "center",
           flexDirection: "row",
           zIndex: 999,
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP,
+          position: "absolute",
+          bottom: 0,
+          borderTopWidth: 1,
+          borderColor: colors.primary.border,
+          justifyContent: "space-between"
         }}
       >
         <View
           style={{
             flexDirection: "row",
-            justifyContent: "flex-start",
             alignItems: "center",
-            borderRadius: 100
-          }}
-        >
-          <IconButton
-            style={{
-              justifyContent: "center",
-              alignItems: "center",
-              height: 40,
-              width: 40,
-              borderRadius: 100,
-              marginRight: 10
-            }}
-            onPress={() => {
-              clearSelection();
-            }}
-            color={colors.primary.icon}
-            name="close"
-          />
-
-          <View
-            style={{
-              height: 40,
-              borderRadius: 100,
-              paddingHorizontal: 16,
-              justifyContent: "center",
-              flexDirection: "row",
-              alignItems: "center"
-            }}
-          >
-            <Heading size={SIZE.lg} color={colors.primary.paragraph}>
-              {selectedItemsList.length}
-            </Heading>
-          </View>
-        </View>
-
-        <View
-          style={{
-            flexDirection: "row",
-            justifyContent: "flex-start",
-            alignItems: "center"
+            gap: DefaultAppStyles.GAP_SMALL
           }}
         >
           <IconButton
@@ -202,159 +164,155 @@ export const SelectionHeader = React.memo(
                 .getState()
                 .setAll(allSelected ? [] : [...((await items?.ids()) || [])]);
             }}
-            tooltipText="Select all"
-            tooltipPosition={4}
-            style={{
-              marginLeft: 10
-            }}
-            color={
-              allSelected ? colors.primary.accent : colors.primary.paragraph
-            }
+            size={AppFontSize.lg}
+            color={allSelected ? colors.primary.accent : colors.primary.icon}
             name="select-all"
           />
-
-          {selectedItemsList.length ? (
-            <Menu
-              ref={menuRef}
-              animationDuration={200}
-              style={{
-                borderRadius: 5,
-                backgroundColor: contextMenuColors.primary.background,
-                marginTop: 35
-              }}
-              onRequestClose={() => {
-                //@ts-ignore
-                menuRef.current?.hide();
-              }}
-              anchor={
-                <IconButton
-                  onPress={() => {
-                    //@ts-ignore
-                    menuRef.current?.show();
-                  }}
-                  name="dots-vertical"
-                  color={colors.primary.paragraph}
-                />
-              }
-            >
-              {[
-                {
-                  title: strings.move(),
-                  onPress: async () => {
-                    const ids = selectedItemsList;
-                    const notebooks = await db.notebooks.all.items(ids);
-                    MoveNotebookSheet.present(notebooks);
-                  },
-                  visible: renderedInRoute === "Notebooks",
-                  icon: "arrow-right-bold-box-outline"
-                },
-                {
-                  title: strings.manageTags(),
-                  onPress: async () => {
-                    await sleep(100);
-                    ManageTagsSheet.present(selectedItemsList);
-                  },
-                  visible: type === "note",
-                  icon: "pound"
-                },
-                {
-                  title: strings.export(),
-                  onPress: async () => {
-                    await sleep(100);
-                    ExportNotesSheet.present(selectedItemsList);
-                  },
-                  visible: type === "note",
-                  icon: "export"
-                },
-                {
-                  title: strings.linkNotebook(),
-                  onPress: async () => {
-                    await sleep(100);
-                    MoveNoteSheet.present();
-                  },
-                  visible: type === "note",
-                  icon: "plus"
-                },
-                {
-                  title: strings.unlinkNotebook(),
-                  onPress: async () => {
-                    if (!id) return;
-                    await db.notes.removeFromNotebook(id, ...selectedItemsList);
-                    updateNotebook(id);
-                    Navigation.queueRoutesForUpdate();
-                    clearSelection();
-                  },
-                  visible: renderedInRoute === "Notebook",
-                  icon: "minus"
-                },
-                {
-                  title: strings.unfavorite(),
-                  onPress: addToFavorite,
-                  visible: focusedRouteId === "Favorites",
-                  icon: "star-off"
-                },
-                {
-                  title: strings.moveToTrash(),
-                  onPress: async () => {
-                    const selection = useSelectionStore.getState();
-                    if (!selection.selectionMode) return;
-                    await deleteItems(
-                      selection.selectionMode as ItemType,
-                      selection.selectedItemsList
-                    );
-                    selection.clearSelection();
-                    selection.setSelectionMode(undefined);
-                  },
-                  visible: type === "note" || type === "notebook",
-                  icon: "delete"
-                },
-                {
-                  title: strings.doActions.delete.unknown(
-                    type!,
-                    selectedItemsList.length
-                  ),
-                  onPress: async () => {
-                    const selection = useSelectionStore.getState();
-                    if (!selection.selectionMode) return;
-                    await deleteItems(
-                      selection.selectionMode as ItemType,
-                      selection.selectedItemsList
-                    );
-                    selection.clearSelection();
-                    selection.setSelectionMode(undefined);
-                  },
-                  visible:
-                    type !== "trash" && type !== "note" && type !== "notebook",
-                  icon: "delete"
-                },
-                {
-                  title: strings.restore(),
-                  onPress: restoreItem,
-                  visible: type === "trash",
-                  icon: "delete-restore"
-                },
-                {
-                  title: strings.delete(),
-                  onPress: deleteItem,
-                  visible: type === "trash",
-                  icon: "delete"
-                }
-              ].map((item) =>
+          {!selectedItemsList.length
+            ? null
+            : (focusedRouteId === "Monographs"
+                ? [
+                    {
+                      title: strings.unpublish(),
+                      onPress: () => {
+                        presentDialog({
+                          title: strings.doActions.unpublish.note(
+                            selectedItemsList.length
+                          ),
+                          positiveText: strings.unpublish(),
+                          negativeText: strings.cancel(),
+                          positivePress: async () => {
+                            for (const id of selectedItemsList) {
+                              await db.monographs.unpublish(id);
+                            }
+                            Navigation.queueRoutesForUpdate();
+                            clearSelection();
+                          },
+                          positiveType: "errorShade"
+                        });
+                      },
+                      visible: true,
+                      icon: "delete"
+                    }
+                  ]
+                : [
+                    {
+                      title: strings.move(),
+                      onPress: async () => {
+                        const ids = selectedItemsList;
+                        const notebooks = await db.notebooks.all.items(ids);
+                        MoveNotebook.present(notebooks);
+                      },
+                      visible: renderedInRoute === "Notebooks",
+                      icon: "arrow-right-bold-box-outline"
+                    },
+                    {
+                      title: strings.manageTags(),
+                      onPress: async () => {
+                        ManageTagsSheet.present(selectedItemsList);
+                      },
+                      visible: type === "note",
+                      icon: "pound"
+                    },
+                    {
+                      title: strings.export(),
+                      onPress: async () => {
+                        ExportNotesSheet.present(selectedItemsList);
+                      },
+                      visible: type === "note",
+                      icon: "export"
+                    },
+                    {
+                      title: strings.addToNotebook(),
+                      onPress: async () => {
+                        Navigation.navigate("LinkNotebooks", {
+                          noteIds: selectedItemsList
+                        });
+                      },
+                      visible: type === "note",
+                      icon: "plus"
+                    },
+                    {
+                      title: strings.unlinkNotebook(),
+                      onPress: async () => {
+                        if (!id) return;
+                        await db.notes.removeFromNotebook(
+                          id,
+                          ...selectedItemsList
+                        );
+                        updateNotebook(id);
+                        Navigation.queueRoutesForUpdate();
+                        clearSelection();
+                      },
+                      visible: renderedInRoute === "Notebook",
+                      icon: "minus"
+                    },
+                    {
+                      title: strings.unfavorite(),
+                      onPress: addToFavorite,
+                      visible: focusedRouteId === "Favorites",
+                      icon: "star-off"
+                    },
+                    {
+                      title: strings.moveToTrash(),
+                      onPress: async () => {
+                        const selection = useSelectionStore.getState();
+                        if (!selection.selectionMode) return;
+                        await deleteItems(
+                          selection.selectionMode as ItemType,
+                          selection.selectedItemsList
+                        );
+                        selection.clearSelection();
+                        selection.setSelectionMode(undefined);
+                      },
+                      visible: type === "note" || type === "notebook",
+                      icon: "delete"
+                    },
+                    {
+                      title: strings.doActions.delete.unknown(
+                        type!,
+                        selectedItemsList.length
+                      ),
+                      onPress: async () => {
+                        const selection = useSelectionStore.getState();
+                        if (!selection.selectionMode) return;
+                        await deleteItems(
+                          selection.selectionMode as ItemType,
+                          selection.selectedItemsList
+                        );
+                        selection.clearSelection();
+                        selection.setSelectionMode(undefined);
+                      },
+                      visible:
+                        type !== "trash" &&
+                        type !== "note" &&
+                        type !== "notebook",
+                      icon: "delete"
+                    },
+                    {
+                      title: strings.restore(),
+                      onPress: restoreItem,
+                      visible: type === "trash",
+                      icon: "delete-restore"
+                    },
+                    {
+                      title: strings.delete(),
+                      onPress: deleteItem,
+                      visible: type === "trash",
+                      icon: "delete"
+                    }
+                  ]
+              ).map((item) =>
                 !item.visible ? null : (
-                  <Button
-                    style={{
-                      justifyContent: "flex-start",
-                      borderRadius: 0,
-                      alignSelf: "flex-start",
-                      width: "100%"
-                    }}
+                  <IconButton
+                    size={AppFontSize.lg}
                     type="plain"
-                    buttonType={{
-                      text: contextMenuColors.primary.paragraph
-                    }}
-                    icon={item.icon}
+                    tooltipText={item.title}
+                    tooltipPosition={NativeTooltip.POSITIONS.TOP}
+                    testID={`select-${item.icon}`}
+                    name={item.icon}
                     key={item.title}
-                    title={item.title}
+                    color={colors.primary.icon}
                     onPress={async () => {
                       //@ts-ignore
                       menuRef.current?.hide();
@@ -364,9 +322,16 @@ export const SelectionHeader = React.memo(
                   />
                 )
               )}
-            </Menu>
-          ) : null}
         </View>
+
+        <IconButton
+          size={AppFontSize.lg}
+          onPress={() => {
+            clearSelection();
+          }}
+          color={colors.primary.icon}
+          name="close"
+        />
       </View>
     );
   }

apps/mobile/app/components/sheet-provider/index.js

@@ -27,12 +27,13 @@ import {
 } from "../../services/event-manager";
 import { useThemeColors } from "@notesnook/theme";
 import { eCloseSheet, eOpenSheet } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import SheetWrapper from "../ui/sheet";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 const SheetProvider = ({ context = "global" }) => {
   const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
@@ -94,6 +95,8 @@ const SheetProvider = ({ context = "global" }) => {
     [context]
   );
 
+  console.log(data?.keyboardHandlerDisabled);
+
   return !visible || !data ? null : (
     <SheetWrapper
       fwdRef={actionSheetRef}
@@ -120,13 +123,13 @@ const SheetProvider = ({ context = "global" }) => {
             !data.progress && !data.icon && !data.title && !data.paragraph
               ? 0
               : 10,
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         {data?.progress ? (
           <ActivityIndicator
             style={{
-              marginTop: 15
+              marginTop: DefaultAppStyles.GAP
             }}
             size={50}
             color={colors.primary.accent}
@@ -169,7 +172,7 @@ const SheetProvider = ({ context = "global" }) => {
 
       <View
         style={{
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           marginBottom: data.valueArray ? 12 : 0
         }}
       >
@@ -180,7 +183,7 @@ const SheetProvider = ({ context = "global" }) => {
               type="plain"
               key={v}
               textStyle={{ fontWeight: "normal" }}
-              fontSize={SIZE.sm}
+              fontSize={AppFontSize.sm}
               icon="check"
               width="100%"
               style={{
@@ -193,7 +196,7 @@ const SheetProvider = ({ context = "global" }) => {
 
       <View
         style={{
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         {data?.action ? (
@@ -220,10 +223,10 @@ const SheetProvider = ({ context = "global" }) => {
               icon={item.icon && item.icon}
               type={item.type || "accent"}
               style={{
-                marginBottom: 10
+                marginBottom: DefaultAppStyles.GAP_VERTICAL
               }}
               width="100%"
-              fontSize={SIZE.md}
+              fontSize={AppFontSize.md}
             />
           ))}
 
@@ -231,17 +234,17 @@ const SheetProvider = ({ context = "global" }) => {
           <Paragraph
             style={{
               alignSelf: "center",
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               textDecorationLine: "underline"
             }}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             onPress={data.learnMorePress}
             color={colors.secondary.paragraph}
           >
             <Icon
               color={colors.primary.icon}
               name="information-outline"
-              size={SIZE.xs}
+              size={AppFontSize.xs}
             />{" "}
             {data.learnMore}
           </Paragraph>

apps/mobile/app/components/sheets/add-notebook/index.tsx

@@ -18,6 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Notebook } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
 import React, { useRef, useState } from "react";
 import { TextInput, View } from "react-native";
 import { notesnook } from "../../../../e2e/test.ids";
@@ -30,17 +31,16 @@ import {
 } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import { useMenuStore } from "../../../stores/use-menu-store";
+import { useNotebookStore } from "../../../stores/use-notebook-store";
 import { useRelationStore } from "../../../stores/use-relation-store";
-import { SIZE } from "../../../utils/size";
+import { eOnNotebookUpdated } from "../../../utils/events";
+import { getParentNotebookId } from "../../../utils/notebooks";
+import { AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
-import { MoveNotes } from "../move-notes/movenote";
-import { eOnNotebookUpdated } from "../../../utils/events";
-import { getParentNotebookId } from "../../../utils/notebooks";
-import { useNotebookStore } from "../../../stores/use-notebook-store";
-import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const AddNotebookSheet = ({
   notebook,
@@ -97,18 +97,28 @@ export const AddNotebookSheet = ({
       parentNotebook?.id ||
       (await getParentNotebookId(notebook?.id || (id as string)));
 
-    eSendEvent(eOnNotebookUpdated, parent);
-    if (notebook) {
-      setImmediate(() => {
-        eSendEvent(eOnNotebookUpdated, notebook.id);
-      });
+    eSendEvent(eOnNotebookUpdated, parent || notebook?.id);
+
+    if (!parent) {
+      useNotebookStore.getState().refresh();
     }
 
-    if (!notebook && showMoveNotesOnComplete && id) {
-      MoveNotes.present(await db.notebooks.notebook(id));
-    } else {
-      close?.(true);
+    if (showMoveNotesOnComplete && id && !notebook?.id) {
+      ToastManager.show({
+        heading: strings.notebookAdded(),
+        type: "success",
+        context: "global",
+        actionText: strings.addNotes(),
+        duration: 8000,
+        func: async () => {
+          Navigation.navigate("MoveNotes", {
+            notebook: (await db.notebooks.notebook(id)) as Notebook
+          });
+          ToastManager.hide();
+        }
+      });
     }
+    close?.(true);
   };
 
   return (
@@ -116,10 +126,10 @@ export const AddNotebookSheet = ({
       style={{
         maxHeight: DDS.isTab ? "90%" : "97%",
         borderRadius: DDS.isTab ? 5 : 0,
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
-      <Heading size={SIZE.lg}>
+      <Heading size={AppFontSize.lg}>
         {notebook ? strings.editNotebook() : strings.newNotebook()}
       </Heading>
 
@@ -160,10 +170,8 @@ export const AddNotebookSheet = ({
       <Button
         title={notebook ? strings.save() : strings.add()}
         type="accent"
-        height={45}
-        fontSize={SIZE.md}
         style={{
-          paddingHorizontal: 24,
+          paddingHorizontal: DefaultAppStyles.GAP * 2,
           width: "100%"
         }}
         onPress={onSaveChanges}

apps/mobile/app/components/sheets/add-to/index.tsx

@@ -1,343 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import { Note } from "@notesnook/core";
-import { strings } from "@notesnook/intl";
-import { useThemeColors } from "@notesnook/theme";
-import React, {
-  RefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState
-} from "react";
-import {
-  ActivityIndicator,
-  Keyboard,
-  TouchableOpacity,
-  View
-} from "react-native";
-import { ActionSheetRef } from "react-native-actions-sheet";
-import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
-import { db } from "../../../common/database";
-import { presentSheet } from "../../../services/event-manager";
-import Navigation from "../../../services/navigation";
-import { ItemSelection } from "../../../stores/item-selection-store";
-import { useNotebooks } from "../../../stores/use-notebook-store";
-import { useRelationStore } from "../../../stores/use-relation-store";
-import { useSelectionStore } from "../../../stores/use-selection-store";
-import { useSettingStore } from "../../../stores/use-setting-store";
-import { updateNotebook } from "../../../utils/notebooks";
-import { SIZE } from "../../../utils/size";
-import { Dialog } from "../../dialog";
-import DialogHeader from "../../dialog/dialog-header";
-import SheetProvider from "../../sheet-provider";
-import { Button } from "../../ui/button";
-import { IconButton } from "../../ui/icon-button";
-import Input from "../../ui/input";
-import Paragraph from "../../ui/typography/paragraph";
-import { AddNotebookSheet } from "../add-notebook";
-import { NotebookItem } from "./notebook-item";
-import { useNotebookItemSelectionStore } from "./store";
-
-async function updateInitialSelectionState(items: string[]) {
-  const relations = await db.relations
-    .to(
-      {
-        type: "note",
-        ids: items
-      },
-      "notebook"
-    )
-    .get();
-
-  const initialSelectionState: ItemSelection = {};
-  const notebookIds = [
-    ...new Set(relations.map((relation) => relation.fromId))
-  ];
-
-  for (const id of notebookIds) {
-    const all = items.every((noteId) => {
-      return (
-        relations.findIndex(
-          (relation) => relation.fromId === id && relation.toId === noteId
-        ) > -1
-      );
-    });
-    if (all) {
-      initialSelectionState[id] = "selected";
-    } else {
-      initialSelectionState[id] = "intermediate";
-    }
-  }
-  useNotebookItemSelectionStore.setState({
-    initialState: initialSelectionState,
-    selection: { ...initialSelectionState },
-    multiSelect: relations.length > 1
-  });
-}
-
-const MoveNoteSheet = ({
-  note,
-  actionSheetRef
-}: {
-  note: Note | undefined;
-  actionSheetRef: RefObject<ActionSheetRef>;
-}) => {
-  const { colors } = useThemeColors();
-  const [rootNotebooks, loading] = useNotebooks();
-  const searchQuery = useRef("");
-  const searchTimer = useRef<NodeJS.Timeout>();
-  const [notebooks, setNotebooks] = useState(rootNotebooks);
-
-  const dimensions = useSettingStore((state) => state.dimensions);
-  const selectedItemsList = useSelectionStore(
-    (state) => state.selectedItemsList
-  );
-
-  const multiSelect = useNotebookItemSelectionStore(
-    (state) => state.multiSelect
-  );
-
-  useEffect(() => {
-    if (!loading) {
-      setNotebooks(rootNotebooks);
-    }
-  }, [loading, rootNotebooks]);
-
-  useEffect(() => {
-    const items = note ? [note.id] : selectedItemsList;
-    updateInitialSelectionState(items);
-    return () => {
-      useNotebookItemSelectionStore.setState({
-        initialState: {},
-        selection: {},
-        multiSelect: false,
-        canEnableMultiSelectMode: true
-      });
-    };
-  }, [note, selectedItemsList]);
-
-  const onSave = async () => {
-    const noteIds = note ? [note.id] : selectedItemsList;
-
-    const changedNotebooks = useNotebookItemSelectionStore.getState().selection;
-
-    for (const id in changedNotebooks) {
-      const item = await db.notebooks.notebook(id);
-      if (!item) continue;
-      if (changedNotebooks[id] === "selected") {
-        for (const id of noteIds) {
-          await db.relations.add(item, { id: id, type: "note" });
-          updateNotebook(item.id);
-        }
-      } else if (changedNotebooks[id] === "deselected") {
-        for (const id of noteIds) {
-          await db.relations.unlink(item, { id: id, type: "note" });
-          updateNotebook(item.id);
-        }
-      }
-    }
-
-    Navigation.queueRoutesForUpdate();
-    useRelationStore.getState().update();
-    actionSheetRef.current?.hide();
-  };
-
-  const hasSelected = () => {
-    const selection = useNotebookItemSelectionStore.getState().selection;
-    return Object.keys(selection).some((key) => selection[key] === "selected");
-  };
-
-  const renderNotebook = useCallback(
-    ({ index }: { item: boolean; index: number }) => (
-      <NotebookItem items={notebooks} id={index} index={index} />
-    ),
-    [notebooks]
-  );
-
-  return (
-    <>
-      <Dialog context="move_note" />
-      <SheetProvider context="link-notebooks" />
-      <View>
-        <TouchableOpacity
-          style={{
-            width: "100%",
-            height: "100%",
-            position: "absolute"
-          }}
-          onPress={() => {
-            Keyboard.dismiss();
-          }}
-        />
-        <View
-          style={{
-            paddingHorizontal: 12,
-            justifyContent: "space-between",
-            flexDirection: "row",
-            alignItems: "flex-start"
-          }}
-        >
-          <DialogHeader
-            style={{
-              minHeight: 10,
-              flexShrink: 1
-            }}
-            title={strings.selectNotebooks()}
-            paragraph={
-              !multiSelect
-                ? strings.enableMultiSelect()
-                : strings.selectNotebooksDesc()
-            }
-          />
-
-          <View
-            style={{
-              flexDirection: "row",
-              columnGap: 10
-            }}
-          >
-            {hasSelected() ? (
-              <IconButton
-                name="restore"
-                color={colors.primary.icon}
-                onPress={() => {
-                  const items = note ? [note.id] : selectedItemsList;
-                  updateInitialSelectionState(items);
-                }}
-                style={{
-                  width: 40,
-                  height: 40
-                }}
-              />
-            ) : null}
-
-            <Button
-              height={40}
-              style={{
-                borderRadius: 100,
-                paddingHorizontal: 24,
-                alignSelf: "flex-start"
-              }}
-              title={strings.save()}
-              type={"accent"}
-              onPress={onSave}
-            />
-          </View>
-        </View>
-
-        <View
-          style={{
-            paddingHorizontal: 0,
-            maxHeight: dimensions.height * 0.85,
-            height: dimensions.height * 0.85,
-            paddingTop: 6
-          }}
-        >
-          <FlashList
-            data={notebooks?.placeholders}
-            style={{
-              width: "100%"
-            }}
-            keyboardShouldPersistTaps="handled"
-            ListHeaderComponent={
-              <View
-                style={{
-                  paddingHorizontal: 12,
-                  width: "100%",
-                  paddingTop: 12
-                }}
-              >
-                <Input
-                  placeholder={strings.searchNotebooks()}
-                  button={{
-                    icon: "plus",
-                    onPress: () => {
-                      AddNotebookSheet.present(
-                        undefined,
-                        undefined,
-                        "link-notebooks",
-                        undefined,
-                        false,
-                        searchQuery.current
-                      );
-                    },
-                    color: colors.primary.icon
-                  }}
-                  onChangeText={(value) => {
-                    searchQuery.current = value;
-                    if (!searchQuery.current) {
-                      setNotebooks(rootNotebooks);
-                      return;
-                    }
-                    searchTimer.current = setTimeout(() => {
-                      db.lookup
-                        .notebooks(searchQuery.current)
-                        .sorted()
-                        .then((result) => {
-                          if (searchQuery.current === value) {
-                            setNotebooks(result);
-                          }
-                        });
-                    }, 300);
-                  }}
-                />
-              </View>
-            }
-            estimatedItemSize={50}
-            renderItem={renderNotebook}
-            ListEmptyComponent={
-              <View
-                style={{
-                  flex: 1,
-                  justifyContent: "center",
-                  alignItems: "center",
-                  height: 200
-                }}
-              >
-                {loading ? (
-                  <ActivityIndicator
-                    size={SIZE.lg}
-                    color={colors.primary.accent}
-                  />
-                ) : (
-                  <Paragraph color={colors.primary.icon}>
-                    {strings.emptyPlaceholders("notebook")}
-                  </Paragraph>
-                )}
-              </View>
-            }
-            ListFooterComponent={<View style={{ height: 50 }} />}
-          />
-        </View>
-      </View>
-    </>
-  );
-};
-
-MoveNoteSheet.present = (note?: Note) => {
-  presentSheet({
-    component: (ref) => <MoveNoteSheet actionSheetRef={ref} note={note} />,
-    enableGesturesInScrollView: false,
-    noBottomPadding: true,
-    keyboardHandlerDisabled: true
-  });
-};
-export default MoveNoteSheet;

apps/mobile/app/components/sheets/add-to/notebook-item.tsx

@@ -1,263 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-import { Notebook, VirtualizedGrouping } from "@notesnook/core";
-import { useThemeColors } from "@notesnook/theme";
-import React, { useEffect } from "react";
-import { View, useWindowDimensions } from "react-native";
-import { notesnook } from "../../../../e2e/test.ids";
-import { useTotalNotes } from "../../../hooks/use-db-item";
-import { useNotebook } from "../../../hooks/use-notebook";
-import useNavigationStore from "../../../stores/use-navigation-store";
-import { SIZE } from "../../../utils/size";
-import { IconButton } from "../../ui/icon-button";
-import { Pressable } from "../../ui/pressable";
-import Paragraph from "../../ui/typography/paragraph";
-import { AddNotebookSheet } from "../add-notebook";
-import {
-  useNotebookExpandedStore,
-  useNotebookItemSelectionStore
-} from "./store";
-
-type NotebookParentProp = {
-  parent?: NotebookParentProp;
-  item?: Notebook;
-};
-
-export const NotebookItem = ({
-  id,
-  currentLevel = 0,
-  index,
-  parent,
-  items
-}: {
-  id: string | number;
-  currentLevel?: number;
-  index: number;
-  parent?: NotebookParentProp;
-  items?: VirtualizedGrouping<Notebook>;
-}) => {
-  const { nestedNotebooks, notebook: item } = useNotebook(id, items, true);
-  const expanded = useNotebookExpandedStore((state) =>
-    item?.id ? state.expanded[item?.id] : false
-  );
-  const { totalNotes: totalNotes, getTotalNotes } = useTotalNotes("notebook");
-  const focusedRouteId = useNavigationStore((state) => state.focusedRouteId);
-  const { colors } = useThemeColors("sheet");
-  const selection = useNotebookItemSelectionStore((state) =>
-    item?.id ? state.selection[item?.id] : undefined
-  );
-  const isSelected = selection === "selected";
-  const isFocused = focusedRouteId === id;
-  const { fontScale } = useWindowDimensions();
-
-  useEffect(() => {
-    if (item?.id) {
-      getTotalNotes([item?.id]);
-    }
-  }, [getTotalNotes, item?.id]);
-
-  const onPress = () => {
-    if (!item) return;
-    const state = useNotebookItemSelectionStore.getState();
-
-    if (isSelected) {
-      state.markAs(
-        item,
-        !state.initialState[item?.id] ? undefined : "deselected"
-      );
-      return;
-    }
-
-    if (!state.multiSelect) {
-      const keys = Object.keys(state.selection);
-      const nextState: any = {};
-      for (const key in keys) {
-        nextState[key] = !state.initialState[key] ? undefined : "deselected";
-      }
-
-      state.setSelection({
-        [item.id]: "selected",
-        ...nextState
-      });
-    } else {
-      state.markAs(item, "selected");
-    }
-  };
-
-  return (
-    <View
-      style={{
-        paddingLeft: currentLevel > 0 && currentLevel < 6 ? 15 : undefined,
-        width: "100%"
-      }}
-    >
-      <Pressable
-        type={"transparent"}
-        onLongPress={() => {
-          if (!item) return;
-          useNotebookItemSelectionStore.setState({
-            multiSelect: true
-          });
-          const state = useNotebookItemSelectionStore.getState();
-          useNotebookItemSelectionStore
-            .getState()
-            .markAs(
-              item,
-              !isSelected
-                ? "selected"
-                : !state.initialState[item?.id]
-                ? undefined
-                : "deselected"
-            );
-        }}
-        testID={`add-to-notebook-item-${currentLevel}-${index}`}
-        onPress={onPress}
-        style={{
-          justifyContent: "space-between",
-          width: "100%",
-          alignItems: "center",
-          flexDirection: "row",
-          paddingLeft: 12,
-          paddingRight: 12,
-          borderRadius: 0,
-          height: 45
-        }}
-      >
-        <View
-          style={{
-            flexDirection: "row",
-            alignItems: "center"
-          }}
-        >
-          {nestedNotebooks?.placeholders.length ? (
-            <IconButton
-              size={SIZE.xl}
-              color={isSelected ? colors.selected.icon : colors.primary.icon}
-              onPress={() => {
-                if (!item?.id) return;
-                useNotebookExpandedStore.getState().setExpanded(item?.id);
-              }}
-              top={0}
-              left={0}
-              bottom={0}
-              right={0}
-              style={{
-                width: 35,
-                height: 35
-              }}
-              name={expanded ? "chevron-down" : "chevron-right"}
-            />
-          ) : null}
-
-          <IconButton
-            size={SIZE.xl}
-            color={
-              isSelected
-                ? colors.selected.icon
-                : selection === "deselected"
-                ? colors.error.accent
-                : colors.primary.icon
-            }
-            onPress={onPress}
-            top={0}
-            left={0}
-            bottom={0}
-            right={0}
-            style={{
-              width: 40,
-              height: 40
-            }}
-            name={
-              selection === "deselected"
-                ? "close-circle-outline"
-                : isSelected
-                ? "check-circle-outline"
-                : selection === "intermediate"
-                ? "minus-circle-outline"
-                : "checkbox-blank-circle-outline"
-            }
-          />
-
-          <Paragraph
-            color={
-              isFocused ? colors.selected.paragraph : colors.secondary.paragraph
-            }
-            size={SIZE.sm}
-          >
-            {item?.title}
-          </Paragraph>
-        </View>
-
-        <View
-          style={{
-            flexDirection: "row",
-            columnGap: 10,
-            alignItems: "center"
-          }}
-        >
-          {item?.id && totalNotes?.(item?.id) ? (
-            <Paragraph size={SIZE.sm} color={colors.secondary.paragraph}>
-              {totalNotes(item?.id)}
-            </Paragraph>
-          ) : null}
-          <IconButton
-            name="plus"
-            style={{
-              width: 40 * fontScale,
-              height: 40 * fontScale
-            }}
-            testID={notesnook.ids.notebook.menu}
-            onPress={() => {
-              if (!item) return;
-              AddNotebookSheet.present(
-                undefined,
-                item,
-                "link-notebooks",
-                undefined,
-                false
-              );
-            }}
-            left={0}
-            right={0}
-            bottom={0}
-            top={0}
-            color={colors.primary.icon}
-            size={SIZE.xl}
-          />
-        </View>
-      </Pressable>
-
-      {!expanded
-        ? null
-        : nestedNotebooks?.placeholders.map((id, index) => (
-            <NotebookItem
-              key={item?.id + "_" + index}
-              id={index}
-              index={index}
-              currentLevel={currentLevel + 1}
-              items={nestedNotebooks}
-              parent={{
-                parent: parent,
-                item: item
-              }}
-            />
-          ))}
-    </View>
-  );
-};

apps/mobile/app/components/sheets/change-email/index.tsx

@@ -31,6 +31,7 @@ import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import { eUserLoggedIn } from "../../../utils/events";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 type ChangeEmailProps = {
   actionSheetRef: RefObject<ActionSheetRef>;
@@ -101,14 +102,14 @@ export const ChangeEmail = ({ close }: ChangeEmailProps) => {
   };
 
   return (
-    <View style={{ paddingHorizontal: 12 }}>
+    <View style={{ paddingHorizontal: DefaultAppStyles.GAP }}>
       <DialogHeader
         title={strings.changeEmail()}
         paragraph={strings.changeEmailDesc()}
       />
       <View
         style={{
-          marginTop: 12
+          marginTop: DefaultAppStyles.GAP_VERTICAL
         }}
       >
         {step === EmailChangeSteps.verify ? (

apps/mobile/app/components/sheets/editor-tabs/index.tsx

@@ -32,11 +32,12 @@ import {
 import { editorController } from "../../../screens/editor/tiptap/utils";
 import { eSendEvent, presentSheet } from "../../../services/event-manager";
 import { eUnlockNote } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { IconButton } from "../../ui/icon-button";
 import { Pressable } from "../../ui/pressable";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const TabItemComponent = (props: {
   tab: TabItem;
@@ -101,15 +102,15 @@ const TabItemComponent = (props: {
         {props.tab.session?.noteLocked ? (
           <>
             {props.tab.session?.locked ? (
-              <Icon size={SIZE.md} name="lock" />
+              <Icon size={AppFontSize.md} name="lock" />
             ) : (
-              <Icon size={SIZE.md} name="lock-open-outline" />
+              <Icon size={AppFontSize.md} name="lock-open-outline" />
             )}
           </>
         ) : null}
 
         {props.tab.session?.readonly ? (
-          <Icon size={SIZE.md} name="pencil-lock" />
+          <Icon size={AppFontSize.md} name="pencil-lock" />
         ) : null}
 
         <Paragraph
@@ -119,7 +120,7 @@ const TabItemComponent = (props: {
               : colors.primary.paragraph
           }
           numberOfLines={1}
-          size={SIZE.md}
+          size={AppFontSize.md}
         >
           {props.tab.session?.noteId
             ? item?.title || strings.untitledNote()
@@ -136,7 +137,7 @@ const TabItemComponent = (props: {
       >
         <IconButton
           name="pin"
-          size={SIZE.lg}
+          size={AppFontSize.lg}
           color={props.tab.pinned ? colors.primary.accent : colors.primary.icon}
           onPress={() => {
             useTabStore.getState().updateTab(props.tab.id, {
@@ -152,7 +153,7 @@ const TabItemComponent = (props: {
         {!props.tab?.pinned ? (
           <IconButton
             name="close"
-            size={SIZE.lg}
+            size={AppFontSize.lg}
             color={colors.primary.icon}
             onPress={() => {
               const isLastTab = useTabStore.getState().tabs.length === 1;
@@ -202,7 +203,7 @@ export default function EditorTabs({
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         gap: 12,
         maxHeight: "100%"
       }}
@@ -215,7 +216,7 @@ export default function EditorTabs({
           alignItems: "center"
         }}
       >
-        <Heading size={SIZE.lg}>{strings.tabs()}</Heading>
+        <Heading size={AppFontSize.lg}>{strings.tabs()}</Heading>
         <IconButton
           onPress={() => {
             useTabStore.getState().newTab();

apps/mobile/app/components/sheets/export-notes/index.tsx

@@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { Fragment, useState } from "react";
 import {
@@ -39,9 +40,11 @@ import {
 } from "../../../services/event-manager";
 import Exporter from "../../../services/exporter";
 import PremiumService from "../../../services/premium";
+import { useSettingStore } from "../../../stores/use-setting-store";
 import { useUserStore } from "../../../stores/use-user-store";
 import { getElevationStyle } from "../../../utils/elevation";
-import { SIZE, ph, pv } from "../../../utils/size";
+import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
 import { sleep } from "../../../utils/time";
 import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
@@ -52,14 +55,15 @@ import { Pressable } from "../../ui/pressable";
 import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import { strings } from "@notesnook/intl";
 
 const ExportNotesSheet = ({
   ids,
-  update
+  update,
+  close
 }: {
   ids: string[];
   update: ((props: PresentSheetOptions) => void) | undefined;
+  close: ((ctx?: string) => void) | undefined;
 }) => {
   const { colors } = useThemeColors();
   const [exporting, setExporting] = useState(false);
@@ -166,7 +170,7 @@ const ExportNotesSheet = ({
         <>
           <View
             style={{
-              paddingHorizontal: 12
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
             <DialogHeader
@@ -193,17 +197,17 @@ const ExportNotesSheet = ({
                   alignItems: "center",
                   flexDirection: "row",
                   paddingRight: 12,
-                  paddingVertical: 10,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL,
                   justifyContent: "flex-start",
                   borderRadius: 0,
-                  paddingHorizontal: 12,
+                  paddingHorizontal: DefaultAppStyles.GAP,
                   opacity: item.pro ? 1 : 0.5
                 }}
               >
                 <View
                   style={{
                     backgroundColor: colors.primary.shade,
-                    borderRadius: 5,
+                    borderRadius: defaultBorderRadius,
                     height: 60,
                     width: 60,
                     justifyContent: "center",
@@ -215,7 +219,7 @@ const ExportNotesSheet = ({
                     color={
                       item.pro ? colors.primary.accent : colors.primary.icon
                     }
-                    size={SIZE.xxxl + 10}
+                    size={AppFontSize.xxxl + 10}
                   />
                 </View>
                 <View
@@ -224,7 +228,7 @@ const ExportNotesSheet = ({
                   }}
                 >
                   {!item.pro ? <ProTag size={12} /> : null}
-                  <Heading style={{ marginLeft: 10 }} size={SIZE.md}>
+                  <Heading style={{ marginLeft: 10 }} size={AppFontSize.md}>
                     {item.title}
                   </Heading>
                   {/* <Paragraph
@@ -245,8 +249,8 @@ const ExportNotesSheet = ({
               justifyContent: "center",
               alignItems: "center",
               width: "100%",
-              paddingHorizontal: 12,
-              paddingVertical: 20
+              paddingHorizontal: DefaultAppStyles.GAP,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             {!complete ? (
@@ -273,7 +277,7 @@ const ExportNotesSheet = ({
                 <Heading
                   style={{
                     textAlign: "center",
-                    marginTop: 10
+                    marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}
                   color={colors.secondary.heading}
                 >
@@ -294,13 +298,13 @@ const ExportNotesSheet = ({
                   }
                   type="accent"
                   width={250}
-                  fontSize={SIZE.md}
+                  fontSize={AppFontSize.md}
                   style={{
-                    marginTop: 10,
-                    borderRadius: 100
+                    marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}
                   onPress={async () => {
                     if (!result?.filePath) return;
+                    close?.();
                     if (Platform.OS === "android") {
                       Linking.openURL(result.fileDir).catch((e) => {
                         ToastManager.error(e as Error);
@@ -323,13 +327,16 @@ const ExportNotesSheet = ({
                   title={strings.share()}
                   type="secondaryAccented"
                   width={250}
-                  fontSize={SIZE.md}
+                  fontSize={AppFontSize.md}
                   style={{
-                    marginTop: 10,
-                    borderRadius: 100
+                    marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}
                   onPress={async () => {
                     if (!result) return;
+                    close?.();
+                    useSettingStore
+                      .getState()
+                      .setAppDidEnterBackgroundForAction(true);
                     if (Platform.OS === "ios") {
                       Share.open({
                         url: result?.fileDir + result.fileName
@@ -349,12 +356,11 @@ const ExportNotesSheet = ({
                 />
                 <Button
                   title={strings.exportAgain()}
-                  type="inverted"
+                  type="secondaryAccented"
                   width={250}
-                  fontSize={SIZE.md}
+                  fontSize={AppFontSize.md}
                   style={{
-                    marginTop: 10,
-                    borderRadius: 100
+                    marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}
                   onPress={async () => {
                     setComplete(false);
@@ -375,7 +381,7 @@ ExportNotesSheet.present = async (ids?: string[], allNotes?: boolean) => {
   const exportNoteIds = allNotes ? await db.notes.all?.ids() : ids || [];
   presentSheet({
     component: (ref, close, update) => (
-      <ExportNotesSheet ids={exportNoteIds} update={update} />
+      <ExportNotesSheet ids={exportNoteIds} update={update} close={close} />
     ),
     keyboardHandlerDisabled: true
   });
@@ -384,18 +390,18 @@ ExportNotesSheet.present = async (ids?: string[], allNotes?: boolean) => {
 const styles = StyleSheet.create({
   container: {
     ...getElevationStyle(5),
-    borderRadius: 5,
-    paddingVertical: pv
+    borderRadius: defaultBorderRadius,
+    paddingVertical: DefaultAppStyles.GAP_VERTICAL
   },
   buttonContainer: {
     justifyContent: "space-between",
     alignItems: "center"
   },
   button: {
-    paddingVertical: pv,
-    paddingHorizontal: ph,
-    marginTop: 10,
-    borderRadius: 5,
+    paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+    paddingHorizontal: DefaultAppStyles.GAP,
+    marginTop: DefaultAppStyles.GAP_VERTICAL,
+    borderRadius: defaultBorderRadius,
     width: "100%",
     justifyContent: "center",
     alignItems: "center",
@@ -405,7 +411,7 @@ const styles = StyleSheet.create({
   buttonText: {
     //fontFamily: "sans-serif",
     color: "white",
-    fontSize: SIZE.sm,
+    fontSize: AppFontSize.sm,
     marginLeft: 5
   },
   overlay: {

apps/mobile/app/components/sheets/export-notes/share.jsx

@@ -21,9 +21,10 @@ import React from "react";
 import { View } from "react-native";
 import FileViewer from "react-native-file-viewer";
 import { ToastManager } from "../../../services/event-manager";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 export const ShareComponent = ({ uri, name, padding }) => {
   return (
     <View
@@ -35,7 +36,7 @@ export const ShareComponent = ({ uri, name, padding }) => {
         title={strings.open()}
         type="accent"
         width="100%"
-        fontSize={SIZE.md}
+        fontSize={AppFontSize.md}
         onPress={async () => {
           FileViewer.open(uri, {
             showOpenWithDialog: true,
@@ -53,9 +54,9 @@ export const ShareComponent = ({ uri, name, padding }) => {
         title={strings.share()}
         type="shade"
         width="100%"
-        fontSize={SIZE.md}
+        fontSize={AppFontSize.md}
         style={{
-          marginTop: 10
+          marginTop: DefaultAppStyles.GAP_VERTICAL
         }}
         onPress={async () => {
           FileViewer.open(uri, {

apps/mobile/app/components/sheets/github/issue.js

@@ -28,13 +28,14 @@ import { ToastManager } from "../../../services/event-manager";
 import PremiumService from "../../../services/premium";
 import { useUserStore } from "../../../stores/use-user-store";
 import { openLinkInBrowser } from "../../../utils/functions";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import DialogHeader from "../../dialog/dialog-header";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const Issue = ({ defaultTitle, defaultBody, issueTitle }) => {
   const { colors } = useThemeColors();
@@ -69,6 +70,15 @@ Pro: ${PremiumService.get()}
 Logged in: ${user ? "yes" : "no"}`,
         userId: user?.id
       });
+      if (!issueUrl.current) {
+        setLoading(false);
+        ToastManager.show({
+          heading: "Failed to report issue on github",
+          type: "error",
+          context: "local"
+        });
+        return;
+      }
       setLoading(false);
       body.reset();
       title.reset();
@@ -85,7 +95,7 @@ Logged in: ${user ? "yes" : "no"}`,
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         width: "100%"
       }}
     >
@@ -147,11 +157,11 @@ Logged in: ${user ? "yes" : "no"}`,
             style={{
               borderWidth: 1,
               borderColor: colors.primary.border,
-              borderRadius: 5,
-              padding: 12,
+              borderRadius: defaultBorderRadius,
+              padding: DefaultAppStyles.GAP,
               fontFamily: "OpenSans-Regular",
-              marginBottom: 10,
-              fontSize: SIZE.md,
+              marginBottom: DefaultAppStyles.GAP_VERTICAL,
+              fontSize: AppFontSize.md,
               color: colors.primary.heading
             }}
             placeholderTextColor={colors.primary.placeholder}
@@ -180,18 +190,18 @@ Logged in: ${user ? "yes" : "no"}`,
             style={{
               borderWidth: 1,
               borderColor: colors.primary.border,
-              borderRadius: 5,
-              padding: 12,
+              borderRadius: defaultBorderRadius,
+              padding: DefaultAppStyles.GAP,
               fontFamily: "OpenSans-Regular",
               maxHeight: 200,
-              fontSize: SIZE.sm,
+              fontSize: AppFontSize.sm,
               marginBottom: 2.5,
               color: colors.primary.paragraph
             }}
             placeholderTextColor={colors.primary.placeholder}
           />
           <Paragraph
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             color={colors.secondary.paragraph}
           >{`App version: ${getVersion()} Platform: ${
             Platform.OS
@@ -208,16 +218,18 @@ Logged in: ${user ? "yes" : "no"}`,
 
           <Paragraph
             color={colors.secondary.paragraph}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             style={{
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               textAlign: "center"
             }}
           >
             {strings.issueNotice[0]()}{" "}
             <Text
               onPress={() => {
-                Linking.openURL("https://github.com/streetwriters/notesnook/issues");
+                Linking.openURL(
+                  "https://github.com/streetwriters/notesnook/issues"
+                );
               }}
               style={{
                 textDecorationLine: "underline",