mobile: refactor and fix bugs

apps/mobile/app/app.tsx

@@ -39,8 +39,9 @@ import { themeTrpcClient } from "./screens/settings/theme-selector";
 import Notifications from "./services/notifications";
 import SettingsService from "./services/settings";
 import { TipManager } from "./services/tip-manager";
-import { useThemeStore } from "./stores/use-theme-store";
+import { changeSystemBarColors, useThemeStore } from "./stores/use-theme-store";
 import { useUserStore } from "./stores/use-user-store";
+import RNBootSplash from "react-native-bootsplash";
 
 I18nManager.allowRTL(false);
 I18nManager.forceRTL(false);
@@ -50,6 +51,9 @@ if (appLockEnabled || appLockMode !== "none") {
   useUserStore.getState().lockApp(true);
 }
 
+RNBootSplash.hide({ fade: true });
+changeSystemBarColors();
+
 const App = (props: { configureMode: "note-preview" }) => {
   useAppEvents();
   //@ts-ignore

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

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

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

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

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

@@ -29,6 +29,7 @@ import { PricingPlans } from "../premium/pricing-plans";
 import SheetProvider from "../sheet-provider";
 import { Button } from "../ui/button";
 import { allowedOnPlatform, getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Cta = ({ actions, style = {}, color, inline }) => {
   const { colors } = useThemeColors();
@@ -61,7 +62,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style),
         flexDirection: inline ? "row" : "column"
       }}
@@ -130,7 +131,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 onPress={() => onPress(item)}
                 width={250}
                 style={{
-                  marginBottom: 5,
+                  marginBottom: DefaultAppStyles.GAP_VERTICAL,
                   borderRadius: 100
                 }}
               />
