mobile: fix minor ui issues

2026-07-10 04:21:21 +02:00 · 2026-06-25 11:46:56 +05:00
parent e2b398efdb
commit 90ba685aa6
8 changed files with 291 additions and 254 deletions
--- a/apps/mobile/app/common/design/theme.ts
+++ b/apps/mobile/app/common/design/theme.ts
@@ -52,7 +52,7 @@ export const THEME_LIGHT: any = {
        placeholder: "#858585",
        hover: "#eee",
        backdrop: "#0000001a",
-        buttonForeground: "#FFFFFF"
+        buttonForeground: "#181818"
      },
      secondary: {
        accent: "#0D9E46",
--- a/apps/mobile/app/components/auth/login.tsx
+++ b/apps/mobile/app/components/auth/login.tsx
@@ -52,7 +52,8 @@ import { PASSWORD_PLACEHOLDER } from "../../utils/constants";

 const LoginSteps = {
  emailAuth: 1,
-  mfaAuth: 2
+  mfaAuth: 2,
+  passwordAuth: 3
 };

 export const Login = ({
@@ -139,7 +140,7 @@ export const Login = ({
        enableAutomaticScroll={true}
        keyboardShouldPersistTaps="handled"
      >
-        {step === LoginSteps.emailAuth ? (
+        {step === LoginSteps.emailAuth || step === LoginSteps.passwordAuth ? (
          <View
            style={{
              borderRadius: DDS.isTab ? 5 : 0,
--- a/apps/mobile/app/components/auth/use-login.ts
+++ b/apps/mobile/app/components/auth/use-login.ts
@@ -30,7 +30,8 @@ import { createFormRef } from "../ui/input/form-input";

 export const LoginSteps = {
  emailAuth: 1,
-  mfaAuth: 2
+  mfaAuth: 2,
+  passwordAuth: 3
 };

 export const useLogin = (
@@ -74,19 +75,27 @@ export const useLogin = (
          }
          break;
        }
+        case LoginSteps.passwordAuth:
        case LoginSteps.mfaAuth: {
          if (!formRef.current.validate()) {
            setLoading(false);
            return;
          }
          const values = formRef.current.getValues();
-          await db.user.authenticatePassword(
+          try {
+            await db.user.authenticatePassword(
            values.email,
            values.password,
            undefined,
            sessionExpired
          );
-          finishLogin();
+            finishLogin();
+          } catch(e) {
+            formRef.current.setError("password", (e as Error).message);
+            setLoading(false);
+            setStep(LoginSteps.passwordAuth);
+          }
+     
          break;
        }
      }
--- a/apps/mobile/app/components/intro/index.tsx
+++ b/apps/mobile/app/components/intro/index.tsx
@@ -62,6 +62,7 @@ const Intro = () => {
                key={heading.value()}
                fontFamily="SEMI_BOLD"
                fontSize="XXL"
+                lineHeight="120%"
              >
                {heading.value()}
              </Heading>
--- a/apps/mobile/app/components/paywall/index.tsx
+++ b/apps/mobile/app/components/paywall/index.tsx
@@ -241,7 +241,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
            color={colors.primary.icon}
            size={18}
            onPress={() => {
-              if (step === Steps.buy) {
+              if (step === Steps.buy && !routeParams.state) {
                setStep(Steps.select);
                return;
              }
--- a/apps/mobile/app/components/ui/button/index.tsx
+++ b/apps/mobile/app/components/ui/button/index.tsx
@@ -28,12 +28,13 @@ import {
 } from "react-native";
 import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
 import NativeTooltip from "../../../utils/tooltip";
-import { Pressable, PressableProps, useButton } from "../pressable";
+import { Pressable, PressableProps } from "../pressable";
 import Heading from "../typography/heading";
 import Paragraph from "../typography/paragraph";
 import { Spacing } from "../../../common/design/spacing";
 import { FontFamily } from "../../../common/design/font";
 import AppIcon, { IconProps } from "../AppIcon";
+import { useButton } from "../pressable/use-button";
 export interface ButtonProps extends PressableProps {
  height?: number;
  icon?: string;
--- a/apps/mobile/app/components/ui/pressable/index.tsx
+++ b/apps/mobile/app/components/ui/pressable/index.tsx
@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

-import { VariantsWithStaticColors, useThemeColors } from "@notesnook/theme";
+import { useThemeColors } from "@notesnook/theme";
 import React, { RefObject, useCallback } from "react";
 import {
  ColorValue,
@@ -34,6 +34,7 @@ import {
  hexToRGBA
 } from "../../../utils/colors";
 import { defaultBorderRadius } from "../../../utils/size";
+import { ButtonTypes, useButton } from "./use-button";
 export interface PressableProps extends RNPressableProps {
  style?: ViewStyle;
  noborder?: boolean;
@@ -48,251 +49,6 @@ export interface PressableProps extends RNPressableProps {
  hidden?: boolean;
 }

-type ButtonTypes =
-  | "plain"
-  | "plain-outline"
-  | "accent-background"
-  | "transparent"
-  | "accent"
-  | "shade"
-  | "shade-plain"
-  | "secondary"
-  | "tertiary"
-  | "selectedAccent"
-  | "secondaryAccented"
-  | "inverted"
-  | "white"
-  | "error"
-  | "errorShade"
-  | "warn"
-  | "selected"
-  | "accent-outline"
-  | "secondary-outline"
-  | "secondary-simple";
-
-type ButtonVariant = {
-  primary: string;
-  text: string;
-  selected: string;
-  colorOpacity?: number;
-  borderWidth?: number;
-  borderColor?: string;
-  borderSelectedColor?: string;
-};
-
-const buttonTypes = (
-  colors: VariantsWithStaticColors<true>,
-  accent?: string,
-  text?: string,
-  isDark?: boolean
-): {
-  [name: string]: ButtonVariant;
-} => ({
-  plain: {
-    primary: "transparent",
-    text: colors.secondary.buttonForeground,
-    selected: colors.primary.hover,
-    borderWidth: 0.8,
-    borderSelectedColor: getColorLinearShade(
-      colors.selected.background,
-      0.05,
-      isDark
-    )
-  },
-  "plain-outline": {
-    primary: "transparent",
-    text: colors.secondary.buttonForeground,
-    selected: colors.primary.hover,
-    borderWidth: 1,
-    borderColor: colors.primary.border,
-    borderSelectedColor: colors.primary.border
-  },
-  "secondary-outline": {
-    primary: "transparent",
-    text: colors.secondary.paragraph,
-    selected: colors.primary.hover,
-    borderWidth: 1,
-    borderColor: colors.primary.border,
-    borderSelectedColor: colors.primary.border
-  },
-  transparent: {
-    primary: "transparent",
-    text: colors.primary.accent,
-    selected: colors.secondary.background,
-    borderWidth: 0.8,
-    borderSelectedColor: getColorLinearShade(
-      colors.selected.background,
-      0.05,
-      isDark
-    )
-  },
-  secondary: {
-    primary: colors.secondary.background,
-    text: colors.primary.heading,
-    selected: colors.secondary.background,
-    borderWidth: 0.8,
-    borderColor: getColorLinearShade(colors.secondary.background, 0.05, isDark),
-    borderSelectedColor: getColorLinearShade(
-      colors.selected.background,
-      0.05,
-      isDark
-    )
-  },
-  "secondary-simple": {
-    primary: colors.secondary.background,
-    text: colors.primary.heading,
-    selected: colors.secondary.background,
-    borderWidth: 0
-  },
-  tertiary: {
-    primary: colors.tertiary.background,
-    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
-    )
-  },
-  selected: {
-    primary: colors.selected.background,
-    text: colors.selected.buttonForeground,
-    selected: colors.selected.background,
-    borderWidth: 0.8,
-    borderColor: getColorLinearShade(colors.selected.background, 0.05, isDark),
-    borderSelectedColor: getColorLinearShade(
-      colors.selected.background,
-      0.05,
-      isDark
-    )
-  },
-  selectedAccent: {
-    primary: colors.selected.accent,
-    text: colors.selected.accentForeground,
-    selected: colors.selected.accent,
-    borderWidth: 0.8,
-    borderColor: getColorLinearShade(colors.selected.accent, 0.05, isDark),
-    borderSelectedColor: getColorLinearShade(
-      colors.selected.accent,
-      0.05,
-      isDark
-    )
-  },
-  secondaryAccented: {
-    primary: colors.secondary.background,
-    text: colors.primary.accent,
-    selected: colors.secondary.background,
-    borderWidth: 0.8,
-    borderColor: getColorLinearShade(colors.secondary.background, 0.05, isDark),
-    borderSelectedColor: getColorLinearShade(
-      colors.secondary.background,
-      0.05,
-      isDark
-    )
-  },
-  accent: {
-    primary: accent || colors.primary.accent,
-    text: text || colors.primary.accentForeground,
-    selected: accent || colors.primary.accent,
-    borderWidth: 0.8,
-    borderColor: getColorLinearShade(
-      accent || colors.primary.accent,
-      0.3,
-      false
-    ),
-    borderSelectedColor: getColorLinearShade(
-      accent || colors.primary.accent,
-      0.3,
-      false
-    )
-  },
-  "accent-background": {
-    primary: colors.primary.background,
-    text: colors.primary.accent,
-    selected: colors.primary.background,
-    borderWidth: 0
-  },
-  "accent-outline": {
-    primary: "transparent",
-    text: colors.primary.accent,
-    selected: accent || colors.primary.accent,
-    borderWidth: 1,
-    borderColor: accent || colors.primary.accent,
-    borderSelectedColor: accent || colors.primary.accent
-  },
-  inverted: {
-    primary: colors.primary.background,
-    text: colors.primary.accent,
-    selected: colors.primary.background
-  },
-  white: {
-    primary: "transparent",
-    text: colors.static.white,
-    selected: colors.primary.hover
-  },
-  shade: {
-    primary: colors.primary.shade,
-    text: colors.primary.accent,
-    selected: colors.primary.accent,
-    colorOpacity: 0.12,
-    borderWidth: 0.8,
-    borderColor: getColorLinearShade(colors.primary.shade, 0.3, isDark),
-    borderSelectedColor: getColorLinearShade(colors.primary.shade, 0.3, isDark)
-  },
-  "shade-plain": {
-    primary: colors.primary.shade,
-    text: colors.primary.heading,
-    selected: colors.primary.accent,
-    colorOpacity: 0.12,
-    borderWidth: 0.8,
-    borderColor: getColorLinearShade(colors.primary.shade, 0.3, isDark),
-    borderSelectedColor: getColorLinearShade(colors.primary.shade, 0.3, isDark)
-  },
-  error: {
-    primary: colors.error.background,
-    text: colors.error.paragraph,
-    selected: colors.error.background,
-    borderWidth: 0.8,
-    borderColor: getColorLinearShade(colors.error.background, 0.05, isDark),
-    borderSelectedColor: getColorLinearShade(
-      colors.error.background,
-      0.07,
-      isDark
-    )
-  },
-  errorShade: {
-    primary: "transparent",
-    text: colors.error.buttonForeground,
-    selected: colors.error.background,
-    borderWidth: 0.8,
-    borderSelectedColor: getColorLinearShade(
-      colors.error.background,
-      0.05,
-      isDark
-    )
-  },
-  warn: {
-    primary: colors.static.orange,
-    text: colors.static.white,
-    selected: colors.static.orange
-  }
-});
-
-export const useButton = ({
-  type,
-  accent,
-  text
-}: {
-  accent?: string;
-  text?: string;
-  type: ButtonTypes;
-}): ButtonVariant => {
-  const { colors, isDark } = useThemeColors();
-  const types = buttonTypes(colors, accent, text, isDark);
-  return types[type] || types["plain"];
-};

 export const Pressable = ({
  children,
--- a/apps/mobile/app/components/ui/pressable/use-button.ts
+++ b/apps/mobile/app/components/ui/pressable/use-button.ts
@@ -0,0 +1,269 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import { VariantsWithStaticColors, useThemeColors } from "@notesnook/theme";
+import {
+    getColorLinearShade
+} from "../../../utils/colors";
+
+
+export type ButtonTypes =
+  | "plain"
+  | "plain-outline"
+  | "accent-background"
+  | "transparent"
+  | "accent"
+  | "shade"
+  | "shade-plain"
+  | "secondary"
+  | "tertiary"
+  | "selectedAccent"
+  | "secondaryAccented"
+  | "inverted"
+  | "white"
+  | "error"
+  | "errorShade"
+  | "warn"
+  | "selected"
+  | "accent-outline"
+  | "secondary-outline"
+  | "secondary-simple";
+
+type ButtonVariant = {
+  primary: string;
+  text: string;
+  selected: string;
+  colorOpacity?: number;
+  borderWidth?: number;
+  borderColor?: string;
+  borderSelectedColor?: string;
+};
+
+const buttonTypes = (
+  colors: VariantsWithStaticColors<true>,
+  accent?: string,
+  text?: string,
+  isDark?: boolean
+): {
+  [name: string]: ButtonVariant;
+} => ({
+  plain: {
+    primary: "transparent",
+    text: colors.primary.buttonForeground,
+    selected: colors.primary.hover,
+    borderWidth: 0.8,
+    borderSelectedColor: getColorLinearShade(
+      colors.selected.background,
+      0.05,
+      isDark
+    )
+  },
+  "plain-outline": {
+    primary: "transparent",
+    text: colors.primary.buttonForeground,
+    selected: colors.primary.hover,
+    borderWidth: 1,
+    borderColor: colors.primary.border,
+    borderSelectedColor: colors.primary.border
+  },
+  "secondary-outline": {
+    primary: "transparent",
+    text: colors.secondary.paragraph,
+    selected: colors.primary.hover,
+    borderWidth: 1,
+    borderColor: colors.primary.border,
+    borderSelectedColor: colors.primary.border
+  },
+  transparent: {
+    primary: "transparent",
+    text: colors.primary.accent,
+    selected: colors.secondary.background,
+    borderWidth: 0.8,
+    borderSelectedColor: getColorLinearShade(
+      colors.selected.background,
+      0.05,
+      isDark
+    )
+  },
+  secondary: {
+    primary: colors.secondary.background,
+    text: colors.primary.heading,
+    selected: colors.secondary.background,
+    borderWidth: 0.8,
+    borderColor: getColorLinearShade(colors.secondary.background, 0.05, isDark),
+    borderSelectedColor: getColorLinearShade(
+      colors.selected.background,
+      0.05,
+      isDark
+    )
+  },
+  "secondary-simple": {
+    primary: colors.secondary.background,
+    text: colors.primary.heading,
+    selected: colors.secondary.background,
+    borderWidth: 0
+  },
+  tertiary: {
+    primary: colors.tertiary.background,
+    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
+    )
+  },
+  selected: {
+    primary: colors.selected.background,
+    text: colors.selected.buttonForeground,
+    selected: colors.selected.background,
+    borderWidth: 0.8,
+    borderColor: getColorLinearShade(colors.selected.background, 0.05, isDark),
+    borderSelectedColor: getColorLinearShade(
+      colors.selected.background,
+      0.05,
+      isDark
+    )
+  },
+  selectedAccent: {
+    primary: colors.selected.accent,
+    text: colors.selected.accentForeground,
+    selected: colors.selected.accent,
+    borderWidth: 0.8,
+    borderColor: getColorLinearShade(colors.selected.accent, 0.05, isDark),
+    borderSelectedColor: getColorLinearShade(
+      colors.selected.accent,
+      0.05,
+      isDark
+    )
+  },
+  secondaryAccented: {
+    primary: colors.secondary.background,
+    text: colors.primary.accent,
+    selected: colors.secondary.background,
+    borderWidth: 0.8,
+    borderColor: getColorLinearShade(colors.secondary.background, 0.05, isDark),
+    borderSelectedColor: getColorLinearShade(
+      colors.secondary.background,
+      0.05,
+      isDark
+    )
+  },
+  accent: {
+    primary: accent || colors.primary.accent,
+    text: text || colors.primary.accentForeground,
+    selected: accent || colors.primary.accent,
+    borderWidth: 0.8,
+    borderColor: getColorLinearShade(
+      accent || colors.primary.accent,
+      0.3,
+      false
+    ),
+    borderSelectedColor: getColorLinearShade(
+      accent || colors.primary.accent,
+      0.3,
+      false
+    )
+  },
+  "accent-background": {
+    primary: colors.primary.background,
+    text: colors.primary.accent,
+    selected: colors.primary.background,
+    borderWidth: 0
+  },
+  "accent-outline": {
+    primary: "transparent",
+    text: colors.primary.accent,
+    selected: accent || colors.primary.accent,
+    borderWidth: 1,
+    borderColor: accent || colors.primary.accent,
+    borderSelectedColor: accent || colors.primary.accent
+  },
+  inverted: {
+    primary: colors.primary.background,
+    text: colors.primary.accent,
+    selected: colors.primary.background
+  },
+  white: {
+    primary: "transparent",
+    text: colors.static.white,
+    selected: colors.primary.hover
+  },
+  shade: {
+    primary: colors.primary.shade,
+    text: colors.primary.accent,
+    selected: colors.primary.accent,
+    colorOpacity: 0.12,
+    borderWidth: 0.8,
+    borderColor: getColorLinearShade(colors.primary.shade, 0.3, isDark),
+    borderSelectedColor: getColorLinearShade(colors.primary.shade, 0.3, isDark)
+  },
+  "shade-plain": {
+    primary: colors.primary.shade,
+    text: colors.primary.heading,
+    selected: colors.primary.accent,
+    colorOpacity: 0.12,
+    borderWidth: 0.8,
+    borderColor: getColorLinearShade(colors.primary.shade, 0.3, isDark),
+    borderSelectedColor: getColorLinearShade(colors.primary.shade, 0.3, isDark)
+  },
+  error: {
+    primary: colors.error.background,
+    text: colors.error.paragraph,
+    selected: colors.error.background,
+    borderWidth: 0.8,
+    borderColor: getColorLinearShade(colors.error.background, 0.05, isDark),
+    borderSelectedColor: getColorLinearShade(
+      colors.error.background,
+      0.07,
+      isDark
+    )
+  },
+  errorShade: {
+    primary: "transparent",
+    text: colors.error.buttonForeground,
+    selected: colors.error.background,
+    borderWidth: 0.8,
+    borderSelectedColor: getColorLinearShade(
+      colors.error.background,
+      0.05,
+      isDark
+    )
+  },
+  warn: {
+    primary: colors.static.orange,
+    text: colors.static.white,
+    selected: colors.static.orange
+  }
+});
+
+export const useButton = ({
+  type,
+  accent,
+  text
+}: {
+  accent?: string;
+  text?: string;
+  type: ButtonTypes;
+}): ButtonVariant => {
+  const { colors, isDark } = useThemeColors();
+  const types = buttonTypes(colors, accent, text, isDark);
+  return types[type] || types["plain"];
+};