From 67dc2ddaffdac1982db5bdada0af7455c2fb6fb2 Mon Sep 17 00:00:00 2001 From: Ammar Ahmed Date: Wed, 29 Apr 2026 13:58:30 +0500 Subject: [PATCH] mobile: update ui --- apps/mobile/.nanoicons.json | 9 + apps/mobile/app/common/design/font.ts | 38 +- apps/mobile/app/components/auth/index.tsx | 4 +- apps/mobile/app/components/auth/login.tsx | 2 + .../mobile/app/components/auth/two-factor.tsx | 122 +- .../app/components/dialog/dialog-buttons.tsx | 92 +- .../components/dialog/dialog-container.tsx | 3 +- .../app/components/dialog/dialog-header.tsx | 3 +- .../mobile/app/components/dialog/functions.ts | 1 + apps/mobile/app/components/dialog/index.tsx | 189 +- apps/mobile/app/components/header/index.tsx | 109 +- .../app/components/header/left-menus.tsx | 66 - .../list-items/headers/section-header.tsx | 114 +- .../app/components/list-items/note/index.tsx | 499 ++-- .../components/list-items/note/wrapper.tsx | 6 +- .../list-items/notebook/wrapper.tsx | 3 +- .../components/list-items/reminder/index.tsx | 3 +- .../list-items/selection-wrapper/index.tsx | 87 +- .../app/components/list-items/tag/index.tsx | 3 +- apps/mobile/app/components/list/card.tsx | 47 +- .../app/components/list/list-item.wrapper.tsx | 45 +- .../app/components/properties/color-tags.tsx | 48 +- .../app/components/properties/date-meta.tsx | 86 +- .../app/components/properties/index.jsx | 342 ++- .../app/components/properties/items.tsx | 64 +- .../mobile/app/components/properties/tags.jsx | 31 +- .../components/sheets/add-notebook/index.tsx | 75 +- .../app/components/sheets/sort/index.tsx | 296 ++- .../mobile/app/components/side-menu/index.tsx | 453 ++-- .../app/components/side-menu/menu-item.tsx | 29 +- .../components/side-menu/notebook-item.tsx | 177 +- .../components/side-menu/pinned-section.tsx | 2 +- .../components/side-menu/side-menu-header.tsx | 19 +- .../components/side-menu/side-menu-home.tsx | 7 +- .../side-menu/side-menu-list-empty.tsx | 44 +- .../side-menu/side-menu-notebooks.tsx | 74 +- .../components/side-menu/side-menu-tags.tsx | 140 +- .../components/side-menu/tab-bar-button.tsx | 111 + .../app/components/ui/AppIcon/index.tsx | 14 +- .../mobile/app/components/ui/button/index.tsx | 10 +- .../app/components/ui/icon-button/index.tsx | 10 +- apps/mobile/app/components/ui/input/index.tsx | 152 +- .../ui/input/input-error-context.tsx | 120 + .../app/components/ui/pressable/index.tsx | 27 +- .../app/components/ui/reminder-time/index.tsx | 9 +- .../seperator/line-separator.tsx} | 44 +- apps/mobile/app/components/ui/sheet/index.jsx | 6 +- .../app/components/ui/typography/heading.tsx | 7 +- .../components/ui/typography/paragraph.tsx | 9 +- apps/mobile/app/screens/home/index.tsx | 3 + apps/mobile/app/services/validation.js | 14 +- apps/mobile/app/stores/use-selection-store.ts | 19 +- apps/mobile/app/utils/constants.ts | 4 +- apps/mobile/app/utils/menu-items.ts | 20 +- .../fonts/notesnook-icons.glyphmap.json | 1 + apps/mobile/fonts/notesnook-icons.ttf | Bin 0 -> 10092 bytes apps/mobile/ios/Add to Notes/Info.plist | 85 +- .../ios/Notesnook.xcodeproj/project.pbxproj | 15 + apps/mobile/ios/Notesnook/Info.plist | 1 + apps/mobile/ios/Podfile.lock | 32 + .../ios/nanoicons-fonts/notesnook-icons.ttf | Bin 0 -> 10092 bytes apps/mobile/package-lock.json | 1109 ++++++++- apps/mobile/package.json | 1 + packages/icons/package.json | 11 + packages/icons/svgs/archive.svg | 5 + packages/icons/svgs/bell.svg | 4 + packages/icons/svgs/book-open.svg | 4 + packages/icons/svgs/bookmark.svg | 3 + packages/icons/svgs/box-empty.svg | 3 + packages/icons/svgs/calendar.svg | 10 + packages/icons/svgs/chat.svg | 3 + packages/icons/svgs/checkbox.svg | 4 + packages/icons/svgs/checks.svg | 3 + packages/icons/svgs/chevron-down.svg | 10 + packages/icons/svgs/chevron-up.svg | 10 + packages/icons/svgs/close.svg | 4 + packages/icons/svgs/dark-mode-outline.svg | 1 + packages/icons/svgs/dots-three.svg | 3 + packages/icons/svgs/drive-file-move.svg | 3 + packages/icons/svgs/edit-pencil.svg | 11 + packages/icons/svgs/envelope-simple.svg | 3 + packages/icons/svgs/funnel.svg | 3 + packages/icons/svgs/home.svg | 4 + packages/icons/svgs/link.svg | 11 + packages/icons/svgs/lock-simple.svg | 3 + packages/icons/svgs/menu.svg | 10 + packages/icons/svgs/note.svg | 3 + packages/icons/svgs/pin.svg | 10 + packages/icons/svgs/plus.svg | 3 + packages/icons/svgs/search.svg | 10 + packages/icons/svgs/shield-check.svg | 3 + packages/icons/svgs/shopping-mode.svg | 3 + packages/icons/svgs/sliders.svg | 11 + packages/icons/svgs/sort-ascending.svg | 3 + packages/icons/svgs/sort-descending.svg | 1 + packages/icons/svgs/square-out.svg | 3 + packages/icons/svgs/star-filled.svg | 10 + packages/icons/svgs/star.svg | 3 + packages/icons/svgs/sun.svg | 18 + packages/icons/svgs/trash.svg | 4 + packages/icons/svgs/view-list.svg | 10 + packages/icons/svgs/warning-circle.svg | 3 + packages/intl/locale/en.po | 2032 +++++++++-------- packages/intl/locale/pseudo-LOCALE.po | 2032 +++++++++-------- packages/intl/src/strings.ts | 16 +- 105 files changed, 5800 insertions(+), 3659 deletions(-) create mode 100644 apps/mobile/.nanoicons.json delete mode 100644 apps/mobile/app/components/header/left-menus.tsx create mode 100644 apps/mobile/app/components/side-menu/tab-bar-button.tsx create mode 100644 apps/mobile/app/components/ui/input/input-error-context.tsx rename apps/mobile/app/components/{header/right-menus.tsx => ui/seperator/line-separator.tsx} (56%) create mode 100644 apps/mobile/fonts/notesnook-icons.glyphmap.json create mode 100644 apps/mobile/fonts/notesnook-icons.ttf create mode 100644 apps/mobile/ios/nanoicons-fonts/notesnook-icons.ttf create mode 100644 packages/icons/package.json create mode 100644 packages/icons/svgs/archive.svg create mode 100644 packages/icons/svgs/bell.svg create mode 100644 packages/icons/svgs/book-open.svg create mode 100644 packages/icons/svgs/bookmark.svg create mode 100644 packages/icons/svgs/box-empty.svg create mode 100755 packages/icons/svgs/calendar.svg create mode 100644 packages/icons/svgs/chat.svg create mode 100644 packages/icons/svgs/checkbox.svg create mode 100644 packages/icons/svgs/checks.svg create mode 100644 packages/icons/svgs/chevron-down.svg create mode 100644 packages/icons/svgs/chevron-up.svg create mode 100644 packages/icons/svgs/close.svg create mode 100644 packages/icons/svgs/dark-mode-outline.svg create mode 100755 packages/icons/svgs/dots-three.svg create mode 100644 packages/icons/svgs/drive-file-move.svg create mode 100644 packages/icons/svgs/edit-pencil.svg create mode 100644 packages/icons/svgs/envelope-simple.svg create mode 100755 packages/icons/svgs/funnel.svg create mode 100644 packages/icons/svgs/home.svg create mode 100755 packages/icons/svgs/link.svg create mode 100644 packages/icons/svgs/lock-simple.svg create mode 100755 packages/icons/svgs/menu.svg create mode 100644 packages/icons/svgs/note.svg create mode 100755 packages/icons/svgs/pin.svg create mode 100644 packages/icons/svgs/plus.svg create mode 100755 packages/icons/svgs/search.svg create mode 100644 packages/icons/svgs/shield-check.svg create mode 100644 packages/icons/svgs/shopping-mode.svg create mode 100755 packages/icons/svgs/sliders.svg create mode 100644 packages/icons/svgs/sort-ascending.svg create mode 100644 packages/icons/svgs/sort-descending.svg create mode 100644 packages/icons/svgs/square-out.svg create mode 100755 packages/icons/svgs/star-filled.svg create mode 100644 packages/icons/svgs/star.svg create mode 100644 packages/icons/svgs/sun.svg create mode 100644 packages/icons/svgs/trash.svg create mode 100755 packages/icons/svgs/view-list.svg create mode 100755 packages/icons/svgs/warning-circle.svg 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 ? (