@@ -148,7 +149,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 height={30}
                 style={{
                   minWidth: "50%",
-                  marginTop: 5
+                  marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
                 }}
                 textStyle={{
                   textDecorationLine: "underline"

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

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

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

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

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

@@ -21,14 +21,15 @@ import React from "react";
 import { AppFontSize } from "../../utils/size";
 import Heading from "../ui/typography/heading";
 import { getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const SubHeading = ({ text, style = {} }) => {
   return (
     <Heading
       size={AppFontSize.md + 2}
       style={{
-        marginHorizontal: 12,
-        marginTop: 12,
+        marginHorizontal: DefaultAppStyles.GAP,
+        marginTop: DefaultAppStyles.GAP_VERTICAL,
         ...getStyle(style)
       }}
     >

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

@@ -24,6 +24,7 @@ import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import { getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Title = ({ text, style = {}, inline }) => {
   const announcements = useMessageStore((state) => state.announcements);
@@ -36,13 +37,13 @@ export const Title = ({ text, style = {}, inline }) => {
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
-        marginBottom: inline ? 5 : 0
+        marginBottom: inline ? DefaultAppStyles.GAP_VERTICAL_SMALL : 0
       }}
     >
       <Heading
         style={{
-          marginHorizontal: 12,
-          marginTop: 12,
+          marginHorizontal: DefaultAppStyles.GAP,
+          marginTop: DefaultAppStyles.GAP_VERTICAL,
           ...getStyle(style),
           textAlign: inline ? "left" : style?.textAlign,
           flexShrink: 1
@@ -80,9 +81,9 @@ export const Title = ({ text, style = {}, inline }) => {
   ) : (
     <Heading
       style={{
-        marginHorizontal: 12,
+        marginHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style),
-        marginTop: style?.marginTop || 12
+        marginTop: style?.marginTop || DefaultAppStyles.GAP_VERTICAL
       }}
     >
       {text}

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

@@ -58,6 +58,7 @@ import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const Actions = ({
   attachment,
@@ -226,12 +227,13 @@ const Actions = ({
         style={{
           borderBottomWidth: 1,
           borderBottomColor: colors.primary.border,
-          marginBottom: notes && notes.length > 0 ? 0 : 12
+          marginBottom:
+            notes && notes.length > 0 ? 0 : DefaultAppStyles.GAP_VERTICAL
         }}
       >
         <Heading
           style={{
-            paddingHorizontal: 12
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
           size={AppFontSize.lg}
         >
@@ -241,9 +243,9 @@ const Actions = ({
         <View
           style={{
             flexDirection: "row",
-            marginBottom: 10,
-            paddingHorizontal: 12,
-            marginTop: 6,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
+            paddingHorizontal: DefaultAppStyles.GAP,
+            marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
             gap: 10
           }}
         >
@@ -283,14 +285,14 @@ const Actions = ({
           style={{
             borderBottomWidth: 1,
             borderBottomColor: colors.primary.border,
-            marginBottom: 12,
-            paddingVertical: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           <>
             <Heading
               style={{
-                paddingHorizontal: 12
+                paddingHorizontal: DefaultAppStyles.GAP
               }}
               size={AppFontSize.sm}
             >
@@ -307,10 +309,10 @@ const Actions = ({
                   openNote(item, (item as any).type === "trash");
                 }}
                 style={{
-                  paddingVertical: 12,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL,
                   alignItems: "flex-start",
 
-                  paddingHorizontal: 12
+                  paddingHorizontal: DefaultAppStyles.GAP
                 }}
                 key={item.id}
               >
@@ -347,7 +349,7 @@ const Actions = ({
 
       <View
         style={{
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         {failed ? (

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

@@ -32,6 +32,7 @@ import Paragraph from "../ui/typography/paragraph";
 import Actions from "./actions";
 import { strings } from "@notesnook/intl";
 import { Pressable } from "../ui/pressable";
+import { DefaultAppStyles } from "../../utils/styles";
 
 function getFileExtension(filename: string) {
   const ext = /^.+\.([^.]+)$/.exec(filename);
@@ -76,8 +77,8 @@ export const AttachmentItem = ({
         flexDirection: "row",
         marginVertical: 5,
         justifyContent: "space-between",
-        padding: 12,
-        paddingVertical: 6,
+        padding: DefaultAppStyles.GAP,
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL,
         minHeight: 45
       }}
     >

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

@@ -50,6 +50,7 @@ import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { AttachmentItem } from "./attachment-item";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const DEFAULT_SORTING: SortOptions = {
   sortBy: "dateEdited",
@@ -357,7 +358,7 @@ export const AttachmentDialog = ({
             flexDirection: "row",
             justifyContent: "space-between",
             alignItems: "center",
-            paddingHorizontal: 12
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           <Heading>{strings.dataTypesPluralCamelCase.attachment()}</Heading>
@@ -370,8 +371,6 @@ export const AttachmentDialog = ({
             <IconButton
               name="check-all"
               style={{
-                height: 40,
-                width: 40,
                 marginRight: 10
               }}
               color={colors.primary.paragraph}
@@ -381,10 +380,6 @@ export const AttachmentDialog = ({
 
             <IconButton
               name="download"
-              style={{
-                height: 40,
-                width: 40
-              }}
               color={colors.primary.paragraph}
               onPress={() => {
                 if (!attachments) return;
@@ -409,7 +404,7 @@ export const AttachmentDialog = ({
         style={{
           width: "100%",
           alignSelf: "center",
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           height: "100%"
         }}
       >
@@ -429,7 +424,7 @@ export const AttachmentDialog = ({
               alignItems: "center",
               width: "100%",
               borderRadius: 10,
-              padding: 10,
+              padding: DefaultAppStyles.GAP_SMALL,
               borderWidth: 1,
               borderColor: colors.primary.border,
               gap: 12,
@@ -495,7 +490,7 @@ export const AttachmentDialog = ({
               backgroundColor: colors.primary.background,
               flexWrap: "wrap",
               flexDirection: "row",
-              paddingVertical: 12
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
             contentContainerStyle={{
               alignItems: "center"
@@ -515,7 +510,7 @@ export const AttachmentDialog = ({
                   fontSize={AppFontSize.sm}
                   style={{
                     borderRadius: 100,
-                    paddingHorizontal: 12,
+                    paddingHorizontal: DefaultAppStyles.GAP,
                     height: 40,
                     minWidth: 80
                   }}

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

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

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

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

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

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

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

@@ -30,6 +30,7 @@ import { AuthMode, initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const Auth = ({ navigation, route }) => {
   const [currentAuthMode, setCurrentAuthMode] = useState(
@@ -56,7 +57,7 @@ const Auth = ({ navigation, route }) => {
           style={{
             flexDirection: "row",
             alignItems: "center",
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             width: "100%",
             height: 50,
             justifyContent:
@@ -98,7 +99,7 @@ const Auth = ({ navigation, route }) => {
                 marginTop: 2
               }}
               style={{
-                paddingHorizontal: 6
+                paddingHorizontal: DefaultAppStyles.GAP_SMALL
               }}
             />
           )}

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

@@ -38,6 +38,7 @@ import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
 import { useLogin } from "./use-login";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -102,10 +103,10 @@ export const Login = ({ changeMode }) => {
         <View
           style={{
             justifyContent: "flex-end",
-            paddingHorizontal: 20,
+            paddingHorizontal: DefaultAppStyles.GAP,
             backgroundColor: colors.secondary.background,
             borderBottomWidth: 0.8,
-            marginBottom: 12,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
             borderBottomColor: colors.primary.border,
             alignSelf: isTablet ? "center" : undefined,
             borderWidth: isTablet ? 1 : null,
@@ -143,7 +144,7 @@ export const Login = ({ changeMode }) => {
           <Heading
             style={{
               marginBottom: 25,
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
             extraBold
             size={AppFontSize.xxl}
@@ -163,7 +164,7 @@ export const Login = ({ changeMode }) => {
               : "99.9%",
             backgroundColor: colors.primary.background,
             alignSelf: "center",
-            paddingHorizontal: 20
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           <Input
@@ -247,7 +248,6 @@ export const Login = ({ changeMode }) => {
                 width: 250
               }}
               height={50}
-              fontSize={AppFontSize.md}
               type="accent"
               title={!loading ? strings.continue() : null}
             />
@@ -258,7 +258,7 @@ export const Login = ({ changeMode }) => {
                 style={{
                   alignSelf: "center",
                   height: 30,
-                  marginTop: 10
+                  marginTop: DefaultAppStyles.GAP_VERTICAL
                 }}
                 onPress={() => {
                   if (loading) return;
@@ -282,17 +282,17 @@ export const Login = ({ changeMode }) => {
                 activeOpacity={0.8}
                 style={{
                   alignSelf: "center",
-                  marginTop: 12,
-                  paddingVertical: 12
+                  marginTop: DefaultAppStyles.GAP_VERTICAL,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL
                 }}
               >
                 <Paragraph
-                  size={AppFontSize.xs + 1}
+                  size={AppFontSize.xs}
                   color={colors.secondary.paragraph}
                 >
                   {strings.dontHaveAccount()}{" "}
                   <Paragraph
-                    size={AppFontSize.xs + 1}
+                    size={AppFontSize.xs}
                     style={{ color: colors.primary.accent }}
                   >
                     {strings.signUp()}

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

@@ -49,6 +49,7 @@ import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
 import { strings } from "@notesnook/intl";
 import { getObfuscatedEmail } from "../../utils/functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const SessionExpired = () => {
   const { colors } = useThemeColors();
@@ -157,7 +158,7 @@ export const SessionExpired = () => {
         <View
           style={{
             width: focused ? "100%" : "99.9%",
-            padding: 12,
+            padding: DefaultAppStyles.GAP,
             justifyContent: "center",
             flex: 1,
             backgroundColor: colors.primary.background
@@ -213,7 +214,7 @@ export const SessionExpired = () => {
 
           <Button
             style={{
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               width: 250,
               borderRadius: 100
             }}
@@ -225,7 +226,7 @@ export const SessionExpired = () => {
 
           <Button
             style={{
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               width: "100%"
             }}
             onPress={() => {

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

@@ -36,6 +36,7 @@ import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Signup = ({ changeMode, trial }) => {
   const { colors } = useThemeColors();
@@ -110,7 +111,7 @@ export const Signup = ({ changeMode, trial }) => {
         <View
           style={{
             justifyContent: "flex-end",
-            paddingHorizontal: 20,
+            paddingHorizontal: DefaultAppStyles.GAP,
             backgroundColor: colors.secondary.background,
             marginBottom: 20,
             borderBottomWidth: 0.8,
@@ -152,7 +153,7 @@ export const Signup = ({ changeMode, trial }) => {
             extraBold
             style={{
               marginBottom: 25,
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
             size={AppFontSize.xxl}
           >
@@ -163,7 +164,7 @@ export const Signup = ({ changeMode, trial }) => {
         <View
           style={{
             width: DDS.isTab ? "50%" : "100%",
-            paddingHorizontal: 20,
+            paddingHorizontal: DefaultAppStyles.GAP,
             backgroundColor: colors.primary.background,
             alignSelf: "center"
           }}
@@ -232,12 +233,12 @@ export const Signup = ({ changeMode, trial }) => {
             style={{
               marginBottom: 25
             }}
-            size={AppFontSize.xs}
+            size={AppFontSize.xxs}
             color={colors.secondary.paragraph}
           >
             {strings.signupAgreement[0]()}
             <Paragraph
-              size={AppFontSize.xs}
+              size={AppFontSize.xxs}
               onPress={() => {
                 openLinkInBrowser("https://notesnook.com/tos", colors);
               }}
@@ -251,7 +252,7 @@ export const Signup = ({ changeMode, trial }) => {
             </Paragraph>{" "}
             {strings.signupAgreement[2]()}
             <Paragraph
-              size={AppFontSize.xs}
+              size={AppFontSize.xxs}
               onPress={() => {
                 openLinkInBrowser("https://notesnook.com/privacy", colors);
               }}
@@ -271,7 +272,6 @@ export const Signup = ({ changeMode, trial }) => {
             type="accent"
             loading={loading}
             onPress={signup}
-            fontSize={AppFontSize.md}
             style={{
               width: 250
             }}
@@ -285,17 +285,14 @@ export const Signup = ({ changeMode, trial }) => {
             activeOpacity={0.8}
             style={{
               alignSelf: "center",
-              marginTop: 12,
-              paddingVertical: 12
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
           >
-            <Paragraph
-              size={AppFontSize.xs + 1}
-              color={colors.secondary.paragraph}
-            >
+            <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
               {strings.alreadyHaveAccount()}{" "}
               <Paragraph
-                size={AppFontSize.xs + 1}
+                size={AppFontSize.xs}
                 style={{ color: colors.primary.accent }}
               >
                 {strings.login()}

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

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

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

@@ -24,6 +24,7 @@ import { useThemeColors } from "@notesnook/theme";
 import { ColorValues } from "../../utils/colors";
 import { hexToRGBA } from "../../utils/colors";
 import { defaultBorderRadius } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const DefaultPlaceholder = ({ color }: { color: string }) => {
   const { colors } = useThemeColors();
@@ -41,7 +42,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
     <View
       style={{
         width: "100%",
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       {hasAnnoucements ? (
@@ -52,7 +53,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             borderRadius: 10,
             marginBottom: 20,
             backgroundColor: colors.secondary.background,
-            padding: 12
+            padding: DefaultAppStyles.GAP
           }}
         >
           <View
@@ -79,7 +80,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               height: 15,
               backgroundColor: shadeColor,
               borderRadius: 3,
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
           />
         </View>
@@ -94,7 +95,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             marginBottom: 20,
             flexDirection: "row",
             alignItems: "center",
-            paddingHorizontal: 20
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           <View
@@ -135,7 +136,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           backgroundColor: colors.secondary.background,
           borderRadius: 10,
           marginBottom: 20,
-          padding: 5,
+          padding: DefaultAppStyles.GAP_SMALL,
           justifyContent: "space-between",
           flexDirection: "row",
           alignItems: "center"
@@ -189,14 +190,14 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           height: 13,
           backgroundColor: colors.secondary.background,
           borderRadius: defaultBorderRadius,
-          marginTop: 10
+          marginTop: DefaultAppStyles.GAP_VERTICAL
         }}
       />
 
       <View
         style={{
           flexDirection: "row",
-          marginTop: 10
+          marginTop: DefaultAppStyles.GAP_VERTICAL
         }}
       >
         <View

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

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

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

@@ -21,6 +21,7 @@ import React from "react";
 import { View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
 import { defaultBorderRadius } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const SettingsPlaceholder = () => {
   const { colors } = useThemeColors();
@@ -45,7 +46,7 @@ export const SettingsPlaceholder = () => {
           marginBottom: 20,
           flexDirection: "row",
           alignItems: "center",
-          paddingHorizontal: 16
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         <View
@@ -86,7 +87,7 @@ export const SettingsPlaceholder = () => {
           marginBottom: 20,
           flexDirection: "row",
           alignItems: "center",
-          paddingHorizontal: 16,
+          paddingHorizontal: DefaultAppStyles.GAP,
           justifyContent: "space-between"
         }}
       >

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

@@ -17,16 +17,17 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { ActivityIndicator, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
-import { useThemeColors } from "@notesnook/theme";
+import { getColorLinearShade } from "../../utils/colors";
 import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
-import { getColorLinearShade } from "../../utils/colors";
-import { strings } from "@notesnook/intl";
 
 const DialogButtons = ({
   onPressPositive,
@@ -46,7 +47,7 @@ const DialogButtons = ({
         {
           backgroundColor: colors.secondary.background,
           height: 60,
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           borderTopWidth: 0.7,
           borderTopColor: getColorLinearShade(
             colors.secondary.background,
@@ -82,7 +83,7 @@ const DialogButtons = ({
       >
         <Button
           onPress={onPressNegative}
-          fontSize={AppFontSize.md}
+          fontSize={AppFontSize.sm}
           testID={notesnook.ids.default.dialog.no}
           type="plain"
           bold
@@ -91,7 +92,7 @@ const DialogButtons = ({
         {onPressPositive ? (
           <Button
             onPress={onPressPositive}
-            fontSize={AppFontSize.md}
+            fontSize={AppFontSize.sm}
             testID={notesnook.ids.default.dialog.yes}
             style={{
               marginLeft: 10
@@ -114,6 +115,6 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "center",
     flexDirection: "row",
-    marginTop: 10
+    marginTop: DefaultAppStyles.GAP_VERTICAL
   }
 });

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

@@ -25,6 +25,7 @@ import { Button } from "../ui/button";
 import { PressableProps } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 
 type DialogHeaderProps = {
   icon?: string;
@@ -97,7 +98,7 @@ const DialogHeader = ({
                 onPress={button.onPress}
                 style={{
                   borderRadius: 100,
-                  paddingHorizontal: 12
+                  paddingHorizontal: DefaultAppStyles.GAP
                 }}
                 loading={button.loading}
                 fontSize={13}

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

@@ -17,29 +17,29 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useEffect, useRef, useState } from "react";
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 import { DDS } from "../../services/device-detection";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
+import { getContainerBorder } from "../../utils/colors";
 import { getElevationStyle } from "../../utils/elevation";
 import { eCloseSimpleDialog, eOpenSimpleDialog } from "../../utils/events";
+import { defaultBorderRadius } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
 import { Toast } from "../toast";
+import { Button } from "../ui/button";
 import Input from "../ui/input";
+import { Notice } from "../ui/notice";
 import Seperator from "../ui/seperator";
 import BaseDialog from "./base-dialog";
 import DialogButtons from "./dialog-buttons";
 import DialogHeader from "./dialog-header";
-import { useCallback } from "react";
-import { Button } from "../ui/button";
-import { getContainerBorder } from "../../utils/colors";
-import { Notice } from "../ui/notice";
-import { strings } from "@notesnook/intl";
-import { defaultBorderRadius } from "../../utils/size";
 
 export const Dialog = ({ context = "global" }) => {
   const { colors } = useThemeColors();
@@ -176,7 +176,7 @@ export const Dialog = ({ context = "global" }) => {
         {dialogInfo.input ? (
           <View
             style={{
-              paddingHorizontal: 12
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
             <Input
@@ -200,7 +200,7 @@ export const Dialog = ({ context = "global" }) => {
         {dialogInfo?.notice ? (
           <View
             style={{
-              paddingHorizontal: 12
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
             <Notice

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

@@ -50,6 +50,7 @@ import { IconButton } from "../../ui/icon-button";
 import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const AppLockPassword = () => {
   const { colors } = useThemeColors();
@@ -128,7 +129,7 @@ export const AppLockPassword = () => {
 
         <View
           style={{
-            paddingHorizontal: 12
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           {mode === "change" ? (

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

@@ -33,6 +33,7 @@ import { IconButton } from "../../ui/icon-button";
 import { Notice } from "../../ui/notice";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export default function AttachImage({
   response,
@@ -50,21 +51,26 @@ export default function AttachImage({
     <View
       style={{
         alignItems: "center",
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <View
         style={{
           backgroundColor: colors.secondary.background,
-          marginBottom: 12,
+          marginBottom: DefaultAppStyles.GAP_VERTICAL,
           height: 140,
           width: "100%",
           borderRadius: 10,
-          padding: 5,
-          paddingHorizontal: 12
+          padding: DefaultAppStyles.GAP_SMALL,
+          paddingHorizontal: DefaultAppStyles.GAP_SMALL
         }}
       >
-        <Paragraph style={{ color: colors.primary.paragraph, marginBottom: 6 }}>
+        <Paragraph
+          style={{
+            color: colors.primary.paragraph,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL_SMALL
+          }}
+        >
           {strings.attachImageHeading(response?.length || 1)}
         </Paragraph>
         <ScrollView horizontal>
@@ -96,7 +102,7 @@ export default function AttachImage({
         style={{
           flexDirection: "row",
           alignSelf: "center",
-          marginBottom: 12,
+          marginBottom: DefaultAppStyles.GAP_VERTICAL,
           alignItems: "center",
           width: "100%"
         }}
@@ -135,7 +141,7 @@ export default function AttachImage({
           size="small"
           style={{
             width: "100%",
-            marginBottom: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL
           }}
         />
       ) : (
@@ -145,7 +151,7 @@ export default function AttachImage({
           size="small"
           style={{
             width: "100%",
-            marginBottom: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL
           }}
         />
       )}

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

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

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

@@ -43,6 +43,7 @@ import { AppFontSize } from "../../../utils/size";
 import BaseDialog from "../../dialog/base-dialog";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const JumpToSectionDialog = () => {
   const scrollRef = useRef<RefObject<FlatList>>();
@@ -152,7 +153,7 @@ const JumpToSectionDialog = () => {
           maxHeight: "65%",
           borderRadius: 10,
           alignSelf: "center",
-          padding: 10,
+          padding: DefaultAppStyles.GAP_SMALL,
           paddingTop: 30
         }}
       >
@@ -188,7 +189,7 @@ const JumpToSectionDialog = () => {
                     style={{
                       minWidth: "20%",
                       width: null,
-                      paddingHorizontal: 12,
+                      paddingHorizontal: DefaultAppStyles.GAP,
                       margin: 5,
                       borderRadius: 100,
                       height: 30,

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

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

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

@@ -46,6 +46,7 @@ import { sleep } from "../../../utils/time";
 import { MMKV } from "../../../common/database/mmkv";
 import { deleteCacheFileByPath } from "../../../common/filesystem/io";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const WIN_WIDTH = Dimensions.get("window").width;
 const WIN_HEIGHT = Dimensions.get("window").height;
@@ -184,7 +185,7 @@ const PDFPreview = () => {
               />
               <Paragraph
                 style={{
-                  marginTop: 10
+                  marginTop: DefaultAppStyles.GAP_VERTICAL
                 }}
                 color={colors.static.white}
               >
@@ -200,7 +201,7 @@ const PDFPreview = () => {
                   marginTop: insets.top,
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  paddingHorizontal: 12,
+                  paddingHorizontal: DefaultAppStyles.GAP,
                   paddingLeft: 6
                 }}
               >

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

@@ -29,6 +29,7 @@ import { Button } from "../../ui/button";
 import { ProgressBarComponent } from "../../ui/svg/lazy";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export type ProgressOptions = {
   progress?: string;
@@ -111,7 +112,7 @@ export default function Progress() {
     >
       <DialogContainer
         style={{
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           paddingBottom: 10
         }}
         noBorder={data?.fillBackground ? true : false}
@@ -121,7 +122,7 @@ export default function Progress() {
           style={{
             justifyContent: "center",
             alignItems: "center",
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             gap: 10,
             paddingBottom: 20
           }}
@@ -148,7 +149,7 @@ export default function Progress() {
             style={{
               flexDirection: "row",
               width: 100,
-              paddingVertical: 12
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <ProgressBarComponent

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

@@ -34,6 +34,7 @@ import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { ProFeatures } from "./pro-features";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const ResultDialog = () => {
   const { colors } = useThemeColors();
@@ -83,10 +84,10 @@ const ResultDialog = () => {
           style={{
             alignSelf: "center",
             textAlign: "center",
-            marginTop: 10,
+            marginTop: DefaultAppStyles.GAP_VERTICAL,
             maxWidth: "100%",
-            marginBottom: 10,
-            paddingHorizontal: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           {dialogData.title}
@@ -109,7 +110,7 @@ const ResultDialog = () => {
 
         <View
           style={{
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             alignItems: "center",
             width: "100%"
           }}
@@ -124,14 +125,14 @@ const ResultDialog = () => {
             width: "100%",
             borderBottomRightRadius: 10,
             borderBottomLeftRadius: 10,
-            paddingVertical: 10
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           <Button
             title={dialogData.button}
             width={null}
             style={{
-              paddingHorizontal: 12
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
             onPress={close}
             fontSize={AppFontSize.md + 2}

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

@@ -30,6 +30,7 @@ import {
 import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 export const ProFeatures = ({ count = 6 }) => {
   const { colors } = useThemeColors();
 
@@ -67,7 +68,7 @@ export const ProFeatures = ({ count = 6 }) => {
               width: "100%",
               height: 40,
               paddingHorizontal: 0,
-              marginBottom: 10,
+              marginBottom: DefaultAppStyles.GAP_VERTICAL,
               alignItems: "center",
               borderRadius: defaultBorderRadius,
               justifyContent: "flex-start"

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

@@ -53,6 +53,7 @@ import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export class VaultDialog extends Component {
   constructor(props) {
@@ -677,7 +678,7 @@ export class VaultDialog extends Component {
 
           <View
             style={{
-              paddingHorizontal: 12
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
             {(novault ||
@@ -750,7 +751,7 @@ export class VaultDialog extends Component {
                     : "checkbox-blank-circle-outline"
                 }
                 style={{
-                  marginTop: 10
+                  marginTop: DefaultAppStyles.GAP_VERTICAL
                 }}
                 width="100%"
                 title={strings.deleteAllNotes()}
@@ -847,7 +848,7 @@ export class VaultDialog extends Component {
                   });
                 }}
                 style={{
-                  marginTop: 10
+                  marginTop: DefaultAppStyles.GAP_VERTICAL
                 }}
                 icon="fingerprint"
                 width="100%"

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

@@ -99,7 +99,7 @@ export const Header = ({
           justifyContent: "space-between",
           marginTop: DefaultAppStyles.GAP_SMALL,
           borderRadius: 10,
-          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL - 2,
           borderWidth: hasSearch ? 1 : 0,
           borderColor: colors.secondary.border,
           paddingHorizontal: !hasSearch ? 0 : DefaultAppStyles.GAP_SMALL,

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

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

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

@@ -30,6 +30,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import SettingsService from "../../services/settings";
 import { AuthMode } from "../auth/common";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const Intro = () => {
   const { colors } = useThemeColors();
@@ -72,7 +73,7 @@ const Intro = () => {
         </View>
         <View
           style={{
-            marginTop: 10,
+            marginTop: DefaultAppStyles.GAP_VERTICAL,
             maxWidth: "90%",
             width: "100%"
           }}

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

@@ -272,7 +272,7 @@ const NoteItem = ({
                       style={{
                         borderRadius: 4,
                         backgroundColor: colors.secondary.background,
-                        paddingHorizontal: 4,
+                        paddingHorizontal: DefaultAppStyles.GAP_SMALL / 2,
                         borderWidth: 0.5,
                         borderColor: primaryColors.border,
                         paddingVertical: 1,
@@ -303,7 +303,7 @@ const NoteItem = ({
                           style={{
                             borderRadius: 4,
                             backgroundColor: colors.secondary.background,
-                            paddingHorizontal: 4,
+                            paddingHorizontal: DefaultAppStyles.GAP_SMALL / 2,
                             borderWidth: 0.5,
                             borderColor: primaryColors.border,
                             paddingVertical: 1

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

@@ -34,6 +34,7 @@ import AppIcon from "../../ui/AppIcon";
 import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 type NotebookItemProps = {
   item: Notebook | BaseTrashItem<Notebook>;
@@ -104,7 +105,7 @@ export const NotebookItem = ({
               flexDirection: "row",
               justifyContent: "flex-start",
               alignItems: "center",
-              marginTop: 5,
+              marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
               height: AppFontSize.md + 2
             }}
           >

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

@@ -34,6 +34,7 @@ import { strings } from "@notesnook/intl";
 import { useSelectionStore } from "../../../stores/use-selection-store";
 import useIsSelected from "../../../hooks/use-selected";
 import AppIcon from "../../ui/AppIcon";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const ReminderItem = React.memo(
   ({
@@ -87,7 +88,7 @@ const ReminderItem = React.memo(
             style={{
               flexDirection: "row",
               flexWrap: "wrap",
-              marginTop: 5
+              marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
             }}
           >
             {item.disabled ? (
@@ -96,9 +97,9 @@ const ReminderItem = React.memo(
                   backgroundColor: colors.secondary.background,
                   borderRadius: defaultBorderRadius,
                   flexDirection: "row",
-                  paddingHorizontal: 6,
+                  paddingHorizontal: DefaultAppStyles.GAP_SMALL,
                   alignItems: "center",
-                  marginTop: 5,
+                  marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
                   justifyContent: "flex-start",
                   alignSelf: "flex-start",
                   marginRight: 10,
@@ -125,12 +126,12 @@ const ReminderItem = React.memo(
                   backgroundColor: colors.secondary.background,
                   borderRadius: defaultBorderRadius,
                   flexDirection: "row",
-                  paddingHorizontal: 6,
+                  paddingHorizontal: DefaultAppStyles.GAP_SMALL,
                   alignItems: "center",
-                  marginTop: 5,
+                  marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
                   justifyContent: "flex-start",
                   alignSelf: "flex-start",
-                  marginRight: 10,
+                  marginRight: DefaultAppStyles.GAP_SMALL,
                   height: 30
                 }}
               >
@@ -152,10 +153,10 @@ const ReminderItem = React.memo(
             <ReminderTime
               reminder={item}
               checkIsActive={false}
-              fontSize={AppFontSize.xs}
+              fontSize={AppFontSize.xxs}
               style={{
                 justifyContent: "flex-start",
-                height: 25,
+                paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2,
                 alignSelf: "flex-start"
               }}
             />

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

@@ -109,7 +109,7 @@ const SelectionWrapper = ({
         paddingHorizontal: DefaultAppStyles.GAP,
         paddingVertical: compactMode ? 4 : DefaultAppStyles.GAP_VERTICAL,
         borderRadius: isSheet ? 10 : 0,
-        marginBottom: isSheet ? 12 : undefined
+        marginBottom: isSheet ? DefaultAppStyles.GAP_VERTICAL : undefined
       }}
     >
       {children}

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

@@ -30,6 +30,7 @@ import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import SelectionWrapper, { selectItem } from "../selection-wrapper";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const TagItem = React.memo(
   ({
@@ -75,7 +76,7 @@ const TagItem = React.memo(
             color={colors.secondary.paragraph}
             size={AppFontSize.xs}
             style={{
-              marginTop: 5
+              marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
             }}
           >
             {strings.notes(totalNotes)}

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

@@ -24,7 +24,7 @@ import { notesnook } from "../../../e2e/test.ids";
 import { TTip, useTip } from "../../services/tip-manager";
 import { RouteParams } from "../../stores/use-navigation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { AppFontSize, defaultBorderRadius } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Tip } from "../tip";
 import { Button } from "../ui/button";
 import Seperator from "../ui/seperator";
@@ -102,9 +102,7 @@ export const Empty = React.memo(function Empty({
               icon="arrow-right"
               onPress={placeholder?.action}
               style={{
-                alignSelf: "flex-start",
-                borderRadius: defaultBorderRadius,
-                height: 40
+                alignSelf: "flex-start"
               }}
             />
           )}

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

@@ -24,9 +24,9 @@ import React, { useEffect, useRef } from "react";
 import {
   NativeScrollEvent,
   NativeSyntheticEvent,
-  RefreshControl
+  RefreshControl,
+  View
 } from "react-native";
-import Animated, { FadeIn } from "react-native-reanimated";
 import { notesnook } from "../../../e2e/test.ids";
 import { useGroupOptions } from "../../hooks/use-group-options";
 import { eSendEvent } from "../../services/event-manager";
@@ -145,11 +145,10 @@ export default function List(props: ListProps) {
 
   return (
     <>
-      <Animated.View
+      <View
         style={{
           flex: 1
         }}
-        entering={props.renderedInRoute === "Search" ? undefined : FadeIn}
       >
         {props.data?.placeholders?.length === 0 ? (
           <>
@@ -214,7 +213,7 @@ export default function List(props: ListProps) {
             }
           />
         )}
-      </Animated.View>
+      </View>
     </>
   );
 }

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

@@ -49,6 +49,7 @@ import Seperator from "../ui/seperator";
 import Paragraph from "../ui/typography/paragraph";
 import { diff } from "diffblazer";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const MergeConflicts = () => {
   const { colors } = useThemeColors();
@@ -142,7 +143,7 @@ const MergeConflicts = () => {
           flexDirection: "row",
           justifyContent: "space-between",
           alignItems: "center",
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           paddingLeft: 6
         }}
       >
@@ -201,7 +202,7 @@ const MergeConflicts = () => {
               height={30}
               style={{
                 borderRadius: 100,
-                paddingHorizontal: 12
+                paddingHorizontal: DefaultAppStyles.GAP
               }}
               fontSize={AppFontSize.xs}
             />
@@ -218,7 +219,7 @@ const MergeConflicts = () => {
               height={30}
               style={{
                 borderRadius: 100,
-                paddingHorizontal: 12
+                paddingHorizontal: DefaultAppStyles.GAP
               }}
               fontSize={AppFontSize.xs}
               color={colors.error.paragraph}
@@ -233,7 +234,7 @@ const MergeConflicts = () => {
                 height={30}
                 style={{
                   borderRadius: 100,
-                  paddingHorizontal: 12,
+                  paddingHorizontal: DefaultAppStyles.GAP,
                   minWidth: 60,
                   marginLeft: 10
                 }}

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

@@ -38,6 +38,7 @@ import Seperator from "../ui/seperator";
 import Paragraph from "../ui/typography/paragraph";
 import NotePreview from "./preview";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const HistoryItem = ({
   index,
@@ -88,9 +89,9 @@ const HistoryItem = ({
       style={{
         justifyContent: "space-between",
         alignItems: "center",
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         height: 45,
-        marginBottom: 10,
+        marginBottom: DefaultAppStyles.GAP_VERTICAL,
         flexDirection: "row"
       }}
     >
@@ -148,7 +149,7 @@ export default function NoteHistory({
 
       <View
         style={{
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           height: !history?.placeholders.length
             ? 300
             : (history.placeholders.length + 1) * 55,

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

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

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

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

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

@@ -44,6 +44,7 @@ import { Walkthrough } from "../walkthroughs";
 import { features } from "./features";
 import { Group } from "./group";
 import { PricingPlans } from "./pricing-plans";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Component = ({ close, promo }) => {
   const { colors } = useThemeColors();
@@ -175,7 +176,7 @@ export const Component = ({ close, promo }) => {
           key="description"
           size={AppFontSize.md}
           style={{
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             textAlign: "center",
             alignSelf: "center",
             paddingBottom: 20,
@@ -203,7 +204,7 @@ export const Component = ({ close, promo }) => {
             type="accent"
             width={250}
             style={{
-              paddingHorizontal: 12,
+              paddingHorizontal: DefaultAppStyles.GAP,
               marginBottom: 15,
               borderRadius: 100
             }}
@@ -219,7 +220,7 @@ export const Component = ({ close, promo }) => {
           type={userCanRequestTrial ? "secondaryAccented" : "accent"}
           width={250}
           style={{
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             marginBottom: 15,
             borderRadius: 100
           }}
@@ -232,7 +233,7 @@ export const Component = ({ close, promo }) => {
             style={{
               alignSelf: "center",
               textAlign: "center",
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               maxWidth: "80%"
             }}
           >
@@ -254,7 +255,7 @@ export const Component = ({ close, promo }) => {
         <View
           key="plans"
           style={{
-            paddingHorizontal: 12
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           <PricingPlans showTrialOption={false} promo={promo} />
@@ -269,7 +270,7 @@ export const Component = ({ close, promo }) => {
           }
           type="accent"
           style={{
-            paddingHorizontal: 24,
+            paddingHorizontal: DefaultAppStyles.GAP * 2,
             position: "absolute",
             borderRadius: 100,
             bottom: 30,

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

@@ -42,6 +42,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { CompactFeatures } from "./compact-features";
 import { Offer } from "./offer";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Expiring = () => {
   const { colors } = useThemeColors();
@@ -94,7 +95,7 @@ export const Expiring = () => {
           >
             <View
               style={{
-                paddingHorizontal: 12,
+                paddingHorizontal: DefaultAppStyles.GAP,
                 width: "100%"
               }}
             >
@@ -147,7 +148,7 @@ export const Expiring = () => {
                   style={{
                     textDecorationLine: "underline",
                     color: colors.secondary.paragraph,
-                    marginTop: 10
+                    marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}
                 >
                   {"See what's included in Basic & Pro plans"}
@@ -179,8 +180,8 @@ export const Expiring = () => {
                 fontSize={AppFontSize.md + 2}
                 style={{
                   marginBottom: status.extend ? 0 : 10,
-                  marginTop: 10,
-                  paddingHorizontal: 24
+                  marginTop: DefaultAppStyles.GAP_VERTICAL,
+                  paddingHorizontal: DefaultAppStyles.GAP * 2
                 }}
               />
 
@@ -204,7 +205,7 @@ export const Expiring = () => {
                   fontSize={AppFontSize.xs}
                   height={30}
                   style={{
-                    marginBottom: 10
+                    marginBottom: DefaultAppStyles.GAP_VERTICAL
                   }}
                 />
               )}

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

@@ -24,6 +24,7 @@ import { useThemeColors } from "@notesnook/theme";
 import { defaultBorderRadius, AppFontSize } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { ProTag } from "./pro-tag";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const FeatureBlock = ({
   vertical,
@@ -40,11 +41,11 @@ export const FeatureBlock = ({
       style={{
         flexDirection: "row",
         alignItems: "center",
-        paddingHorizontal: 12,
-        marginBottom: 10,
+        paddingHorizontal: DefaultAppStyles.GAP,
+        marginBottom: DefaultAppStyles.GAP_VERTICAL,
         backgroundColor: colors.secondary.background,
         borderRadius: 10,
-        paddingVertical: 12
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       <Paragraph
@@ -63,7 +64,7 @@ export const FeatureBlock = ({
       style={{
         height: 100,
         justifyContent: "center",
-        padding: 10,
+        padding: DefaultAppStyles.GAP_SMALL,
         marginRight: 10,
         borderRadius: defaultBorderRadius,
         minWidth: 100
@@ -85,7 +86,7 @@ export const FeatureBlock = ({
           style={{
             width: 30,
             height: 3,
-            marginTop: 10,
+            marginTop: DefaultAppStyles.GAP_VERTICAL,
             borderRadius: 100,
             backgroundColor: colors.primary.accent
           }}

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

@@ -25,6 +25,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { FeatureBlock } from "./feature";
 import { ProTag } from "./pro-tag";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Group = ({ item, index }) => {
   const { colors } = useThemeColors();
@@ -32,7 +33,7 @@ export const Group = ({ item, index }) => {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         backgroundColor:
           index % 2 !== 0
             ? colors.primary.background
@@ -56,7 +57,7 @@ export const Group = ({ item, index }) => {
       {item.features && (
         <ScrollView
           style={{
-            marginTop: 20
+            marginTop: DefaultAppStyles.GAP
           }}
           horizontal
           showsHorizontalScrollIndicator={false}
@@ -79,7 +80,7 @@ export const Group = ({ item, index }) => {
       {item.info ? (
         <Paragraph
           style={{
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
           size={AppFontSize.xs}
           color={colors.secondary.paragraph}

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

@@ -40,6 +40,7 @@ import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const PremiumToast = ({ context = "global", offset = 0 }) => {
   const { colors } = useThemeColors();
@@ -95,7 +96,7 @@ export const PremiumToast = ({ context = "global", offset = 0 }) => {
           backgroundColor: colors.secondary.background,
           zIndex: 999,
           ...getElevationStyle(20),
-          padding: 12,
+          padding: DefaultAppStyles.GAP,
           borderRadius: 10,
           flexDirection: "row",
           alignSelf: "center",

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

@@ -24,6 +24,7 @@ import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import RNIap from "react-native-iap";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const PricingItem = ({
   product,
@@ -49,7 +50,7 @@ export const PricingItem = ({
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         paddingVertical: compact ? 15 : 10,
         width: compact ? null : "100%",
         minWidth: 150,

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

@@ -50,6 +50,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { Walkthrough } from "../walkthroughs";
 import { PricingItem } from "./pricing-item";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const UUID_PREFIX = "0bdaea";
 const UUID_VERSION = "4";
@@ -265,7 +266,7 @@ export const PricingPlans = ({
   return loading ? (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         justifyContent: "center",
         alignItems: "center",
         height: 100
@@ -276,7 +277,7 @@ export const PricingPlans = ({
   ) : (
     <View
       style={{
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       {buying ? (
@@ -310,9 +311,9 @@ export const PricingPlans = ({
             type="accent"
             width={250}
             style={{
-              paddingHorizontal: 12,
-              marginBottom: 15,
-              marginTop: 15,
+              paddingHorizontal: DefaultAppStyles.GAP,
+              marginBottom: DefaultAppStyles.GAP,
+              marginTop: DefaultAppStyles.GAP,
               borderRadius: 100
             }}
           />
@@ -333,7 +334,7 @@ export const PricingPlans = ({
             type="secondaryAccented"
             width={250}
             style={{
-              paddingHorizontal: 12,
+              paddingHorizontal: DefaultAppStyles.GAP,
               marginBottom: 15
             }}
           />
@@ -504,7 +505,7 @@ export const PricingPlans = ({
                 <Button
                   height={35}
                   style={{
-                    marginTop: 10
+                    marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}
                   onPress={() => {
                     presentDialog({
@@ -566,9 +567,9 @@ export const PricingPlans = ({
                     type="accent"
                     width={250}
                     style={{
-                      paddingHorizontal: 12,
+                      paddingHorizontal: DefaultAppStyles.GAP,
                       marginTop: product?.type === "promo" ? 0 : 30,
-                      marginBottom: 10
+                      marginBottom: DefaultAppStyles.GAP_VERTICAL
                     }}
                   />
                   {Platform.OS !== "ios" &&
@@ -613,7 +614,7 @@ export const PricingPlans = ({
                       setProduct(undefined);
                     }}
                     style={{
-                      marginTop: 5
+                      marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
                     }}
                     height={30}
                     fontSize={13}
@@ -634,7 +635,7 @@ export const PricingPlans = ({
           style={{
             alignSelf: "center",
             textAlign: "center",
-            marginTop: 10,
+            marginTop: DefaultAppStyles.GAP_VERTICAL,
             maxWidth: "80%"
           }}
         >
@@ -656,7 +657,7 @@ export const PricingPlans = ({
               color={colors.secondary.paragraph}
               style={{
                 alignSelf: "center",
-                marginTop: 10,
+                marginTop: DefaultAppStyles.GAP_VERTICAL,
                 textAlign: "center"
               }}
             >
@@ -670,7 +671,7 @@ export const PricingPlans = ({
               color={colors.secondary.paragraph}
               style={{
                 alignSelf: "center",
-                marginTop: 10,
+                marginTop: DefaultAppStyles.GAP_VERTICAL,
                 textAlign: "center"
               }}
             >

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

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

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

@@ -37,6 +37,7 @@ import { Button } from "../ui/button";
 import NativeTooltip from "../../utils/tooltip";
 import { Pressable } from "../ui/pressable";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
   const { colors } = useThemeColors();
@@ -133,37 +134,37 @@ export const ColorTags = ({ item }: { item: Note }) => {
           flexShrink: 2
         }}
       >
-        <FlashList
-          data={colorNotes}
-          estimatedItemSize={30}
-          horizontal
-          extraData={updater}
-          bounces={false}
-          renderItem={renderItem}
-          showsHorizontalScrollIndicator={false}
-          ListFooterComponent={
-            !colorNotes || !colorNotes.length ? (
-              <Button
-                onPress={async () => {
-                  useSettingStore.getState().setSheetKeyboardHandler(false);
-                  setVisible(true);
-                }}
-                buttonType={{
-                  text: colors.primary.accent
-                }}
-                title={strings.addColor()}
-                type="secondary"
-                icon="plus"
-                iconPosition="right"
-                height={30}
-                fontSize={AppFontSize.xs}
-                style={{
-                  marginRight: 5,
-                  borderRadius: 100,
-                  paddingHorizontal: 8
-                }}
-              />
-            ) : (
+        {!colorNotes || !colorNotes.length ? (
+          <Button
+            onPress={async () => {
+              useSettingStore.getState().setSheetKeyboardHandler(false);
+              setVisible(true);
+            }}
+            buttonType={{
+              text: colors.primary.accent
+            }}
+            title={strings.addColor()}
+            type="secondary"
+            icon="plus"
+            iconPosition="right"
+            height={30}
+            fontSize={AppFontSize.xs}
+            style={{
+              marginRight: 5,
+              paddingHorizontal: DefaultAppStyles.GAP_SMALL,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
+            }}
+          />
+        ) : (
+          <FlashList
+            data={colorNotes}
+            estimatedItemSize={30}
+            horizontal
+            extraData={updater}
+            bounces={false}
+            renderItem={renderItem}
+            showsHorizontalScrollIndicator={false}
+            ListFooterComponent={
               <Pressable
                 style={{
                   width: 35,
@@ -186,9 +187,9 @@ export const ColorTags = ({ item }: { item: Note }) => {
                   size={AppFontSize.lg}
                 />
               </Pressable>
-            )
-          }
-        />
+            }
+          />
+        )}
       </View>
     </>
   );

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

@@ -24,6 +24,7 @@ import { AppFontSize } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { getFormattedDate } from "@notesnook/common";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 export const DateMeta = ({ item }) => {
   const { colors } = useThemeColors();
 
@@ -44,7 +45,7 @@ export const DateMeta = ({ item }) => {
         style={{
           flexDirection: "row",
           justifyContent: "space-between",
-          paddingVertical: 3
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2
         }}
       >
         <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
@@ -59,11 +60,10 @@ export const DateMeta = ({ item }) => {
   return (
     <View
       style={{
-        paddingVertical: 5,
-        marginTop: 5,
         borderTopWidth: 1,
         borderTopColor: colors.primary.border,
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP,
+        paddingTop: DefaultAppStyles.GAP_VERTICAL_SMALL
       }}
     >
       {getDateMeta().map(renderItem)}

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

@@ -166,10 +166,10 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
                 style={{
                   justifyContent: "flex-start",
                   borderWidth: 0,
-                  height: 30,
                   alignSelf: "flex-start",
                   backgroundColor: "transparent",
-                  paddingHorizontal: 0
+                  paddingHorizontal: 0,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
                 }}
                 fontSize={AppFontSize.xs}
               />
@@ -177,12 +177,12 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
           </View>
 
           <DateMeta item={item} />
-          <Line bottom={0} />
+          <Line bottom={0} top={0} />
 
           {item.type === "note" ? (
             <>
               <Tags close={close} item={item} />
-              <Line bottom={0} />
+              <Line bottom={0} top={0} />
             </>
           ) : null}
           {item.type === "note" ? (

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

@@ -30,6 +30,7 @@ import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import { Pressable } from "../ui/pressable";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export default function Notebooks({ note, close, full }) {
   const { colors } = useThemeColors();
@@ -59,12 +60,12 @@ export default function Notebooks({ note, close, full }) {
       type={full ? "transparent" : "secondary"}
       style={{
         justifyContent: "flex-start",
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         flexDirection: "row",
         alignItems: "center",
         flexShrink: 1,
         flexGrow: 1,
-        padding: 6,
+        padding: DefaultAppStyles.GAP_SMALL,
         borderRadius: 10,
         minHeight: 42
       }}
@@ -92,14 +93,14 @@ export default function Notebooks({ note, close, full }) {
   return noteNotebooks.length === 0 ? null : (
     <View
       style={{
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <View
         style={{
           width: "100%",
           borderRadius: 10,
-          marginTop: 6
+          marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
         }}
       >
         {full

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

@@ -28,6 +28,7 @@ import ManageTagsSheet from "../sheets/manage-tags";
 import { Button } from "../ui/button";
 import { ColorTags } from "./color-tags";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Tags = ({ item, close }) => {
   const { colors } = useThemeColors();
@@ -35,11 +36,10 @@ export const Tags = ({ item, close }) => {
   return item.id ? (
     <View
       style={{
-        marginTop: 5,
         flexDirection: "row",
         flexWrap: "wrap",
         alignItems: "center",
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         alignSelf: "center",
         justifyContent: "space-between",
         width: "100%"
@@ -56,11 +56,10 @@ export const Tags = ({ item, close }) => {
         type="secondary"
         icon="plus"
         iconPosition="right"
-        height={30}
-        fontSize={AppFontSize.sm - 1}
+        fontSize={AppFontSize.xs}
         style={{
-          height: 35,
-          borderRadius: 100
+          paddingHorizontal: DefaultAppStyles.GAP_SMALL,
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
         }}
       />
       <ColorTags item={item} />
@@ -86,7 +85,7 @@ export const TagStrip = ({ item, close }) => {
         flexDirection: "row",
         flexWrap: "wrap",
         alignItems: "center",
-        marginTop: 10,
+        marginTop: DefaultAppStyles.GAP_VERTICAL,
         gap: 5
       }}
     >

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

@@ -33,6 +33,7 @@ import { Button } from "../ui/button";
 import SheetWrapper from "../ui/sheet";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 const SheetProvider = ({ context = "global" }) => {
   const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
@@ -120,13 +121,13 @@ const SheetProvider = ({ context = "global" }) => {
             !data.progress && !data.icon && !data.title && !data.paragraph
               ? 0
               : 10,
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         {data?.progress ? (
           <ActivityIndicator
             style={{
-              marginTop: 15
+              marginTop: DefaultAppStyles.GAP
             }}
             size={50}
             color={colors.primary.accent}
@@ -169,7 +170,7 @@ const SheetProvider = ({ context = "global" }) => {
 
       <View
         style={{
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           marginBottom: data.valueArray ? 12 : 0
         }}
       >
@@ -193,7 +194,7 @@ const SheetProvider = ({ context = "global" }) => {
 
       <View
         style={{
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         {data?.action ? (
@@ -220,7 +221,7 @@ const SheetProvider = ({ context = "global" }) => {
               icon={item.icon && item.icon}
               type={item.type || "accent"}
               style={{
-                marginBottom: 10
+                marginBottom: DefaultAppStyles.GAP_VERTICAL
               }}
               width="100%"
               fontSize={AppFontSize.md}
@@ -231,7 +232,7 @@ const SheetProvider = ({ context = "global" }) => {
           <Paragraph
             style={{
               alignSelf: "center",
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               textDecorationLine: "underline"
             }}
             size={AppFontSize.xs}

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

@@ -40,6 +40,7 @@ import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const AddNotebookSheet = ({
   notebook,
@@ -125,7 +126,7 @@ export const AddNotebookSheet = ({
       style={{
         maxHeight: DDS.isTab ? "90%" : "97%",
         borderRadius: DDS.isTab ? 5 : 0,
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <Heading size={AppFontSize.lg}>
@@ -172,7 +173,7 @@ export const AddNotebookSheet = ({
         height={45}
         fontSize={AppFontSize.md}
         style={{
-          paddingHorizontal: 24,
+          paddingHorizontal: DefaultAppStyles.GAP * 2,
           width: "100%"
         }}
         onPress={onSaveChanges}

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

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

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

@@ -37,6 +37,7 @@ import { IconButton } from "../../ui/icon-button";
 import { Pressable } from "../../ui/pressable";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const TabItemComponent = (props: {
   tab: TabItem;
@@ -202,7 +203,7 @@ export default function EditorTabs({
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         gap: 12,
         maxHeight: "100%"
       }}

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

@@ -53,6 +53,7 @@ import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const ExportNotesSheet = ({
   ids,
@@ -166,7 +167,7 @@ const ExportNotesSheet = ({
         <>
           <View
             style={{
-              paddingHorizontal: 12
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
             <DialogHeader
@@ -193,10 +194,10 @@ const ExportNotesSheet = ({
                   alignItems: "center",
                   flexDirection: "row",
                   paddingRight: 12,
-                  paddingVertical: 10,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL,
                   justifyContent: "flex-start",
                   borderRadius: 0,
-                  paddingHorizontal: 12,
+                  paddingHorizontal: DefaultAppStyles.GAP,
                   opacity: item.pro ? 1 : 0.5
                 }}
               >
@@ -245,8 +246,8 @@ const ExportNotesSheet = ({
               justifyContent: "center",
               alignItems: "center",
               width: "100%",
-              paddingHorizontal: 12,
-              paddingVertical: 20
+              paddingHorizontal: DefaultAppStyles.GAP,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             {!complete ? (
@@ -273,7 +274,7 @@ const ExportNotesSheet = ({
                 <Heading
                   style={{
                     textAlign: "center",
-                    marginTop: 10
+                    marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}
                   color={colors.secondary.heading}
                 >
@@ -296,7 +297,7 @@ const ExportNotesSheet = ({
                   width={250}
                   fontSize={AppFontSize.md}
                   style={{
-                    marginTop: 10,
+                    marginTop: DefaultAppStyles.GAP_VERTICAL,
                     borderRadius: 100
                   }}
                   onPress={async () => {
@@ -325,7 +326,7 @@ const ExportNotesSheet = ({
                   width={250}
                   fontSize={AppFontSize.md}
                   style={{
-                    marginTop: 10,
+                    marginTop: DefaultAppStyles.GAP_VERTICAL,
                     borderRadius: 100
                   }}
                   onPress={async () => {
@@ -353,7 +354,7 @@ const ExportNotesSheet = ({
                   width={250}
                   fontSize={AppFontSize.md}
                   style={{
-                    marginTop: 10,
+                    marginTop: DefaultAppStyles.GAP_VERTICAL,
                     borderRadius: 100
                   }}
                   onPress={async () => {
@@ -385,16 +386,16 @@ const styles = StyleSheet.create({
   container: {
     ...getElevationStyle(5),
     borderRadius: defaultBorderRadius,
-    paddingVertical: pv
+    paddingVertical: DefaultAppStyles.GAP_VERTICAL
   },
   buttonContainer: {
     justifyContent: "space-between",
     alignItems: "center"
   },
   button: {
-    paddingVertical: pv,
-    paddingHorizontal: ph,
-    marginTop: 10,
+    paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+    paddingHorizontal: DefaultAppStyles.GAP,
+    marginTop: DefaultAppStyles.GAP_VERTICAL,
     borderRadius: defaultBorderRadius,
     width: "100%",
     justifyContent: "center",

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

@@ -24,6 +24,7 @@ import { ToastManager } from "../../../services/event-manager";
 import { AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 export const ShareComponent = ({ uri, name, padding }) => {
   return (
     <View
@@ -55,7 +56,7 @@ export const ShareComponent = ({ uri, name, padding }) => {
         width="100%"
         fontSize={AppFontSize.md}
         style={{
-          marginTop: 10
+          marginTop: DefaultAppStyles.GAP_VERTICAL
         }}
         onPress={async () => {
           FileViewer.open(uri, {

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

@@ -35,6 +35,7 @@ import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const Issue = ({ defaultTitle, defaultBody, issueTitle }) => {
   const { colors } = useThemeColors();
@@ -85,7 +86,7 @@ Logged in: ${user ? "yes" : "no"}`,
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         width: "100%"
       }}
     >
@@ -148,9 +149,9 @@ Logged in: ${user ? "yes" : "no"}`,
               borderWidth: 1,
               borderColor: colors.primary.border,
               borderRadius: defaultBorderRadius,
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               fontFamily: "OpenSans-Regular",
-              marginBottom: 10,
+              marginBottom: DefaultAppStyles.GAP_VERTICAL,
               fontSize: AppFontSize.md,
               color: colors.primary.heading
             }}
@@ -181,7 +182,7 @@ Logged in: ${user ? "yes" : "no"}`,
               borderWidth: 1,
               borderColor: colors.primary.border,
               borderRadius: defaultBorderRadius,
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               fontFamily: "OpenSans-Regular",
               maxHeight: 200,
               fontSize: AppFontSize.sm,
@@ -210,7 +211,7 @@ Logged in: ${user ? "yes" : "no"}`,
             color={colors.secondary.paragraph}
             size={AppFontSize.xs}
             style={{
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               textAlign: "center"
             }}
           >

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

@@ -38,6 +38,7 @@ import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const ListNoteItem = ({
   id,
@@ -57,7 +58,7 @@ const ListNoteItem = ({
       }}
       type={"transparent"}
       style={{
-        paddingVertical: 12,
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL,
         flexDirection: "row",
         width: "100%",
         justifyContent: "flex-start",
@@ -104,7 +105,7 @@ const ListBlockItem = ({
           alignItems: "flex-start",
           borderBottomWidth: 1,
           borderBottomColor: colors.primary.border,
-          paddingVertical: 5,
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
           justifyContent: "space-between"
         }}
       >
@@ -220,7 +221,7 @@ export default function LinkNote(props: {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         minHeight: "100%",
         maxHeight: "100%"
       }}
@@ -270,7 +271,7 @@ export default function LinkNote(props: {
                 height: 45,
                 borderWidth: 1,
                 borderColor: colors.primary.accent,
-                paddingHorizontal: 12
+                paddingHorizontal: DefaultAppStyles.GAP
               }}
               type="secondaryAccented"
             >
@@ -296,7 +297,7 @@ export default function LinkNote(props: {
             {nodes?.length > 0 ? (
               <Paragraph
                 style={{
-                  marginBottom: 12
+                  marginBottom: DefaultAppStyles.GAP_VERTICAL
                 }}
                 color={colors.secondary.paragraph}
                 size={AppFontSize.xs}
@@ -314,7 +315,7 @@ export default function LinkNote(props: {
             <ListBlockItem item={item} onSelectBlock={onSelectBlock} />
           )}
           style={{
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
           keyboardShouldPersistTaps="handled"
           windowSize={3}
@@ -332,7 +333,7 @@ export default function LinkNote(props: {
           )}
           keyboardShouldPersistTaps="handled"
           style={{
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
           windowSize={3}
           data={notes?.placeholders}
@@ -342,7 +343,7 @@ export default function LinkNote(props: {
       {selectedNote ? (
         <Button
           style={{
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
           title={strings.createLink()}
           type="accent"

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

@@ -49,6 +49,7 @@ import { Pressable } from "../../ui/pressable";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 async function updateInitialSelectionState(items: string[]) {
   const relations = await db.relations
@@ -242,7 +243,7 @@ const ManageTagsSheet = (props: {
       style={{
         width: "100%",
         alignSelf: "center",
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         maxHeight: dimensions.height * 0.85
       }}
     >
@@ -279,7 +280,7 @@ const ManageTagsSheet = (props: {
             flexDirection: "row",
             marginVertical: 5,
             justifyContent: "space-between",
-            padding: 12
+            padding: DefaultAppStyles.GAP
           }}
           onPress={onSubmit}
           type="selected"

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

@@ -42,6 +42,7 @@ import { ProgressBarComponent } from "../../ui/svg/lazy";
 import Paragraph from "../../ui/typography/paragraph";
 import { Issue } from "../github/issue";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const makeError = (stack: string, component: string) => `
 
@@ -125,7 +126,7 @@ export default function Migrate() {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         paddingTop: 12,
         height: "100%",
         alignItems: "center",
@@ -152,8 +153,8 @@ export default function Migrate() {
           >
             <Paragraph
               style={{
-                marginTop: 5,
-                marginBottom: 10,
+                marginTop: DefaultAppStyles.GAP_VERTICAL,
+                marginBottom: DefaultAppStyles.GAP_VERTICAL,
                 textAlign: "center"
               }}
             >
@@ -183,7 +184,7 @@ export default function Migrate() {
         <>
           <Paragraph
             style={{
-              marginTop: 20,
+              marginTop: DefaultAppStyles.GAP,
               textAlign: "center"
             }}
           >
@@ -193,7 +194,7 @@ export default function Migrate() {
           {reset ? (
             <Paragraph
               style={{
-                marginTop: 10,
+                marginTop: DefaultAppStyles.GAP_VERTICAL,
                 textAlign: "center"
               }}
             >
@@ -212,7 +213,7 @@ export default function Migrate() {
               style={{
                 borderRadius: 100,
                 height: 45,
-                marginTop: 10
+                marginTop: DefaultAppStyles.GAP_VERTICAL
               }}
             />
           )}
@@ -226,7 +227,7 @@ export default function Migrate() {
           style={{
             borderRadius: 100,
             height: 45,
-            marginTop: 20
+            marginTop: DefaultAppStyles.GAP
           }}
         />
       )}

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

@@ -32,6 +32,7 @@ import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 export type FeatureType = {
   title: string;
   body: string;
@@ -51,7 +52,7 @@ const NewFeature = ({
     <View
       style={{
         alignItems: "center",
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         paddingTop: 12,
         maxHeight: "100%"
       }}
@@ -68,10 +69,10 @@ const NewFeature = ({
             key={item.title}
             style={{
               backgroundColor: colors.secondary.background,
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               borderRadius: 10,
               width: "100%",
-              marginBottom: 10
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <Heading size={AppFontSize.lg - 2}>{item.title}</Heading>

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

@@ -38,6 +38,7 @@ import Paragraph from "../../ui/typography/paragraph";
 import { requestInAppReview } from "../../../services/app-review";
 import { hosts, Note } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const PublishNoteSheet = ({
   note: item
@@ -117,7 +118,7 @@ const PublishNoteSheet = ({
       style={{
         width: "100%",
         alignSelf: "center",
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <DialogHeader
@@ -155,9 +156,9 @@ const PublishNoteSheet = ({
               style={{
                 flexDirection: "row",
                 alignItems: "center",
-                marginTop: 10,
+                marginTop: DefaultAppStyles.GAP_VERTICAL,
                 backgroundColor: colors.secondary.background,
-                padding: 12,
+                padding: DefaultAppStyles.GAP,
                 borderRadius: defaultBorderRadius
               }}
             >
@@ -183,7 +184,7 @@ const PublishNoteSheet = ({
                   }}
                   size={AppFontSize.xs}
                   style={{
-                    marginTop: 5,
+                    marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
                     color: colors.primary.paragraph
                   }}
                 >
@@ -217,11 +218,11 @@ const PublishNoteSheet = ({
             style={{
               flexDirection: "row",
               alignItems: "center",
-              marginBottom: 10,
+              marginBottom: DefaultAppStyles.GAP_VERTICAL,
               backgroundColor: colors.secondary.background,
-              paddingVertical: 12,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL,
               borderRadius: defaultBorderRadius,
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <IconButton
@@ -260,7 +261,7 @@ const PublishNoteSheet = ({
               flexDirection: "row",
               alignItems: "center",
               backgroundColor: colors.secondary.background,
-              paddingVertical: 12,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL,
               borderRadius: defaultBorderRadius
             }}
           >
@@ -294,7 +295,7 @@ const PublishNoteSheet = ({
             style={{
               width: "100%",
               alignSelf: "center",
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             {isLocked ? (
@@ -352,7 +353,7 @@ const PublishNoteSheet = ({
         size={AppFontSize.xs}
         style={{
           textAlign: "center",
-          marginTop: 10,
+          marginTop: DefaultAppStyles.GAP_VERTICAL,
           textDecorationLine: "underline"
         }}
         onPress={async () => {

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

@@ -34,6 +34,7 @@ import SheetWrapper from "../../ui/sheet";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 const RateAppSheet = () => {
   const [visible, setVisible] = useState(false);
   const actionSheetRef = useRef();
@@ -83,7 +84,7 @@ const RateAppSheet = () => {
         style={{
           width: "100%",
           alignSelf: "center",
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         <Heading>{strings.rateAppHeading()}</Heading>

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

@@ -44,6 +44,7 @@ import Seperator from "../../ui/seperator";
 import SheetWrapper from "../../ui/sheet";
 import { QRCode } from "../../ui/svg/lazy";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 class RecoveryKeySheet extends React.Component {
   constructor(props) {
@@ -223,7 +224,7 @@ class RecoveryKeySheet extends React.Component {
             width: "100%",
             backgroundColor: colors.primary.background,
             justifyContent: "space-between",
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             borderRadius: 10,
             paddingTop: 10
           }}
@@ -236,8 +237,8 @@ class RecoveryKeySheet extends React.Component {
           <View
             style={{
               borderRadius: defaultBorderRadius,
-              padding: 12,
-              marginTop: 10
+              padding: DefaultAppStyles.GAP,
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <Paragraph

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

@@ -42,6 +42,7 @@ import { IconButton } from "../../ui/icon-button";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const useExpandedStore = create<{
   expanded: {
@@ -80,7 +81,7 @@ const ListBlockItem = ({
         paddingLeft: 35,
         justifyContent: "flex-start",
         minHeight: 45,
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <View
@@ -495,9 +496,9 @@ export const ReferencesList = ({ item, close }: ReferencesListProps) => {
       ) : (
         <View
           style={{
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             flex: 1,
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           <FlashList

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

@@ -37,6 +37,7 @@ import SheetProvider from "../../sheet-provider";
 import { Button } from "../../ui/button";
 import { PressableProps } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 type RelationsListProps = {
   actionSheetRef: RefObject<ActionSheetRef>;
@@ -95,7 +96,7 @@ export const RelationsList = ({
   }, [relationType, referenceType, item?.id, item?.type, updater]);
 
   return (
-    <View style={{ paddingHorizontal: 12, height: "100%" }}>
+    <View style={{ paddingHorizontal: DefaultAppStyles.GAP, height: "100%" }}>
       <SheetProvider context="local" />
       <DialogHeader
         title={title}

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

@@ -41,6 +41,7 @@ import {
   Note
 } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 type ReminderSheetProps = {
   actionSheetRef: RefObject<ActionSheetRef>;
@@ -102,7 +103,7 @@ export default function ReminderNotify({
       style={{
         justifyContent: "center",
         alignItems: "center",
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <Heading>{reminder?.title}</Heading>
@@ -112,7 +113,7 @@ export default function ReminderNotify({
         style={{
           height: 40,
           borderRadius: 100,
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           flexDirection: "row",
           alignItems: "center"
         }}
@@ -128,11 +129,11 @@ export default function ReminderNotify({
         horizontal={true}
         contentContainerStyle={{
           alignItems: "center",
-          paddingVertical: 10
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL
         }}
         showsHorizontalScrollIndicator={false}
         style={{
-          marginTop: 10
+          marginTop: DefaultAppStyles.GAP_VERTICAL
         }}
       >
         <Paragraph size={AppFontSize.xs}>{strings.remindMeIn()}:</Paragraph>
@@ -161,15 +162,15 @@ export default function ReminderNotify({
                 : 500,
             borderTopWidth: 1,
             borderTopColor: colors.primary.border,
-            marginTop: 5,
-            paddingTop: 5
+            marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
+            paddingTop: DefaultAppStyles.GAP_VERTICAL_SMALL
           }}
         >
           <Paragraph
             style={{
               color: colors.secondary.paragraph,
               fontSize: AppFontSize.xs,
-              marginBottom: 10
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             {strings.referencedIn()}

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

@@ -50,6 +50,7 @@ import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { ItemReference, Note, Reminder } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 type ReminderSheetProps = {
   actionSheetRef: RefObject<ActionSheetRef>;
@@ -224,7 +225,7 @@ export default function ReminderSheet({
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         maxHeight: "100%"
       }}
     >
@@ -245,7 +246,7 @@ export default function ReminderSheet({
           placeholder={strings.remindeMeOf()}
           onChangeText={(text) => (title.current = text)}
           wrapperStyle={{
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
         />
 
@@ -262,18 +263,18 @@ export default function ReminderSheet({
           textAlignVertical="top"
           inputStyle={{
             minHeight: 80,
-            paddingVertical: 12
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL
           }}
           height={80}
           wrapperStyle={{
-            marginBottom: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL
           }}
         />
 
         <ScrollView
           style={{
             flexDirection: "row",
-            marginBottom: 12,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
             height: 50
           }}
           horizontal
@@ -323,9 +324,9 @@ export default function ReminderSheet({
           <View
             style={{
               backgroundColor: colors.secondary.background,
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               borderRadius: defaultBorderRadius,
-              marginBottom: 12
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <View
@@ -439,7 +440,7 @@ export default function ReminderSheet({
               width: "100%",
               flexDirection: "column",
               justifyContent: "center",
-              marginBottom: 12,
+              marginBottom: DefaultAppStyles.GAP_VERTICAL,
               alignItems: "center"
             }}
           >
@@ -495,11 +496,11 @@ export default function ReminderSheet({
             style={{
               borderRadius: defaultBorderRadius,
               flexDirection: "row",
-              paddingVertical: 6,
-              paddingHorizontal: 12,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
+              paddingHorizontal: DefaultAppStyles.GAP,
               alignItems: "center",
               justifyContent: "flex-start",
-              marginBottom: 10,
+              marginBottom: DefaultAppStyles.GAP_VERTICAL,
               backgroundColor: colors.secondary.background
             }}
           >
@@ -551,7 +552,7 @@ export default function ReminderSheet({
           <RNScrollView
             style={{
               flexDirection: "row",
-              marginTop: 12,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               height: 50
             }}
             horizontal
@@ -603,8 +604,8 @@ export default function ReminderSheet({
         height={45}
         fontSize={AppFontSize.md}
         style={{
-          paddingHorizontal: 24,
-          marginTop: 10,
+          paddingHorizontal: DefaultAppStyles.GAP * 2,
+          marginTop: DefaultAppStyles.GAP_VERTICAL,
           width: "100%"
         }}
         onPress={saveReminder}

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

@@ -31,6 +31,7 @@ import {
 } from "../../../screens/editor/tiptap/utils";
 import { FlatList } from "react-native-actions-sheet";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 type TableOfContentsItem = {
   level: number;
@@ -99,9 +100,9 @@ const TableOfContents = ({ toc, close }: TableOfContentsProps) => {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         gap: 12,
-        paddingTop: 12
+        paddingTop: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       <View

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

@@ -299,11 +299,12 @@ export const UserSheet = () => {
             <Pressable
               key={item.title}
               style={{
-                paddingVertical: DefaultAppStyles.GAP_SMALL,
+                paddingVertical: DefaultAppStyles.GAP_VERTICAL,
                 alignItems: "center",
                 flexDirection: "row",
                 justifyContent: "flex-start",
                 gap: DefaultAppStyles.GAP_SMALL,
+                borderRadius: 0,
                 paddingHorizontal: DefaultAppStyles.GAP
               }}
               onPress={() => {

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

@@ -94,6 +94,7 @@ export const SideMenu = React.memo(
           onIndexChange={setIndex}
           swipeEnabled={false}
           animationEnabled={false}
+          lazy
         />
       </SafeAreaView>
     );
@@ -399,3 +400,5 @@ const TabBar = (
     </View>
   );
 };
+
+export default SideMenu;

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

@@ -146,7 +146,7 @@ function _MenuItem({
         paddingHorizontal: DefaultAppStyles.GAP_SMALL,
         justifyContent: "space-between",
         alignItems: "center",
-        paddingVertical: DefaultAppStyles.GAP_VERTICAL
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
       }}
     >
       <View

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

@@ -67,7 +67,7 @@ export function SideMenuHome() {
         width: "100%",
         backgroundColor: colors.primary.background,
         gap: DefaultAppStyles.GAP,
-        paddingTop: DefaultAppStyles.GAP_SMALL
+        paddingTop: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       <SideMenuHeader />

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

@@ -19,13 +19,14 @@ 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 { AppFontSize } from "../../utils/size";
+import { AppFontSize, defaultBorderRadius } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import Paragraph from "../ui/typography/paragraph";
 import { SideMenuHeader } from "./side-menu-header";
-import { DefaultAppStyles } from "../../utils/styles";
 
 type SideMenuListEmptyProps = {
   placeholder: string;
+  isLoading?: boolean;
 };
 
 export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
@@ -40,7 +41,7 @@ export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
       <View
         style={{
           backgroundColor: colors.primary.background,
-          paddingTop: DefaultAppStyles.GAP_SMALL
+          paddingTop: DefaultAppStyles.GAP_VERTICAL
         }}
       >
         <SideMenuHeader />
@@ -52,9 +53,33 @@ export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
           flexGrow: 1
         }}
       >
-        <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
-          {props.placeholder}
-        </Paragraph>
+        {props.isLoading ? (
+          <View
+            style={{
+              flex: 1,
+              width: "100%",
+              paddingHorizontal: DefaultAppStyles.GAP
+            }}
+          >
+            {[0, 1, 2, 3, 4].map((i) => (
+              <View
+                key={"placeholder" + i}
+                style={{
+                  paddingVertical: DefaultAppStyles.GAP - 1,
+                  width: i === 4 ? "80%" : "100%",
+                  borderRadius: defaultBorderRadius,
+                  backgroundColor: colors.secondary.background,
+                  marginTop: DefaultAppStyles.GAP_VERTICAL,
+                  opacity: 0.5
+                }}
+              />
+            ))}
+          </View>
+        ) : (
+          <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
+            {props.placeholder}
+          </Paragraph>
+        )}
       </View>
     </View>
   );

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

@@ -20,7 +20,7 @@ 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 React, { useEffect, useState } from "react";
 import { FlatList, TextInput, View } from "react-native";
 import { db } from "../../common/database";
 import NotebookScreen from "../../screens/notebook";
@@ -45,6 +45,7 @@ useSideMenuNotebookSelectionStore.setState({
 export const SideMenuNotebooks = () => {
   const tree = useSideMenuNotebookTreeStore((state) => state.tree);
   const [notebooks, loading] = useNotebooks();
+  const [isLoading, setIsLoading] = useState(true);
   const { colors } = useThemeColors();
   const [filteredNotebooks, setFilteredNotebooks] = React.useState(notebooks);
   const searchTimer = React.useRef<NodeJS.Timeout>();
@@ -82,6 +83,7 @@ export const SideMenuNotebooks = () => {
     (async () => {
       if (!loading) {
         loadRootNotebooks();
+        setIsLoading(false);
       }
     })();
   }, [loadRootNotebooks, loading]);
@@ -131,6 +133,7 @@ export const SideMenuNotebooks = () => {
       {!notebooks || notebooks.placeholders.length === 0 ? (
         <SideMenuListEmpty
           placeholder={strings.emptyPlaceholders("notebook")}
+          isLoading={isLoading}
         />
       ) : (
         <>
@@ -145,7 +148,7 @@ export const SideMenuNotebooks = () => {
               <View
                 style={{
                   backgroundColor: colors.primary.background,
-                  paddingTop: DefaultAppStyles.GAP_SMALL
+                  paddingTop: DefaultAppStyles.GAP_VERTICAL
                 }}
               >
                 <SideMenuHeader />
@@ -225,7 +228,7 @@ const NotebookItemWrapper = React.memo(
       <View
         style={{
           paddingHorizontal: DefaultAppStyles.GAP,
-          marginTop: index === 0 ? DefaultAppStyles.GAP : 0
+          marginTop: index === 0 ? DefaultAppStyles.GAP_VERTICAL : 0
         }}
       >
         <NotebookItem

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

@@ -18,16 +18,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Tag, VirtualizedGrouping } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
+import { FlashList } from "@shopify/flash-list";
 import React, { useEffect } from "react";
 import { TextInput, View } from "react-native";
-import { FlashList } from "@shopify/flash-list";
 import { DatabaseLogger, db } from "../../common/database";
 import { useDBItem, useTotalNotes } from "../../hooks/use-db-item";
 import { TaggedNotes } from "../../screens/notes/tagged";
+import Navigation from "../../services/navigation";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useTags } from "../../stores/use-tag-store";
-import { defaultBorderRadius, AppFontSize } from "../../utils/size";
+import { AppFontSize, defaultBorderRadius } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Properties } from "../properties";
 import AppIcon from "../ui/AppIcon";
@@ -36,8 +38,6 @@ 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>;
@@ -66,7 +66,8 @@ const TagItem = (props: {
     <View
       style={{
         paddingHorizontal: DefaultAppStyles.GAP,
-        marginTop: (props.id as number) === 0 ? DefaultAppStyles.GAP : 2
+        marginTop:
+          (props.id as number) === 0 ? DefaultAppStyles.GAP_VERTICAL : 2
       }}
     >
       {item ? (
@@ -171,9 +172,10 @@ const TagItem = (props: {
 };
 
 export const SideMenuTags = () => {
-  const [tags] = useTags();
+  const [tags, isLoading] = useTags();
   const { colors } = useThemeColors();
   const [filteredTags, setFilteredTags] = React.useState(tags);
+  const [loading, setLoading] = React.useState(true);
   const searchTimer = React.useRef<NodeJS.Timeout>();
   const lastQuery = React.useRef<string>();
 
@@ -213,11 +215,14 @@ export const SideMenuTags = () => {
     } else {
       setFilteredTags(tags);
     }
+    setLoading(false);
   }, [tags]);
 
   useEffect(() => {
-    updateTags();
-  }, [updateTags]);
+    if (!isLoading) {
+      updateTags();
+    }
+  }, [updateTags, isLoading]);
 
   const renderItem = React.useCallback(
     (info: { index: number }) => {
@@ -233,7 +238,10 @@ export const SideMenuTags = () => {
       }}
     >
       {!tags || tags?.placeholders.length === 0 ? (
-        <SideMenuListEmpty placeholder={strings.emptyPlaceholders("tag")} />
+        <SideMenuListEmpty
+          placeholder={strings.emptyPlaceholders("tag")}
+          isLoading={loading}
+        />
       ) : (
         <>
           <FlashList
@@ -246,7 +254,7 @@ export const SideMenuTags = () => {
               <View
                 style={{
                   backgroundColor: colors.primary.background,
-                  paddingTop: DefaultAppStyles.GAP_SMALL
+                  paddingTop: DefaultAppStyles.GAP_VERTICAL
                 }}
               >
                 <SideMenuHeader />

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

@@ -36,6 +36,7 @@ import { IconButton } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
 import { TimeSince } from "../ui/time-since";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const UserStatus = () => {
   const { colors, isDark } = useThemeColors();
@@ -76,7 +77,7 @@ export const UserStatus = () => {
           style={{
             flexDirection: "row",
             justifyContent: "flex-start",
-            padding: 12,
+            padding: DefaultAppStyles.GAP,
             borderRadius: 0,
             alignItems: "center",
             gap: 10

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

@@ -29,6 +29,7 @@ import { Button } from "../ui/button";
 import Seperator from "../ui/seperator";
 import Paragraph from "../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Tip = ({
   tip,
@@ -52,10 +53,10 @@ export const Tip = ({
       style={[
         {
           borderRadius: 10,
-          padding: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           width: "100%",
           alignSelf: "center",
-          paddingVertical: 12,
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL,
           backgroundColor: colors.secondary.background
         },
         style
@@ -73,9 +74,8 @@ export const Tip = ({
           fontSize={AppFontSize.xxxs}
           iconSize={AppFontSize.xs}
           style={{
-            width: undefined,
-            height: 22,
-            paddingHorizontal: 4,
+            paddingHorizontal: DefaultAppStyles.GAP_SMALL / 2,
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2,
             alignSelf: "flex-start",
             borderRadius: 100,
             borderWidth: 1,
@@ -102,7 +102,7 @@ export const Tip = ({
             style={{
               width: undefined,
               height: 25,
-              paddingHorizontal: 4,
+              paddingHorizontal: DefaultAppStyles.GAP_SMALL / 2,
               alignSelf: "flex-start",
               borderRadius: 100,
               borderWidth: 1,
@@ -125,7 +125,7 @@ export const Tip = ({
           style={{
             borderRadius: 10,
             overflow: "hidden",
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           <Image
@@ -149,7 +149,7 @@ export const Tip = ({
             text: colors.primary.accentForeground
           }}
           style={{
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
           onPress={() => {
             switch (tip.button?.action) {
@@ -174,7 +174,7 @@ Tip.present = async (tip: TTip) => {
         neverShowAgain={true}
         style={{
           backgroundColor: "transparent",
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       />
     )

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

@@ -135,8 +135,8 @@ export const Toast = ({ context = "global" }) => {
           backgroundColor: isDark ? colors.static.black : colors.static.white,
           alignSelf: "center",
           borderRadius: defaultBorderRadius * 2,
-          paddingVertical: 12,
-          paddingHorizontal: 12,
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+          paddingHorizontal: DefaultAppStyles.GAP,
           justifyContent: "space-between",
           flexDirection: "row",
           alignItems: "center",

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

@@ -36,6 +36,7 @@ import { ProTag } from "../../premium/pro-tag";
 import { Pressable, PressableProps, useButton } from "../pressable";
 import Heading from "../typography/heading";
 import Paragraph from "../typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 export interface ButtonProps extends PressableProps {
   height?: number;
   icon?: string;
@@ -121,12 +122,13 @@ export const Button = ({
       customOpacity={buttonType?.opacity}
       customAlpha={buttonType?.alpha}
       style={{
-        height: typeof height === "number" ? height * growFactor : height,
+        // height: typeof height === "number" ? height * growFactor : height,
         width:
           typeof width === "number"
             ? width * growFactor
             : (width as DimensionValue) || undefined,
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL,
         borderRadius: defaultBorderRadius,
         alignSelf: "center",
         justifyContent: "center",

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

@@ -19,7 +19,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useThemeColors } from "@notesnook/theme";
 import React, { useRef } from "react";
-import { ColorValue, GestureResponderEvent, TextStyle } from "react-native";
+import {
+  ColorValue,
+  GestureResponderEvent,
+  TextStyle,
+  useWindowDimensions
+} from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { hexToRGBA, RGB_Linear_Shade } from "../../../utils/colors";
 import { AppFontSize } from "../../../utils/size";
@@ -59,6 +64,8 @@ export const IconButton = ({
 }: IconButtonProps) => {
   const { colors } = useThemeColors();
   const localRef = useRef(null);
+  const { fontScale } = useWindowDimensions();
+  const growFactor = 1 + (fontScale - 1) / 10;
 
   const _onLongPress = (event: GestureResponderEvent) => {
     if (onLongPress) {
@@ -85,11 +92,11 @@ export const IconButton = ({
       onLongPress={_onLongPress}
       type={type}
       style={{
-        width: 40,
-        height: 40,
         justifyContent: "center",
         alignItems: "center",
         borderRadius: 100,
+        width: 40 * growFactor,
+        height: 40 * growFactor,
         ...style
       }}
     >

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

@@ -42,6 +42,7 @@ import { IconButton } from "../icon-button";
 import Paragraph from "../typography/paragraph";
 import phone from "phone";
 import isURL from "validator/lib/isURL";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 interface InputProps extends TextInputProps {
   fwdRef?: RefObject<TextInput>;
@@ -97,7 +98,7 @@ const Input = ({
   onBlurInput,
   onPress,
   height = 45,
-  fontSize = AppFontSize.md,
+  fontSize = AppFontSize.sm,
   onFocusInput,
   buttons,
   marginRight,
@@ -222,9 +223,11 @@ const Input = ({
     justifyContent: "space-between",
     alignItems: "center",
     flexGrow: 1,
-    height: height || 50,
-    paddingHorizontal: 12,
-    paddingRight: buttons || button || secureTextEntry || error ? 6 : 12,
+    paddingHorizontal: DefaultAppStyles.GAP,
+    paddingRight:
+      buttons || button || secureTextEntry || error
+        ? DefaultAppStyles.GAP
+        : DefaultAppStyles.GAP,
     ...containerStyle
   };
 
@@ -233,11 +236,10 @@ const Input = ({
     fontSize: fontSize,
     color:
       onPress && loading ? colors.primary.accent : colors.primary.paragraph,
-    paddingVertical: 0,
-    paddingBottom: 2.5,
     flexGrow: 1,
-    height: height || 50,
     flexShrink: 1,
+    paddingBottom: DefaultAppStyles.GAP_VERTICAL - 2,
+    paddingTop: DefaultAppStyles.GAP_VERTICAL - 2,
     fontFamily: "OpenSans-Regular",
     ...(inputStyle as ViewStyle)
   };
@@ -247,10 +249,8 @@ const Input = ({
       <View
         importantForAccessibility="yes"
         style={{
-          height: height,
           marginBottom: marginBottom,
           flexGrow: flexGrow,
-          maxHeight: height,
           marginRight: marginRight,
           ...wrapperStyle
         }}
@@ -307,7 +307,7 @@ const Input = ({
                   marginLeft: 5
                 }}
                 color={
-                  secureEntry ? colors.primary.icon : colors.primary.accent
+                  secureEntry ? colors.secondary.icon : colors.primary.accent
                 }
               />
             )}
@@ -350,7 +350,7 @@ const Input = ({
                 position: "absolute",
                 backgroundColor: colors.secondary.background,
                 paddingVertical: 3,
-                paddingHorizontal: 5,
+                paddingHorizontal: DefaultAppStyles.GAP_SMALL / 2,
                 borderRadius: 2.5,
                 ...getElevationStyle(2),
                 top: 0

apps/mobile/app/components/ui/reminder-time/index.tsx

@@ -25,6 +25,7 @@ import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { Button, ButtonProps } from "../button";
 import { getFormattedReminderTime } from "@notesnook/common";
 import { Reminder } from "@notesnook/core";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const ReminderTime = ({
   checkIsActive = true,
@@ -69,7 +70,7 @@ export const ReminderTime = ({
         height: "auto",
         borderRadius: defaultBorderRadius,
         borderColor: colors.primary.border,
-        paddingHorizontal: 6,
+        paddingHorizontal: DefaultAppStyles.GAP_SMALL,
         ...(style as ViewStyle)
       }}
       {...props}

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

@@ -21,6 +21,7 @@ import React from "react";
 import { ViewStyle } from "react-native";
 import { AppFontSize } from "../../../utils/size";
 import Paragraph from "../typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export default function Tag({
   text,
@@ -41,10 +42,10 @@ export default function Tag({
       style={{
         backgroundColor: background || colors.primary.accent,
         borderRadius: 100,
-        paddingHorizontal: 4,
+        paddingHorizontal: DefaultAppStyles.GAP_SMALL / 2,
         paddingVertical: 2,
         marginLeft: 2,
-        marginTop: -10,
+        marginTop: -DefaultAppStyles.GAP_VERTICAL,
         height: 20,
         textAlignVertical: "center",
         textAlign: "center",

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

@@ -30,6 +30,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import walkthroughs, { TStep } from "./walkthroughs";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 export const Walkthrough = ({
   steps,
   canSkip = true
@@ -51,7 +52,7 @@ export const Walkthrough = ({
       style={{
         justifyContent: "center",
         alignItems: "center",
-        padding: 12,
+        padding: DefaultAppStyles.GAP,
         paddingBottom: 0
       }}
     >
@@ -74,7 +75,7 @@ export const Walkthrough = ({
         <Button
           style={{
             height: 30,
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
           textStyle={{
             textDecorationLine: "underline"
@@ -91,7 +92,7 @@ export const Walkthrough = ({
         style={{
           borderRadius: 100,
           height: 40,
-          marginTop: 20
+          marginTop: DefaultAppStyles.GAP
         }}
         onPress={async () => {
           switch (step.button?.type) {
@@ -114,7 +115,7 @@ export const Walkthrough = ({
         <Button
           style={{
             height: 30,
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP
           }}
           textStyle={{
             textDecorationLine: "underline"

apps/mobile/app/components/walkthroughs/walkthroughs.tsx

@@ -39,6 +39,7 @@ import Seperator from "../ui/seperator";
 import { SvgView } from "../ui/svg";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export type TStep = {
   text?: string;
@@ -79,7 +80,7 @@ const NotebookWelcome = () => {
     <View
       style={{
         width: "100%",
-        padding: 12,
+        padding: DefaultAppStyles.GAP,
         backgroundColor: colors.secondary.background,
         borderRadius: 10,
         ...getContainerBorder(colors.secondary.background)
@@ -87,12 +88,12 @@ const NotebookWelcome = () => {
     >
       <View
         style={{
-          padding: 12,
+          padding: DefaultAppStyles.GAP,
           width: "100%",
           backgroundColor: colors.primary.background,
           ...getElevationStyle(3),
           borderRadius: 10,
-          marginVertical: 12
+          marginVertical: DefaultAppStyles.GAP
         }}
       >
         <Heading size={AppFontSize.md} color={colors.primary.heading}>
@@ -102,7 +103,7 @@ const NotebookWelcome = () => {
 
         <Paragraph
           style={{
-            marginTop: 5
+            marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
           }}
           size={AppFontSize.xs}
           color={colors.secondary.paragraph}
@@ -134,7 +135,7 @@ const notebooks: { id: string; steps: TStep[] } = {
         <View
           style={{
             width: "100%",
-            padding: 12,
+            padding: DefaultAppStyles.GAP,
             backgroundColor: colors.secondary.background,
             borderRadius: 10,
             ...getContainerBorder(colors.secondary.background)
@@ -142,7 +143,7 @@ const notebooks: { id: string; steps: TStep[] } = {
         >
           <View
             style={{
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               width: "100%",
               backgroundColor: colors.primary.background,
               ...getElevationStyle(3),
@@ -157,7 +158,7 @@ const notebooks: { id: string; steps: TStep[] } = {
 
             <Paragraph
               style={{
-                marginTop: 5
+                marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
               }}
               size={AppFontSize.xs}
               color={colors.secondary.paragraph}
@@ -167,12 +168,12 @@ const notebooks: { id: string; steps: TStep[] } = {
           </View>
           <View
             style={{
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               width: "90%",
               backgroundColor: colors.primary.background,
               borderRadius: 10,
               alignSelf: "flex-end",
-              marginBottom: 10
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <Paragraph color={colors.primary.accent}>
@@ -186,13 +187,13 @@ const notebooks: { id: string; steps: TStep[] } = {
           </View>
           <View
             style={{
-              padding: 12,
-              paddingVertical: 12,
+              padding: DefaultAppStyles.GAP,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL,
               width: "80%",
               backgroundColor: colors.primary.background,
               borderRadius: defaultBorderRadius,
               alignSelf: "flex-end",
-              marginBottom: 10
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <Paragraph size={AppFontSize.xs}>
@@ -206,13 +207,13 @@ const notebooks: { id: string; steps: TStep[] } = {
           </View>
           <View
             style={{
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               width: "80%",
               backgroundColor: colors.primary.background,
               borderRadius: defaultBorderRadius,
-              paddingVertical: 12,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL,
               alignSelf: "flex-end",
-              marginBottom: 10
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <Paragraph size={AppFontSize.xs}>
@@ -226,12 +227,12 @@ const notebooks: { id: string; steps: TStep[] } = {
           </View>
           <View
             style={{
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               width: "90%",
               backgroundColor: colors.primary.background,
               borderRadius: 10,
               alignSelf: "flex-end",
-              marginBottom: 10
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <Paragraph color={colors.primary.accent}>
@@ -257,7 +258,7 @@ const notebooks: { id: string; steps: TStep[] } = {
         <View
           style={{
             paddingHorizontal: 20,
-            paddingVertical: 12
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           {/* <PinItem
@@ -370,7 +371,7 @@ const Support = () => {
       <Button
         style={{
           justifyContent: "flex-start",
-          marginBottom: 10,
+          marginBottom: DefaultAppStyles.GAP_VERTICAL,
           width: "90%"
         }}
         onPress={() => {
@@ -386,7 +387,7 @@ const Support = () => {
       <Button
         style={{
           justifyContent: "flex-start",
-          marginBottom: 10,
+          marginBottom: DefaultAppStyles.GAP_VERTICAL,
           width: "90%"
         }}
         onPress={() => {
@@ -401,7 +402,7 @@ const Support = () => {
       <Button
         style={{
           justifyContent: "flex-start",
-          marginBottom: 10,
+          marginBottom: DefaultAppStyles.GAP_VERTICAL,
           width: "90%"
         }}
         icon="bug"
@@ -411,7 +412,7 @@ const Support = () => {
       <Button
         style={{
           justifyContent: "flex-start",
-          marginBottom: 10,
+          marginBottom: DefaultAppStyles.GAP_VERTICAL,
           width: "90%"
         }}
         icon="mail"

apps/mobile/app/hooks/use-app-events.tsx

@@ -40,7 +40,6 @@ import {
   NativeModules,
   Platform
 } from "react-native";
-import RNBootSplash from "react-native-bootsplash";
 import { checkVersion } from "react-native-check-version";
 import Config from "react-native-config";
 import * as RNIap from "react-native-iap";
@@ -88,7 +87,6 @@ import { refreshAllStores } from "../stores/create-db-collection-store";
 import { useAttachmentStore } from "../stores/use-attachment-store";
 import { useMessageStore } from "../stores/use-message-store";
 import { useSettingStore } from "../stores/use-setting-store";
-import { changeSystemBarColors } from "../stores/use-theme-store";
 import { SyncStatus, useUserStore } from "../stores/use-user-store";
 import { updateStatusBarColor } from "../utils/colors";
 import { BETA } from "../utils/constants";
@@ -391,9 +389,6 @@ const IsDatabaseMigrationRequired = () => {
 const initializeDatabase = async (password?: string) => {
   if (useUserStore.getState().appLocked) return;
   if (!db.isInitialized) {
-    RNBootSplash.hide({ fade: false });
-    changeSystemBarColors();
-
     DatabaseLogger.info("Initializing database");
     try {
       await setupDatabase(password);
@@ -408,11 +403,11 @@ const initializeDatabase = async (password?: string) => {
   if (IsDatabaseMigrationRequired()) return;
 
   if (db.isInitialized) {
+    useSettingStore.getState().setAppLoading(false);
     Notifications.setupReminders(true);
     if (SettingsService.get().notifNotes) {
       Notifications.pinQuickNote(false);
     }
-    useSettingStore.getState().setAppLoading(false);
     DatabaseLogger.info("Database initialized");
   }
   Walkthrough.init();