mobile: update ui

2026-09-02 04:01:43 +02:00 · 2026-05-18 12:21:37 +05:00
parent 0902e0a58e
commit 56ee375ee9
37 changed files with 372 additions and 255 deletions
--- a/apps/mobile/app/common/design/theme.ts
+++ b/apps/mobile/app/common/design/theme.ts
@@ -49,7 +49,7 @@ export const THEME_LIGHT: ThemeDefinition = {
        heading: "#181818",
        icon: "#181818",
        separator: "#F0F0F0",
-        placeholder: "#a9a9a9",
+        placeholder: "#858585",
        hover: "#eee",
        backdrop: "#0000001a",
        buttonForeground: "#FFFFFF"
@@ -63,7 +63,7 @@ export const THEME_LIGHT: ThemeDefinition = {
        heading: "#4B4B4B",
        icon: "#666666",
        separator: "#E8E8E8",
-        placeholder: "#a9a9a9",
+        placeholder: "#999999",
        hover: "#dbdbdb",
        backdrop: "#0000001a",
        buttonForeground: "#181818"
@@ -101,7 +101,7 @@ export const THEME_LIGHT: ThemeDefinition = {
        background: "#00883610",
        border: "#008836",
        heading: "#212121",
-        icon: "#FFFFFF",
+        icon: "#181818",
        separator: "#E8E8E8",
        placeholder: "#a9a9a9",
        hover: "#eee",
@@ -146,13 +146,18 @@ export const THEME_LIGHT: ThemeDefinition = {
      },
      secondary: { background: "#EEEEEE" },
      selected: {
-        background: "#ddd",
+        background: "#00883610",
        hover: "#eee"
      }
    },
    contextMenu: { primary: { background: "#f7f7f7" } },
    editor: { selected: { background: "#e1e1e1" } },
-    sheet: { selected: { paragraph: "#008836" } }
+    sheet: { selected: { paragraph: "#008836" } },
+    list: {
+      secondary: {
+        heading: "#A6A6A6"
+      }
+    }
  }
 };

