diff --git a/apps/mobile/.nanoicons.json b/apps/mobile/.nanoicons.json new file mode 100644 index 000000000..465a6971d --- /dev/null +++ b/apps/mobile/.nanoicons.json @@ -0,0 +1,9 @@ +{ + "iconSets": [ + { + "inputDir": "../../packages/icons/svgs", + "fontFamily": "notesnook-icons", + "outputDir": "./fonts" + } + ] +} diff --git a/apps/mobile/app/common/design/font.ts b/apps/mobile/app/common/design/font.ts index 753a95fbd..221d5d299 100644 --- a/apps/mobile/app/common/design/font.ts +++ b/apps/mobile/app/common/design/font.ts @@ -1,3 +1,21 @@ +/* +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 . +*/ export const FontSizes = { XXS: 10, XS: 12, @@ -15,10 +33,24 @@ export const FontFamily = { BOLD: "Inter-Bold" // 700 }; +const LineHeightMultipliers = { + "100%": 1, + "110%": 1.1, + "120%": 1.2, + "130%": 1.3, + "140%": 1.4, + "150%": 1.5 +}; +export type LineHeightVariants = + | "100%" + | "110%" + | "120%" + | "130%" + | "140%" + | "150%"; export const getLineHeight = ( fontSize: keyof typeof FontSizes, - type: 1 | 2 + type: LineHeightVariants ) => { - if (type === 1) return (FontSizes[fontSize] / 100) * 120; - if (type === 2) return (FontSizes[fontSize] / 100) * 150; + return FontSizes[fontSize] * LineHeightMultipliers[type]; }; diff --git a/apps/mobile/app/components/auth/index.tsx b/apps/mobile/app/components/auth/index.tsx index e873ebd94..eac8b8eb4 100644 --- a/apps/mobile/app/components/auth/index.tsx +++ b/apps/mobile/app/components/auth/index.tsx @@ -17,15 +17,15 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ +import { useThemeColors } from "@notesnook/theme"; import React, { useState } from "react"; import { SafeAreaView } from "react-native-safe-area-context"; import { useNavigationFocus } from "../../hooks/use-navigation-focus"; +import { NavigationProps } from "../../services/navigation"; import { Toast } from "../toast"; import { AuthMode, initialAuthMode } from "./common"; import { Login } from "./login"; import { Signup } from "./signup"; -import { useThemeColors } from "@notesnook/theme"; -import { NavigationProps } from "../../services/navigation"; const Auth = ({ navigation, route }: NavigationProps<"Auth">) => { const [currentAuthMode, setCurrentAuthMode] = useState( diff --git a/apps/mobile/app/components/auth/login.tsx b/apps/mobile/app/components/auth/login.tsx index 4dd390bcf..41b52bf00 100644 --- a/apps/mobile/app/components/auth/login.tsx +++ b/apps/mobile/app/components/auth/login.tsx @@ -178,6 +178,7 @@ export const Login = ({ formRef={formRef} fwdRef={emailInputRef} testID="input.email" + label={strings.email()} returnKeyLabel="Next" returnKeyType="next" autoComplete="email" @@ -200,6 +201,7 @@ export const Login = ({ name="password" formRef={formRef} fwdRef={passwordInputRef} + label={strings.password()} testID="input.password" returnKeyLabel={strings.done()} returnKeyType="done" diff --git a/apps/mobile/app/components/auth/two-factor.tsx b/apps/mobile/app/components/auth/two-factor.tsx index 1106abf4e..fe52f2b1b 100644 --- a/apps/mobile/app/components/auth/two-factor.tsx +++ b/apps/mobile/app/components/auth/two-factor.tsx @@ -22,9 +22,9 @@ import { useThemeColors } from "@notesnook/theme"; import React, { useCallback, useEffect, useRef, useState } from "react"; import { TextInput, View } from "react-native"; import { db } from "../../common/database/index"; +import { Radius, Spacing } from "../../common/design/spacing"; import useTimer from "../../hooks/use-timer"; -import { eSendEvent, ToastManager } from "../../services/event-manager"; -import { eCloseSimpleDialog } from "../../utils/events"; +import { hexToRGBA, RGB_Linear_Shade } from "../../utils/colors"; import { AppFontSize } from "../../utils/size"; import { DefaultAppStyles } from "../../utils/styles"; import { presentDialog } from "../dialog/functions"; @@ -35,7 +35,6 @@ import PinInput from "../ui/pin-input/index"; import { Pressable } from "../ui/pressable"; import Heading from "../ui/typography/heading"; import Paragraph from "../ui/typography/paragraph"; -import { Radius, Spacing } from "../../common/design/spacing"; type MFAInfo = { primaryMethod: string; @@ -119,12 +118,14 @@ const TwoFactorVerification = ({ { id: "sms", title: strings.sendCodeSms(), - icon: "message-plus-outline" + icon: "chat", + iconFamily: "notesnook" }, { id: "email", title: strings.sendCodeEmail(), - icon: "email-outline" + icon: "envelope-simple", + iconFamily: "notesnook" }, { id: "app", @@ -134,7 +135,8 @@ const TwoFactorVerification = ({ { id: "recoveryCode", title: strings.recoveryCode(), - icon: "key" + icon: "lock-simple", + iconFamily: "notesnook" } ]; @@ -182,47 +184,54 @@ const TwoFactorVerification = ({ }, 500); }} style={{ - alignItems: "center" + alignItems: "center", + gap: Spacing.LEVEL_3 }} > - - - {currentMethod.method ? strings["2fa"]() : strings.select2faMethod()} - - - {currentMethod.method - ? strings["2faCodeHelpText"][ - currentMethod.method as keyof (typeof strings)["2faCodeHelpText"] - ]?.() || strings.select2faCodeHelpText() - : strings.select2faCodeHelpText()} - + + + {currentMethod.method ? strings["2fa"]() : strings.select2faMethod()} + + + {currentMethod.method + ? strings["2faCodeHelpText"][ + currentMethod.method as keyof (typeof strings)["2faCodeHelpText"] + ]?.() || strings.select2faCodeHelpText() + : strings.select2faCodeHelpText()} + + {currentMethod.method ? ( <> ) : ( - <> + {getMethods().map((item) => ( - {item.title} + {item.title} ))} - + )} ); diff --git a/apps/mobile/app/components/dialog/dialog-buttons.tsx b/apps/mobile/app/components/dialog/dialog-buttons.tsx index 01e8d1efb..44de213af 100644 --- a/apps/mobile/app/components/dialog/dialog-buttons.tsx +++ b/apps/mobile/app/components/dialog/dialog-buttons.tsx @@ -20,14 +20,11 @@ along with this program. If not, see . import { strings } from "@notesnook/intl"; import { useThemeColors } from "@notesnook/theme"; import React from "react"; -import { ActivityIndicator, StyleSheet, View } from "react-native"; -import Icon from "react-native-vector-icons/MaterialCommunityIcons"; +import { View } from "react-native"; import { notesnook } from "../../../e2e/test.ids"; -import { getColorLinearShade } from "../../utils/colors"; +import { Spacing } from "../../common/design/spacing"; import { AppFontSize } from "../../utils/size"; -import { DefaultAppStyles } from "../../utils/styles"; import { Button, ButtonProps } from "../ui/button"; -import Paragraph from "../ui/typography/paragraph"; const DialogButtons = ({ onPressPositive, @@ -51,82 +48,39 @@ const DialogButtons = ({ return ( - {doneText ? ( - - - {" " + doneText} - - ) : loading ? ( - - ) : ( - - )} - - + title={negativeTitle} + /> + {onPressPositive ? (