mobile: finalize sidebar and list revamp

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

@@ -23,7 +23,7 @@ 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";
@@ -75,7 +75,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"
@@ -95,7 +95,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 +118,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
@@ -141,7 +141,7 @@ 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}

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/subheading.js

@@ -18,14 +18,14 @@ 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";
 
 export const SubHeading = ({ text, style = {} }) => {
   return (
     <Heading
-      size={SIZE.md + 2}
+      size={AppFontSize.md + 2}
       style={{
         marginHorizontal: 12,
         marginTop: 12,

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

@@ -20,7 +20,7 @@ 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";
@@ -48,7 +48,7 @@ export const Title = ({ text, style = {}, inline }) => {
           flexShrink: 1
         }}
         numberOfLines={1}
-        size={inline ? SIZE.md : SIZE.xl}
+        size={inline ? AppFontSize.md : AppFontSize.xl}
       >
         {inline ? text?.toUpperCase() : text}
       </Heading>
@@ -67,7 +67,7 @@ export const Title = ({ text, style = {}, inline }) => {
           right: 0
         }}
         iconSize={24}
-        fontSize={SIZE.xs}
+        fontSize={AppFontSize.xs}
         style={{
           borderRadius: 100,
           paddingVertical: 0,

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

@@ -44,7 +44,7 @@ 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 { AppFontSize } from "../../utils/size";
 import { Toast } from "../toast";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
@@ -313,7 +313,7 @@ const AppLockedScreen = () => {
                     borderRadius: 150,
                     marginBottom: 10
                   }}
-                  fontSize={SIZE.md}
+                  fontSize={AppFontSize.md}
                 />
               </>
             ) : null}

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";
@@ -233,7 +233,7 @@ const Actions = ({
           style={{
             paddingHorizontal: 12
           }}
-          size={SIZE.lg}
+          size={AppFontSize.lg}
         >
           {filename}
         </Heading>
@@ -247,15 +247,15 @@ const Actions = ({
             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 +268,7 @@ const Actions = ({
                 context: "local"
               });
             }}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             color={colors.secondary.paragraph}
           >
             {attachment.hash}
@@ -292,7 +292,7 @@ const Actions = ({
               style={{
                 paddingHorizontal: 12
               }}
-              size={SIZE.sm}
+              size={AppFontSize.sm}
             >
               {strings.listOf()} {strings.dataTypesPlural.note()}:
             </Heading>
@@ -314,7 +314,7 @@ const Actions = ({
                 }}
                 key={item.id}
               >
-                <Paragraph size={SIZE.xs}>{item.title}</Paragraph>
+                <Paragraph size={AppFontSize.xs}>{item.title}</Paragraph>
               </Pressable>
             ))}
           </>
@@ -335,7 +335,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",

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

@@ -25,7 +25,7 @@ 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";
@@ -101,7 +101,7 @@ export const AttachmentItem = ({
                 paddingHorizontal: 2,
                 width: 30,
                 height: 30,
-                borderRadius: 5
+                borderRadius: defaultBorderRadius
               }}
             >
               <Paragraph
@@ -124,7 +124,7 @@ export const AttachmentItem = ({
               }}
             >
               <Paragraph
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 style={{
                   flexWrap: "wrap"
                 }}
@@ -136,7 +136,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 +162,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";
@@ -375,7 +375,7 @@ export const AttachmentDialog = ({
                 marginRight: 10
               }}
               color={colors.primary.paragraph}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
               onPress={onCheck}
             />
 
@@ -399,7 +399,7 @@ export const AttachmentDialog = ({
                   negativeText: strings.cancel()
                 });
               }}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
             />
           </View>
         </View>
@@ -474,7 +474,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
               }
@@ -512,7 +512,7 @@ export const AttachmentDialog = ({
                   }
                   key={item.title}
                   title={item.title}
-                  fontSize={SIZE.sm}
+                  fontSize={AppFontSize.sm}
                   style={{
                     borderRadius: 100,
                     paddingHorizontal: 12,

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 === AuthMode.welcomeSignup) {
-  // if (initialAuthMode.current === 2) {
+    Navigation.replace("FluidPanelsView");
-  //   Navigation.replace(
+  } else {
-  //     {
+    Navigation.goBack();
-  //       name: 'Notes'
+  }
-  //     },
-  //     {
-  //       menu: true
-  //     }
-  //   );
-  // } else {
-  //   Navigation.goBack();
-  // }
-
-  // tabBarRef.current?.unlock();
 }

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

@@ -17,35 +17,90 @@ 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";
-
+import { useNavigationFocus } from "../../hooks/use-navigation-focus";
-export const AuthMode = {
-  login: 0,
-  signup: 1,
-  welcomeSignup: 2,
-  trialSignup: 3
-};
 
 const Auth = ({ navigation, route }) => {
   const [currentAuthMode, setCurrentAuthMode] = useState(
     route?.params?.mode || AuthMode.login
   );
+  const { colors } = useThemeColors();
+  const insets = useGlobalSafeAreaInsets();
   initialAuthMode.current = route?.params.mode || AuthMode.login;
-  useNavigationFocus(navigation, {
+  useNavigationFocus(navigation, {});
-    onFocus: () => {
-      //tabBarRef?.current.lock();
-      initialAuthMode.current = route?.params.mode || AuthMode.login;
-    }
-  });
 
   return (
     <View style={{ flex: 1 }}>
+      <View
+        style={{
+          position: "absolute",
+          paddingTop: insets.top,
+          top: 0,
+          zIndex: 999,
+          backgroundColor: colors.secondary.background,
+          width: "100%"
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            paddingHorizontal: 12,
+            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={() => {
+                Navigation.goBack();
+              }}
+              iconSize={16}
+              type="plain"
+              iconPosition="right"
+              icon="chevron-right"
+              height={25}
+              iconStyle={{
+                marginTop: 2
+              }}
+              style={{
+                paddingHorizontal: 6
+              }}
+            />
+          )}
+        </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,6 @@ 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";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -71,8 +70,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,6 +95,7 @@ export const Login = ({ changeMode }) => {
           backgroundColor: colors.primary.background,
           zIndex: 10,
           width: "100%",
+          height: "100%",
           alignSelf: "center"
         }}
       >
@@ -107,12 +107,12 @@ export const Login = ({ changeMode }) => {
             borderBottomWidth: 0.8,
             marginBottom: 12,
             borderBottomColor: colors.primary.border,
-            alignSelf: deviceMode !== "mobile" ? "center" : undefined,
+            alignSelf: isTablet ? "center" : undefined,
-            borderWidth: deviceMode !== "mobile" ? 1 : null,
+            borderWidth: isTablet ? 1 : null,
-            borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
+            borderColor: isTablet ? colors.primary.border : null,
-            borderRadius: deviceMode !== "mobile" ? 20 : null,
+            borderRadius: isTablet ? 20 : null,
-            marginTop: deviceMode !== "mobile" ? 50 : null,
+            marginTop: isTablet ? 50 : null,
-            width: deviceMode === "mobile" ? null : "50%",
+            width: !isTablet ? null : "50%",
             minHeight: height * 0.4
           }}
         >
@@ -146,7 +146,7 @@ export const Login = ({ changeMode }) => {
               marginTop: 10
             }}
             extraBold
-            size={SIZE.xxl}
+            size={AppFontSize.xxl}
           >
             {strings.loginToYourAccount()}
           </Heading>
@@ -226,7 +226,7 @@ export const Login = ({ changeMode }) => {
                 textStyle={{
                   textDecorationLine: "underline"
                 }}
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
                 type="plain"
               />
             </>
@@ -244,11 +244,10 @@ export const Login = ({ changeMode }) => {
                 login();
               }}
               style={{
-                width: 250,
+                width: 250
-                borderRadius: 100
               }}
               height={50}
-              fontSize={SIZE.md}
+              fontSize={AppFontSize.md}
               type="accent"
               title={!loading ? strings.continue() : null}
             />
@@ -269,7 +268,7 @@ export const Login = ({ changeMode }) => {
                 textStyle={{
                   textDecorationLine: "underline"
                 }}
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
                 type="errorShade"
               />
             )}
@@ -288,12 +287,12 @@ export const Login = ({ changeMode }) => {
                 }}
               >
                 <Paragraph
-                  size={SIZE.xs + 1}
+                  size={AppFontSize.xs + 1}
                   color={colors.secondary.paragraph}
                 >
                   {strings.dontHaveAccount()}{" "}
                   <Paragraph
-                    size={SIZE.xs + 1}
+                    size={AppFontSize.xs + 1}
                     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,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
 import { strings } from "@notesnook/intl";
-
+import { getObfuscatedEmail } from "../../utils/functions";
-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;
-  });
-}
 
 export const SessionExpired = () => {
   const { colors } = useThemeColors();
@@ -193,7 +182,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

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,16 @@ 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";
 
 export const Signup = ({ changeMode, trial }) => {
   const { colors } = useThemeColors();
@@ -50,7 +49,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 isTablet = width > 600;
+
   const { width, height } = useWindowDimensions();
   const validateInfo = () => {
     if (!password.current || !email.current || !confirmPassword.current) {
@@ -103,9 +103,8 @@ export const Signup = ({ changeMode, trial }) => {
         style={{
           borderRadius: DDS.isTab ? 5 : 0,
           backgroundColor: colors.primary.background,
-          zIndex: 10,
           width: "100%",
-          alignSelf: "center"
+          height: "100%"
         }}
       >
         <View
@@ -116,12 +115,12 @@ export const Signup = ({ changeMode, trial }) => {
             marginBottom: 20,
             borderBottomWidth: 0.8,
             borderBottomColor: colors.primary.border,
-            alignSelf: deviceMode !== "mobile" ? "center" : undefined,
+            alignSelf: isTablet ? "center" : undefined,
-            borderWidth: deviceMode !== "mobile" ? 1 : null,
+            borderWidth: isTablet ? 1 : null,
-            borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
+            borderColor: isTablet ? colors.primary.border : null,
-            borderRadius: deviceMode !== "mobile" ? 20 : null,
+            borderRadius: isTablet ? 20 : null,
-            marginTop: deviceMode !== "mobile" ? 50 : null,
+            marginTop: isTablet ? 50 : null,
-            width: deviceMode === "mobile" ? null : "50%",
+            width: !isTablet ? null : "50%",
             minHeight: height * 0.4
           }}
         >
@@ -155,7 +154,7 @@ export const Signup = ({ changeMode, trial }) => {
               marginBottom: 25,
               marginTop: 10
             }}
-            size={SIZE.xxl}
+            size={AppFontSize.xxl}
           >
             {strings.createYourAccount()}
           </Heading>
@@ -233,12 +232,12 @@ export const Signup = ({ changeMode, trial }) => {
             style={{
               marginBottom: 25
             }}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             color={colors.secondary.paragraph}
           >
             {strings.signupAgreement[0]()}
             <Paragraph
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               onPress={() => {
                 openLinkInBrowser("https://notesnook.com/tos", colors);
               }}
@@ -247,11 +246,12 @@ export const Signup = ({ changeMode, trial }) => {
               }}
               color={colors.primary.accent}
             >
+              {" "}
               {strings.signupAgreement[1]()}
-            </Paragraph>
+            </Paragraph>{" "}
             {strings.signupAgreement[2]()}
             <Paragraph
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               onPress={() => {
                 openLinkInBrowser("https://notesnook.com/privacy", colors);
               }}
@@ -260,8 +260,9 @@ export const Signup = ({ changeMode, trial }) => {
               }}
               color={colors.primary.accent}
             >
+              {" "}
               {strings.signupAgreement[3]()}
-            </Paragraph>
+            </Paragraph>{" "}
             {strings.signupAgreement[4]()}
           </Paragraph>
 
@@ -270,11 +271,9 @@ export const Signup = ({ changeMode, trial }) => {
             type="accent"
             loading={loading}
             onPress={signup}
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
             style={{
-              marginRight: 12,
+              width: 250
-              width: 250,
-              borderRadius: 100
             }}
           />
 
@@ -290,10 +289,13 @@ export const Signup = ({ changeMode, trial }) => {
               paddingVertical: 12
             }}
           >
-            <Paragraph size={SIZE.xs + 1} color={colors.secondary.paragraph}>
+            <Paragraph
+              size={AppFontSize.xs + 1}
+              color={colors.secondary.paragraph}
+            >
               {strings.alreadyHaveAccount()}{" "}
               <Paragraph
-                size={SIZE.xs + 1}
+                size={AppFontSize.xs + 1}
                 style={{ color: colors.primary.accent }}
               >
                 {strings.login()}

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

@@ -30,7 +30,7 @@ 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";
@@ -205,7 +205,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               onSubmitEditing={onNext}
               caretHidden
               inputStyle={{
-                fontSize: SIZE.lg,
+                fontSize: AppFontSize.lg,
                 height: 60,
                 textAlign: "center",
                 letterSpacing: 10,
@@ -288,7 +288,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

@@ -33,7 +33,7 @@ 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 { AppFontSize, normalize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 
 interface FloatingButtonProps {
@@ -148,7 +148,7 @@ const FloatingButton = ({
                 : "plus"
             }
             color={colors.primary.accent}
-            size={SIZE.xxxl}
+            size={AppFontSize.xxxl}
           />
         </View>
       </TouchableOpacity>

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

@@ -23,6 +23,7 @@ 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";
 
 export const DefaultPlaceholder = ({ color }: { color: string }) => {
   const { colors } = useThemeColors();
@@ -59,7 +60,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               width: 150,
               height: 20,
               backgroundColor: colors.primary.hover,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginBottom: 10
             }}
           />
@@ -68,7 +69,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               width: 250,
               height: 14,
               backgroundColor: colors.primary.hover,
-              borderRadius: 5
+              borderRadius: defaultBorderRadius
             }}
           />
 
@@ -111,7 +112,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
                 width: 150,
                 height: 12,
                 backgroundColor: colors.secondary.background,
-                borderRadius: 5,
+                borderRadius: defaultBorderRadius,
                 marginBottom: 10
               }}
             />
@@ -120,7 +121,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
                 width: 250,
                 height: 16,
                 backgroundColor: colors.secondary.background,
-                borderRadius: 5
+                borderRadius: defaultBorderRadius
               }}
             />
           </View>
@@ -179,7 +180,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           width: 200,
           height: 16,
           backgroundColor: colors.secondary.background,
-          borderRadius: 5
+          borderRadius: defaultBorderRadius
         }}
       />
       <View
@@ -187,7 +188,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           width: "85%",
           height: 13,
           backgroundColor: colors.secondary.background,
-          borderRadius: 5,
+          borderRadius: defaultBorderRadius,
           marginTop: 10
         }}
       />
@@ -203,7 +204,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             width: 50,
             height: 10,
             backgroundColor: colors.secondary.background,
-            borderRadius: 5
+            borderRadius: defaultBorderRadius
           }}
         />
         <View
@@ -211,7 +212,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/settings-placeholder.tsx

@@ -20,6 +20,7 @@ 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";
 
 export const SettingsPlaceholder = () => {
   const { colors } = useThemeColors();
@@ -31,7 +32,7 @@ export const SettingsPlaceholder = () => {
           width: 100,
           height: 12,
           backgroundColor: colors.primary.shade,
-          borderRadius: 5,
+          borderRadius: defaultBorderRadius,
           marginLeft: 12,
           marginBottom: 12
         }}
@@ -62,7 +63,7 @@ export const SettingsPlaceholder = () => {
               width: 150,
               height: 12,
               backgroundColor: colors.secondary.background,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginBottom: 10
             }}
           />
@@ -71,7 +72,7 @@ export const SettingsPlaceholder = () => {
               width: 250,
               height: 16,
               backgroundColor: colors.secondary.background,
-              borderRadius: 5
+              borderRadius: defaultBorderRadius
             }}
           />
         </View>
@@ -104,7 +105,7 @@ export const SettingsPlaceholder = () => {
               width: 150,
               height: 12,
               backgroundColor: colors.secondary.background,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginBottom: 10
             }}
           />
@@ -113,7 +114,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