--- a/apps/mobile/app/components/auth/login.tsx
+++ b/apps/mobile/app/components/auth/login.tsx
@@ -238,6 +238,9 @@ export const Login = ({
                fontFamily="REGULAR"
                fontSize={AppFontSize.sm}
                type="plain"
+                textStyle={{
+                  color: colors.secondary.paragraph
+                }}
              />

              <View
@@ -322,7 +325,8 @@ export const Login = ({
            <TwoFactorVerification
              onMfaLogin={async (
                mfa: any,
-                callback: (success: boolean) => void
+                callback: (success: boolean) => void,
+                onerror: (error: Error) => void
              ) => {
                try {
                  const success = await db.user.authenticateMultiFactorCode(
@@ -342,6 +346,8 @@ export const Login = ({
                  if ((e as Error).message === "invalid_grant") {
                    setLoading(false);
                    setStep(LoginSteps.emailAuth);
+                  } else {
+                    onerror(e as Error);
                  }
                }
              }}
--- a/apps/mobile/app/components/auth/two-factor.tsx
+++ b/apps/mobile/app/components/auth/two-factor.tsx
@@ -158,6 +158,7 @@ const TwoFactorVerification = ({
      setSending(false);
    } catch (e) {
      setSending(false);
+      console.log("error e");
      setError(
        new Error(`Error sending 2FA Code. Tap "Send code" to try again `)
      );
@@ -268,7 +269,9 @@ const TwoFactorVerification = ({
                style={{
                  textAlign: "center",
                  marginVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
-                  maxWidth: 250
+                  maxWidth: 250,
+                  alignSelf: "center",
+                  marginTop: -10
                }}
              >
                <AppIcon
--- a/apps/mobile/app/components/dialog/dialog-buttons.tsx
+++ b/apps/mobile/app/components/dialog/dialog-buttons.tsx
@@ -57,7 +57,7 @@ const DialogButtons = ({
    >
      <Button
        onPress={onPressNegative}
-        fontSize={AppFontSize.sm}
+        fontSize={AppFontSize.md}
        testID={notesnook.ids.default.dialog.no}
        type="plain-outline"
        style={{
@@ -68,7 +68,7 @@ const DialogButtons = ({
      {onPressPositive ? (
        <Button
          onPress={onPressPositive}
-          fontSize={AppFontSize.sm}
+          fontSize={AppFontSize.md}
          testID={notesnook.ids.default.dialog.yes}
          style={{
            width: "48.5%"
--- a/apps/mobile/app/components/list-items/headers/section-header.tsx
+++ b/apps/mobile/app/components/list-items/headers/section-header.tsx
@@ -71,7 +71,7 @@ export const SectionHeader = React.memo<
    data,
    ref
  }: SectionHeaderProps) {
-    const { colors } = useThemeColors();
+    const { colors } = useThemeColors("list");
    const isCompactModeEnabled = useIsCompactModeEnabled(
      dataType as "note" | "notebook" | "searchResult"
    );
@@ -100,13 +100,13 @@ export const SectionHeader = React.memo<
              alignSelf: "center",
              textAlignVertical: "center"
            }}
-            color={colors.secondary.paragraph}
+            color={colors.secondary.heading}
          >
            {!item.title || item.title === ""
              ? screen === "Search"
                ? strings.results(itemCount || 0)
-                : strings.pinned().toUpperCase()
-              : item.title.toUpperCase()}
+                : strings.pinned()
+              : item.title}
          </Paragraph>

          <View
--- a/apps/mobile/app/components/list-items/note/index.tsx
+++ b/apps/mobile/app/components/list-items/note/index.tsx
@@ -152,7 +152,7 @@ const NoteItem = ({
    {
      condition: item.favorite,
      testID: "star-filled",
-      name: "star-outline",
+      name: "star-filled",
      color: "orange"
    }
  ];
@@ -163,7 +163,7 @@ const NoteItem = ({
        style={{
          flexGrow: 1,
          flexShrink: 1,
-          gap: Spacing.LEVEL_1
+          gap: compactMode ? undefined : Spacing.LEVEL_1
        }}
      >
        {compactMode ? null : (
@@ -219,13 +219,10 @@ const NoteItem = ({
                    <AppIcon
                      name="link"
                      iconFamily="notesnook"
-                      size={AppFontSize.sm}
-                      color={primaryColors.icon}
+                      size={12}
+                      color={colors.secondary.icon}
                    />
-                    <Paragraph
-                      color={colors.secondary.paragraph}
-                      size={AppFontSize.xxs}
-                    >
+                    <Paragraph color={colors.secondary.paragraph} fontSize="XS">
                      {attachmentsCount}
                    </Paragraph>
                  </View>
@@ -362,7 +359,7 @@ const NoteItem = ({
            gap: Spacing.LEVEL_1
          }}
        >
-          {color ? (
+          {color && !compactMode ? (
            <View
              style={{
                width: 8,
@@ -392,21 +389,83 @@ const NoteItem = ({
              {item.title}
            </Heading>

-            <IconButton
-              testID={notesnook.listitem.menu}
-              color={colors.secondary.icon}
-              name="dots-three"
-              iconFamily="notesnook"
-              size={20}
-              onPress={() => !noOpen && Properties.present(item)}
+            <View
              style={{
-                justifyContent: "center",
-                height: undefined,
-                width: undefined,
-                borderRadius: 100,
-                alignItems: "center"
+                flexDirection: "row",
+                alignItems: "center",
+                gap: Spacing.LEVEL_1
              }}
-            />
+            >
+              {color ? (
+                <View
+                  style={{
+                    width: 8,
+                    height: 8,
+                    borderRadius: 100,
+                    backgroundColor: color?.colorCode
+                  }}
+                />
+              ) : null}
+
+              {compactMode ? (
+                <>
+                  {item.conflicted ? (
+                    <AppIcon
+                      name="warning-circle"
+                      size={12}
+                      iconFamily="notesnook"
+                      color={colors.error.accent}
+                    />
+                  ) : null}
+
+                  {locked ? (
+                    <AppIcon
+                      name="lock"
+                      testID="lock"
+                      iconFamily="notesnook"
+                      size={12}
+                      color={primaryColors.icon}
+                    />
+                  ) : null}
+
+                  {item.favorite ? (
+                    <AppIcon
+                      testID="icon-star"
+                      name="star-filled"
+                      iconFamily="notesnook"
+                      size={12}
+                      color={colors.static.orange}
+                    />
+                  ) : null}
+
+                  <TimeSince
+                    style={{
+                      fontSize: AppFontSize.xs,
+                      color: colors.secondary.paragraph,
+                      marginRight: 6
+                    }}
+                    time={date}
+                    updateFrequency={Date.now() - date < 60000 ? 2000 : 60000}
+                  />
+                </>
+              ) : null}
+
+              <IconButton
+                testID={notesnook.listitem.menu}
+                color={colors.secondary.icon}
+                name="dots-three"
+                iconFamily="notesnook"
+                size={20}
+                onPress={() => !noOpen && Properties.present(item)}
+                style={{
+                  justifyContent: "center",
+                  height: undefined,
+                  width: undefined,
+                  borderRadius: 100,
+                  alignItems: "center"
+                }}
+              />
+            </View>
          </View>
        </View>

@@ -433,11 +492,16 @@ const NoteItem = ({
          {compactMode ? null : (
            <View
              style={{
-                gap: Spacing.LEVEL_0,
+                gap: Spacing.LEVEL_0 + 2,
                flexDirection: "row"
              }}
            >
-              <AppIcon size={13} name="calendar" iconFamily="notesnook" />
+              <AppIcon
+                color={colors.secondary.icon}
+                size={13}
+                name="calendar"
+                iconFamily="notesnook"
+              />
              <Paragraph
                style={{
                  fontSize: AppFontSize.xs,
@@ -495,55 +559,6 @@ const NoteItem = ({
          alignItems: "center"
        }}
      >
-        {compactMode ? (
-          <>
-            {item.conflicted ? (
-              <AppIcon
-                name="alert-circle"
-                style={{
-                  marginRight: 6
-                }}
-                size={AppFontSize.sm}
-                color={colors.error.accent}
-              />
-            ) : null}
-
-            {locked ? (
-              <AppIcon
-                name="lock"
-                testID="note-locked-icon"
-                size={AppFontSize.sm}
-                style={{
-                  marginRight: 6
-                }}
-                color={primaryColors.icon}
-              />
-            ) : null}
-
-            {item.favorite ? (
-              <AppIcon
-                testID="icon-star"
-                name="star-outline"
-                size={AppFontSize.sm}
-                style={{
-                  marginRight: 6
-                }}
-                color={colors.static.orange}
-              />
-            ) : null}
-
-            <TimeSince
-              style={{
-                fontSize: AppFontSize.xxs,
-                color: colors.secondary.paragraph,
-                marginRight: 6
-              }}
-              time={date}
-              updateFrequency={Date.now() - date < 60000 ? 2000 : 60000}
-            />
-          </>
-        ) : null}
-
        {selectionMode === "note" || selectionMode === "trash" ? (
          <>
            <View
--- a/apps/mobile/app/components/list-items/selection-wrapper/index.tsx
+++ b/apps/mobile/app/components/list-items/selection-wrapper/index.tsx
@@ -73,7 +73,7 @@ const SelectionWrapper = ({
  return (
    <View
      style={{
-        paddingHorizontal: Spacing.LEVEL_3,
+        // paddingHorizontal: Spacing.LEVEL_3,
        backgroundColor: isEditingNote ? colors.selected.background : undefined
      }}
    >
@@ -83,23 +83,36 @@ const SelectionWrapper = ({
        onLongPress={onLongPress}
        onPress={onPress}
        customSelectedColor={colors.primary.hover}
+        noborder
        customAlpha={!isDark ? -0.02 : 0.02}
        customOpacity={1}
        style={{
-          flexDirection: "row",
          width: "100%",
          alignSelf: "center",
          overflow: "hidden",
+          paddingHorizontal: Spacing.LEVEL_3,
          borderRadius: 0,
-          marginTop: hasGroupHeader ? 0 : Spacing.LEVEL_3,
-          borderBottomWidth: 1,
-          borderBottomColor: colors.primary.border,
          alignItems: "flex-start",
-          paddingVertical: Spacing.LEVEL_2,
-          paddingTop: hasGroupHeader ? 0 : Spacing.LEVEL_2
+          // paddingVertical: Spacing.LEVEL_2,
+          paddingTop: Spacing.LEVEL_2
        }}
      >
-        {children}
+        <View
+          style={{
+            width: "100%",
+            flexDirection: "row"
+          }}
+        >
+          {children}
+        </View>
+        <View
+          style={{
+            marginTop: Spacing.LEVEL_2,
+            borderBottomWidth: 1,
+            borderBottomColor: colors.primary.border,
+            width: "100%"
+          }}
+        />
      </Pressable>
    </View>
  );
--- a/apps/mobile/app/components/list/card.tsx
+++ b/apps/mobile/app/components/list/card.tsx
@@ -96,7 +96,8 @@ export const Card = ({

          <View
            style={{
-              gap: Spacing.LEVEL_0
+              gap: Spacing.LEVEL_0,
+              flexShrink: 1
            }}
          >
            <Heading
--- a/apps/mobile/app/components/list/empty.tsx
+++ b/apps/mobile/app/components/list/empty.tsx
@@ -21,13 +21,10 @@ import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { ActivityIndicator, View } from "react-native";
 import { notesnook } from "../../../e2e/test.ids";
-import { TTip, useTip } from "../../services/tip-manager";
+import { Spacing } from "../../common/design/spacing";
 import { RouteParams } from "../../stores/use-navigation-store";
-import { useSettingStore } from "../../stores/use-setting-store";
 import { AppFontSize } from "../../utils/size";
-import { Tip } from "../tip";
 import { Button } from "../ui/button";
-import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";

@@ -58,22 +55,13 @@ export const Empty = React.memo(function Empty({
  screen
 }: EmptyListProps) {
  const { colors } = useThemeColors();
-  const introCompleted = useSettingStore(
-    (state) => state.settings.introCompleted
-  );
-  const tip = useTip(
-    screen === "Notes" && introCompleted
-      ? "first-note"
-      : placeholder?.type || ((dataType + "s") as any),
-    screen === "Notes" ? "notes" : "list"
-  );

  return (
    <View
      style={[
        {
          flex: 1,
-          width: "80%",
+          width: "100%",
          justifyContent: "center",
          alignSelf: "center"
        }
@@ -81,50 +69,53 @@ export const Empty = React.memo(function Empty({
    >
      {!loading ? (
        <>
-          <Tip
-            color={color}
-            tip={
-              screen !== "Search"
-                ? tip || ({ text: () => placeholder?.paragraph } as TTip)
-                : ({ text: () => placeholder?.paragraph } as TTip)
-            }
+          <View
            style={{
-              backgroundColor: "transparent",
-              paddingHorizontal: 0
+              alignItems: "center",
+              gap: Spacing.LEVEL_1
            }}
-          />
-          {placeholder?.button && (
-            <Button
-              testID={notesnook.buttons.add}
-              type="secondaryAccented"
-              title={placeholder?.button}
-              iconPosition="right"
-              icon="arrow-right"
-              onPress={placeholder?.action}
+          >
+            <Heading size={AppFontSize.md} color={colors.primary.heading}>
+              {placeholder?.title}
+            </Heading>
+            <Paragraph
              style={{
-                alignSelf: "flex-start"
+                textAlign: "center",
+                marginBottom: Spacing.LEVEL_2,
+                maxWidth: "80%"
              }}
-            />
-          )}
+              fontSize="SM"
+              color={colors.primary.paragraph}
+            >
+              {placeholder?.paragraph}
+            </Paragraph>
+
+            {placeholder?.button && (
+              <Button
+                testID={notesnook.buttons.add}
+                type="accent"
+                title={placeholder?.button}
+                iconPosition="right"
+                onPress={placeholder?.action}
+              />
+            )}
+          </View>
        </>
      ) : (
        <>
          <View
            style={{
              alignSelf: "center",
-              alignItems: "flex-start",
-              width: "100%"
+              alignItems: "center",
+              width: "100%",
+              gap: Spacing.LEVEL_2
            }}
          >
-            <Heading>{placeholder?.title}</Heading>
-            <Paragraph size={AppFontSize.sm} textBreakStrategy="balanced">
-              {placeholder?.loading}
-            </Paragraph>
-            <Seperator />
            <ActivityIndicator
              size={AppFontSize.lg}
              color={color || colors.primary.accent}
            />
+            <Paragraph>{placeholder?.loading}</Paragraph>
          </View>
        </>
      )}
--- a/apps/mobile/app/components/paywall/compare-plans.tsx
+++ b/apps/mobile/app/components/paywall/compare-plans.tsx
@@ -30,6 +30,7 @@ import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { Steps } from "./common";
+import { Spacing } from "../../common/design/spacing";

 export const ComparePlans = React.memo(
  (props: {
@@ -44,7 +45,8 @@ export const ComparePlans = React.memo(
      <ScrollView
        horizontal
        style={{
-          width: isTablet ? "100%" : undefined
+          width: isTablet ? "100%" : undefined,
+          paddingLeft: Spacing.LEVEL_3
        }}
        contentContainerStyle={{
          flexDirection: "column"
@@ -124,11 +126,9 @@ export const ComparePlans = React.memo(
                              name="check"
                            />
                          ) : (
-                            <Icon
-                              size={AppFontSize.sm}
-                              color={colors.static.red}
-                              name="close"
-                            />
+                            <Paragraph color={colors.secondary.paragraph}>
+                              -
+                            </Paragraph>
                          )}
                        </>
                      ) : null}
--- a/apps/mobile/app/components/paywall/index.tsx
+++ b/apps/mobile/app/components/paywall/index.tsx
@@ -230,11 +230,11 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
        <View
          style={{
            height: 50,
-            justifyContent: "flex-start",
-            flexShrink: 1,
-            flexGrow: 1,
+            justifyContent: "space-between",
            flexDirection: "row",
-            paddingHorizontal: DefaultAppStyles.GAP
+            paddingHorizontal: DefaultAppStyles.GAP,
+            width: "100%",
+            alignItems: "center"
          }}
        >
          <IconButton
@@ -244,33 +244,35 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
            color={colors.primary.icon}
            size={18}
            onPress={() => {
-              Navigation.navigate("FluidPanelsView", {});
+              if (step === Steps.buy) {
+                setStep(Steps.select);
+                return;
+              }
+              if (routeParams.context === "signup") {
+                Navigation.navigate("FluidPanelsView", {});
+              } else {
+                Navigation.goBack();
+              }
+            }}
+          />
+
+          <Heading size={AppFontSize.xl}>
+            {step === Steps.buy || step === Steps.buyWeb
+              ? pricingPlans.userCanRequestTrial
+                ? strings.tryPlanForFree(
+                    pricingPlans.currentPlan?.name as string
+                  )
+                : strings.plan(pricingPlans.currentPlan?.name as string)
+              : ""}
+          </Heading>
+
+          <View
+            style={{
+              width: 18,
+              height: 18
            }}
          />
        </View>
-        // <Header
-        //   canGoBack={true}
-        //   onLeftMenuButtonPress={() => {
-        //     if (step === Steps.buy) {
-        //       setStep(Steps.select);
-        //       return;
-        //     }
-        //     if (routeParams.context === "signup") {
-        //       Navigation.navigate("FluidPanelsView", {});
-        //     } else {
-        //       Navigation.goBack();
-        //     }
-        //   }}
-        //   title={
-        //     step === Steps.buy || step === Steps.buyWeb
-        //       ? pricingPlans.userCanRequestTrial
-        //         ? strings.tryPlanForFree(
-        //             pricingPlans.currentPlan?.name as string
-        //           )
-        //         : strings.plan(pricingPlans.currentPlan?.name as string)
-        //       : ""
-        //   }
-        // />
      )}

      {step === Steps.select ? (
@@ -299,13 +301,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
                  alignItems: "center"
                }}
              >
-                <Heading
-                  key="heading"
-                  size={AppFontSize.xl}
-                  style={{
-                    alignSelf: "center"
-                  }}
-                >
+                <Heading key="heading" fontSize="XL" lineHeight="100%">
                  {pricingPlans.isSubscribed()
                    ? strings.changePlan()
                    : strings.notesnookPlans[0]() + " "}
@@ -315,7 +311,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
                </Heading>
              </View>

-              <Paragraph key="description" size={AppFontSize.md}>
+              <Paragraph key="description" fontSize="SM">
                {strings.readyToTakeNextStep()}
              </Paragraph>
            </View>
@@ -382,7 +378,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
                  <View
                    style={{
                      borderRadius: 100,
-                      backgroundColor: colors.primary.accent,
+                      backgroundColor: colors.secondary.accent,
                      padding: Spacing.LEVEL_0
                    }}
                  >
@@ -497,7 +493,8 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
                    paddingHorizontal: Spacing.LEVEL_2,
                    borderRadius: Radius.XS,
                    alignItems: "center",
-                    justifyContent: "center"
+                    justifyContent: "center",
+                    minWidth: 100
                  }}
                >
                  <SvgView
@@ -528,6 +525,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
                contentContainerStyle={{
                  gap: Spacing.LEVEL_3
                }}
+                showsHorizontalScrollIndicator={false}
                horizontal
                pagingEnabled
                snapToOffsets={[0, width - 50, width * 2 - 100]}
--- a/apps/mobile/app/components/paywall/plan-card.tsx
+++ b/apps/mobile/app/components/paywall/plan-card.tsx
@@ -162,7 +162,7 @@ export const PricingPlanCard = ({
                {plan.recommended ? (
                  <View
                    style={{
-                      backgroundColor: colors.static.orange,
+                      backgroundColor: colors.static.red,
                      borderRadius: 100,
                      padding: Spacing.LEVEL_0,
                      paddingHorizontal: Spacing.LEVEL_1
@@ -170,7 +170,7 @@ export const PricingPlanCard = ({
                  >
                    <Text
                      style={{
-                        color: colors.static.black,
+                        color: colors.static.white,
                        fontSize: AppFontSize.xxs
                      }}
                    >
@@ -257,6 +257,7 @@ export const PricingPlanCard = ({
                          ? "file"
                          : "image-outline"
                    }
+                    iconFamily="notesnook"
                    size={AppFontSize.lg}
                  />
                  <Paragraph size={AppFontSize.sm}>
@@ -278,7 +279,7 @@ export const PricingPlanCard = ({

        <Button
          title={strings.selectPlan()}
-          type={plan.id === "pro" ? "accent" : "secondary"}
+          type={plan.id === "pro" ? "accent" : "tertiary"}
          style={{
            width: "100%"
          }}
--- a/apps/mobile/app/components/sheets/add-notebook/index.tsx
+++ b/apps/mobile/app/components/sheets/add-notebook/index.tsx
@@ -31,16 +31,18 @@ import { useNotebookStore } from "../../../stores/use-notebook-store";
 import { useRelationStore } from "../../../stores/use-relation-store";
 import { eOnNotebookUpdated } from "../../../utils/events";
 import { getParentNotebookId } from "../../../utils/notebooks";
-import Input from "../../ui/input";
 import { useSettingStore } from "../../../stores/use-setting-store";
 import DialogHeader from "../../dialog/dialog-header";
 import DialogButtons from "../../dialog/dialog-buttons";
 import { presentDialog } from "../../dialog/functions";
 import { getElevationStyle } from "../../../utils/elevation";
-import { defaultBorderRadius } from "../../../utils/size";
 import { useThemeColors } from "@notesnook/theme";
 import { getContainerBorder } from "../../../utils/colors";
 import { Radius, Spacing } from "../../../common/design/spacing";
+import FormInput, {
+  createFormRef,
+  validators
+} from "../../ui/input/form-input";

 export const AddNotebookSheet = ({
  notebook,
@@ -56,29 +58,28 @@ export const AddNotebookSheet = ({
  defaultTitle?: string;
 }) => {
  const { colors } = useThemeColors();
-  const title = useRef(notebook?.title || defaultTitle);
-  const description = useRef(notebook?.description);
  const titleInput = useRef<TextInput>(null);
  const descriptionInput = useRef<TextInput>(null);
  const [loading, setLoading] = useState(false);
+  const formRef = useRef(
+    createFormRef({
+      title: notebook?.title || defaultTitle || "",
+      description: notebook?.description || ""
+    })
+  );

  const onSaveChanges = async () => {
    if (loading) return;

-    if (!title.current || title?.current.trim().length === 0) {
-      ToastManager.show({
-        heading: strings.enterNotebookTitle(),
-        type: "error",
-        context: "local"
-      });
-      return;
-    }
+    if (!formRef.current?.validate()) return;

    setLoading(true);

+    const values = formRef.current.getValues();
+
    const id = await db.notebooks.add({
-      title: title.current,
-      description: description.current,
+      title: values.title,
+      description: values.description,
      id: notebook?.id
    });

@@ -151,33 +152,34 @@ export const AddNotebookSheet = ({
            gap: Spacing.LEVEL_2
          }}
        >
-          <Input
+          <FormInput
            fwdRef={titleInput}
+            name="title"
+            formRef={formRef}
            testID={notesnook.ids.dialogs.notebook.inputs.title}
-            onChangeText={(value) => {
-              title.current = value;
-            }}
            onLayout={() => {
              setTimeout(() => {
                titleInput?.current?.focus();
              }, 300);
            }}
+            validators={[validators.required(strings.titleIsRequired())]}
            placeholder={"eg. My Notebook"}
-            onSubmit={() => {
+            onSubmitEditing={() => {
              descriptionInput.current?.focus();
            }}
            label={strings.enterNotebookTitle()}
            returnKeyLabel="Next"
            returnKeyType="next"
-            defaultValue={notebook ? notebook.title : title.current}
+            defaultValue={
+              notebook ? notebook.title : formRef.current.getValue("title")
+            }
          />

-          <Input
+          <FormInput
            fwdRef={descriptionInput}
+            name="description"
+            formRef={formRef}
            testID={notesnook.ids.dialogs.notebook.inputs.description}
-            onChangeText={(value) => {
-              description.current = value;
-            }}
            label={strings.enterNotebookDescription()}
            placeholder={"eg. This is My Notebook"}
            returnKeyLabel={strings.next()}
@@ -188,7 +190,6 @@ export const AddNotebookSheet = ({
      </View>
      <DialogButtons
        onPressNegative={() => {
-          title.current = undefined;
          close?.(false);
          useSettingStore.getState().setSheetKeyboardHandler(true);
        }}
--- a/apps/mobile/app/components/sheets/buy-plan/index.tsx
+++ b/apps/mobile/app/components/sheets/buy-plan/index.tsx
@@ -111,6 +111,9 @@ export const BuyPlan = (props: {
        contentContainerStyle={{
          paddingVertical: Spacing.LEVEL_4
        }}
+        style={{
+          flex: 1
+        }}
        keyboardDismissMode="none"
        keyboardShouldPersistTaps="always"
      >
@@ -151,7 +154,7 @@ export const BuyPlan = (props: {
          <Paragraph
            fontFamily="MEDIUM"
            fontSize="MD"
-            color={colors.secondary.paragraph}
+            color={colors.secondary.heading}
          >
            {strings.paymentSummary()}
          </Paragraph>
@@ -257,7 +260,7 @@ export const BuyPlan = (props: {
          <Paragraph
            fontFamily="MEDIUM"
            fontSize="MD"
-            color={colors.secondary.paragraph}
+            color={colors.secondary.heading}
          >
            {strings.whatsIncluded()}
          </Paragraph>
@@ -270,7 +273,8 @@ export const BuyPlan = (props: {
              padding: Spacing.LEVEL_3,
              borderRadius: Radius.S,
              backgroundColor: colors.secondary.background,
-              marginBottom: 27
+              marginBottom: 27,
+              flex: 1
            }}
          >
            {[
--- a/apps/mobile/app/components/sheets/sort/index.tsx
+++ b/apps/mobile/app/components/sheets/sort/index.tsx
@@ -125,15 +125,6 @@ const Sort = ({
    }, 1);
  };

-  const setOrderBy = async () => {
-    const _groupOptions: GroupOptions = {
-      ...groupOptions,
-      sortDirection: groupOptions?.sortDirection === "asc" ? "desc" : "asc"
-    };
-
-    await updateGroupOptions(_groupOptions);
-  };
-
  useEffect(() => {
    data?.groups?.().then((groups) => {
      setGroups(groups);
@@ -305,6 +296,13 @@ const Sort = ({
                        : "plain"
                    }
                    title={getSortButtonTitle("desc")}
+                    onPress={() => {
+                      const _groupOptions: GroupOptions = {
+                        ...groupOptions,
+                        sortDirection: "desc"
+                      };
+                      updateGroupOptions(_groupOptions);
+                    }}
                  />

                  <Button
@@ -321,6 +319,13 @@ const Sort = ({
                        : "plain"
                    }
                    title={getSortButtonTitle("asc")}
+                    onPress={() => {
+                      const _groupOptions: GroupOptions = {
+                        ...groupOptions,
+                        sortDirection: "asc"
+                      };
+                      updateGroupOptions(_groupOptions);
+                    }}
                  />
                </View>
              ) : null}
--- a/apps/mobile/app/components/side-menu/index.tsx
+++ b/apps/mobile/app/components/side-menu/index.tsx
@@ -488,7 +488,7 @@ const TabBar = (props: SimpleTabBarProps) => {
                      <TabBarButton
                        icon={isDark ? "dark-mode-outline" : "sun"}
                        testID="sidebar-theme-button"
-                        label={isDark ? "Dark" : "Light"}
+                        label={isDark ? "Dark Mode" : "Light Mode"}
                        onPress={() => {
                          useThemeStore.getState().setColorScheme();
                        }}
--- a/apps/mobile/app/components/side-menu/menu-item.tsx
+++ b/apps/mobile/app/components/side-menu/menu-item.tsx
@@ -176,7 +176,7 @@ export function MenuItem({
              item.icon === "crown"
                ? colors.static.yellow
                : isFocused
-                  ? colors.selected.icon
+                  ? colors.primary.icon
                  : colors.secondary.icon
            }
            size={AppFontSize.md}
--- a/apps/mobile/app/components/side-menu/notebook-item.tsx
+++ b/apps/mobile/app/components/side-menu/notebook-item.tsx
@@ -232,7 +232,11 @@ export const NotebookItem = ({
                name={selected ? "checkbox" : "box-empty"}
                iconFamily="notesnook"
                size={AppFontSize.md}
-                color={selected ? colors.selected.icon : colors.primary.icon}
+                color={
+                  selected
+                    ? [colors.selected.accent, colors.selected.accentForeground]
+                    : colors.primary.icon
+                }
              />
            </View>
          ) : (
--- a/apps/mobile/app/components/side-menu/side-menu-list-empty.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-list-empty.tsx
@@ -47,7 +47,7 @@ export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
      <View
        style={{
          backgroundColor: colors.primary.background,
-          paddingTop: DefaultAppStyles.GAP_VERTICAL
+          paddingTop: Spacing.LEVEL_1
        }}
      >
        <SideMenuHeader />
@@ -88,7 +88,7 @@ export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
              gap: Spacing.LEVEL_1
            }}
          >
-            <Heading size={AppFontSize.md} color={colors.secondary.paragraph}>
+            <Heading size={AppFontSize.md} color={colors.primary.heading}>
              {props.placeholderTitle}
            </Heading>
            <Paragraph
@@ -97,7 +97,7 @@ export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
                maxWidth: "60%"
              }}
              fontSize="SM"
-              color={colors.secondary.paragraph}
+              color={colors.primary.paragraph}
            >
              {props.placeholderBody}
            </Paragraph>
@@ -111,8 +111,7 @@ export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
                paddingVertical: Spacing.LEVEL_2,
                paddingHorizontal: Spacing.LEVEL_2
              }}
-              type="accent-outline"
-              icon="plus"
+              type="accent"
            />
          </View>
        )}
--- a/apps/mobile/app/components/side-menu/side-menu-notebooks.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-notebooks.tsx
@@ -189,7 +189,7 @@ export const SideMenuNotebooks = () => {
                placeholder={strings.filterNotebooks()}
                style={{
                  fontFamily: "Inter-Regular",
-                  fontSize: AppFontSize.xs,
+                  fontSize: AppFontSize.sm,
                  paddingTop: 0,
                  paddingBottom: 0
                }}
--- a/apps/mobile/app/components/side-menu/side-menu-tags.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-tags.tsx
@@ -329,7 +329,7 @@ export const SideMenuTags = () => {
                placeholder={strings.filterTags()}
                style={{
                  fontFamily: "Inter-Regular",
-                  fontSize: AppFontSize.xs,
+                  fontSize: AppFontSize.sm,
                  paddingTop: 0,
                  paddingBottom: 0
                }}
@@ -345,7 +345,7 @@ export const SideMenuTags = () => {
                    }
                  }, 100);
                }}
-                placeholderTextColor={colors.primary.placeholder}
+                placeholderTextColor={colors.secondary.placeholder}
              />

              <AppIcon name="funnel" size={14} iconFamily="notesnook" />
--- a/apps/mobile/app/components/side-menu/tab-bar-button.tsx
+++ b/apps/mobile/app/components/side-menu/tab-bar-button.tsx
@@ -96,13 +96,17 @@ export const TabBarButton = ({
        <AppIcon
          name={icon}
          iconFamily="notesnook"
-          color={isActive ? colors.selected.icon : colors.primary.icon}
+          color={isActive ? colors.primary.icon : colors.secondary.icon}
          size={16}
        />
      </Animated.View>

      {label && (
-        <Paragraph fontFamily={isActive ? "MEDIUM" : "REGULAR"} fontSize={"XS"}>
+        <Paragraph
+          color={isActive ? colors.primary.heading : colors.secondary.heading}
+          fontFamily={isActive ? "MEDIUM" : "REGULAR"}
+          fontSize={"XS"}
+        >
          {label}
        </Paragraph>
      )}
--- a/apps/mobile/app/components/ui/input/form-input.tsx
+++ b/apps/mobile/app/components/ui/input/form-input.tsx
@@ -291,12 +291,13 @@ export function FormInput({
  const borderColor = useMemo(() => {
    if (fieldError) return colors.error.border;
    if (focused) return customColor || colors.selected.border;
-    return colors.primary.border;
+    return "transparent";
  }, [colors, customColor, fieldError, focused]);

  const style: ViewStyle = {
    borderWidth: 1,
    borderRadius: defaultBorderRadius,
+    backgroundColor: colors.secondary.background,
    borderColor: borderColor,
    flexDirection: "row",
    justifyContent: "space-between",
--- a/apps/mobile/app/components/ui/pressable/index.tsx
+++ b/apps/mobile/app/components/ui/pressable/index.tsx
@@ -56,6 +56,7 @@ type ButtonTypes =
  | "accent"
  | "shade"
  | "secondary"
+  | "tertiary"
  | "selectedAccent"
  | "secondaryAccented"
  | "inverted"
@@ -86,7 +87,7 @@ const buttonTypes = (
 } => ({
  plain: {
    primary: "transparent",
-    text: colors.primary.buttonForeground,
+    text: colors.secondary.buttonForeground,
    selected: colors.primary.hover,
    borderWidth: 0.8,
    borderSelectedColor: getColorLinearShade(
@@ -97,7 +98,7 @@ const buttonTypes = (
  },
  "plain-outline": {
    primary: "transparent",
-    text: colors.primary.buttonForeground,
+    text: colors.secondary.buttonForeground,
    selected: colors.primary.hover,
    borderWidth: 1,
    borderColor: colors.primary.border,
@@ -116,7 +117,19 @@ const buttonTypes = (
  },
  secondary: {
    primary: colors.secondary.background,
-    text: colors.primary.buttonForeground,
+    text: colors.secondary.buttonForeground,
+    selected: colors.secondary.background,
+    borderWidth: 0.8,
+    borderColor: getColorLinearShade(colors.secondary.background, 0.05, isDark),
+    borderSelectedColor: getColorLinearShade(
+      colors.selected.background,
+      0.05,
+      isDark
+    )
+  },
+  tertiary: {
+    primary: colors.tertiary.background,
+    text: colors.secondary.buttonForeground,
    selected: colors.secondary.background,
    borderWidth: 0.8,
    borderColor: getColorLinearShade(colors.secondary.background, 0.05, isDark),
--- a/apps/mobile/app/screens/home/index.tsx
+++ b/apps/mobile/app/screens/home/index.tsx
@@ -78,9 +78,9 @@ export const Home = ({ navigation, route }: NavigationProps<"Notes">) => {
          loading={loading || !isFocused}
          headerTitle={strings.routes[route.name]()}
          placeholder={{
-            title: route.name?.toLowerCase(),
-            paragraph: strings.notesEmpty(),
-            button: strings.createNewNote(),
+            title: strings.notePlaceholder.title(),
+            paragraph: strings.notePlaceholder.description(),
+            button: strings.notePlaceholder.button(),
            action: openEditor,
            loading: strings.loadingNotes()
          }}
--- a/apps/mobile/app/services/settings.ts
+++ b/apps/mobile/app/services/settings.ts
@@ -28,6 +28,7 @@ import { NotesnookModule } from "../utils/notesnook-module";
 import { scale } from "../utils/size";
 import { useUserStore } from "../stores/use-user-store";
 import ScreenGuardModule from "react-native-screenguard";
+import { THEME_DARK, THEME_LIGHT } from "../common/design/theme";

 let isScreenGuardModuleReady = false;
 async function callScreenGuard(callback: () => void) {
@@ -123,7 +124,9 @@ function init() {
    migrateSettings(settingsParsed);
    settings = {
      ...settings,
-      ...settingsParsed
+      ...settingsParsed,
+      darkTheme: THEME_DARK,
+      lighTheme: THEME_LIGHT
    };
  }
  if (settings.fontScale) {
--- a/apps/mobile/app/stores/use-theme-store.ts
+++ b/apps/mobile/app/stores/use-theme-store.ts
@@ -24,6 +24,7 @@ import SettingsService from "../services/settings";
 import switchTheme from "react-native-theme-switch-animation";

 import changeNavigationBarColor from "react-native-navigation-bar-color";
+import { THEME_DARK, THEME_LIGHT } from "../common/design/theme";
 export interface ThemeStore {
  lightTheme: ThemeDefinition;
  darkTheme: ThemeDefinition;
@@ -70,8 +71,8 @@ function switchThemeWithAnimation(fn: () => void) {
 }

 export const useThemeStore = create<ThemeStore>((set, get) => ({
-  lightTheme: SettingsService.get().lighTheme,
-  darkTheme: SettingsService.get().darkTheme,
+  lightTheme: THEME_LIGHT,
+  darkTheme: THEME_DARK,
  colorScheme: SettingsService.get().useSystemTheme
    ? (Appearance.getColorScheme() as "dark" | "light")
    : SettingsService.get().colorScheme,
--- a/apps/mobile/fonts/notesnook-icons.glyphmap.json
+++ b/apps/mobile/fonts/notesnook-icons.glyphmap.json
@@ -1 +1 @@
-{"m":{"f":"notesnook-icons","u":1024,"z":1020,"s":59648,"h":"152fce4d3c3abddf653ca4a50429970ee28d608be9076f922ca422a079f86b8a"},"i":{"archive":[1024,[[59648,"#666666"]]],"arrow-back":[1024,[[59649,"rgba(255,255,255,0.7)"]]],"bell":[1024,[[59650,"#666666"]]],"book-open":[1024,[[59651,"#666666"]]],"bookmark":[1024,[[59652,"#666666"]]],"box-empty":[1024,[[59653,"#B0B0B1"]]],"calendar":[1024,[[59654,"rgba(102,102,102,0.8)"]]],"chat":[1024,[[59655,"white"]]],"checkbox":[1024,[[59656,"#008836"],[59657,"white"]]],"checks":[1024,[[59658,"#181818"]]],"chevron-down":[1024,[[59659,"#181818"]]],"chevron-up":[1024,[[59660,"#181818"]]],"close":[1024,[[59661,"#666666"]]],"dark-mode-outline":[1024,[[59662,"currentColor"]]],"dots-three":[1024,[[59663,"#202020"]]],"drive-file-move":[1088,[[59664,"#666666"]]],"edit-pencil":[1024,[[59665,"#181818"]]],"envelope-simple":[1024,[[59666,"white"]]],"eye-closed":[1024,[[59667,"white"]]],"eye-open":[1024,[[59668,"currentColor"]]],"funnel":[1024,[[59669,"#666666"]]],"home":[1024,[[59670,"#181818"]]],"link":[560,[[59671,"#666666"]]],"lock-simple":[1024,[[59672,"white"]]],"menu":[1024,[[59673,"#181818"]]],"note":[1024,[[59674,"#181818"]]],"pin":[939,[[59675,"#666666"]]],"plus":[1024,[[59676,"#666666"]]],"search":[1024,[[59677,"#181818"]]],"shield-check":[1024,[[59678,"#008836"]]],"shopping-mode":[1024,[[59679,"#666666"]]],"sliders":[1024,[[59680,"#181818"]]],"sort-ascending":[1024,[[59681,"#666666"]]],"sort-descending":[1024,[[59682,"currentColor"]]],"square-out":[1024,[[59683,"#181818"]]],"star-filled":[1024,[[59684,"#E5C131"]]],"star":[1024,[[59685,"#666666"]]],"sun":[1024,[[59686,"#666666"]]],"trash":[1024,[[59687,"#666666"]]],"view-list":[1024,[[59688,"#181818"]]],"warning-circle":[1024,[[59689,"#BB3431"]]]}}
+{"m":{"f":"notesnook-icons","u":1024,"z":1020,"s":59648,"h":"3c50f9e96133b612a6a07dbd21321f56f12b0452eb7ad0bfa184f3ceb68efa6d"},"i":{"archive":[1024,[[59648,"#666666"]]],"arrow-back":[1024,[[59649,"rgba(255,255,255,0.7)"]]],"bell":[1024,[[59650,"#666666"]]],"book-open":[1024,[[59651,"#666666"]]],"bookmark":[1024,[[59652,"#666666"]]],"box-empty":[1024,[[59653,"#B0B0B1"]]],"calendar":[1024,[[59654,"rgba(102,102,102,0.8)"]]],"chat":[1024,[[59655,"white"]]],"checkbox":[1024,[[59656,"#008836"],[59657,"white"]]],"checks":[1024,[[59658,"#181818"]]],"chevron-down":[1024,[[59659,"#181818"]]],"chevron-up":[1024,[[59660,"#181818"]]],"close":[1024,[[59661,"#666666"]]],"cloud":[1024,[[59662,"white"]]],"dark-mode-outline":[1024,[[59663,"currentColor"]]],"dots-three":[1024,[[59664,"#202020"]]],"drive-file-move":[1088,[[59665,"#666666"]]],"edit-pencil":[1024,[[59666,"#181818"]]],"envelope-simple":[1024,[[59667,"white"]]],"eye-closed":[1024,[[59668,"white"]]],"eye-open":[1024,[[59669,"currentColor"]]],"file":[1024,[[59670,"white"]]],"funnel":[1024,[[59671,"#666666"]]],"home":[1024,[[59672,"#181818"]]],"image-outline":[1024,[[59673,"white"]]],"link":[560,[[59674,"#666666"]]],"lock-simple":[1024,[[59675,"white"]]],"lock":[1024,[[59676,"#181818"]]],"menu":[1024,[[59677,"#181818"]]],"note":[1024,[[59678,"#181818"]]],"pin":[939,[[59679,"#666666"]]],"plus":[1024,[[59680,"#666666"]]],"search":[1024,[[59681,"#181818"]]],"shield-check":[1024,[[59682,"#008836"]]],"shopping-mode":[1024,[[59683,"#666666"]]],"sliders":[1024,[[59684,"#181818"]]],"sort-ascending":[1024,[[59685,"#666666"]]],"sort-descending":[1024,[[59686,"currentColor"]]],"square-out":[1024,[[59687,"#181818"]]],"star-filled":[1024,[[59688,"#E5C131"]]],"star":[1024,[[59689,"#666666"]]],"sun":[1024,[[59690,"#666666"]]],"trash":[1024,[[59691,"#666666"]]],"view-list":[1024,[[59692,"#181818"]]],"warning-circle":[1024,[[59693,"#BB3431"]]]}}
--- a/apps/mobile/fonts/notesnook-icons.ttf
+++ b/apps/mobile/fonts/notesnook-icons.ttf
--- a/apps/mobile/ios/nanoicons-fonts/notesnook-icons.ttf
+++ b/apps/mobile/ios/nanoicons-fonts/notesnook-icons.ttf
--- a/packages/icons/svgs/cloud.svg
+++ b/packages/icons/svgs/cloud.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.66667 13.3333C1.64 13.3333 0 11.6933 0 9.66659C0 7.63992 1.64 5.99992 3.66667 5.99992C4.33333 4.43325 5.86667 3.33325 7.66667 3.33325C9.95333 3.33325 11.8267 5.10659 12 7.35325L12.3333 7.33325C14 7.33325 15.3333 8.66659 15.3333 10.3333C15.3333 11.9999 14 13.3333 12.3333 13.3333H3.66667ZM3.66667 6.66659C2 6.66659 0.666667 7.99992 0.666667 9.66659C0.666667 11.3333 2 12.6666 3.66667 12.6666C4.81333 12.6666 11.1 12.6666 12.3333 12.6666C13.62 12.6666 14.6667 11.6199 14.6667 10.3333C14.6667 9.04659 13.62 7.99992 12.3333 7.99992C11.96 7.99992 11.6 8.08659 11.2867 8.24659C11.3333 8.05992 11.3333 7.86659 11.3333 7.66659C11.3333 5.63992 9.69333 3.99992 7.66667 3.99992C5.97333 3.99992 4.55333 5.14659 4.12667 6.69992L3.66667 6.66659Z" fill="white"/>
+</svg>
--- a/packages/icons/svgs/file.svg
+++ b/packages/icons/svgs/file.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.33384 7.33333C8.22718 7.33333 7.33384 6.44 7.33384 5.33333V2.66667H4.66718C3.93384 2.66667 3.33384 3.26667 3.33384 4V12.6667C3.33384 13.4 3.93384 14 4.66718 14H10.6672C11.4005 14 12.0005 13.4 12.0005 12.6667V7.33333H9.33384ZM8.00051 5.33333C8.00051 6.06667 8.60051 6.66667 9.33384 6.66667H11.7272L8.00051 2.94V5.33333ZM4.66718 2H8.00051L12.6672 6.66667V12.6667C12.6672 13.7733 11.7738 14.6667 10.6672 14.6667H4.66718C3.56051 14.6667 2.66718 13.7733 2.66718 12.6667V4C2.66718 2.89333 3.56051 2 4.66718 2Z" fill="white"/>
+</svg>
--- a/packages/icons/svgs/image-outline.svg
+++ b/packages/icons/svgs/image-outline.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33282 2H11.9995C13.1062 2 13.9995 2.89333 13.9995 4V12.6667C13.9995 13.7733 13.1062 14.6667 11.9995 14.6667H3.33282C2.22616 14.6667 1.33282 13.7733 1.33282 12.6667V4C1.33282 2.89333 2.22616 2 3.33282 2ZM3.33282 2.66667C2.59949 2.66667 1.99949 3.26667 1.99949 4V11.7267L4.85949 8.86L6.52616 10.5267L9.85949 7.19333L13.3328 10.6667V4C13.3328 3.26667 12.7328 2.66667 11.9995 2.66667H3.33282ZM6.52616 11.4733L4.85949 9.80667L1.99949 12.6667C1.99949 13.4 2.59949 14 3.33282 14H11.9995C12.7328 14 13.3328 13.4 13.3328 12.6667V11.6067L9.85949 8.14L6.52616 11.4733ZM4.99949 4C5.91949 4 6.66616 4.74667 6.66616 5.66667C6.66616 6.58667 5.91949 7.33333 4.99949 7.33333C4.07949 7.33333 3.33282 6.58667 3.33282 5.66667C3.33282 4.74667 4.07949 4 4.99949 4ZM4.99949 4.66667C4.44616 4.66667 3.99949 5.11333 3.99949 5.66667C3.99949 6.22 4.44616 6.66667 4.99949 6.66667C5.55282 6.66667 5.99949 6.22 5.99949 5.66667C5.99949 5.11333 5.55282 4.66667 4.99949 4.66667Z" fill="white"/>
+</svg>
--- a/packages/icons/svgs/lock.svg
+++ b/packages/icons/svgs/lock.svg
@@ -0,0 +1,10 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1792_1075)">
+<path d="M9 4H8.5V3C8.5 1.62 7.38 0.5 6 0.5C4.62 0.5 3.5 1.62 3.5 3V4H3C2.45 4 2 4.45 2 5V10C2 10.55 2.45 11 3 11H9C9.55 11 10 10.55 10 10V5C10 4.45 9.55 4 9 4ZM4.5 3C4.5 2.17 5.17 1.5 6 1.5C6.83 1.5 7.5 2.17 7.5 3V4H4.5V3ZM9 10H3V5H9V10ZM6 8.5C6.55 8.5 7 8.05 7 7.5C7 6.95 6.55 6.5 6 6.5C5.45 6.5 5 6.95 5 7.5C5 8.05 5.45 8.5 6 8.5Z" fill="#181818"/>
+</g>
+<defs>
+<clipPath id="clip0_1792_1075">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/packages/intl/locale/en.po
+++ b/packages/intl/locale/en.po
@@ -792,6 +792,10 @@ msgstr "Add to notebook"
 msgid "Add your first note"
 msgstr "Add your first note"

+#: src/strings.ts:2794
+msgid "Add Your First Note"
+msgstr "Add Your First Note"
+
 #: src/strings.ts:991
 msgid "Add your first notebook"
 msgstr "Add your first notebook"
@@ -1922,6 +1926,10 @@ msgstr "Confirm password required"
 msgid "Confirm pin"
 msgstr "Confirm pin"

+#: src/strings.ts:1380
+msgid "Confirm your email to sync notes"
+msgstr "Confirm your email to sync notes"
+
 #: src/strings.ts:2674
 msgid "Confirmation email sent"
 msgstr "Confirmation email sent"
@@ -4580,6 +4588,10 @@ msgstr "No notebooks selected to move"
 msgid "No notebooks yet"
 msgstr "No notebooks yet"

+#: src/strings.ts:2791
+msgid "No notes yet"
+msgstr "No notes yet"
+
 #: src/strings.ts:202
 msgid "No one can view this {type} except you."
 msgstr "No one can view this {type} except you."
@@ -5066,10 +5078,6 @@ msgstr "Plan limits"
 msgid "Plans"
 msgstr "Plans"

-#: src/strings.ts:1380
-msgid "Please confirm your email to sync notes"
-msgstr "Please confirm your email to sync notes"
-
 #: src/strings.ts:1018
 msgid "Please confirm your identity by entering a recovery code."
 msgstr "Please confirm your identity by entering a recovery code."
@@ -8242,6 +8250,10 @@ msgstr "Your support request has been forwarded to our support team. We will get
 msgid "Your tags"
 msgstr "Your tags"

+#: src/strings.ts:2793
+msgid "Your thoughts deserve a home. Create your first note and start organizing your life today."
+msgstr "Your thoughts deserve a home. Create your first note and start organizing your life today."
+
 #: src/strings.ts:690
 msgid "yr"
 msgstr "yr"
--- a/packages/intl/locale/pseudo-LOCALE.po
+++ b/packages/intl/locale/pseudo-LOCALE.po
@@ -792,6 +792,10 @@ msgstr ""
 msgid "Add your first note"
 msgstr ""

+#: src/strings.ts:2794
+msgid "Add Your First Note"
+msgstr ""
+
 #: src/strings.ts:991
 msgid "Add your first notebook"
 msgstr ""
@@ -1911,6 +1915,10 @@ msgstr ""
 msgid "Confirm pin"
 msgstr ""

+#: src/strings.ts:1380
+msgid "Confirm your email to sync notes"
+msgstr ""
+
 #: src/strings.ts:2674
 msgid "Confirmation email sent"
 msgstr ""
@@ -4560,6 +4568,10 @@ msgstr ""
 msgid "No notebooks yet"
 msgstr ""

+#: src/strings.ts:2791
+msgid "No notes yet"
+msgstr ""
+
 #: src/strings.ts:202
 msgid "No one can view this {type} except you."
 msgstr ""
@@ -5040,10 +5052,6 @@ msgstr ""
 msgid "Plans"
 msgstr ""

-#: src/strings.ts:1380
-msgid "Please confirm your email to sync notes"
-msgstr ""
-
 #: src/strings.ts:1018
 msgid "Please confirm your identity by entering a recovery code."
 msgstr ""
@@ -8181,6 +8189,10 @@ msgstr ""
 msgid "Your tags"
 msgstr ""

+#: src/strings.ts:2793
+msgid "Your thoughts deserve a home. Create your first note and start organizing your life today."
+msgstr ""
+
 #: src/strings.ts:690
 msgid "yr"
 msgstr ""
--- a/packages/intl/src/strings.ts
+++ b/packages/intl/src/strings.ts
@@ -1377,7 +1377,7 @@ $day$: Current day (eg. Monday)`,
  loginMessage: () => t`You are not logged in`,
  loginMessageActionText: () => t`Login to encrypt and sync notes`,
  syncDisabled: () => t`Sync is disabled`,
-  syncDisabledActionText: () => t`Please confirm your email to sync notes`,
+  syncDisabledActionText: () => t`Confirm your email to sync notes`,
  autoBackupsOffMessage: () => t`Automatic backups are off`,
  autoBackupsOffActionText: () =>
    t`Get Notesnook Pro to enable automatic backups`,
@@ -2853,5 +2853,11 @@ Continue without attachments?`,
  tagsEmptyBody: () =>
    t`Create your first tag to start organizing your workspace.`,
  newestFirst: () => t`Newest First`,
-  oldestFirst: () => t`Oldest First`
+  oldestFirst: () => t`Oldest First`,
+  notePlaceholder: {
+    title: () => t`No notes yet`,
+    description: () =>
+      t`Your thoughts deserve a home. Create your first note and start organizing your life today.`,
+    button: () => t`Add Your First Note`
+  }
 };