@@ -22,7 +22,7 @@ import { ActivityIndicator, 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 { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
 import { getColorLinearShade } from "../../utils/colors";
@@ -57,7 +57,10 @@ const DialogButtons = ({
       ]}
     >
       {loading ? (
-        <ActivityIndicator color={colors.primary.accent} size={SIZE.lg} />
+        <ActivityIndicator
+          color={colors.primary.accent}
+          size={AppFontSize.lg}
+        />
       ) : doneText ? (
         <View
           style={{
@@ -68,7 +71,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>
@@ -84,7 +87,7 @@ const DialogButtons = ({
       >
         <Button
           onPress={onPressNegative}
-          fontSize={SIZE.md}
+          fontSize={AppFontSize.md}
           testID={notesnook.ids.default.dialog.no}
           type="plain"
           bold
@@ -93,7 +96,7 @@ const DialogButtons = ({
         {onPressPositive ? (
           <Button
             onPress={onPressPositive}
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
             testID={notesnook.ids.default.dialog.yes}
             style={{
               marginLeft: 10

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

@@ -20,7 +20,7 @@ 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";
@@ -82,7 +82,7 @@ const DialogHeader = ({
           >
             <Heading
               style={{ textAlign: centered ? "center" : "left" }}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
             >
               {title}{" "}
               {titlePart ? (

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

@@ -39,7 +39,7 @@ import { Button } from "../ui/button";
 import { getContainerBorder } from "../../utils/colors";
 import { Notice } from "../ui/notice";
 import { strings } from "@notesnook/intl";
-import { br } from "../../utils/size";
+import { defaultBorderRadius } from "../../utils/size";
 
 export const Dialog = ({ context = "global" }) => {
   const { colors } = useThemeColors();
@@ -126,7 +126,7 @@ export const Dialog = ({ context = "global" }) => {
     ...getElevationStyle(5),
     width: DDS.isTab ? 400 : "85%",
     maxHeight: 450,
-    borderRadius: br,
+    borderRadius: defaultBorderRadius,
     backgroundColor: colors.primary.background,
     paddingTop: 12,
     ...getContainerBorder(colors.primary.border, 0.5),

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";
@@ -192,7 +192,7 @@ export const AppLockPassword = () => {
                     height: 25,
                     marginRight: 5
                   }}
-                  size={SIZE.lg}
+                  size={AppFontSize.lg}
                 />
               )
             }
@@ -248,7 +248,7 @@ export const AppLockPassword = () => {
                     setSecureTextEntry(true);
                   });
                 }}
-                iconSize={SIZE.lg}
+                iconSize={AppFontSize.lg}
                 type="plain"
                 iconColor={
                   accountPass ? colors.primary.accent : colors.primary.icon

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

@@ -27,7 +27,7 @@ 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";
@@ -80,7 +80,7 @@ export default function AttachImage({
                 style={{
                   width: 100,
                   height: 100,
-                  borderRadius: 5,
+                  borderRadius: defaultBorderRadius,
                   backgroundColor: "black",
                   marginRight: 6
                 }}
@@ -105,7 +105,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 +122,7 @@ export default function AttachImage({
             flexShrink: 1,
             marginLeft: 3
           }}
-          size={SIZE.sm}
+          size={AppFontSize.sm}
         >
           {strings.compress()} ({strings.recommended().toLowerCase()})
         </Paragraph>

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

@@ -39,7 +39,7 @@ 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";
@@ -158,7 +158,7 @@ const JumpToSectionDialog = () => {
       >
         {loading ? (
           <ActivityIndicator
-            size={SIZE.lg}
+            size={AppFontSize.lg}
             color={colors.primary.accent}
             style={{
               marginBottom: 20
@@ -196,7 +196,7 @@ const JumpToSectionDialog = () => {
                     }}
                   >
                     <Paragraph
-                      size={SIZE.sm}
+                      size={AppFontSize.sm}
                       color={
                         currentIndex === index
                           ? colors.static.white

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

@@ -34,7 +34,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";
@@ -216,7 +216,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";
@@ -131,7 +131,7 @@ export default function Progress() {
               textAlign: "center"
             }}
             color={colors.primary.paragraph}
-            size={SIZE.lg}
+            size={AppFontSize.lg}
           >
             {data?.title}
           </Heading>

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

@@ -27,7 +27,7 @@ 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";
@@ -78,7 +78,7 @@ const ResultDialog = () => {
         }}
       >
         <Heading
-          size={SIZE.lg}
+          size={AppFontSize.lg}
           textBreakStrategy="balanced"
           style={{
             alignSelf: "center",
@@ -94,12 +94,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}
@@ -134,7 +134,7 @@ const ResultDialog = () => {
               paddingHorizontal: 12
             }}
             onPress={close}
-            fontSize={SIZE.md + 2}
+            fontSize={AppFontSize.md + 2}
           />
         </View>
       </View>

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

@@ -27,7 +27,7 @@ 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";
 export const ProFeatures = ({ count = 6 }) => {
@@ -69,11 +69,15 @@ export const ProFeatures = ({ count = 6 }) => {
               paddingHorizontal: 0,
               marginBottom: 10,
               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 +90,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/header/index.tsx

@@ -28,7 +28,7 @@ import {
 import { RouteName } from "../../stores/use-navigation-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { eScrollEvent } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { IconButtonProps } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
@@ -121,7 +121,7 @@ export const Header = ({
               : strings.searchInRoute(title)}
           </Paragraph>
         ) : (
-          <Heading size={SIZE.lg}>{title}</Heading>
+          <Heading size={AppFontSize.lg}>{title}</Heading>
         )}
 
         <RightMenus rightButton={rightButton} />

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/intro/index.tsx

@@ -23,31 +23,27 @@ 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 { AppFontSize } from "../../utils/size";
-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 { 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";
 
-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,
+          width: isTablet ? width / 2 : width,
-          paddingHorizontal:
+          paddingHorizontal: isTablet ? (width / 2) * 0.05 : width * 0.05
-            deviceMode !== "mobile" ? (width / 2) * 0.05 : width * 0.05
         }}
       >
         <View
@@ -88,21 +84,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 +110,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={{
+        style={[
-          width: deviceMode !== "mobile" ? width / 2 : "100%",
+          {
-          backgroundColor: colors.secondary.background,
+            width: "100%",
-          borderBottomWidth: 1,
+            backgroundColor: colors.secondary.background,
-          borderBottomColor: colors.primary.border,
+            borderBottomWidth: 1,
-          alignSelf: deviceMode !== "mobile" ? "center" : undefined,
+            borderBottomColor: colors.primary.border,
-          borderWidth: deviceMode !== "mobile" ? 1 : null,
+            paddingTop: insets.top + 10,
-          borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
+            paddingBottom: insets.top + 10,
-          borderRadius: deviceMode !== "mobile" ? 20 : null,
+            minHeight: height * 0.7 - (insets.top + insets.bottom)
-          marginTop: deviceMode !== "mobile" ? 50 : null,
+          },
-          paddingTop: insets.top + 10,
+          isTablet && {
-          paddingBottom: insets.top + 10,
+            width: width / 2,
-          minHeight: height * 0.7 - (insets.top + insets.bottom)
+            alignSelf: "center",
-        }}
+            borderWidth: 1,
+            borderColor: colors.primary.border,
+            borderRadius: 20,
+            marginTop: 50
+          }
+        ]}
       >
         <SwiperFlatList
           autoplay
@@ -170,23 +172,12 @@ const Intro = ({ navigation }) => {
         <Button
           width={250}
           onPress={async () => {
-            eSendEvent(eOpenLoginDialog, AuthMode.welcomeSignup);
+            SettingsService.set({ introCompleted: true });
-            setTimeout(() => {
+            Navigation.push("Auth", {
-              SettingsService.set({
+              mode: AuthMode.welcomeSignup
-                introCompleted: true
+            });
-              });
-              Navigation.replace("Notes", {
-                canGoBack: false
-              });
-            }, 1000);
           }}
-          style={{
+          fontSize={AppFontSize.md}
-            paddingHorizontal: 24,
-            alignSelf: "center",
-            ...getElevationStyle(5),
-            borderRadius: 100
-          }}
-          fontSize={SIZE.md}
           type="accent"
           title={strings.getStarted()}
         />

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

@@ -23,7 +23,7 @@ import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { DefaultAppStyles } from "../../../utils/styles";
 import AppIcon from "../../ui/AppIcon";
 import Heading from "../../ui/typography/heading";
@@ -41,7 +41,7 @@ export const NotebookHeader = ({
     <View
       style={{
         paddingHorizontal: DefaultAppStyles.GAP,
-        marginVertical: DefaultAppStyles.GAP,
+        marginTop: DefaultAppStyles.GAP,
         backgroundColor: colors.secondary.background
       }}
     >
@@ -52,14 +52,16 @@ export const NotebookHeader = ({
           paddingVertical: 25
         }}
       >
-        <AppIcon name="notebook" size={SIZE.xxl} />
+        <AppIcon name="notebook" size={AppFontSize.xxl} />
-        <Heading size={SIZE.lg}>{notebook.title}</Heading>
 
-        {notebook.description ? (
+        <View>
-          <Paragraph size={SIZE.sm} color={colors.primary.paragraph}>
+          <Heading size={AppFontSize.lg}>{notebook.title}</Heading>
-            {notebook.description}
+          {notebook.description ? (
-          </Paragraph>
+            <Paragraph size={AppFontSize.sm} color={colors.primary.paragraph}>
-        ) : null}
+              {notebook.description}
+            </Paragraph>
+          ) : null}
+        </View>
 
         <View
           style={{
@@ -67,11 +69,11 @@ export const NotebookHeader = ({
             gap: DefaultAppStyles.GAP_SMALL
           }}
         >
-          <Paragraph size={SIZE.xxs} color={colors.secondary.paragraph}>
+          <Paragraph size={AppFontSize.xxs} color={colors.secondary.paragraph}>
             {strings.notes(totalNotes || 0)}
           </Paragraph>
 
-          <Paragraph color={colors.secondary.paragraph} size={SIZE.xxs}>
+          <Paragraph color={colors.secondary.paragraph} size={AppFontSize.xxs}>
             {getFormattedDate(notebook.dateModified, "date-time")}
           </Paragraph>
         </View>

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

@@ -21,12 +21,12 @@ import { GroupHeader, GroupOptions, ItemType } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { useWindowDimensions, View } 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 { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { DefaultAppStyles } from "../../../utils/styles";
 import Sort from "../../sheets/sort";
 import { IconButton } from "../../ui/icon-button";
@@ -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"
     );
@@ -66,8 +64,7 @@ export const SectionHeader = React.memo<
       <View
         style={{
           width: "100%",
-          paddingHorizontal: DefaultAppStyles.GAP,
+          paddingHorizontal: DefaultAppStyles.GAP
-          marginVertical: DefaultAppStyles.GAP
         }}
       >
         <View
@@ -79,7 +76,7 @@ export const SectionHeader = React.memo<
             justifyContent: "space-between",
             borderBottomWidth: 1,
             borderColor: colors.primary.border,
-            paddingBottom: DefaultAppStyles.GAP_VERTICAL
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
           }}
         >
           <Pressable
@@ -94,14 +91,16 @@ export const SectionHeader = React.memo<
             }}
           >
             <Heading
-              size={SIZE.sm}
+              size={AppFontSize.xxs}
               style={{
                 alignSelf: "center",
                 textAlignVertical: "center"
               }}
               color={colors.primary.accent}
             >
-              {!item.title || item.title === "" ? strings.pinned() : item.title}
+              {!item.title || item.title === ""
+                ? strings.pinned().toUpperCase()
+                : item.title.toUpperCase()}
             </Heading>
           </Pressable>
 
@@ -120,6 +119,7 @@ export const SectionHeader = React.memo<
                       ? "sort-ascending"
                       : "sort-descending"
                   }
+                  color={colors.secondary.icon}
                   onPress={() => {
                     if (!screen) return;
                     presentSheet({
@@ -130,7 +130,7 @@ export const SectionHeader = React.memo<
                     width: 25,
                     height: 25
                   }}
-                  size={SIZE.lg - 2}
+                  size={AppFontSize.lg - 2}
                 />
                 <IconButton
                   hidden={
@@ -156,19 +156,20 @@ export const SectionHeader = React.memo<
                         : "normal"
                     });
                   }}
-                  size={SIZE.lg - 2}
+                  size={AppFontSize.lg - 2}
                 />
               </>
             ) : null}
 
-            <IconButton
+            {/* <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

@@ -32,9 +32,13 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 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 { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
+import {
+  getFormattedDate,
+  NotebooksWithDateEdited,
+  TagsWithDateEdited
+} from "@notesnook/common";
 import { strings } from "@notesnook/intl";
 import { notesnook } from "../../../../e2e/test.ids";
 import useIsSelected from "../../../hooks/use-selected";
@@ -48,6 +52,7 @@ 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 dayjs from "dayjs";
 
 type NoteItemProps = {
   item: Note | BaseTrashItem<Note>;
@@ -97,11 +102,27 @@ const NoteItem = ({
           flexShrink: 1
         }}
       >
+        {compactMode ? null : (
+          <Paragraph
+            style={{
+              fontSize: AppFontSize.xxs,
+              color: colors.secondary.paragraph
+            }}
+          >
+            {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
             }}
@@ -112,7 +133,7 @@ const NoteItem = ({
           <Heading
             numberOfLines={1}
             color={color?.colorCode || primaryColors.heading}
-            size={SIZE.sm}
+            size={AppFontSize.sm}
             style={{
               paddingRight: 10
             }}
@@ -142,7 +163,7 @@ const NoteItem = ({
               justifyContent: "flex-start",
               alignItems: "center",
               width: "100%",
-              marginTop: 5,
+              marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
               columnGap: 8,
               rowGap: 4,
               flexWrap: "wrap"
@@ -153,7 +174,7 @@ const NoteItem = ({
                 {item.conflicted ? (
                   <Icon
                     name="alert-circle"
-                    size={SIZE.sm}
+                    size={AppFontSize.sm}
                     color={colors.error.accent}
                   />
                 ) : null}
@@ -162,7 +183,7 @@ const NoteItem = ({
                   <Icon
                     testID="sync-off"
                     name="sync-off"
-                    size={SIZE.sm}
+                    size={AppFontSize.sm}
                     color={primaryColors.icon}
                   />
                 ) : null}
@@ -171,20 +192,11 @@ const NoteItem = ({
                   <Icon
                     testID="pencil-lock"
                     name="pencil-lock"
-                    size={SIZE.sm}
+                    size={AppFontSize.sm}
                     color={primaryColors.icon}
                   />
                 ) : null}
 
-                <TimeSince
-                  style={{
-                    fontSize: SIZE.xxs,
-                    color: colors.secondary.paragraph
-                  }}
-                  time={date}
-                  updateFrequency={Date.now() - date < 60000 ? 2000 : 60000}
-                />
-
                 {attachmentsCount > 0 ? (
                   <View
                     style={{
@@ -195,12 +207,12 @@ const NoteItem = ({
                   >
                     <Icon
                       name="attachment"
-                      size={SIZE.sm}
+                      size={AppFontSize.sm}
                       color={primaryColors.icon}
                     />
                     <Paragraph
                       color={colors.secondary.paragraph}
-                      size={SIZE.xxs}
+                      size={AppFontSize.xxs}
                     >
                       {attachmentsCount}
                     </Paragraph>
@@ -211,7 +223,7 @@ const NoteItem = ({
                   <Icon
                     testID="icon-pinned"
                     name="pin-outline"
-                    size={SIZE.xs}
+                    size={AppFontSize.xs}
                     color={color?.colorCode || primaryColors.accent}
                   />
                 ) : null}
@@ -220,7 +232,7 @@ const NoteItem = ({
                   <Icon
                     name="lock"
                     testID="note-locked-icon"
-                    size={SIZE.sm}
+                    size={AppFontSize.sm}
                     color={primaryColors.icon}
                   />
                 ) : null}
@@ -229,7 +241,7 @@ const NoteItem = ({
                   <Icon
                     testID="icon-star"
                     name="star-outline"
-                    size={SIZE.sm}
+                    size={AppFontSize.sm}
                     color="orange"
                   />
                 ) : null}
@@ -240,9 +252,9 @@ const NoteItem = ({
                     disabled
                     color={color?.colorCode}
                     textStyle={{
-                      fontSize: SIZE.xxxs
+                      fontSize: AppFontSize.xxxs
                     }}
-                    iconSize={SIZE.xxxs}
+                    iconSize={AppFontSize.xxxs}
                     style={{
                       height: "auto"
                     }}
@@ -271,11 +283,11 @@ const NoteItem = ({
                     >
                       <AppIcon
                         name="book-outline"
-                        size={SIZE.xxxs}
+                        size={AppFontSize.xxxs}
                         color={colors.secondary.icon}
                       />
                       <Paragraph
-                        size={SIZE.xxxs}
+                        size={AppFontSize.xxxs}
                         color={colors.secondary.paragraph}
                       >
                         {item.title}
@@ -298,7 +310,7 @@ const NoteItem = ({
                           }}
                         >
                           <Paragraph
-                            size={SIZE.xxxs}
+                            size={AppFontSize.xxxs}
                             color={colors.secondary.paragraph}
                           >
                             #{item.title}
@@ -312,7 +324,7 @@ const NoteItem = ({
               <>
                 <Paragraph
                   color={colors.secondary.paragraph}
-                  size={SIZE.xxs}
+                  size={AppFontSize.xxs}
                   style={{
                     marginRight: 6
                   }}
@@ -326,7 +338,7 @@ const NoteItem = ({
 
                 <Paragraph
                   color={primaryColors.accent}
-                  size={SIZE.xxs}
+                  size={AppFontSize.xxs}
                   style={{
                     marginRight: 6
                   }}
@@ -352,7 +364,7 @@ const NoteItem = ({
                 style={{
                   marginRight: 6
                 }}
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 color={colors.error.accent}
               />
             ) : null}
@@ -361,7 +373,7 @@ const NoteItem = ({
               <Icon
                 name="lock"
                 testID="note-locked-icon"
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 style={{
                   marginRight: 6
                 }}
@@ -373,7 +385,7 @@ const NoteItem = ({
               <Icon
                 testID="icon-star"
                 name="star-outline"
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 style={{
                   marginRight: 6
                 }}
@@ -383,7 +395,7 @@ const NoteItem = ({
 
             <TimeSince
               style={{
-                fontSize: SIZE.xxs,
+                fontSize: AppFontSize.xxs,
                 color: colors.secondary.paragraph,
                 marginRight: 6
               }}
@@ -398,7 +410,7 @@ const NoteItem = ({
             <AppIcon
               name={selected ? "checkbox-outline" : "checkbox-blank-outline"}
               color={selected ? colors.selected.icon : colors.primary.icon}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
             />
           </>
         ) : (
@@ -406,7 +418,7 @@ const NoteItem = ({
             testID={notesnook.listitem.menu}
             color={colors.secondary.icon}
             name="dots-horizontal"
-            size={SIZE.lg}
+            size={AppFontSize.lg}
             onPress={() => !noOpen && Properties.present(item)}
             style={{
               justifyContent: "center",

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

@@ -25,7 +25,7 @@ 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 { AppFontSize } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
@@ -61,7 +61,7 @@ export const NotebookItem = ({
       >
         {compactMode ? (
           <Paragraph
-            size={SIZE.sm}
+            size={AppFontSize.sm}
             numberOfLines={1}
             style={{
               flexWrap: "wrap"
@@ -71,7 +71,7 @@ export const NotebookItem = ({
           </Paragraph>
         ) : (
           <Heading
-            size={SIZE.md}
+            size={AppFontSize.md}
             numberOfLines={1}
             style={{
               flexWrap: "wrap"
@@ -83,7 +83,7 @@ export const NotebookItem = ({
 
         {!item.description || compactMode ? null : (
           <Paragraph
-            size={SIZE.sm}
+            size={AppFontSize.sm}
             numberOfLines={2}
             style={{
               flexWrap: "wrap"
@@ -100,14 +100,14 @@ export const NotebookItem = ({
               justifyContent: "flex-start",
               alignItems: "center",
               marginTop: 5,
-              height: SIZE.md + 2
+              height: AppFontSize.md + 2
             }}
           >
             {isTrash ? (
               <>
                 <Paragraph
                   color={colors.secondary.paragraph}
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                   style={{
                     textAlignVertical: "center",
                     marginRight: 6
@@ -121,7 +121,7 @@ export const NotebookItem = ({
                 </Paragraph>
                 <Paragraph
                   color={colors.primary.accent}
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                   style={{
                     textAlignVertical: "center",
                     marginRight: 6
@@ -134,7 +134,7 @@ export const NotebookItem = ({
             ) : (
               <Paragraph
                 color={colors.secondary.paragraph}
-                size={SIZE.xs}
+                size={AppFontSize.xs}
                 style={{
                   marginRight: 6
                 }}
@@ -144,7 +144,7 @@ export const NotebookItem = ({
             )}
             <Paragraph
               color={colors.secondary.paragraph}
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               style={{
                 marginRight: 6
               }}
@@ -155,7 +155,7 @@ export const NotebookItem = ({
             {item.pinned ? (
               <Icon
                 name="pin-outline"
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 style={{
                   marginRight: 10,
                   marginTop: 2
@@ -176,7 +176,7 @@ export const NotebookItem = ({
           <>
             <Paragraph
               color={colors.primary.icon}
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               style={{
                 marginRight: 6
               }}
@@ -190,7 +190,7 @@ export const NotebookItem = ({
           color={colors.primary.heading}
           name="dots-horizontal"
           testID={notesnook.ids.notebook.menu}
-          size={SIZE.xl}
+          size={AppFontSize.xl}
           onPress={() => Properties.present(item)}
           style={{
             justifyContent: "center",

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";
@@ -62,7 +62,7 @@ const ReminderItem = React.memo(
             style={{
               flexWrap: "wrap"
             }}
-            size={SIZE.md}
+            size={AppFontSize.md}
           >
             {item.title}
           </Heading>
@@ -89,7 +89,7 @@ const ReminderItem = React.memo(
               <View
                 style={{
                   backgroundColor: colors.secondary.background,
-                  borderRadius: 5,
+                  borderRadius: defaultBorderRadius,
                   flexDirection: "row",
                   paddingHorizontal: 6,
                   alignItems: "center",
@@ -102,11 +102,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,7 +118,7 @@ const ReminderItem = React.memo(
               <View
                 style={{
                   backgroundColor: colors.secondary.background,
-                  borderRadius: 5,
+                  borderRadius: defaultBorderRadius,
                   flexDirection: "row",
                   paddingHorizontal: 6,
                   alignItems: "center",
@@ -131,11 +131,11 @@ const ReminderItem = React.memo(
               >
                 <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,7 +147,7 @@ const ReminderItem = React.memo(
             <ReminderTime
               reminder={item}
               checkIsActive={false}
-              fontSize={SIZE.xs}
+              fontSize={AppFontSize.xs}
               style={{
                 justifyContent: "flex-start",
                 height: 25,
@@ -160,7 +160,7 @@ const ReminderItem = React.memo(
           testID={notesnook.listitem.menu}
           color={colors.primary.paragraph}
           name="dots-horizontal"
-          size={SIZE.xl}
+          size={AppFontSize.xl}
           onPress={() => Properties.present(item, isSheet)}
           style={{
             justifyContent: "center",

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,7 +23,7 @@ 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";
@@ -60,9 +60,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,7 +73,7 @@ const TagItem = React.memo(
           </Heading>
           <Paragraph
             color={colors.secondary.paragraph}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             style={{
               marginTop: 5
             }}
@@ -85,7 +85,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

@@ -21,16 +21,24 @@ 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 { Message, useMessageStore } from "../../stores/use-message-store";
-import { SIZE } from "../../utils/size";
+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;
 
@@ -40,7 +48,7 @@ export const Card = ({ color }: { color?: string }) => {
       style={{
         width: "100%",
         paddingHorizontal: DefaultAppStyles.GAP,
-        marginTop: DefaultAppStyles.GAP
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       <Pressable
@@ -51,11 +59,7 @@ export const Card = ({ color }: { color?: string }) => {
           flexDirection: "row",
           alignItems: "center",
           justifyContent: "space-between",
-          paddingHorizontal: DefaultAppStyles.GAP_SMALL,
+          width: "100%"
-          width: "100%",
-          backgroundColor: colors.secondary.background,
-          borderWidth: 1,
-          borderColor: colors.primary.border
         }}
       >
         <View
@@ -75,7 +79,7 @@ export const Card = ({ color }: { color?: string }) => {
             }}
           >
             <Icon
-              size={SIZE.xxxl}
+              size={AppFontSize.xxxl}
               color={
                 messageBoardState.type === "error" ? colors.error.icon : color
               }
@@ -95,11 +99,15 @@ export const Card = ({ color }: { color?: string }) => {
                 flexWrap: "nowrap",
                 flexShrink: 1
               }}
+              size={AppFontSize.xs}
               color={colors.primary.heading}
             >
               {messageBoardState.actionText}
             </Paragraph>
-            <Paragraph color={colors.secondary.paragraph} size={SIZE.xxs}>
+            <Paragraph
+              color={colors.secondary.paragraph}
+              size={AppFontSize.xxs}
+            >
               {messageBoardState.message}
             </Paragraph>
           </View>
@@ -119,7 +127,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

@@ -24,7 +24,7 @@ import { notesnook } from "../../../e2e/test.ids";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { TTip, useTip } from "../../services/tip-manager";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { SIZE } from "../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../utils/size";
 import { Tip } from "../tip";
 import { Button } from "../ui/button";
 import Seperator from "../ui/seperator";
@@ -109,7 +109,7 @@ export const Empty = React.memo(function Empty({
               }}
               style={{
                 alignSelf: "flex-start",
-                borderRadius: 5,
+                borderRadius: defaultBorderRadius,
                 height: 40
               }}
             />
@@ -125,12 +125,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/reorderable-list.tsx

@@ -27,7 +27,7 @@ import {
 } from "react-native-drax";
 
 import { fluidTabsRef } from "../../utils/global-refs";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { useSideBarDraggingStore } from "../side-menu/dragging-store";
 import { IconButton } from "../ui/icon-button";
 
@@ -78,13 +78,15 @@ function ReorderableList<T extends { id: string }>({
       return isHidden && !dragging ? null : (
         <View
           style={{
-            flexDirection: "row"
+            flexDirection: "row",
+            width: "100%"
           }}
         >
           <View
             style={{
+              opacity: isHidden ? 0.4 : 1,
               flexGrow: 1,
-              opacity: isHidden ? 0.4 : 1
+              flexShrink: 1
             }}
           >
             {renderDraggableItem(info, props)}
@@ -93,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";
@@ -164,7 +164,7 @@ const MergeConflicts = () => {
           <Paragraph
             style={{ flexWrap: "wrap" }}
             color={colors.secondary.paragraph}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
           >
             <Text
               style={{
@@ -203,7 +203,7 @@ const MergeConflicts = () => {
                 borderRadius: 100,
                 paddingHorizontal: 12
               }}
-              fontSize={SIZE.xs}
+              fontSize={AppFontSize.xs}
             />
           ) : null}
           <View style={{ width: 10 }} />
@@ -220,7 +220,7 @@ const MergeConflicts = () => {
                 borderRadius: 100,
                 paddingHorizontal: 12
               }}
-              fontSize={SIZE.xs}
+              fontSize={AppFontSize.xs}
               color={colors.error.paragraph}
               onPress={() => {
                 setDialogVisible(true);
@@ -238,7 +238,7 @@ const MergeConflicts = () => {
                   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";
@@ -97,7 +97,7 @@ const HistoryItem = ({
       {!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>
         </>
@@ -170,7 +170,7 @@ export default function NoteHistory({
             >
               {_loading ? (
                 <ActivityIndicator
-                  size={SIZE.xl}
+                  size={AppFontSize.xl}
                   color={colors.primary.accent}
                 />
               ) : (
@@ -187,7 +187,7 @@ export default function NoteHistory({
         />
       </View>
       <Paragraph
-        size={SIZE.xs}
+        size={AppFontSize.xs}
         color={colors.secondary.paragraph}
         style={{
           alignSelf: "center"

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 {
+import { eClosePremiumDialog, eCloseSheet } from "../../utils/events";
-  eClosePremiumDialog,
+import { AppFontSize } from "../../utils/size";
-  eCloseSheet,
-  eOpenLoginDialog
-} from "../../utils/events";
-import { SIZE } 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";
@@ -66,9 +63,9 @@ export const Component = ({ close, promo }) => {
       });
     } else {
       close();
-      setTimeout(() => {
+      Navigation.navigate("Auth", {
-        eSendEvent(eOpenLoginDialog, AuthMode.trialSignup);
+        mode: AuthMode.trialSignup
-      }, 400);
+      });
     }
   };
 
@@ -137,14 +134,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 +151,7 @@ export const Component = ({ close, promo }) => {
             style={{
               marginBottom: 20
             }}
-            size={SIZE.md}
+            size={AppFontSize.md}
             color={colors.primary.accent}
           />
         ) : (
@@ -163,7 +160,7 @@ export const Component = ({ close, promo }) => {
               alignSelf: "center",
               marginBottom: 20
             }}
-            size={SIZE.md}
+            size={AppFontSize.md}
           >
             (
             {Platform.OS === "android"
@@ -176,7 +173,7 @@ export const Component = ({ close, promo }) => {
 
         <Paragraph
           key="description"
-          size={SIZE.md}
+          size={AppFontSize.md}
           style={{
             paddingHorizontal: 12,
             textAlign: "center",
@@ -231,7 +228,7 @@ export const Component = ({ close, promo }) => {
         {!user || userCanRequestTrial ? (
           <Paragraph
             color={colors.secondary.paragraph}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             style={{
               alignSelf: "center",
               textAlign: "center",
@@ -242,7 +239,7 @@ export const Component = ({ close, promo }) => {
             {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>

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";
@@ -127,7 +127,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,7 +143,7 @@ export const Expiring = () => {
                     await sleep(300);
                     eSendEvent(eOpenPremiumDialog, promo);
                   }}
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                   style={{
                     textDecorationLine: "underline",
                     color: colors.secondary.paragraph,
@@ -176,7 +176,7 @@ export const Expiring = () => {
                     promo?.discount > 30 ? null : promo
                   );
                 }}
-                fontSize={SIZE.md + 2}
+                fontSize={AppFontSize.md + 2}
                 style={{
                   marginBottom: status.extend ? 0 : 10,
                   marginTop: 10,
@@ -201,7 +201,7 @@ export const Expiring = () => {
                       button: "Continue"
                     });
                   }}
-                  fontSize={SIZE.xs}
+                  fontSize={AppFontSize.xs}
                   height={30}
                   style={{
                     marginBottom: 10

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

@@ -21,7 +21,7 @@ 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";
 
@@ -53,7 +53,7 @@ export const FeatureBlock = ({
           marginLeft: 5,
           flexShrink: 1
         }}
-        size={SIZE.sm}
+        size={AppFontSize.sm}
       >
         {content}
       </Paragraph>
@@ -65,12 +65,12 @@ export const FeatureBlock = ({
         justifyContent: "center",
         padding: 10,
         marginRight: 10,
-        borderRadius: 5,
+        borderRadius: defaultBorderRadius,
         minWidth: 100
       }}
     >
-      <Icon color={colors.primary.icon} name={icon} size={SIZE.xl} />
+      <Icon color={colors.primary.icon} name={icon} size={AppFontSize.xl} />
-      <Paragraph size={SIZE.md}>
+      <Paragraph size={AppFontSize.md}>
         <Text style={{ color: colors.primary.accent }}>{highlight}</Text>
         {content ? "\n" + content : null}
       </Paragraph>
@@ -78,7 +78,7 @@ 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

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

@@ -20,7 +20,7 @@ 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";
@@ -33,18 +33,25 @@ export const Group = ({ item, index }) => {
     <View
       style={{
         paddingHorizontal: 12,
-        backgroundColor: index % 2 !== 0 ? colors.primary.background : colors.secondary.background,
+        backgroundColor:
+          index % 2 !== 0
+            ? colors.primary.background
+            : colors.secondary.background,
         paddingVertical: 40
       }}
     >
       {item?.pro ? (
         <ProTag
-          size={SIZE.sm}
+          size={AppFontSize.sm}
-          background={index % 2 === 0 ? colors.primary.background : colors.secondary.background}
+          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
@@ -60,7 +67,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>
@@ -70,7 +81,7 @@ export const Group = ({ item, index }) => {
           style={{
             marginTop: 10
           }}
-          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,7 +35,7 @@ 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";
@@ -120,7 +120,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 +129,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,7 +19,7 @@ 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";
@@ -59,13 +59,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 +75,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,
+  eCloseSimpleDialog
-  eOpenLoginDialog
 } 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,6 @@ 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";
 
 const UUID_PREFIX = "0bdaea";
 const UUID_VERSION = "4";
@@ -290,7 +291,7 @@ export const PricingPlans = ({
             style={{
               alignSelf: "center"
             }}
-            size={SIZE.lg}
+            size={AppFontSize.lg}
           >
             {(Platform.OS === "android"
               ? (monthlyPlan?.product as RNIap.SubscriptionAndroid | undefined)
@@ -373,7 +374,7 @@ export const PricingPlans = ({
               <Heading
                 style={{
                   paddingTop: 15,
-                  fontSize: SIZE.lg
+                  fontSize: AppFontSize.lg
                 }}
               >
                 Special offer for you
@@ -390,7 +391,7 @@ export const PricingPlans = ({
                     alignSelf: "center",
                     textAlign: "center"
                   }}
-                  size={SIZE.xxl}
+                  size={AppFontSize.xxl}
                 >
                   {Platform.OS === "android"
                     ? (product.data as RNIap.SubscriptionAndroid)
@@ -411,7 +412,7 @@ export const PricingPlans = ({
                       alignSelf: "center",
                       textAlign: "center"
                     }}
-                    size={SIZE.md}
+                    size={AppFontSize.md}
                   >
                     then {getStandardPrice()} {product?.offerType}.
                   </Paragraph>
@@ -557,9 +558,9 @@ export const PricingPlans = ({
                     onPress={() => {
                       eSendEvent(eClosePremiumDialog);
                       eSendEvent(eCloseSheet);
-                      setTimeout(() => {
+                      Navigation.navigate("Auth", {
-                        eSendEvent(eOpenLoginDialog, 1);
+                        mode: AuthMode.login
-                      }, 400);
+                      });
                     }}
                     title={"Sign up for free"}
                     type="accent"
@@ -574,7 +575,7 @@ export const PricingPlans = ({
                   promo &&
                   !promo.promoCode.startsWith("com.streetwriters.notesnook") ? (
                     <Paragraph
-                      size={SIZE.md}
+                      size={AppFontSize.md}
                       textBreakStrategy="balanced"
                       style={{
                         alignSelf: "center",
@@ -629,7 +630,7 @@ export const PricingPlans = ({
       {!user || !upgrade ? (
         <Paragraph
           color={colors.secondary.paragraph}
-          size={SIZE.xs}
+          size={AppFontSize.xs}
           style={{
             alignSelf: "center",
             textAlign: "center",
@@ -640,7 +641,7 @@ export const PricingPlans = ({
           {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,7 +652,7 @@ export const PricingPlans = ({
           {Platform.OS === "ios" ? (
             <Paragraph
               textBreakStrategy="balanced"
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               color={colors.secondary.paragraph}
               style={{
                 alignSelf: "center",
@@ -665,7 +666,7 @@ export const PricingPlans = ({
             </Paragraph>
           ) : (
             <Paragraph
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               color={colors.secondary.paragraph}
               style={{
                 alignSelf: "center",
@@ -685,7 +686,7 @@ export const PricingPlans = ({
             }}
           >
             <Paragraph
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               color={colors.secondary.paragraph}
               style={{
                 maxWidth: "100%",
@@ -694,7 +695,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 +710,7 @@ export const PricingPlans = ({
               </Paragraph>
               and{" "}
               <Paragraph
-                size={SIZE.xs}
+                size={AppFontSize.xs}
                 onPress={() => {
                   openLinkInBrowser("https://notesnook.com/privacy")
                     .catch(() => {})

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

@@ -31,7 +31,7 @@ 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";
@@ -85,7 +85,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>
   );
@@ -151,7 +156,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
                 icon="plus"
                 iconPosition="right"
                 height={30}
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
                 style={{
                   marginRight: 5,
                   borderRadius: 100,
@@ -178,7 +183,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
                   testID="icon-plus"
                   name="plus"
                   color={colors.primary.icon}
-                  size={SIZE.lg}
+                  size={AppFontSize.lg}
                 />
               </Pressable>
             )

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

@@ -20,7 +20,7 @@ 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";
@@ -47,10 +47,10 @@ export const DateMeta = ({ item }) => {
           paddingVertical: 3
         }}
       >
-        <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>

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

@@ -27,7 +27,7 @@ import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { ColorValues } from "../../utils/colors";
 import { eOnLoadNote } from "../../utils/events";
 import { fluidTabsRef } from "../../utils/global-refs";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import SheetProvider from "../sheet-provider";
 import { IconButton } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
@@ -39,6 +39,7 @@ import { Items } from "./items";
 import Notebooks from "./notebooks";
 import { TagStrip, Tags } from "./tags";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const Line = ({ top = 6, bottom = 6 }) => {
   const { colors } = useThemeColors();
@@ -81,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,
+              paddingHorizontal: DefaultAppStyles.GAP
-              marginTop: 5,
-              zIndex: 10,
-              marginBottom: 5
             }}
           >
             <View
@@ -119,12 +121,12 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
                 ) : item.type === "tag" ? (
                   <Icon
                     name="pound"
-                    size={SIZE.lg}
+                    size={AppFontSize.lg}
                     color={colors.primary.icon}
                   />
                 ) : null}
 
-                <Heading size={SIZE.lg}>{item.title}</Heading>
+                <Heading size={AppFontSize.lg}>{item.title}</Heading>
               </View>
 
               {item.type === "note" ? (
@@ -132,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"
                   }}
@@ -169,7 +171,7 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
                   backgroundColor: "transparent",
                   paddingHorizontal: 0
                 }}
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
               />
             ) : null}
           </View>
@@ -184,15 +186,8 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
             </>
           ) : null}
           {item.type === "note" ? (
-            <View
+            <Notebooks note={item} close={close} />
-              style={{
-                paddingHorizontal: 12
-              }}
-            >
-              <Notebooks note={item} close={close} />
-            </View>
           ) : null}
-
           <Items
             item={item}
             buttons={buttons}

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

@@ -20,13 +20,14 @@ 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, ScrollView, View } from "react-native";
+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 { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Button } from "../ui/button";
 import { Pressable } from "../ui/pressable";
@@ -66,6 +67,9 @@ const COLUMN_BAR_ITEMS: ActionId[] = [
   "pin",
   "default-notebook",
   "add-shortcut",
+  "reorder",
+  "rename-color",
+  "rename-tag",
   "trash"
 ];
 
@@ -89,8 +93,8 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
 
   const columnItemWidth =
     deviceMode !== "mobile"
-      ? (width - 16) / columnItemsCount
+      ? (width - DefaultAppStyles.GAP) / columnItemsCount
-      : (width - 16) / columnItemsCount;
+      : (width - DefaultAppStyles.GAP) / columnItemsCount;
 
   const topBarItems = selectedActions
     .filter((item) => TOP_BAR_ITEMS.indexOf(item.id) > -1)
@@ -134,7 +138,7 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
           onPress={item.onPress}
           type={item.checked ? "shade" : "secondary"}
           style={{
-            height: columnItemWidth - 8,
+            height: columnItemWidth / 1.5,
             width: columnItemWidth - 8,
             borderRadius: 10,
             justifyContent: "center",
@@ -145,7 +149,13 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
           <Icon
             allowFontScaling
             name={item.icon}
-            size={DDS.isTab ? SIZE.xxl : shouldShrink ? SIZE.xxl : SIZE.lg}
+            size={
+              DDS.isTab
+                ? AppFontSize.xxl
+                : shouldShrink
+                ? AppFontSize.xxl
+                : AppFontSize.lg
+            }
             color={
               item.checked
                 ? item.activeColor || colors.primary.accent
@@ -157,7 +167,7 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
         </Pressable>
 
         <Paragraph
-          size={SIZE.xxs}
+          size={AppFontSize.xxs}
           textBreakStrategy="simple"
           style={{ textAlign: "center" }}
         >
@@ -189,7 +199,7 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
         title={item.title}
         icon={item.icon}
         type={item.checked ? "inverted" : "plain"}
-        fontSize={SIZE.sm}
+        fontSize={AppFontSize.sm}
         style={{
           borderRadius: 0,
           justifyContent: "flex-start",
@@ -218,24 +228,21 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
           key={item.id}
           testID={"icon-" + item.id}
           style={{
-            alignSelf: "flex-start",
+            width: columnItemWidth - 8
-            paddingHorizontal: 0,
-            flex: 1
           }}
         >
           <View
             style={{
-              height: topBarItemHeight,
+              height: columnItemWidth / 2,
+              width: columnItemWidth - DefaultAppStyles.GAP_SMALL,
               justifyContent: "center",
-              alignItems: "center",
+              alignItems: "center"
-              marginBottom: DDS.isTab ? 7 : 3.5,
-              borderRadius: 100
             }}
           >
             <Icon
               name={item.icon}
               allowFontScaling
-              size={DDS.isTab ? SIZE.xxl : SIZE.md + 4}
+              size={DDS.isTab ? AppFontSize.xxl : AppFontSize.md + 4}
               color={
                 item.checked
                   ? item.activeColor || colors.primary.accent
@@ -248,7 +255,7 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
 
           <Paragraph
             textBreakStrategy="simple"
-            size={SIZE.xxs}
+            size={AppFontSize.xxs}
             style={{ textAlign: "center" }}
           >
             {item.title}
@@ -260,42 +267,79 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
       colors.error.icon,
       colors.primary.accent,
       colors.secondary.icon,
-      topBarItemHeight,
+      columnItemWidth,
       topBarSorting
     ]
   );
 
-  return item.type === "note" ? (
+  const getTopBarItemChunksOfFour = () => {
-    <>
+    const chunks = [];
-      <ScrollView
+    for (let i = 0; i < topBarItems.length; i += 5) {
-        horizontal
+      chunks.push(topBarItems.slice(i, i + 5));
-        style={{
+    }
-          paddingHorizontal: 16,
+    return chunks;
-          marginTop: 6,
+  };
-          marginBottom: 6
-        }}
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={{
-          paddingRight: 25,
-          gap: 15
-        }}
-      >
-        {topBarItems.map(renderTopBarItem)}
-      </ScrollView>
 
-      <View
+  return (
-        style={{
+    <View
-          flexDirection: "row",
+      style={{
-          flexWrap: "wrap",
+        gap: DefaultAppStyles.GAP
-          marginTop: 10,
+      }}
-          gap: 5,
+    >
-          paddingHorizontal: DefaultAppStyles.GAP
+      {item.type === "note" ? (
-        }}
+        <>
-      >
+          <View>
-        {bottomGridItems.map((item) => renderRowItem({ item }))}
+            <SwiperFlatList
-      </View>
+              data={getTopBarItemChunksOfFour()}
-    </>
+              autoplay={false}
-  ) : (
+              showPagination
-    <View>{columnItems.map(renderColumnItem)}</View>
+              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,7 +25,7 @@ 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";
@@ -72,7 +72,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 +82,7 @@ export default function Notebooks({ note, close, full }) {
         style={{
           maxWidth: "50%"
         }}
-        size={SIZE.sm}
+        size={AppFontSize.sm}
       >
         {item.title}
       </Heading>
@@ -92,40 +92,46 @@ export default function Notebooks({ note, close, full }) {
   return noteNotebooks.length === 0 ? null : (
     <View
       style={{
-        width: "100%",
+        paddingHorizontal: 12
-        borderRadius: 10,
-        marginTop: 6
       }}
     >
-      {full
+      <View
-        ? noteNotebooks.map(renderItem)
+        style={{
-        : noteNotebooks.slice(0, 1).map(renderItem)}
+          width: "100%",
+          borderRadius: 10,
+          marginTop: 6
+        }}
+      >
+        {full
+          ? noteNotebooks.map(renderItem)
+          : noteNotebooks.slice(0, 1).map(renderItem)}
 
-      {noteNotebooks.length > 1 && !full ? (
+        {noteNotebooks.length > 1 && !full ? (
-        <Button
+          <Button
-          title={strings.viewAllLinkedNotebooks()}
+            title={strings.viewAllLinkedNotebooks()}
-          fontSize={SIZE.xs}
+            fontSize={AppFontSize.xs}
-          style={{
+            style={{
-            alignSelf: "flex-end",
+              alignSelf: "flex-end",
-            marginRight: 12,
+              marginRight: 12,
-            paddingHorizontal: 0,
+              paddingHorizontal: 0,
-            backgroundColor: "transparent"
+              backgroundColor: "transparent"
-          }}
+            }}
-          type="plain"
+            type="plain"
-          textStyle={{
+            textStyle={{
-            textDecorationLine: "underline"
+              textDecorationLine: "underline"
-          }}
+            }}
-          height={20}
+            height={20}
-          onPress={() => {
+            onPress={() => {
-            presentSheet({
+              presentSheet({
-              context: "properties",
+                context: "properties",
-              component: (ref, close) => (
+                component: (ref, close) => (
-                <Notebooks note={note} close={close} full={true} />
+                  <Notebooks note={note} close={close} full={true} />
-              )
+                )
-            });
+              });
-          }}
+            }}
-        />
+          />
-      ) : undefined}
+        ) : undefined}
+      </View>
     </View>
   );
 }

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

@@ -21,7 +21,7 @@ import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 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";
@@ -40,8 +40,8 @@ export const Synced = ({ item, close }) => {
         padding: DefaultAppStyles.GAP_VERTICAL_SMALL,
         paddingHorizontal: DefaultAppStyles.GAP_SMALL
       }}
-      fontSize={SIZE.xxxs}
+      fontSize={AppFontSize.xxxs}
-      iconSize={SIZE.xs}
+      iconSize={AppFontSize.xs}
       icon="shield-key-outline"
       type="shade"
       title="Encrypted and synced"

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

@@ -22,7 +22,7 @@ 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";
@@ -57,7 +57,7 @@ export const Tags = ({ item, close }) => {
         icon="plus"
         iconPosition="right"
         height={30}
-        fontSize={SIZE.sm - 1}
+        fontSize={AppFontSize.sm - 1}
         style={{
           height: 35,
           borderRadius: 100
@@ -117,7 +117,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

@@ -37,7 +37,7 @@ import { useSelectionStore } from "../../stores/use-selection-store";
 import { deleteItems } from "../../utils/functions";
 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";
@@ -164,7 +164,7 @@ export const SelectionHeader = React.memo(
                 .getState()
                 .setAll(allSelected ? [] : [...((await items?.ids()) || [])]);
             }}
-            size={SIZE.lg}
+            size={AppFontSize.lg}
             color={allSelected ? colors.primary.accent : colors.primary.icon}
             name="select-all"
           />
@@ -276,7 +276,7 @@ export const SelectionHeader = React.memo(
               ].map((item) =>
                 !item.visible ? null : (
                   <IconButton
-                    size={SIZE.lg}
+                    size={AppFontSize.lg}
                     type="plain"
                     name={item.icon}
                     key={item.title}
@@ -293,7 +293,7 @@ export const SelectionHeader = React.memo(
         </View>
 
         <IconButton
-          size={SIZE.lg}
+          size={AppFontSize.lg}
           onPress={() => {
             clearSelection();
           }}

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

@@ -27,7 +27,7 @@ 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";
@@ -180,7 +180,7 @@ const SheetProvider = ({ context = "global" }) => {
               type="plain"
               key={v}
               textStyle={{ fontWeight: "normal" }}
-              fontSize={SIZE.sm}
+              fontSize={AppFontSize.sm}
               icon="check"
               width="100%"
               style={{
@@ -223,7 +223,7 @@ const SheetProvider = ({ context = "global" }) => {
                 marginBottom: 10
               }}
               width="100%"
-              fontSize={SIZE.md}
+              fontSize={AppFontSize.md}
             />
           ))}
 
@@ -234,14 +234,14 @@ const SheetProvider = ({ context = "global" }) => {
               marginTop: 10,
               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

@@ -35,7 +35,7 @@ import { useNotebookStore } from "../../../stores/use-notebook-store";
 import { useRelationStore } from "../../../stores/use-relation-store";
 import { eOnNotebookUpdated } from "../../../utils/events";
 import { getParentNotebookId } from "../../../utils/notebooks";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
@@ -118,7 +118,7 @@ export const AddNotebookSheet = ({
         paddingHorizontal: 12
       }}
     >
-      <Heading size={SIZE.lg}>
+      <Heading size={AppFontSize.lg}>
         {notebook ? strings.editNotebook() : strings.newNotebook()}
       </Heading>
 
@@ -160,7 +160,7 @@ export const AddNotebookSheet = ({
         title={notebook ? strings.save() : strings.add()}
         type="accent"
         height={45}
-        fontSize={SIZE.md}
+        fontSize={AppFontSize.md}
         style={{
           paddingHorizontal: 24,
           width: "100%"

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

@@ -44,7 +44,7 @@ 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 { AppFontSize } from "../../../utils/size";
 import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
 import SheetProvider from "../../sheet-provider";
@@ -314,7 +314,7 @@ const MoveNoteSheet = ({
               >
                 {loading ? (
                   <ActivityIndicator
-                    size={SIZE.lg}
+                    size={AppFontSize.lg}
                     color={colors.primary.accent}
                   />
                 ) : (

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

@@ -24,7 +24,7 @@ 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 { AppFontSize } from "../../../utils/size";
 import { IconButton } from "../../ui/icon-button";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
@@ -147,7 +147,7 @@ export const NotebookItem = ({
         >
           {nestedNotebooks?.placeholders.length ? (
             <IconButton
-              size={SIZE.xl}
+              size={AppFontSize.xl}
               color={isSelected ? colors.selected.icon : colors.primary.icon}
               onPress={() => {
                 if (!item?.id) return;
@@ -166,7 +166,7 @@ export const NotebookItem = ({
           ) : null}
 
           <IconButton
-            size={SIZE.xl}
+            size={AppFontSize.xl}
             color={
               isSelected
                 ? colors.selected.icon
@@ -198,7 +198,7 @@ export const NotebookItem = ({
             color={
               isFocused ? colors.selected.paragraph : colors.secondary.paragraph
             }
-            size={SIZE.sm}
+            size={AppFontSize.sm}
           >
             {item?.title}
           </Paragraph>
@@ -212,7 +212,7 @@ export const NotebookItem = ({
           }}
         >
           {item?.id && totalNotes?.(item?.id) ? (
-            <Paragraph size={SIZE.sm} color={colors.secondary.paragraph}>
+            <Paragraph size={AppFontSize.sm} color={colors.secondary.paragraph}>
               {totalNotes(item?.id)}
             </Paragraph>
           ) : null}
@@ -238,7 +238,7 @@ export const NotebookItem = ({
             bottom={0}
             top={0}
             color={colors.primary.icon}
-            size={SIZE.xl}
+            size={AppFontSize.xl}
           />
         </View>
       </Pressable>

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

@@ -32,7 +32,7 @@ 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";
@@ -101,15 +101,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 +119,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 +136,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 +152,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;
@@ -215,7 +215,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

@@ -41,7 +41,7 @@ import Exporter from "../../../services/exporter";
 import PremiumService from "../../../services/premium";
 import { useUserStore } from "../../../stores/use-user-store";
 import { getElevationStyle } from "../../../utils/elevation";
-import { SIZE, ph, pv } from "../../../utils/size";
+import { AppFontSize, defaultBorderRadius, ph, pv } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
@@ -203,7 +203,7 @@ const ExportNotesSheet = ({
                 <View
                   style={{
                     backgroundColor: colors.primary.shade,
-                    borderRadius: 5,
+                    borderRadius: defaultBorderRadius,
                     height: 60,
                     width: 60,
                     justifyContent: "center",
@@ -215,7 +215,7 @@ const ExportNotesSheet = ({
                     color={
                       item.pro ? colors.primary.accent : colors.primary.icon
                     }
-                    size={SIZE.xxxl + 10}
+                    size={AppFontSize.xxxl + 10}
                   />
                 </View>
                 <View
@@ -224,7 +224,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
@@ -294,7 +294,7 @@ const ExportNotesSheet = ({
                   }
                   type="accent"
                   width={250}
-                  fontSize={SIZE.md}
+                  fontSize={AppFontSize.md}
                   style={{
                     marginTop: 10,
                     borderRadius: 100
@@ -323,7 +323,7 @@ const ExportNotesSheet = ({
                   title={strings.share()}
                   type="secondaryAccented"
                   width={250}
-                  fontSize={SIZE.md}
+                  fontSize={AppFontSize.md}
                   style={{
                     marginTop: 10,
                     borderRadius: 100
@@ -351,7 +351,7 @@ const ExportNotesSheet = ({
                   title={strings.exportAgain()}
                   type="inverted"
                   width={250}
-                  fontSize={SIZE.md}
+                  fontSize={AppFontSize.md}
                   style={{
                     marginTop: 10,
                     borderRadius: 100
@@ -384,7 +384,7 @@ ExportNotesSheet.present = async (ids?: string[], allNotes?: boolean) => {
 const styles = StyleSheet.create({
   container: {
     ...getElevationStyle(5),
-    borderRadius: 5,
+    borderRadius: defaultBorderRadius,
     paddingVertical: pv
   },
   buttonContainer: {
@@ -395,7 +395,7 @@ const styles = StyleSheet.create({
     paddingVertical: pv,
     paddingHorizontal: ph,
     marginTop: 10,
-    borderRadius: 5,
+    borderRadius: defaultBorderRadius,
     width: "100%",
     justifyContent: "center",
     alignItems: "center",
@@ -405,7 +405,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,7 +21,7 @@ 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";
 export const ShareComponent = ({ uri, name, padding }) => {
@@ -35,7 +35,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,7 +53,7 @@ export const ShareComponent = ({ uri, name, padding }) => {
         title={strings.share()}
         type="shade"
         width="100%"
-        fontSize={SIZE.md}
+        fontSize={AppFontSize.md}
         style={{
           marginTop: 10
         }}

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

@@ -28,7 +28,7 @@ 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";
@@ -147,11 +147,11 @@ Logged in: ${user ? "yes" : "no"}`,
             style={{
               borderWidth: 1,
               borderColor: colors.primary.border,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               padding: 12,
               fontFamily: "OpenSans-Regular",
               marginBottom: 10,
-              fontSize: SIZE.md,
+              fontSize: AppFontSize.md,
               color: colors.primary.heading
             }}
             placeholderTextColor={colors.primary.placeholder}
@@ -180,18 +180,18 @@ Logged in: ${user ? "yes" : "no"}`,
             style={{
               borderWidth: 1,
               borderColor: colors.primary.border,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               padding: 12,
               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,7 +208,7 @@ Logged in: ${user ? "yes" : "no"}`,
 
           <Paragraph
             color={colors.secondary.paragraph}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             style={{
               marginTop: 10,
               textAlign: "center"
@@ -217,7 +217,9 @@ Logged in: ${user ? "yes" : "no"}`,
             {strings.issueNotice[0]()}{" "}
             <Text
               onPress={() => {
-                Linking.openURL("https://github.com/streetwriters/notesnook/issues");
+                Linking.openURL(
+                  "https://github.com/streetwriters/notesnook/issues"
+                );
               }}
               style={{
                 textDecorationLine: "underline",

apps/mobile/app/components/sheets/link-note/index.tsx

@@ -33,7 +33,7 @@ import { db } from "../../../common/database";
 import { useDBItem } from "../../../hooks/use-db-item";
 import { editorController } from "../../../screens/editor/tiptap/utils";
 import { presentSheet } from "../../../services/event-manager";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import { Pressable } from "../../ui/pressable";
@@ -122,7 +122,7 @@ const ListBlockItem = ({
 
         <View
           style={{
-            borderRadius: 5,
+            borderRadius: defaultBorderRadius,
             backgroundColor: colors.secondary.background,
             height: 25,
             minWidth: 25,
@@ -130,7 +130,7 @@ const ListBlockItem = ({
             justifyContent: "center"
           }}
         >
-          <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+          <Paragraph color={colors.secondary.paragraph} size={AppFontSize.xs}>
             {item.type.toUpperCase()}
           </Paragraph>
         </View>
@@ -254,7 +254,7 @@ export default function LinkNote(props: {
               gap: 10
             }}
           >
-            <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+            <Paragraph color={colors.secondary.paragraph} size={AppFontSize.xs}>
               {strings.linkNoteSelectedNote()}
             </Paragraph>
             <Pressable
@@ -284,7 +284,10 @@ export default function LinkNote(props: {
               >
                 <Paragraph numberOfLines={1}>{selectedNote?.title}</Paragraph>
 
-                <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+                <Paragraph
+                  color={colors.secondary.paragraph}
+                  size={AppFontSize.xs}
+                >
                   {strings.tapToDeselect()}
                 </Paragraph>
               </View>
@@ -296,7 +299,7 @@ export default function LinkNote(props: {
                   marginBottom: 12
                 }}
                 color={colors.secondary.paragraph}
-                size={SIZE.xs}
+                size={AppFontSize.xs}
               >
                 {strings.linkNoteToSection()}
               </Paragraph>

apps/mobile/app/components/sheets/manage-tags/index.tsx

@@ -43,7 +43,7 @@ import {
 } from "../../../stores/item-selection-store";
 import { useRelationStore } from "../../../stores/use-relation-store";
 import { useTagStore } from "../../../stores/use-tag-store";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import Input from "../../ui/input";
 import { Pressable } from "../../ui/pressable";
 import Heading from "../../ui/typography/heading";
@@ -250,7 +250,7 @@ const ManageTagsSheet = (props: {
         button={{
           icon: "magnify",
           color: colors.primary.accent,
-          size: SIZE.lg,
+          size: AppFontSize.lg,
           onPress: () => {}
         }}
         testID="tag-input"
@@ -284,10 +284,14 @@ const ManageTagsSheet = (props: {
           onPress={onSubmit}
           type="selected"
         >
-          <Heading size={SIZE.sm} color={colors.selected.heading}>
+          <Heading size={AppFontSize.sm} color={colors.selected.heading}>
             {strings.add()} {'"' + "#" + query + '"'}
           </Heading>
-          <Icon name="plus" color={colors.selected.icon} size={SIZE.lg} />
+          <Icon
+            name="plus"
+            color={colors.selected.icon}
+            size={AppFontSize.lg}
+          />
         </Pressable>
       ) : null}
 
@@ -403,13 +407,13 @@ const TagItem = ({
         />
       )}
       {tag ? (
-        <Paragraph size={SIZE.sm}>{"#" + tag?.title}</Paragraph>
+        <Paragraph size={AppFontSize.sm}>{"#" + tag?.title}</Paragraph>
       ) : (
         <View
           style={{
             width: 200,
             height: 30,
-            borderRadius: 5
+            borderRadius: defaultBorderRadius
           }}
         />
       )}

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

@@ -35,7 +35,7 @@ import {
   findRootNotebookId,
   getParentNotebookId
 } from "../../../utils/notebooks";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
 import { presentDialog } from "../../dialog/functions";
@@ -322,7 +322,7 @@ const NotebookItem = ({
                 false
               );
             }}
-            size={SIZE.lg}
+            size={AppFontSize.lg}
           />
         </View>
       </Pressable>

apps/mobile/app/components/sheets/move-notes/movenote.tsx

@@ -30,7 +30,7 @@ import { presentSheet } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import { createItemSelectionStore } from "../../../stores/item-selection-store";
 import { updateNotebook } from "../../../utils/notebooks";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
 import { Button } from "../../ui/button";
@@ -131,7 +131,7 @@ export const MoveNotes = ({
         button={{
           icon: "magnify",
           color: colors.primary.accent,
-          size: SIZE.lg,
+          size: AppFontSize.lg,
           onPress: () => {}
         }}
         testID="search-input"
@@ -270,7 +270,7 @@ const SelectableNoteItem = React.memo(
                 <Paragraph
                   numberOfLines={1}
                   color={colors?.secondary.paragraph}
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                 >
                   {item.headline}
                 </Paragraph>

apps/mobile/app/components/sheets/new-feature/index.tsx

@@ -26,7 +26,7 @@ import { features } from "../../../features";
 import { eSendEvent, presentSheet } from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
 import { eCloseSheet } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
@@ -56,7 +56,7 @@ const NewFeature = ({
         maxHeight: "100%"
       }}
     >
-      <Heading color={colors.secondary.heading} size={SIZE.md}>
+      <Heading color={colors.secondary.heading} size={AppFontSize.md}>
         {strings.newVersionHighlights(version)}
       </Heading>
 
@@ -74,7 +74,7 @@ const NewFeature = ({
               marginBottom: 10
             }}
           >
-            <Heading size={SIZE.lg - 2}>{item.title}</Heading>
+            <Heading size={AppFontSize.lg - 2}>{item.title}</Heading>
             <Paragraph selectable>{item.body}</Paragraph>
           </View>
         ))}

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

@@ -43,7 +43,7 @@ import { useSelectionStore } from "../../../stores/use-selection-store";
 import { eOnNotebookUpdated } from "../../../utils/events";
 import { deleteItems } from "../../../utils/functions";
 import { findRootNotebookId } from "../../../utils/notebooks";
-import { SIZE, normalize } from "../../../utils/size";
+import { AppFontSize, normalize } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { IconButton } from "../../ui/icon-button";
 import { Pressable } from "../../ui/pressable";
@@ -264,7 +264,7 @@ export const NotebookSheet = () => {
               width: normalize(50)
             }}
           >
-            <Icon name="plus" color="white" size={SIZE.xxl} />
+            <Icon name="plus" color="white" size={AppFontSize.xxl} />
           </View>
         </Pressable>
       </View>
@@ -283,7 +283,7 @@ export const NotebookSheet = () => {
             alignItems: "center"
           }}
         >
-          <Paragraph size={SIZE.xs} color={colors.primary.icon}>
+          <Paragraph size={AppFontSize.xs} color={colors.primary.icon}>
             {strings.notebooks()}
           </Paragraph>
           <View
@@ -539,7 +539,7 @@ const NotebookItem = ({
         >
           {nestedNotebooks?.placeholders.length ? (
             <IconButton
-              size={SIZE.lg}
+              size={AppFontSize.lg}
               color={isSelected ? colors.selected.icon : colors.primary.icon}
               onPress={() => {
                 if (!item?.id) return;
@@ -566,7 +566,7 @@ const NotebookItem = ({
 
           {enabled ? (
             <IconButton
-              size={SIZE.lg}
+              size={AppFontSize.lg}
               color={isSelected ? colors.selected.icon : colors.primary.icon}
               top={0}
               left={0}
@@ -589,7 +589,7 @@ const NotebookItem = ({
             color={
               isFocused ? colors.selected.paragraph : colors.secondary.paragraph
             }
-            size={SIZE.sm}
+            size={AppFontSize.sm}
           >
             {item?.title}
           </Paragraph>
@@ -603,7 +603,7 @@ const NotebookItem = ({
           }}
         >
           {item?.id && totalNotes?.(item?.id) ? (
-            <Paragraph size={SIZE.sm} color={colors.secondary.paragraph}>
+            <Paragraph size={AppFontSize.sm} color={colors.secondary.paragraph}>
               {totalNotes(item?.id)}
             </Paragraph>
           ) : null}
@@ -622,7 +622,7 @@ const NotebookItem = ({
             bottom={0}
             top={0}
             color={colors.primary.icon}
-            size={SIZE.xl}
+            size={AppFontSize.xl}
           />
         </View>
       </Pressable>

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

@@ -22,7 +22,7 @@ import { View } from "react-native";
 import useSyncProgress from "../../../hooks/use-sync-progress";
 import { presentSheet } from "../../../services/event-manager";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import Seperator from "../../ui/seperator";
 import { ProgressBarComponent } from "../../ui/svg/lazy";
 import Heading from "../../ui/typography/heading";
@@ -52,7 +52,7 @@ export const Progress = () => {
         paddingBottom: 15
       }}
     >
-      <Heading size={SIZE.lg}>{strings.syncingHeading()}</Heading>
+      <Heading size={AppFontSize.lg}>{strings.syncingHeading()}</Heading>
       <Paragraph>{strings.syncingDesc()}</Paragraph>
       <Seperator />
       <View

apps/mobile/app/components/sheets/publish-note/index.tsx

@@ -27,7 +27,7 @@ import Navigation from "../../../services/navigation";
 import { useAttachmentStore } from "../../../stores/use-attachment-store";
 import { useThemeColors } from "@notesnook/theme";
 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 { IconButton } from "../../ui/icon-button";
@@ -158,7 +158,7 @@ const PublishNoteSheet = ({
                 marginTop: 10,
                 backgroundColor: colors.secondary.background,
                 padding: 12,
-                borderRadius: 5
+                borderRadius: defaultBorderRadius
               }}
             >
               <View
@@ -167,8 +167,10 @@ const PublishNoteSheet = ({
                   flexShrink: 1
                 }}
               >
-                <Heading size={SIZE.md}>{strings.publishedAt()}:</Heading>
+                <Heading size={AppFontSize.md}>
-                <Paragraph size={SIZE.sm} numberOfLines={1}>
+                  {strings.publishedAt()}:
+                </Heading>
+                <Paragraph size={AppFontSize.sm} numberOfLines={1}>
                   {publishUrl}
                 </Paragraph>
                 <Paragraph
@@ -179,7 +181,7 @@ const PublishNoteSheet = ({
                       console.error(e);
                     }
                   }}
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                   style={{
                     marginTop: 5,
                     color: colors.primary.paragraph
@@ -200,7 +202,7 @@ const PublishNoteSheet = ({
                   });
                 }}
                 color={colors.primary.accent}
-                size={SIZE.lg}
+                size={AppFontSize.lg}
                 name="content-copy"
               />
             </View>
@@ -218,7 +220,7 @@ const PublishNoteSheet = ({
               marginBottom: 10,
               backgroundColor: colors.secondary.background,
               paddingVertical: 12,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginTop: 10
             }}
           >
@@ -228,7 +230,7 @@ const PublishNoteSheet = ({
                 setIsLocked(!isLocked);
               }}
               color={isLocked ? colors.selected.icon : colors.primary.icon}
-              size={SIZE.xl}
+              size={AppFontSize.xl}
               name={
                 isLocked
                   ? "check-circle-outline"
@@ -242,7 +244,9 @@ const PublishNoteSheet = ({
                 flexShrink: 1
               }}
             >
-              <Heading size={SIZE.md}>{strings.monographPassHeading()}</Heading>
+              <Heading size={AppFontSize.md}>
+                {strings.monographPassHeading()}
+              </Heading>
               <Paragraph>{strings.monographPassDesc()}</Paragraph>
             </View>
           </TouchableOpacity>
@@ -257,7 +261,7 @@ const PublishNoteSheet = ({
               alignItems: "center",
               backgroundColor: colors.secondary.background,
               paddingVertical: 12,
-              borderRadius: 5
+              borderRadius: defaultBorderRadius
             }}
           >
             <IconButton
@@ -265,7 +269,7 @@ const PublishNoteSheet = ({
                 setSelfDestruct(!selfDestruct);
               }}
               color={selfDestruct ? colors.selected.icon : colors.primary.icon}
-              size={SIZE.xl}
+              size={AppFontSize.xl}
               name={
                 selfDestruct
                   ? "check-circle-outline"
@@ -279,7 +283,7 @@ const PublishNoteSheet = ({
                 flexShrink: 1
               }}
             >
-              <Heading size={SIZE.md}>
+              <Heading size={AppFontSize.md}>
                 {strings.monographSelfDestructHeading()}
               </Heading>
               <Paragraph>{strings.monographSelfDestructDesc()}</Paragraph>
@@ -318,7 +322,7 @@ const PublishNoteSheet = ({
                 <>
                   <Button
                     onPress={deletePublishedNote}
-                    fontSize={SIZE.md}
+                    fontSize={AppFontSize.md}
                     type="error"
                     title={strings.unpublish()}
                     style={{
@@ -330,7 +334,7 @@ const PublishNoteSheet = ({
               <Seperator half />
               <Button
                 onPress={publishNote}
-                fontSize={SIZE.md}
+                fontSize={AppFontSize.md}
                 style={{
                   width: isPublished ? "49%" : 250,
                   borderRadius: isPublished ? 5 : 100
@@ -345,7 +349,7 @@ const PublishNoteSheet = ({
 
       <Paragraph
         color={colors.secondary.paragraph}
-        size={SIZE.xs}
+        size={AppFontSize.xs}
         style={{
           textAlign: "center",
           marginTop: 10,

apps/mobile/app/components/sheets/rate-app/index.js

@@ -27,7 +27,7 @@ import { clearMessage } from "../../../services/message";
 import SettingsService from "../../../services/settings";
 import { STORE_LINK } from "../../../utils/constants";
 import { eCloseRateDialog, eOpenRateDialog } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
 import SheetWrapper from "../../ui/sheet";
@@ -87,12 +87,12 @@ const RateAppSheet = () => {
         }}
       >
         <Heading>{strings.rateAppHeading()}</Heading>
-        <Paragraph size={SIZE.md}>{strings.rateAppDesc()}</Paragraph>
+        <Paragraph size={AppFontSize.md}>{strings.rateAppDesc()}</Paragraph>
 
         <Seperator half />
         <Button
           onPress={rateApp}
-          fontSize={SIZE.md}
+          fontSize={AppFontSize.md}
           width="100%"
           type="accent"
           title={strings.rateApp()}
@@ -115,14 +115,14 @@ const RateAppSheet = () => {
               setVisible(false);
               clearMessage();
             }}
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
             type="error"
             width="48%"
             title={strings.never()}
           />
           <Button
             onPress={onClose}
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
             width="48%"
             type="secondary"
             title={strings.later()}

apps/mobile/app/components/sheets/recovery-key/index.jsx

@@ -36,7 +36,7 @@ import {
 import { clearMessage } from "../../../services/message";
 import SettingsService from "../../../services/settings";
 import { eOpenRecoveryKeyDialog } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import DialogHeader from "../../dialog/dialog-header";
 import { Button } from "../../ui/button";
@@ -235,14 +235,14 @@ class RecoveryKeySheet extends React.Component {
 
           <View
             style={{
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               padding: 12,
               marginTop: 10
             }}
           >
             <Paragraph
               color={colors.primary.paragraph}
-              size={SIZE.sm}
+              size={AppFontSize.sm}
               numberOfLines={2}
               selectable
               style={{
@@ -294,7 +294,7 @@ class RecoveryKeySheet extends React.Component {
             title={strings.copyToClipboard()}
             width="100%"
             type="secondaryAccented"
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
           />
           <Seperator />
           <Button
@@ -302,7 +302,7 @@ class RecoveryKeySheet extends React.Component {
             onPress={this.saveQRCODE}
             width="100%"
             type="secondaryAccented"
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
             icon="qrcode"
           />
           <Seperator />
@@ -312,7 +312,7 @@ class RecoveryKeySheet extends React.Component {
             width="100%"
             type="secondaryAccented"
             icon="text"
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
           />
           <Seperator />
 
@@ -322,13 +322,13 @@ class RecoveryKeySheet extends React.Component {
             width="100%"
             type="secondaryAccented"
             icon="cloud"
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
           />
           <Seperator />
 
           <Paragraph
             color={colors.secondary.paragraph}
-            size={SIZE.sm}
+            size={AppFontSize.sm}
             numberOfLines={2}
             style={{
               width: "100%",
@@ -343,7 +343,7 @@ class RecoveryKeySheet extends React.Component {
             title={strings.done()}
             width="100%"
             type="error"
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
             onPress={this.close}
           />
         </View>

apps/mobile/app/components/sheets/references/index.tsx

@@ -35,7 +35,7 @@ import { eSendEvent, presentSheet } from "../../../services/event-manager";
 import { useRelationStore } from "../../../stores/use-relation-store";
 import { eOnLoadNote } from "../../../utils/events";
 import { fluidTabsRef } from "../../../utils/global-refs";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import SheetProvider from "../../sheet-provider";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
@@ -106,7 +106,7 @@ const ListBlockItem = ({
 
         <View
           style={{
-            borderRadius: 5,
+            borderRadius: defaultBorderRadius,
             backgroundColor: colors.secondary.background,
             width: 25,
             height: 25,
@@ -114,7 +114,7 @@ const ListBlockItem = ({
             justifyContent: "center"
           }}
         >
-          <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+          <Paragraph color={colors.secondary.paragraph} size={AppFontSize.xs}>
             {item.type.toUpperCase()}
           </Paragraph>
         </View>
@@ -327,7 +327,7 @@ const ListNoteItem = ({
         }}
       >
         <IconButton
-          size={SIZE.xl}
+          size={AppFontSize.xl}
           onPress={() => {
             if (!item?.id) return;
             useExpandedStore.getState().setExpanded(item?.id);
@@ -354,7 +354,10 @@ const ListNoteItem = ({
           }}
         >
           {loading ? (
-            <ActivityIndicator color={colors.primary.accent} size={SIZE.lg} />
+            <ActivityIndicator
+              color={colors.primary.accent}
+              size={AppFontSize.lg}
+            />
           ) : (
             <>
               {listType === "linkedNotes" ? (

apps/mobile/app/components/sheets/relations-list/index.tsx

@@ -30,7 +30,7 @@ import {
   presentSheet
 } from "../../../services/event-manager";
 import { useRelationStore } from "../../../stores/use-relation-store";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import DialogHeader from "../../dialog/dialog-header";
 import List from "../../list";
 import SheetProvider from "../../sheet-provider";
@@ -119,7 +119,7 @@ export const RelationsList = ({
             onPress={() => {
               onAdd?.();
             }}
-            fontSize={SIZE.sm}
+            fontSize={AppFontSize.sm}
             //  width="100%"
             type="inverted"
             icon="plus"

apps/mobile/app/components/sheets/reminder-notify/index.tsx

@@ -29,7 +29,7 @@ import {
 } from "../../../services/event-manager";
 import Notifications from "../../../services/notifications";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import List from "../../list";
 import { Button } from "../../ui/button";
 import Heading from "../../ui/typography/heading";
@@ -135,7 +135,7 @@ export default function ReminderNotify({
           marginTop: 10
         }}
       >
-        <Paragraph size={SIZE.xs}>{strings.remindMeIn()}:</Paragraph>
+        <Paragraph size={AppFontSize.xs}>{strings.remindMeIn()}:</Paragraph>
         {QuickActions.map((item) => {
           return (
             <Button
@@ -143,7 +143,7 @@ export default function ReminderNotify({
               key={item.title}
               title={item.title}
               height={30}
-              fontSize={SIZE.xs}
+              fontSize={AppFontSize.xs}
               style={{ marginLeft: 10, borderRadius: 100 }}
               onPress={() => onSnooze(item.time)}
             />
@@ -168,7 +168,7 @@ export default function ReminderNotify({
           <Paragraph
             style={{
               color: colors.secondary.paragraph,
-              fontSize: SIZE.xs,
+              fontSize: AppFontSize.xs,
               marginBottom: 10
             }}
           >

apps/mobile/app/components/sheets/reminder/index.tsx

@@ -31,7 +31,7 @@ import {
   ToastManager,
   presentSheet
 } from "../../../services/event-manager";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 
@@ -228,7 +228,7 @@ export default function ReminderSheet({
         maxHeight: "100%"
       }}
     >
-      <Heading size={SIZE.lg}>
+      <Heading size={AppFontSize.lg}>
         {reminder ? strings.editReminder() : strings.newReminder()}
       </Heading>
 
@@ -324,7 +324,7 @@ export default function ReminderSheet({
             style={{
               backgroundColor: colors.secondary.background,
               padding: 12,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginBottom: 12
             }}
           >
@@ -382,7 +382,7 @@ export default function ReminderSheet({
                       type={
                         selectedDays.indexOf(index) > -1 ? "selected" : "plain"
                       }
-                      fontSize={SIZE.sm - 1}
+                      fontSize={AppFontSize.sm - 1}
                       style={{
                         width: 40,
                         height: 40,
@@ -410,7 +410,7 @@ export default function ReminderSheet({
                           ? "selected"
                           : "plain"
                       }
-                      fontSize={SIZE.sm - 1}
+                      fontSize={AppFontSize.sm - 1}
                       style={{
                         width: 40,
                         height: 40,
@@ -480,7 +480,7 @@ export default function ReminderSheet({
                 title={date ? date.toLocaleDateString() : strings.selectDate()}
                 type={date ? "secondaryAccented" : "secondary"}
                 icon="calendar"
-                fontSize={SIZE.md}
+                fontSize={AppFontSize.md}
                 onPress={() => {
                   showDatePicker();
                 }}
@@ -493,7 +493,7 @@ export default function ReminderSheet({
         reminderMode === ReminderModes.Permanent ? null : (
           <View
             style={{
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               flexDirection: "row",
               paddingVertical: 6,
               paddingHorizontal: 12,
@@ -504,7 +504,10 @@ export default function ReminderSheet({
             }}
           >
             <>
-              <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+              <Paragraph
+                size={AppFontSize.xs}
+                color={colors.secondary.paragraph}
+              >
                 {recurringMode === RecurringModes.Daily
                   ? strings.reminderRepeatStrings.day(
                       dayjs(date).format("hh:mm A")
@@ -598,7 +601,7 @@ export default function ReminderSheet({
         title={strings.save()}
         type="accent"
         height={45}
-        fontSize={SIZE.md}
+        fontSize={AppFontSize.md}
         style={{
           paddingHorizontal: 24,
           marginTop: 10,

apps/mobile/app/components/sheets/sort/index.tsx

@@ -31,16 +31,26 @@ import { db } from "../../../common/database";
 import { eSendEvent } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import { RouteName } from "../../../stores/use-navigation-store";
+import { useNotebookStore } from "../../../stores/use-notebook-store";
+import { useTagStore } from "../../../stores/use-tag-store";
 import { GROUP, SORT } from "../../../utils/constants";
 import { eGroupOptionsUpdated, refreshNotesPage } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { DefaultAppStyles } from "../../../utils/styles";
 import AppIcon from "../../ui/AppIcon";
 import { Button } from "../../ui/button";
 import { Pressable } from "../../ui/pressable";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
+const Sort = ({
+  type,
+  screen,
+  hideGroupOptions
+}: {
+  type: ItemType;
+  screen?: RouteName;
+  hideGroupOptions?: boolean;
+}) => {
   const { colors } = useThemeColors();
   const [groupOptions, setGroupOptions] = useState(
     db.settings.getGroupOptions(
@@ -54,7 +64,12 @@ const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
     await db.settings.setGroupOptions(groupType, _groupOptions);
     setGroupOptions(_groupOptions);
     setTimeout(() => {
-      Navigation.queueRoutesForUpdate(screen);
+      if (screen) Navigation.queueRoutesForUpdate(screen);
+      if (type === "notebook") {
+        useNotebookStore.getState().refresh();
+      } else if (type === "tag") {
+        useTagStore.getState().refresh();
+      }
       eSendEvent(eGroupOptionsUpdated, groupType);
       eSendEvent(refreshNotesPage);
     }, 1);
@@ -88,7 +103,7 @@ const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
         }}
       >
         <Heading
-          size={SIZE.md}
+          size={AppFontSize.md}
           style={{
             alignSelf: "center"
           }}
@@ -119,7 +134,7 @@ const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
           }
           height={30}
           iconPosition="right"
-          fontSize={SIZE.sm}
+          fontSize={AppFontSize.sm}
           type="plain"
           style={{
             paddingHorizontal: DefaultAppStyles.GAP_SMALL
@@ -135,95 +150,16 @@ const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
           borderBottomColor: colors.primary.border
         }}
       >
-        {groupOptions?.groupBy === "abc" ? (
+        {Object.keys(SORT).map((item) =>
-          <Button
+          (item === "dueDate" && screen !== "Reminders") ||
-            type="secondary"
+          (screen !== "Tags" &&
-            title={strings.title()}
+            screen !== "Reminders" &&
-            height={40}
+            item === "dateModified") ||
-            iconPosition="left"
+          ((screen === "Tags" || screen === "Reminders") &&
-            icon={"check"}
+            item === "dateEdited") ? null : (
-            buttonType={{ text: colors.primary.accent }}
-            fontSize={SIZE.sm}
-            iconSize={SIZE.md}
-          />
-        ) : (
-          Object.keys(SORT).map((item) =>
-            (item === "dueDate" && screen !== "Reminders") ||
-            (screen !== "Tags" &&
-              screen !== "Reminders" &&
-              item === "dateModified") ||
-            ((screen === "Tags" || screen === "Reminders") &&
-              item === "dateEdited") ? null : (
-              <Pressable
-                key={item}
-                type={groupOptions?.sortBy === item ? "selected" : "plain"}
-                noborder
-                style={{
-                  width: "100%",
-                  justifyContent: "space-between",
-                  height: 40,
-                  flexDirection: "row",
-                  borderRadius: 0,
-                  paddingHorizontal: DefaultAppStyles.GAP
-                }}
-                onPress={async () => {
-                  const _groupOptions: GroupOptions = {
-                    ...groupOptions,
-                    sortBy:
-                      type === "trash"
-                        ? "dateDeleted"
-                        : (item as SortOptions["sortBy"])
-                  };
-                  await updateGroupOptions(_groupOptions);
-                }}
-              >
-                <Paragraph>
-                  {strings.sortByStrings[
-                    item as keyof typeof strings.sortByStrings
-                  ]()}
-                </Paragraph>
-
-                {groupOptions.sortBy === item ? (
-                  <AppIcon
-                    size={SIZE.lg}
-                    name="check"
-                    color={colors.selected.accent}
-                  />
-                ) : null}
-              </Pressable>
-            )
-          )
-        )}
-      </View>
-
-      <>
-        <View
-          style={{
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "space-between",
-            paddingHorizontal: DefaultAppStyles.GAP,
-            paddingVertical: DefaultAppStyles.GAP_VERTICAL
-          }}
-        >
-          <Heading size={SIZE.md}>{strings.groupBy()}</Heading>
-        </View>
-
-        <View
-          style={{
-            borderRadius: 0,
-            flexDirection: "row",
-            flexWrap: "wrap"
-          }}
-        >
-          {Object.keys(GROUP).map((item) => (
             <Pressable
               key={item}
-              type={
+              type={groupOptions?.sortBy === item ? "selected" : "plain"}
-                groupOptions?.groupBy === GROUP[item as keyof typeof GROUP]
-                  ? "selected"
-                  : "plain"
-              }
               noborder
               style={{
                 width: "100%",
@@ -245,22 +181,87 @@ const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
               }}
             >
               <Paragraph>
-                {strings.groupByStrings[
+                {strings.sortByStrings[
-                  item as keyof typeof strings.groupByStrings
+                  item as keyof typeof strings.sortByStrings
                 ]()}
               </Paragraph>
 
-              {groupOptions.groupBy === item ? (
+              {groupOptions.sortBy === item ? (
                 <AppIcon
-                  size={SIZE.lg}
+                  size={AppFontSize.lg}
                   name="check"
                   color={colors.selected.accent}
                 />
               ) : null}
             </Pressable>
-          ))}
+          )
-        </View>
+        )}
-      </>
+      </View>
+
+      {!hideGroupOptions ? (
+        <>
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+              paddingHorizontal: DefaultAppStyles.GAP,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
+            }}
+          >
+            <Heading size={AppFontSize.md}>{strings.groupBy()}</Heading>
+          </View>
+
+          <View
+            style={{
+              borderRadius: 0,
+              flexDirection: "row",
+              flexWrap: "wrap"
+            }}
+          >
+            {Object.keys(GROUP).map((item) => (
+              <Pressable
+                key={item}
+                type={
+                  groupOptions?.groupBy === GROUP[item as keyof typeof GROUP]
+                    ? "selected"
+                    : "plain"
+                }
+                noborder
+                style={{
+                  width: "100%",
+                  justifyContent: "space-between",
+                  height: 40,
+                  flexDirection: "row",
+                  borderRadius: 0,
+                  paddingHorizontal: DefaultAppStyles.GAP
+                }}
+                onPress={async () => {
+                  const _groupOptions: GroupOptions = {
+                    ...groupOptions,
+                    groupBy: item as GroupOptions["groupBy"]
+                  };
+                  await updateGroupOptions(_groupOptions);
+                }}
+              >
+                <Paragraph>
+                  {strings.groupByStrings[
+                    item as keyof typeof strings.groupByStrings
+                  ]()}
+                </Paragraph>
+
+                {groupOptions.groupBy === item ? (
+                  <AppIcon
+                    size={AppFontSize.lg}
+                    name="check"
+                    color={colors.selected.accent}
+                  />
+                ) : null}
+              </Pressable>
+            ))}
+          </View>
+        </>
+      ) : null}
     </View>
   );
 };

apps/mobile/app/components/sheets/toc/index.tsx

@@ -21,7 +21,7 @@ import React from "react";
 import { View } from "react-native";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { presentSheet } from "../../../services/event-manager";
 import Heading from "../../ui/typography/heading";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
@@ -86,7 +86,7 @@ const TableOfContentsItem: React.FC<{
               ? colors.selected.paragraph
               : colors.primary.paragraph
           }
-          size={SIZE.md}
+          size={AppFontSize.md}
         >
           {item?.title || strings.newNote()}
         </Paragraph>
@@ -112,7 +112,7 @@ const TableOfContents = ({ toc, close }: TableOfContentsProps) => {
           alignItems: "center"
         }}
       >
-        <Heading size={SIZE.lg}>{strings.toc()}</Heading>
+        <Heading size={AppFontSize.lg}>{strings.toc()}</Heading>
       </View>
 
       <FlatList

apps/mobile/app/components/sheets/update/index.js

@@ -25,7 +25,7 @@ import Config from "react-native-config";
 import deviceInfoModule from "react-native-device-info";
 import { useThemeColors } from "@notesnook/theme";
 import { STORE_LINK } from "../../../utils/constants";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
 import { SvgView } from "../../ui/svg";
@@ -102,7 +102,7 @@ export const Update = ({ version: appVersion, fwdRef }) => {
             {!version ? (
               <>
                 <ProgressBarComponent
-                  size={SIZE.xxl}
+                  size={AppFontSize.xxl}
                   indeterminate={true}
                   color={colors.primary.accent}
                   borderWidth={0}
@@ -113,13 +113,13 @@ export const Update = ({ version: appVersion, fwdRef }) => {
                   style={{
                     marginTop: 5
                   }}
-                  size={SIZE.md}
+                  size={AppFontSize.md}
                 >
                   {strings.checkNewVersion()}
                 </Paragraph>
               </>
             ) : (
-              <Paragraph size={SIZE.md}>{strings.noUpdates()}</Paragraph>
+              <Paragraph size={AppFontSize.md}>{strings.noUpdates()}</Paragraph>
             )}
           </View>
         </>
@@ -161,7 +161,7 @@ export const Update = ({ version: appVersion, fwdRef }) => {
               width: "100%"
             }}
           >
-            <Heading size={SIZE.md}>{strings.releaseNotes()}:</Heading>
+            <Heading size={AppFontSize.md}>{strings.releaseNotes()}:</Heading>
 
             {version.body ? (
               <Paragraph

apps/mobile/app/components/sheets/user/index.tsx

@@ -27,14 +27,16 @@ import useSyncProgress from "../../../hooks/use-sync-progress";
 import { presentSheet } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import { SyncStatus, useUserStore } from "../../../stores/use-user-store";
-import { SIZE } from "../../../utils/size";
+import { getObfuscatedEmail } from "../../../utils/functions";
+import { AppFontSize } from "../../../utils/size";
 import { DefaultAppStyles } from "../../../utils/styles";
+import { AuthMode } from "../../auth/common";
 import { Card } from "../../list/card";
 import AppIcon from "../../ui/AppIcon";
-import { Button } from "../../ui/button";
 import { Pressable } from "../../ui/pressable";
 import { TimeSince } from "../../ui/time-since";
 import Paragraph from "../../ui/typography/paragraph";
+import Sync from "../../../services/sync";
 
 export const UserSheet = () => {
   const ref = useSheetRef();
@@ -58,7 +60,6 @@ export const UserSheet = () => {
       style={{
         width: "100%",
         justifyContent: "center",
-        paddingHorizontal: DefaultAppStyles.GAP,
         gap: DefaultAppStyles.GAP
       }}
     >
@@ -66,19 +67,23 @@ export const UserSheet = () => {
         <View
           style={{
             flexDirection: "row",
-            alignItems: "center"
+            alignItems: "center",
+            paddingHorizontal: DefaultAppStyles.GAP,
+            gap: DefaultAppStyles.GAP_SMALL
           }}
         >
-          <Image
+          {userProfile?.profilePicture ? (
-            source={{
+            <Image
-              uri: userProfile?.profilePicture
+              source={{
-            }}
+                uri: userProfile?.profilePicture
-            style={{
+              }}
-              width: 40,
+              style={{
-              height: 40,
+                width: 40,
-              borderRadius: 10
+                height: 40,
-            }}
+                borderRadius: 10
-          />
+              }}
+            />
+          ) : null}
 
           <View
             style={{
@@ -87,27 +92,17 @@ export const UserSheet = () => {
               justifyContent: "space-between"
             }}
           >
-            <View style={{ marginLeft: 10 }}>
+            <View>
-              <Paragraph size={SIZE.xs}>{userProfile?.fullName}</Paragraph>
+              <Paragraph size={AppFontSize.xs}>
+                {userProfile?.fullName || getObfuscatedEmail(user.email)}
+              </Paragraph>
               <Paragraph
                 style={{
                   flexWrap: "wrap"
                 }}
-                size={SIZE.xxs}
+                size={AppFontSize.xxs}
                 color={colors.secondary.heading}
               >
-                <AppIcon
-                  name="checkbox-blank-circle"
-                  size={10}
-                  allowFontScaling
-                  color={
-                    !user || lastSyncStatus === SyncStatus.Failed
-                      ? colors.error.icon
-                      : isOffline
-                      ? colors.static.orange
-                      : colors.success.icon
-                  }
-                />{" "}
                 {!user ? (
                   strings.notLoggedIn()
                 ) : lastSynced && lastSynced !== "Never" ? (
@@ -122,7 +117,7 @@ export const UserSheet = () => {
                     {!syncing ? (
                       <TimeSince
                         style={{
-                          fontSize: SIZE.xxs,
+                          fontSize: AppFontSize.xxs,
                           color: colors.secondary.paragraph
                         }}
                         updateFrequency={30 * 1000}
@@ -133,13 +128,25 @@ export const UserSheet = () => {
                   </>
                 ) : (
                   strings.never()
-                )}
+                )}{" "}
+                <AppIcon
+                  name="checkbox-blank-circle"
+                  size={10}
+                  allowFontScaling
+                  color={
+                    !user || lastSyncStatus === SyncStatus.Failed
+                      ? colors.error.icon
+                      : isOffline
+                      ? colors.static.orange
+                      : colors.success.icon
+                  }
+                />
               </Paragraph>
             </View>
             {syncing ? (
               <ActivityIndicator
                 color={colors.primary.accent}
-                size={SIZE.xxl}
+                size={AppFontSize.xxl}
               />
             ) : null}
           </View>
@@ -150,11 +157,24 @@ export const UserSheet = () => {
             width: "100%"
           }}
         >
-          <Card />
+          <Card
+            customMessage={{
+              visible: true,
+              message: strings.notLoggedIn(),
+              actionText: strings.loginMessageActionText(),
+              icon: "account-outline",
+              onPress: () => {
+                ref.current?.hide();
+                Navigation.navigate("Auth", {
+                  mode: AuthMode.login
+                });
+              }
+            }}
+          />
         </View>
       )}
 
-      {user ? (
+      {/* {user ? (
         <View
           style={{
             paddingVertical: DefaultAppStyles.GAP_SMALL,
@@ -176,8 +196,10 @@ export const UserSheet = () => {
                 justifyContent: "space-between"
               }}
             >
-              <Paragraph size={SIZE.xxs}>{strings.storage()}</Paragraph>
+              <Paragraph size={AppFontSize.xxs}>{strings.storage()}</Paragraph>
-              <Paragraph size={SIZE.xxs}>50/100MB {strings.used()}</Paragraph>
+              <Paragraph size={AppFontSize.xxs}>
+                50/100MB {strings.used()}
+              </Paragraph>
             </View>
             <View
               style={{
@@ -209,10 +231,13 @@ export const UserSheet = () => {
             }}
           >
             <View>
-              <Paragraph size={SIZE.sm}>{strings.freePlan()}</Paragraph>
+              <Paragraph size={AppFontSize.sm}>{strings.freePlan()}</Paragraph>
-              <Paragraph color={colors.secondary.paragraph} size={SIZE.xxxs}>
+              <Paragraph
+                color={colors.secondary.paragraph}
+                size={AppFontSize.xxxs}
+              >
                 {strings.viewAllLimits()}
-                <AppIcon name="information" size={SIZE.xxxs} />
+                <AppIcon name="information" size={AppFontSize.xxxs} />
               </Paragraph>
             </View>
 
@@ -220,7 +245,7 @@ export const UserSheet = () => {
               title={strings.upgradeNow()}
               onPress={() => {}}
               type="accent"
-              fontSize={SIZE.xs}
+              fontSize={AppFontSize.xs}
               style={{
                 paddingHorizontal: DefaultAppStyles.GAP_SMALL,
                 height: "auto",
@@ -229,7 +254,8 @@ export const UserSheet = () => {
             />
           </View>
         </View>
-      ) : null}
+      ) : null} */}
+
       <View
         style={{
           borderBottomWidth: 1,
@@ -245,9 +271,11 @@ export const UserSheet = () => {
       >
         {[
           {
-            icon: "account-outline",
+            icon: "reload",
-            title: strings.editProfile(),
+            title: strings.syncNow(),
-            onPress: () => {},
+            onPress: () => {
+              Sync.run();
+            },
             hidden: !user
           },
           {
@@ -255,7 +283,6 @@ export const UserSheet = () => {
             title: strings.settings(),
             onPress: () => {
               ref.current?.hide();
-              Navigation.closeDrawer();
               Navigation.navigate("Settings");
             }
           },
@@ -277,7 +304,7 @@ export const UserSheet = () => {
                 flexDirection: "row",
                 justifyContent: "flex-start",
                 gap: DefaultAppStyles.GAP_SMALL,
-                paddingHorizontal: DefaultAppStyles.GAP_SMALL
+                paddingHorizontal: DefaultAppStyles.GAP
               }}
               onPress={() => {
                 item.onPress();
@@ -286,7 +313,7 @@ export const UserSheet = () => {
               <AppIcon
                 color={colors.secondary.icon}
                 name={item.icon}
-                size={SIZE.xl}
+                size={AppFontSize.xl}
               />
               <Paragraph>{item.title}</Paragraph>
             </Pressable>

apps/mobile/app/components/side-menu/index.tsx

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { Image, View } from "react-native";
+import { View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import {
   NavigationState,
@@ -31,13 +31,17 @@ import {
 } from "react-native-tab-view";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
+import { useGroupOptions } from "../../hooks/use-group-options";
+import { presentSheet, ToastManager } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
-import { useUserStore } from "../../stores/use-user-store";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { deleteItems } from "../../utils/functions";
-import { rootNavigatorRef } from "../../utils/global-refs";
+import { AppFontSize } from "../../utils/size";
-import { SIZE } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
+import { AddNotebookSheet } from "../sheets/add-notebook";
 import { MoveNotebookSheet } from "../sheets/move-notebook";
+import Sort from "../sheets/sort";
+import { IconButton } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
 import { SideMenuHome } from "./side-menu-home";
@@ -47,6 +51,9 @@ import {
   useSideMenuNotebookSelectionStore,
   useSideMenuTagsSelectionStore
 } from "./stores";
+import { presentDialog } from "../dialog/functions";
+import { strings } from "@notesnook/intl";
+import { useTagStore } from "../../stores/use-tag-store";
 const renderScene = SceneMap({
   home: SideMenuHome,
   notebooks: SideMenuNotebooks,
@@ -70,10 +77,6 @@ export const SideMenu = React.memo(
       {
         key: "tags",
         title: "Tags"
-      },
-      {
-        key: "settings",
-        title: "Settings"
       }
     ]);
 
@@ -92,6 +95,7 @@ export const SideMenu = React.memo(
           onIndexChange={setIndex}
           swipeEnabled={false}
           animationEnabled={false}
+          lazy={true}
         />
       </SafeAreaView>
     );
@@ -99,78 +103,16 @@ export const SideMenu = React.memo(
   () => true
 );
 
-const SettingsIcon = (props: {
-  route: Route;
-  isFocused: boolean;
-  jumpTo: (routeName: string) => void;
-}) => {
-  const { colors } = useThemeColors();
-  const userProfile = useUserStore((state) => state.profile);
-  const user = useUserStore((state) => state.user);
-
-  return (
-    <Pressable
-      key={props.route.key}
-      onPress={() => {
-        rootNavigatorRef.navigate("Settings");
-        // if (!user) {
-        //   rootNavigatorRef.navigate("Settings");
-        //   return;
-        // }
-        // UserSheet.present();
-      }}
-      style={{
-        borderRadius: 10,
-        paddingVertical: 2,
-        width: "25%"
-      }}
-      type={props.isFocused ? "selected" : "plain"}
-    >
-      {userProfile?.profilePicture ? (
-        <Image
-          source={{
-            uri: userProfile?.profilePicture
-          }}
-          style={{
-            width: SIZE.lg,
-            height: SIZE.lg,
-            borderRadius: 100
-          }}
-        />
-      ) : (
-        <Icon
-          name="cog-outline"
-          color={props.isFocused ? colors.primary.accent : colors.primary.icon}
-          size={SIZE.lg}
-        />
-      )}
-
-      <Paragraph
-        color={
-          props.isFocused
-            ? colors.primary.paragraph
-            : colors.secondary.paragraph
-        }
-        style={{
-          opacity: props.isFocused ? 1 : 0.6
-        }}
-        size={SIZE.xxxs - 1}
-      >
-        {userProfile?.fullName
-          ? userProfile.fullName.split(" ")[0]
-          : props.route.title}
-      </Paragraph>
-    </Pressable>
-  );
-};
-
 const TabBar = (
   props: SceneRendererProps & {
     navigationState: NavigationState<Route>;
     options: Record<string, TabDescriptor<Route>> | undefined;
   }
 ) => {
-  const { colors } = useThemeColors();
+  const { colors, isDark } = useThemeColors();
+  const groupOptions = useGroupOptions(
+    props.navigationState.index === 1 ? "notebook" : "tags"
+  );
   const notebookSelectionEnabled = useSideMenuNotebookSelectionStore(
     (state) => state.enabled
   );
@@ -183,8 +125,6 @@ const TabBar = (
     switch (key) {
       case "home":
         return "home-outline";
-      case "settings":
-        return "cog-outline";
       case "notebooks":
         return "book-outline";
       case "tags":
@@ -202,7 +142,9 @@ const TabBar = (
         justifyContent: "space-between",
         backgroundColor: colors.primary.background,
         paddingHorizontal: DefaultAppStyles.GAP,
-        paddingVertical: DefaultAppStyles.GAP_SMALL
+        paddingVertical: DefaultAppStyles.GAP_SMALL,
+        borderTopWidth: 1,
+        borderTopColor: colors.primary.border
       }}
     >
       {isSelectionEnabled ? (
@@ -287,11 +229,11 @@ const TabBar = (
                 <Icon
                   name={item.icon}
                   color={colors.primary.icon}
-                  size={SIZE.lg}
+                  size={AppFontSize.lg}
                 />
                 <Paragraph
                   color={colors.secondary.paragraph}
-                  size={SIZE.xxxs - 1}
+                  size={AppFontSize.xxxs - 1}
                 >
                   {item.title}
                 </Paragraph>
@@ -301,65 +243,159 @@ const TabBar = (
         </>
       ) : (
         <>
-          {props.navigationState.routes.map((route, index) => {
+          <View
-            const isFocused = props.navigationState.index === index;
+            style={{
+              flexDirection: "row",
+              gap: DefaultAppStyles.GAP_SMALL
+            }}
+          >
+            {props.navigationState.routes.map((route, index) => {
+              const isFocused = props.navigationState.index === index;
 
-            return route.key === "settings" ? (
+              return (
-              <SettingsIcon
+                <Pressable
-                isFocused={isFocused}
+                  key={route.key}
-                jumpTo={props.jumpTo}
+                  onPress={() => {
-                route={route}
+                    props.jumpTo(route.key);
-              />
+                    switch (route.key) {
-            ) : (
+                      case "notebooks":
-              <Pressable
+                        Navigation.routeNeedsUpdate(
-                key={route.key}
+                          "Notebooks",
-                onPress={() => {
+                          Navigation.routeUpdateFunctions.Notebooks
-                  props.jumpTo(route.key);
+                        );
-                  switch (route.key) {
+                        break;
-                    case "notebooks":
+                      case "tags":
-                      Navigation.routeNeedsUpdate(
+                        Navigation.routeNeedsUpdate(
-                        "Notebooks",
+                          "Tags",
-                        Navigation.routeUpdateFunctions.Notebooks
+                          Navigation.routeUpdateFunctions.Tags
-                      );
+                        );
-                      break;
+                        break;
-                    case "tags":
+                      default:
-                      Navigation.routeNeedsUpdate(
+                        break;
-                        "Tags",
+                    }
-                        Navigation.routeUpdateFunctions.Tags
+                  }}
-                      );
+                  style={{
-                      break;
+                    borderRadius: 10,
-                    default:
+                    opacity: isFocused ? 1 : 0.6,
-                      break;
+                    paddingVertical: 2,
+                    width: 40,
+                    height: 40
+                  }}
+                  type={isFocused ? "selected" : "plain"}
+                >
+                  <Icon
+                    name={getIcon(route.key)}
+                    color={
+                      isFocused ? colors.primary.accent : colors.primary.icon
+                    }
+                    size={AppFontSize.lg}
+                  />
+                </Pressable>
+              );
+            })}
+          </View>
+
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              gap: DefaultAppStyles.GAP_SMALL
+            }}
+          >
+            {props.navigationState.index > 0 ? (
+              <>
+                <IconButton
+                  name="plus"
+                  size={AppFontSize.lg - 2}
+                  onPress={() => {
+                    if (props.navigationState.index === 1) {
+                      AddNotebookSheet.present();
+                    } else {
+                      presentDialog({
+                        title: strings.addTag(),
+                        paragraph: strings.addTagDesc(),
+                        input: true,
+                        positiveText: "Add",
+                        positivePress: async (tag) => {
+                          if (tag) {
+                            await db.tags.add({
+                              title: tag
+                            });
+                            useTagStore.getState().refresh();
+                            return true;
+                          }
+                          ToastManager.show({
+                            context: "local",
+                            type: "error",
+                            message: strings.allFieldsRequired()
+                          });
+                          return false;
+                        }
+                      });
+                    }
+                  }}
+                  style={{
+                    width: 35,
+                    height: 35
+                  }}
+                />
+
+                <IconButton
+                  name={
+                    groupOptions.sortDirection === "asc"
+                      ? "sort-ascending"
+                      : "sort-descending"
                   }
+                  color={colors.secondary.icon}
+                  onPress={() => {
+                    presentSheet({
+                      component: (
+                        <Sort
+                          type={
+                            props.navigationState.index === 1
+                              ? "notebook"
+                              : "tag"
+                          }
+                          hideGroupOptions
+                        />
+                      )
+                    });
+                  }}
+                  style={{
+                    width: 35,
+                    height: 35
+                  }}
+                  size={AppFontSize.lg - 2}
+                />
+
+                {/* <IconButton
+                  name="magnify"
+                  color={colors.secondary.icon}
+                  onPress={() => {}}
+                  style={{
+                    width: 35,
+                    height: 35
+                  }}
+                  size={SIZE.lg - 2}
+                /> */}
+              </>
+            ) : null}
+
+            {props.navigationState.index === 0 ? (
+              <IconButton
+                onPress={() => {
+                  useThemeStore.getState().setColorScheme();
                 }}
                 style={{
-                  borderRadius: 10,
+                  width: 28,
-                  opacity: isFocused ? 1 : 0.6,
+                  height: 28
-                  paddingVertical: 2,
-                  width: "25%"
                 }}
-                type={isFocused ? "selected" : "plain"}
+                color={colors.primary.icon}
-              >
+                name={isDark ? "weather-night" : "weather-sunny"}
-                <Icon
+                size={AppFontSize.lg - 2}
-                  name={getIcon(route.key)}
+              />
-                  color={
+            ) : null}
-                    isFocused ? colors.primary.accent : colors.primary.icon
+          </View>
-                  }
-                  size={SIZE.lg}
-                />
-                <Paragraph
-                  color={
-                    isFocused
-                      ? colors.primary.paragraph
-                      : colors.secondary.paragraph
-                  }
-                  size={SIZE.xxxs - 1}
-                >
-                  {route.title}
-                </Paragraph>
-              </Pressable>
-            );
-          })}
         </>
       )}
     </View>

apps/mobile/app/components/side-menu/menu-item.tsx

@@ -31,7 +31,7 @@ import useNavigationStore, {
 import { useNoteStore } from "../../stores/use-notes-store";
 import { useTrashStore } from "../../stores/use-trash-store";
 import { SideMenuItem } from "../../utils/menu-items";
-import { SIZE } from "../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
@@ -138,13 +138,16 @@ function _MenuItem({
       style={{
         width: "100%",
         alignSelf: "center",
-        borderRadius: 5,
+        borderRadius: defaultBorderRadius,
         flexDirection: "row",
         paddingHorizontal: DefaultAppStyles.GAP_SMALL,
         justifyContent: "space-between",
         alignItems: "center",
         paddingVertical: DefaultAppStyles.GAP_VERTICAL
       }}
+      onLayout={(e) => {
+        console.log(e.nativeEvent.layout);
+      }}
     >
       <View
         style={{
@@ -154,7 +157,7 @@ function _MenuItem({
         }}
       >
         {renderIcon ? (
-          renderIcon(item, SIZE.md)
+          renderIcon(item, AppFontSize.md)
         ) : (
           <Icon
             style={{
@@ -170,7 +173,7 @@ function _MenuItem({
                 ? colors.selected.paragraph
                 : colors.secondary.icon
             }
-            size={SIZE.md}
+            size={AppFontSize.md}
           />
         )}
 
@@ -178,7 +181,7 @@ function _MenuItem({
           color={
             isFocused ? colors.primary.paragraph : colors.secondary.paragraph
           }
-          size={SIZE.sm}
+          size={AppFontSize.sm}
         >
           {item.title}
         </Paragraph>
@@ -186,7 +189,7 @@ function _MenuItem({
 
       {menuItemCount > 0 ? (
         <Paragraph
-          size={SIZE.xxs}
+          size={AppFontSize.xxs}
           color={
             isFocused ? colors.primary.paragraph : colors.secondary.paragraph
           }

apps/mobile/app/components/side-menu/side-menu-header.tsx

@@ -18,14 +18,66 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { View } from "react-native";
+import { Image, View } from "react-native";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { NOTESNOOK_LOGO_SVG } from "../../assets/images/assets";
-import { SIZE } from "../../utils/size";
+import { useUserStore } from "../../stores/use-user-store";
+import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
+import { UserSheet } from "../sheets/user";
+import AppIcon from "../ui/AppIcon";
 import { IconButton, IconButtonProps } from "../ui/icon-button";
+import { Pressable } from "../ui/pressable";
 import { SvgView } from "../ui/svg";
 import Heading from "../ui/typography/heading";
 
+const SettingsIcon = () => {
+  const { colors } = useThemeColors();
+  const userProfile = useUserStore((state) => state.profile);
+
+  return (
+    <Pressable
+      onPress={() => {
+        UserSheet.present();
+      }}
+      style={{
+        width: 40,
+        height: 40
+      }}
+    >
+      {userProfile?.profilePicture ? (
+        <Image
+          source={{
+            uri: userProfile?.profilePicture
+          }}
+          style={{
+            width: 25,
+            height: 25,
+            borderRadius: 100
+          }}
+        />
+      ) : (
+        <AppIcon
+          name="cog-outline"
+          color={colors.primary.icon}
+          size={AppFontSize.lg}
+        />
+      )}
+
+      {/* <Paragraph
+        color={colors.secondary.paragraph}
+        style={{
+          opacity: 1
+        }}
+        size={SIZE.xxxs - 1}
+      >
+        {userProfile?.fullName
+          ? userProfile.fullName.split(" ")[0]
+          : strings.settings()}
+      </Paragraph> */}
+    </Pressable>
+  );
+};
+
 export const SideMenuHeader = (props: { rightButtons?: IconButtonProps[] }) => {
   const { colors, isDark } = useThemeColors();
   return (
@@ -34,7 +86,10 @@ export const SideMenuHeader = (props: { rightButtons?: IconButtonProps[] }) => {
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
-        marginBottom: DefaultAppStyles.GAP
+        borderBottomWidth: 1,
+        borderBottomColor: colors.primary.border,
+        paddingBottom: DefaultAppStyles.GAP,
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <View
@@ -52,26 +107,10 @@ export const SideMenuHeader = (props: { rightButtons?: IconButtonProps[] }) => {
             borderRadius: 10
           }}
         >
-          <SvgView
+          <SvgView width={28} height={28} src={NOTESNOOK_LOGO_SVG} />
-            width={28}
-            height={28}
-            src={`<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_24_33)">
-<path d="M1024 0H0V1024H1024V0Z" fill="black"/>
-<path d="M724.985 682.919C707.73 733.33 673.15 775.984 627.397 803.291C581.645 830.598 527.687 840.787 475.128 832.044C422.568 823.301 374.814 796.194 340.365 755.546C305.916 714.898 287.006 663.347 287 610.064V499.814L366.121 532.867V610.019C366.114 630.798 370.555 651.337 379.145 670.256C387.735 689.176 400.276 706.037 415.925 719.707C418.895 722.294 421.978 724.814 425.161 727.166C448.518 744.554 476.563 754.518 505.655 755.763C506.645 755.763 507.601 755.842 508.58 755.864C509.559 755.887 510.83 755.864 511.955 755.864C513.08 755.864 514.205 755.864 515.33 755.864C516.455 755.864 517.265 755.864 518.255 755.763C547.336 754.515 575.371 744.56 598.726 727.188C601.899 724.837 604.981 722.328 607.963 719.741C628.519 701.761 643.619 678.375 651.545 652.241L724.985 682.919Z" fill="white"/>
-<path d="M737 414V610.065C737 612.596 737 615.139 736.842 617.67L657.879 584.651V414C657.866 376.316 643.272 340.099 617.154 312.934C591.035 285.77 555.419 269.766 517.765 268.274C480.11 266.782 443.339 279.918 415.154 304.931C386.968 329.944 369.554 364.893 366.56 402.457C366.279 406.26 366.121 410.119 366.121 414V462.712L287 429.637V189H512C571.674 189 628.903 212.705 671.099 254.901C713.295 297.097 737 354.326 737 414Z" fill="white"/>
-</g>
-<defs>
-<clipPath id="clip0_24_33">
-<rect width="1024" height="1024" rx="200" fill="white"/>
-</clipPath>
-</defs>
-</svg>
-`}
-          />
         </View>
 
-        <Heading size={SIZE.lg}>Notesnook</Heading>
+        <Heading size={AppFontSize.lg}>Notesnook</Heading>
       </View>
 
       <View
@@ -90,22 +129,11 @@ export const SideMenuHeader = (props: { rightButtons?: IconButtonProps[] }) => {
               height: 28
             }}
             color={colors.primary.icon}
-            size={SIZE.lg}
+            size={AppFontSize.lg}
           />
         ))}
 
-        <IconButton
+        <SettingsIcon />
-          onPress={() => {
-            useThemeStore.getState().setColorScheme();
-          }}
-          style={{
-            width: 28,
-            height: 28
-          }}
-          color={colors.primary.icon}
-          name={isDark ? "weather-night" : "weather-sunny"}
-          size={SIZE.lg}
-        />
       </View>
     </View>
   );

apps/mobile/app/components/side-menu/side-menu-home.tsx

@@ -22,7 +22,6 @@ import React from "react";
 import { View } from "react-native";
 import { DraxProvider, DraxScrollView } from "react-native-drax";
 import { db } from "../../common/database";
-import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { useMenuStore } from "../../stores/use-menu-store";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { MenuItemsList } from "../../utils/menu-items";
@@ -51,15 +50,19 @@ export function SideMenuHome() {
         width: "100%",
         paddingTop: DefaultAppStyles.GAP_SMALL,
         backgroundColor: colors.primary.background,
-        gap: DefaultAppStyles.GAP,
+        gap: DefaultAppStyles.GAP
-        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <SideMenuHeader />
 
       {!isAppLoading && introCompleted ? (
         <DraxProvider>
-          <DraxScrollView nestedScrollEnabled={false}>
+          <DraxScrollView
+            nestedScrollEnabled={false}
+            style={{
+              paddingHorizontal: DefaultAppStyles.GAP
+            }}
+          >
             <ReorderableList
               onListOrderChanged={(data) => {
                 db.settings.setSideBarOrder("routes", data);

apps/mobile/app/components/side-menu/side-menu-list-empty.tsx

@@ -0,0 +1,61 @@
+/*
+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 React from "react";
+import { View } from "react-native";
+import { SideMenuHeader } from "./side-menu-header";
+import Paragraph from "../ui/typography/paragraph";
+import { AppFontSize } from "../../utils/size";
+import { useThemeColors } from "@notesnook/theme";
+import { DefaultAppStyles } from "../../utils/styles";
+
+type SideMenuListEmptyProps = {
+  placeholder: string;
+};
+
+export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
+  const { colors } = useThemeColors();
+  return (
+    <View
+      style={{
+        width: "100%",
+        height: "100%"
+      }}
+    >
+      <View
+        style={{
+          backgroundColor: colors.primary.background,
+          paddingTop: DefaultAppStyles.GAP_SMALL
+        }}
+      >
+        <SideMenuHeader />
+      </View>
+      <View
+        style={{
+          alignItems: "center",
+          justifyContent: "center",
+          flexGrow: 1
+        }}
+      >
+        <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
+          {props.placeholder}
+        </Paragraph>
+      </View>
+    </View>
+  );
+};

apps/mobile/app/components/side-menu/side-menu-notebooks.tsx

@@ -18,32 +18,33 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Notebook } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect } from "react";
-import { FlatList, ListRenderItemInfo, View } from "react-native";
+import { FlatList, TextInput, View } from "react-native";
 import { UseBoundStore } from "zustand";
 import { db } from "../../common/database";
 import { useTotalNotes } from "../../hooks/use-db-item";
-import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import NotebookScreen from "../../screens/notebook";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
+import Navigation from "../../services/navigation";
 import { TreeItem } from "../../stores/create-notebook-tree-stores";
 import { SelectionStore } from "../../stores/item-selection-store";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useNotebooks } from "../../stores/use-notebook-store";
 import { eOnNotebookUpdated } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize, defaultBorderRadius } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Properties } from "../properties";
-import { AddNotebookSheet } from "../sheets/add-notebook";
 import AppIcon from "../ui/AppIcon";
 import { IconButton } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
 import { SideMenuHeader } from "./side-menu-header";
+import { SideMenuListEmpty } from "./side-menu-list-empty";
 import {
   useSideMenuNotebookExpandedStore,
   useSideMenuNotebookSelectionStore,
@@ -229,7 +230,7 @@ const NotebookItem = ({
           width: "100%",
           alignItems: "center",
           flexDirection: "row",
-          borderRadius: 5,
+          borderRadius: defaultBorderRadius,
           paddingRight: DefaultAppStyles.GAP_SMALL
         }}
       >
@@ -240,10 +241,12 @@ const NotebookItem = ({
           }}
         >
           <IconButton
-            size={SIZE.md}
+            size={AppFontSize.md}
             color={selected ? colors.selected.icon : colors.primary.icon}
             onPress={() => {
-              onToggleExpanded?.();
+              if (item.hasChildren) {
+                onToggleExpanded?.();
+              }
             }}
             top={0}
             left={0}
@@ -252,16 +255,22 @@ const NotebookItem = ({
             style={{
               width: 32,
               height: 32,
-              borderRadius: 5
+              borderRadius: defaultBorderRadius
             }}
-            name={expanded ? "chevron-down" : "chevron-right"}
+            name={
+              !item.hasChildren
+                ? "book-outline"
+                : expanded
+                ? "chevron-down"
+                : "chevron-right"
+            }
           />
 
           <Paragraph
             color={
               isFocused ? colors.selected.paragraph : colors.secondary.paragraph
             }
-            size={SIZE.xs}
+            size={AppFontSize.sm}
           >
             {notebook?.title}
           </Paragraph>
@@ -290,7 +299,10 @@ const NotebookItem = ({
         ) : (
           <>
             {totalNotes(notebook?.id) ? (
-              <Paragraph size={SIZE.xxs} color={colors.secondary.paragraph}>
+              <Paragraph
+                size={AppFontSize.xxs}
+                color={colors.secondary.paragraph}
+              >
                 {totalNotes?.(notebook?.id)}
               </Paragraph>
             ) : null}
@@ -304,17 +316,36 @@ const NotebookItem = ({
 export const SideMenuNotebooks = () => {
   const tree = useSideMenuNotebookTreeStore((state) => state.tree);
   const [notebooks, loading] = useNotebooks();
-  const insets = useGlobalSafeAreaInsets();
+  const { colors } = useThemeColors();
-
+  const [filteredNotebooks, setFilteredNotebooks] = React.useState(notebooks);
+  const searchTimer = React.useRef<NodeJS.Timeout>();
+  const lastQuery = React.useRef<string>();
   const loadRootNotebooks = React.useCallback(async () => {
-    if (!notebooks) return;
+    if (!filteredNotebooks) return;
     const _notebooks: Notebook[] = [];
-    for (let i = 0; i < notebooks.placeholders.length; i++) {
+    for (let i = 0; i < filteredNotebooks.placeholders.length; i++) {
-      _notebooks[i] = (await notebooks?.item(i))?.item as Notebook;
+      _notebooks[i] = (await filteredNotebooks?.item(i))?.item as Notebook;
     }
     useSideMenuNotebookTreeStore.getState().addNotebooks("root", _notebooks, 0);
+  }, [filteredNotebooks]);
+
+  const updateNotebooks = React.useCallback(() => {
+    if (lastQuery.current) {
+      db.lookup
+        .notebooks(lastQuery.current)
+        .sorted()
+        .then((filtered) => {
+          setFilteredNotebooks(filtered);
+        });
+    } else {
+      setFilteredNotebooks(notebooks);
+    }
   }, [notebooks]);
 
+  useEffect(() => {
+    updateNotebooks();
+  }, [updateNotebooks]);
+
   useEffect(() => {
     (async () => {
       if (!loading) {
@@ -352,34 +383,71 @@ export const SideMenuNotebooks = () => {
     });
   }, []);
 
-  const renderItem = React.useCallback((info: ListRenderItemInfo<TreeItem>) => {
+  const renderItem = React.useCallback(
-    return <NotebookItemWrapper index={info.index} item={info.item} />;
+    (info: { item: TreeItem; index: number }) => {
-  }, []);
+      return <NotebookItemWrapper index={info.index} item={info.item} />;
+    },
+    []
+  );
 
   return (
-    <FlatList
+    <View
       style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
+        height: "100%"
-        paddingTop: DefaultAppStyles.GAP_SMALL
       }}
-      data={tree}
+    >
-      keyExtractor={(item) => item.notebook.id}
+      {!notebooks || notebooks.placeholders.length === 0 ? (
-      windowSize={3}
+        <SideMenuListEmpty
-      ListHeaderComponent={
+          placeholder={strings.emptyPlaceholders("notebook")}
-        <SideMenuHeader
-          rightButtons={[
-            {
-              name: "plus",
-              onPress: () => {
-                AddNotebookSheet.present();
-              }
-            }
-          ]}
         />
-      }
+      ) : (
-      stickyHeaderIndices={[0]}
+        <>
-      renderItem={renderItem}
+          <FlatList
-    />
+            data={tree}
+            bounces={false}
+            bouncesZoom={false}
+            overScrollMode="never"
+            ListHeaderComponent={
+              <View
+                style={{
+                  backgroundColor: colors.primary.background,
+                  paddingTop: DefaultAppStyles.GAP_SMALL
+                }}
+              >
+                <SideMenuHeader />
+              </View>
+            }
+            renderItem={renderItem}
+          />
+          <View
+            style={{
+              width: "100%",
+              paddingHorizontal: DefaultAppStyles.GAP,
+              backgroundColor: colors.primary.background,
+              borderTopColor: colors.primary.border,
+              borderTopWidth: 1
+            }}
+          >
+            <TextInput
+              placeholder="Filter notebooks..."
+              style={{
+                fontFamily: "Inter-Regular",
+                fontSize: AppFontSize.xs
+              }}
+              cursorColor={colors.primary.accent}
+              onChangeText={async (value) => {
+                searchTimer.current && clearTimeout(searchTimer.current);
+                searchTimer.current = setTimeout(async () => {
+                  lastQuery.current = value;
+                  updateNotebooks();
+                }, 500);
+              }}
+              placeholderTextColor={colors.primary.placeholder}
+            />
+          </View>
+        </>
+      )}
+    </View>
   );
 };
 
@@ -390,6 +458,7 @@ const NotebookItemWrapper = ({
   item: TreeItem;
   index: number;
 }) => {
+  const { colors } = useThemeColors();
   const expanded = useSideMenuNotebookExpandedStore(
     (state) => state.expanded[item.notebook.id]
   );
@@ -425,26 +494,34 @@ const NotebookItemWrapper = ({
   }, [item.notebook.id]);
 
   return (
-    <NotebookItem
+    <View
-      item={item}
+      style={{
-      index={index}
+        paddingHorizontal: DefaultAppStyles.GAP,
-      expanded={expanded}
+        marginTop: index === 0 ? DefaultAppStyles.GAP : 0
-      onToggleExpanded={() => {
-        useSideMenuNotebookExpandedStore
-          .getState()
-          .setExpanded(item.notebook.id);
       }}
-      selected={selected}
+    >
-      selectionEnabled={selectionEnabled}
+      <NotebookItem
-      selectionStore={useSideMenuNotebookSelectionStore}
+        item={item}
-      onItemUpdate={onItemUpdate}
+        index={index}
-      focused={focused}
+        expanded={expanded}
-      onPress={() => {
+        onToggleExpanded={() => {
-        NotebookScreen.navigate(item.notebook, false);
+          useSideMenuNotebookExpandedStore
-      }}
+            .getState()
-      onLongPress={() => {
+            .setExpanded(item.notebook.id);
-        Properties.present(item.notebook, false);
+        }}
-      }}
+        selected={selected}
-    />
+        selectionEnabled={selectionEnabled}
+        selectionStore={useSideMenuNotebookSelectionStore}
+        onItemUpdate={onItemUpdate}
+        focused={focused}
+        onPress={() => {
+          NotebookScreen.navigate(item.notebook, false);
+          Navigation.closeDrawer();
+        }}
+        onLongPress={() => {
+          Properties.present(item.notebook, false);
+        }}
+      />
+    </View>
   );
 };

apps/mobile/app/components/side-menu/side-menu-tags.tsx

@@ -20,22 +20,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Tag, VirtualizedGrouping } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect } from "react";
-import { View } from "react-native";
+import { TextInput, View } from "react-native";
-import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
+import { FlashList } from "@shopify/flash-list";
-import { db } from "../../common/database";
+import { DatabaseLogger, db } from "../../common/database";
 import { useDBItem, useTotalNotes } from "../../hooks/use-db-item";
-import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { TaggedNotes } from "../../screens/notes/tagged";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useTags } from "../../stores/use-tag-store";
-import { SIZE } from "../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Properties } from "../properties";
 import AppIcon from "../ui/AppIcon";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
 import { SideMenuHeader } from "./side-menu-header";
+import { SideMenuListEmpty } from "./side-menu-list-empty";
 import { useSideMenuTagsSelectionStore } from "./stores";
+import { strings } from "@notesnook/intl";
+import Navigation from "../../services/navigation";
 
 const TagItem = (props: {
   tags: VirtualizedGrouping<Tag>;
@@ -60,100 +62,120 @@ const TagItem = (props: {
     }
   }, [item]);
 
-  return item ? (
+  return (
-    <Pressable
+    <View
-      type={isSelected || isFocused ? "selected" : "transparent"}
-      onLongPress={() => {
-        Properties.present(item);
-      }}
-      testID={`tag-item-${props.id}`}
-      onPress={() => {
-        if (enabled) {
-          useSideMenuTagsSelectionStore
-            .getState()
-            .markAs(item, isSelected ? "deselected" : "selected");
-          if (
-            useSideMenuTagsSelectionStore.getState().getSelectedItemIds()
-              .length === 0
-          ) {
-            useSideMenuTagsSelectionStore.setState({
-              enabled: false
-            });
-          }
-        } else {
-          TaggedNotes.navigate(item, false);
-        }
-      }}
       style={{
-        justifyContent: "space-between",
+        paddingHorizontal: DefaultAppStyles.GAP,
-        width: "100%",
+        marginTop: (props.id as number) === 0 ? DefaultAppStyles.GAP : 0
-        alignItems: "center",
-        flexDirection: "row",
-        borderRadius: 5,
-        paddingRight: DefaultAppStyles.GAP_SMALL
       }}
     >
-      <View
+      {item ? (
-        style={{
+        <Pressable
-          flexDirection: "row",
+          type={isSelected || isFocused ? "selected" : "transparent"}
-          alignItems: "center"
+          onLongPress={() => {
-        }}
+            Properties.present(item);
-      >
+          }}
-        <View
+          testID={`tag-item-${props.id}`}
+          onPress={() => {
+            if (enabled) {
+              useSideMenuTagsSelectionStore
+                .getState()
+                .markAs(item, isSelected ? "deselected" : "selected");
+              if (
+                useSideMenuTagsSelectionStore.getState().getSelectedItemIds()
+                  .length === 0
+              ) {
+                useSideMenuTagsSelectionStore.setState({
+                  enabled: false
+                });
+              }
+            } else {
+              TaggedNotes.navigate(item, false);
+              Navigation.closeDrawer();
+            }
+          }}
           style={{
-            width: 32,
+            justifyContent: "space-between",
-            height: 32,
+            width: "100%",
-            justifyContent: "center",
+            alignItems: "center",
-            alignItems: "center"
+            flexDirection: "row",
+            borderRadius: defaultBorderRadius,
+            paddingRight: DefaultAppStyles.GAP_SMALL
           }}
         >
-          <AppIcon
+          <View
-            size={SIZE.md}
+            style={{
-            color={isFocused ? colors.selected.icon : colors.secondary.icon}
+              flexDirection: "row",
-            name="pound"
+              alignItems: "center"
-          />
+            }}
-        </View>
+          >
+            <View
+              style={{
+                width: 32,
+                height: 32,
+                justifyContent: "center",
+                alignItems: "center"
+              }}
+            >
+              <AppIcon
+                size={AppFontSize.md}
+                color={isFocused ? colors.selected.icon : colors.secondary.icon}
+                name="pound"
+              />
+            </View>
 
-        <Paragraph
+            <Paragraph
-          color={
+              color={
-            isFocused ? colors.selected.paragraph : colors.secondary.paragraph
+                isFocused
-          }
+                  ? colors.selected.paragraph
-          size={SIZE.xs}
+                  : colors.secondary.paragraph
-        >
+              }
-          {item?.title}
+              size={AppFontSize.sm}
-        </Paragraph>
+            >
-      </View>
+              {item?.title}
-
-      {enabled ? (
-        <View
-          style={{
-            width: 22,
-            height: 22,
-            justifyContent: "center",
-            alignItems: "center"
-          }}
-        >
-          <AppIcon
-            name={isSelected ? "checkbox-outline" : "checkbox-blank-outline"}
-            color={isSelected ? colors.selected.icon : colors.primary.icon}
-          />
-        </View>
-      ) : (
-        <>
-          {item?.id && totalNotes.totalNotes?.(item?.id) ? (
-            <Paragraph size={SIZE.xxs} color={colors.secondary.paragraph}>
-              {totalNotes.totalNotes(item?.id)}
             </Paragraph>
-          ) : null}
+          </View>
-        </>
+
-      )}
+          {enabled ? (
-    </Pressable>
+            <View
-  ) : null;
+              style={{
+                width: 22,
+                height: 22,
+                justifyContent: "center",
+                alignItems: "center"
+              }}
+            >
+              <AppIcon
+                name={
+                  isSelected ? "checkbox-outline" : "checkbox-blank-outline"
+                }
+                color={isSelected ? colors.selected.icon : colors.primary.icon}
+              />
+            </View>
+          ) : (
+            <>
+              {item?.id && totalNotes.totalNotes?.(item?.id) ? (
+                <Paragraph
+                  size={AppFontSize.xxs}
+                  color={colors.secondary.paragraph}
+                >
+                  {totalNotes.totalNotes(item?.id)}
+                </Paragraph>
+              ) : null}
+            </>
+          )}
+        </Pressable>
+      ) : null}
+    </View>
+  );
 };
 
 export const SideMenuTags = () => {
   const [tags] = useTags();
-  const insets = useGlobalSafeAreaInsets();
+  const { colors } = useThemeColors();
+  const [filteredTags, setFilteredTags] = React.useState(tags);
+  const searchTimer = React.useRef<NodeJS.Timeout>();
+  const lastQuery = React.useRef<string>();
 
   useEffect(() => {
     useSideMenuTagsSelectionStore.setState({
@@ -180,28 +202,91 @@ export const SideMenuTags = () => {
     });
   }, []);
 
+  const updateTags = React.useCallback(() => {
+    if (lastQuery.current) {
+      console.log("Looking up...", lastQuery.current);
+      db.lookup
+        .tags(lastQuery.current.trim())
+        .sorted()
+        .then(async (filtered) => {
+          setFilteredTags(filtered);
+        });
+    } else {
+      setFilteredTags(tags);
+    }
+  }, [tags]);
+
+  useEffect(() => {
+    updateTags();
+  }, [updateTags]);
+
   const renderItem = React.useCallback(
     (info: { index: number }) => {
-      return <TagItem id={info.index} tags={tags!} />;
+      return <TagItem id={info.index} tags={filteredTags!} />;
     },
-    [tags]
+    [filteredTags]
   );
-
   return (
     <View
       style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
         paddingTop: DefaultAppStyles.GAP_SMALL,
         width: "100%",
         height: "100%"
       }}
     >
-      <SideMenuHeader />
+      {!tags || tags?.placeholders.length === 0 ? (
-      <FlashList
+        <SideMenuListEmpty placeholder={strings.emptyPlaceholders("tag")} />
-        data={tags?.placeholders}
+      ) : (
-        estimatedItemSize={32}
+        <>
-        renderItem={renderItem}
+          <FlashList
-      />
+            data={filteredTags?.placeholders}
+            bounces={false}
+            estimatedItemSize={35}
+            bouncesZoom={false}
+            overScrollMode="never"
+            ListHeaderComponent={
+              <View
+                style={{
+                  backgroundColor: colors.primary.background
+                }}
+              >
+                <SideMenuHeader />
+              </View>
+            }
+            renderItem={renderItem}
+          />
+          <View
+            style={{
+              width: "100%",
+              paddingHorizontal: DefaultAppStyles.GAP,
+              backgroundColor: colors.primary.background,
+              borderTopColor: colors.primary.border,
+              borderTopWidth: 1
+            }}
+          >
+            <TextInput
+              placeholder="Filter tags..."
+              style={{
+                fontFamily: "Inter-Regular",
+                fontSize: AppFontSize.xs
+              }}
+              cursorColor={colors.primary.accent}
+              onChangeText={async (value) => {
+                searchTimer.current && clearTimeout(searchTimer.current);
+                searchTimer.current = setTimeout(async () => {
+                  try {
+                    lastQuery.current = value;
+                    updateTags();
+                  } catch (e) {
+                    DatabaseLogger.error(e);
+                  }
+                }, 500);
+              }}
+              placeholderTextColor={colors.primary.placeholder}
+            />
+          </View>
+        </>
+      )}
     </View>
   );
 };

apps/mobile/app/components/side-menu/user-status.js

@@ -25,14 +25,13 @@ import { ActivityIndicator, Image, Platform, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import useSyncProgress from "../../hooks/use-sync-progress";
-import { eSendEvent } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import Sync from "../../services/sync";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { SyncStatus, useUserStore } from "../../stores/use-user-store";
-import { eOpenLoginDialog } from "../../utils/events";
 import { fluidTabsRef } from "../../utils/global-refs";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
+import { AuthMode } from "../auth/common";
 import { IconButton } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
 import { TimeSince } from "../ui/time-since";
@@ -97,7 +96,7 @@ export const UserStatus = () => {
           ) : (
             <Icon
               name="cog-outline"
-              size={SIZE.lg - 2}
+              size={AppFontSize.lg - 2}
               color={colors.secondary.icon}
               style={{
                 paddingLeft: 8
@@ -113,7 +112,7 @@ export const UserStatus = () => {
           >
             <Paragraph
               numberOfLines={1}
-              size={SIZE.sm}
+              size={AppFontSize.sm}
               color={colors.primary.heading}
             >
               {!user || !userProfile?.fullName
@@ -125,7 +124,7 @@ export const UserStatus = () => {
               style={{
                 flexWrap: "wrap"
               }}
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               color={colors.secondary.heading}
             >
               {!user ? (
@@ -142,7 +141,7 @@ export const UserStatus = () => {
                   {!syncing ? (
                     <TimeSince
                       style={{
-                        fontSize: SIZE.xs,
+                        fontSize: AppFontSize.xs,
                         color: colors.secondary.paragraph
                       }}
                       time={lastSynced}
@@ -184,7 +183,7 @@ export const UserStatus = () => {
               }}
               name="theme-light-dark"
               color={isDark ? colors.primary.accent : colors.primary.icon}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
               style={{
                 borderRadius: 100,
                 width: 40,
@@ -207,7 +206,9 @@ export const UserStatus = () => {
                   Sync.run();
                 } else {
                   fluidTabsRef.current?.closeDrawer();
-                  eSendEvent(eOpenLoginDialog);
+                  Navigation.navigate("Auth", {
+                    mode: AuthMode.login
+                  });
                 }
               }}
             >
@@ -215,13 +216,13 @@ export const UserStatus = () => {
                 syncing ? (
                   <ActivityIndicator
                     color={colors.primary.accent}
-                    size={SIZE.xl}
+                    size={AppFontSize.xl}
                   />
                 ) : lastSyncStatus === SyncStatus.Failed ? (
                   <Icon
                     color={colors.error.icon}
                     name="sync-alert"
-                    size={SIZE.lg}
+                    size={AppFontSize.lg}
                     allowFontScaling
                   />
                 ) : (
@@ -229,14 +230,14 @@ export const UserStatus = () => {
                     allowFontScaling
                     color={colors.primary.icon}
                     name="sync"
-                    size={SIZE.lg}
+                    size={AppFontSize.lg}
                   />
                 )
               ) : (
                 <Icon
                   allowFontScaling
                   color={colors.primary.accent}
-                  size={SIZE.lg}
+                  size={AppFontSize.lg}
                   name="login"
                 />
               )}

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

@@ -24,7 +24,7 @@ import { MMKV } from "../../common/database/mmkv";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { TTip } from "../../services/tip-manager";
 import { eCloseSheet } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import Seperator from "../ui/seperator";
 import Paragraph from "../ui/typography/paragraph";
@@ -70,8 +70,8 @@ export const Tip = ({
         <Button
           title={strings.tip()}
           icon="information"
-          fontSize={SIZE.xs}
+          fontSize={AppFontSize.xs}
-          iconSize={SIZE.xs}
+          iconSize={AppFontSize.xs}
           style={{
             width: undefined,
             height: 22,
@@ -91,8 +91,8 @@ export const Tip = ({
             title={strings.neverShowAgain()}
             type="secondary"
             icon="close"
-            fontSize={SIZE.xs}
+            fontSize={AppFontSize.xs}
-            iconSize={SIZE.xs}
+            iconSize={AppFontSize.xs}
             onPress={() => {
               MMKV.setItem("neverShowSheetTips", "true");
               eSendEvent(eCloseSheet);
@@ -114,7 +114,7 @@ export const Tip = ({
       <Paragraph
         style={textStyle}
         color={colors.primary.paragraph}
-        size={SIZE.md}
+        size={AppFontSize.md}
       >
         {tip.text()}
       </Paragraph>

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

@@ -37,7 +37,7 @@ import {
 } from "../../services/event-manager";
 import { getElevationStyle } from "../../utils/elevation";
 import { eHideToast, eShowToast } 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 Paragraph from "../ui/typography/paragraph";
@@ -162,7 +162,7 @@ export const Toast = ({ context = "global" }) => {
                 ? "information"
                 : "close"
             }
-            size={isFullToastMessage ? SIZE.xxxl : SIZE.xl}
+            size={isFullToastMessage ? AppFontSize.xxxl : AppFontSize.xl}
             color={
               toastOptions?.icon
                 ? toastOptions?.icon
@@ -185,7 +185,7 @@ export const Toast = ({ context = "global" }) => {
             {isFullToastMessage ? (
               <Heading
                 color={!isDark ? colors.static.black : colors.static.white}
-                size={SIZE.sm}
+                size={AppFontSize.sm}
               >
                 {toastOptions.heading}
               </Heading>
@@ -194,7 +194,7 @@ export const Toast = ({ context = "global" }) => {
             {toastOptions.message || toastOptions.heading ? (
               <Paragraph
                 color={!isDark ? colors.static.black : colors.static.white}
-                size={SIZE.xs}
+                size={AppFontSize.xs}
               >
                 {toastOptions.message || toastOptions.heading}
               </Paragraph>
@@ -205,7 +205,7 @@ export const Toast = ({ context = "global" }) => {
         {toastOptions.func ? (
           <Button
             testID={notesnook.toast.button}
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
             type={toastOptions.type === "error" ? "errorShade" : "transparent"}
             onPress={toastOptions.func}
             title={toastOptions.actionText}

apps/mobile/app/components/ui/AppIcon/index.tsx

@@ -20,7 +20,7 @@ import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { ColorValue, TextProps } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 
 export interface IconProps extends TextProps {
   /**
@@ -48,6 +48,10 @@ export interface IconProps extends TextProps {
 export default function AppIcon(props: IconProps) {
   const { colors } = useThemeColors();
   return (
-    <Icon size={SIZE.md} color={colors.primary.icon} {...(props as any)} />
+    <Icon
+      size={AppFontSize.md}
+      color={colors.primary.icon}
+      {...(props as any)}
+    />
   );
 }

apps/mobile/app/components/ui/button/index.tsx

@@ -30,7 +30,7 @@ import {
 } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useUserStore } from "../../../stores/use-user-store";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import NativeTooltip from "../../../utils/tooltip";
 import { ProTag } from "../../premium/pro-tag";
 import { Pressable, PressableProps, useButton } from "../pressable";
@@ -66,9 +66,9 @@ export const Button = ({
   loading = false,
   title = null,
   icon,
-  fontSize = SIZE.sm,
+  fontSize = AppFontSize.sm,
   type = "transparent",
-  iconSize = SIZE.md,
+  iconSize = AppFontSize.md,
   style = {},
   accentColor,
   accentText = "#ffffff",
@@ -127,7 +127,7 @@ export const Button = ({
             ? width * growFactor
             : (width as DimensionValue) || undefined,
         paddingHorizontal: 12,
-        borderRadius: 5,
+        borderRadius: defaultBorderRadius,
         alignSelf: "center",
         justifyContent: "center",
         alignItems: "center",

apps/mobile/app/components/ui/icon-button/index.tsx

@@ -22,7 +22,7 @@ import React from "react";
 import { ColorValue, GestureResponderEvent, TextStyle } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { RGB_Linear_Shade, hexToRGBA } from "../../../utils/colors";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import NativeTooltip from "../../../utils/tooltip";
 import { Pressable, PressableProps } from "../pressable";
 export interface IconButtonProps extends PressableProps {
@@ -44,7 +44,7 @@ export const IconButton = ({
   name,
   color,
   style,
-  size = SIZE.xxl,
+  size = AppFontSize.xxl,
   iconStyle = {},
   left = 10,
   right = 10,