diff --git a/apps/mobile/app/app.tsx b/apps/mobile/app/app.tsx index 6cf5dd016..44fd2eb0d 100644 --- a/apps/mobile/app/app.tsx +++ b/apps/mobile/app/app.tsx @@ -44,6 +44,7 @@ import { useUserStore } from "./stores/use-user-store"; import RNBootSplash from "react-native-bootsplash"; import AppLocked from "./components/app-lock"; import { useSettingStore } from "./stores/use-setting-store"; +import { THEME_DARK, THEME_LIGHT } from "./common/design/theme"; I18nManager.allowRTL(false); I18nManager.forceRTL(false); I18nManager.swapLeftAndRightInRTL(false); @@ -120,30 +121,30 @@ export const withTheme = ( ]); useEffect(() => { - setTimeout(() => { - const currentTheme = colorScheme === "dark" ? darkTheme : lightTheme; - if (!currentTheme) return; - themeTrpcClient.updateTheme - .query({ - version: currentTheme.version, - compatibilityVersion: THEME_COMPATIBILITY_VERSION, - id: currentTheme.id - }) - .then((theme) => { - if (theme) { - theme.colorScheme === "dark" - ? useThemeStore.setState({ - darkTheme: theme - }) - : useThemeStore.setState({ - lightTheme: theme - }); - } - }) - .catch(() => { - /* empty */ - }); - }, 1000); + // setTimeout(() => { + // const currentTheme = colorScheme === "dark" ? darkTheme : lightTheme; + // if (!currentTheme) return; + // themeTrpcClient.updateTheme + // .query({ + // version: currentTheme.version, + // compatibilityVersion: THEME_COMPATIBILITY_VERSION, + // id: currentTheme.id + // }) + // .then((theme) => { + // if (theme) { + // theme.colorScheme === "dark" + // ? useThemeStore.setState({ + // darkTheme: theme + // }) + // : useThemeStore.setState({ + // lightTheme: theme + // }); + // } + // }) + // .catch(() => { + // /* empty */ + // }); + // }, 1000); const listener = Appearance.addChangeListener(({ colorScheme }) => { if (colorScheme && SettingsService.getProperty("useSystemTheme")) { @@ -159,11 +160,11 @@ export const withTheme = ( }, []); useEffect(() => { - const nextTheme = colorScheme === "dark" ? darkTheme : lightTheme; + const nextTheme = colorScheme === "dark" ? THEME_DARK : THEME_LIGHT; if (JSON.stringify(nextTheme) !== JSON.stringify(currTheme)) { useThemeEngineStore .getState() - .setTheme(colorScheme === "dark" ? darkTheme : lightTheme); + .setTheme(colorScheme === "dark" ? THEME_DARK : THEME_LIGHT); currTheme = nextTheme; } }, [colorScheme, darkTheme, lightTheme]); diff --git a/apps/mobile/app/common/design/spacing.ts b/apps/mobile/app/common/design/spacing.ts index ffd30f860..db27374e3 100644 --- a/apps/mobile/app/common/design/spacing.ts +++ b/apps/mobile/app/common/design/spacing.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 Spacing = { LEVEL_0: 4, LEVEL_1: 8, diff --git a/apps/mobile/app/common/design/theme.ts b/apps/mobile/app/common/design/theme.ts new file mode 100644 index 000000000..1df05270a --- /dev/null +++ b/apps/mobile/app/common/design/theme.ts @@ -0,0 +1,278 @@ +/* +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 . +*/ + +import { ThemeDefinition } from "@notesnook/theme"; + +export const THEME_LIGHT: ThemeDefinition = { + $schema: + "https://raw.githubusercontent.com/streetwriters/notesnook-themes/main/schemas/v1.schema.json", + name: "Notesnook Light", + id: "default-light", + version: 2.1, + license: "GPL-3.0-or-later", + homepage: "https://notesnook.com", + description: "The default light theme for Notesnook app.", + colorScheme: "light", + codeBlockCSS: ``, + compatibilityVersion: 1, + authors: [ + { + name: "Streetwriters", + email: "support@streetwriters.co", + url: "https://streetwriters.co" + } + ], + scopes: { + base: { + primary: { + accent: "#008836", + accentForeground: "#ffffff", + paragraph: "#666666", + background: "#ffffff", + border: "#E2E2E2", + heading: "#181818", + icon: "#181818", + separator: "#F0F0F0", + placeholder: "#a9a9a9", + hover: "#eee", + backdrop: "#0000001a", + buttonForeground: "#FFFFFF" + }, + secondary: { + accent: "#7FC39A", + accentForeground: "#ffffff", + paragraph: "#858585", + background: "#F7F7F7", + border: "#EFEFEF", + heading: "#4B4B4B", + icon: "#666666", + separator: "#E8E8E8", + placeholder: "#a9a9a9", + hover: "#dbdbdb", + backdrop: "#0000001a", + buttonForeground: "#181818" + }, + tertiary: { + accent: "#008836", + accentForeground: "#ffffff", + paragraph: "#777", + background: "#ECECEC", + border: "#E8E8E8", + heading: "#666", + icon: "#777", + separator: "#E8E8E8", + placeholder: "#a9a9a9", + hover: "#dbdbdb", + backdrop: "#0000001a" + }, + disabled: { + accent: "#008836", + accentForeground: "#ffffff", + paragraph: "#A6A6A6", + background: "#ffffff", + border: "#E8E8E8", + heading: "#212121", + icon: "#DADADA", + separator: "#E8E8E8", + placeholder: "#a9a9a9", + hover: "#00000010", + backdrop: "#0000001a" + }, + selected: { + accent: "#008836", + accentForeground: "#ffffff", + paragraph: "#212121", + background: "#00883610", + border: "#008836", + heading: "#212121", + icon: "#FFFFFF", + separator: "#E8E8E8", + placeholder: "#a9a9a9", + hover: "#eee", + backdrop: "#0000001a" + }, + error: { + accent: "#f54b42", + accentForeground: "#ffffff", + paragraph: "#FF242E", + background: "#FFEDEE", + border: "#F7999D", + heading: "#f54b42", + icon: "#FB2C36", + separator: "#E8E8E8", + placeholder: "#a9a9a9", + hover: "#00000010", + backdrop: "#0000001a" + }, + success: { + accent: "#4F8A10", + accentForeground: "#ffffff", + paragraph: "#4F8A10", + background: "#85ce68", + border: "#E8E8E8", + heading: "#4F8A10", + icon: "#4F8A10", + separator: "#E8E8E8", + placeholder: "#a9a9a9", + hover: "#00000010", + backdrop: "#0000001a" + } + }, + statusBar: { + primary: { paragraph: "#5E5E5E", background: "#f7f7f7" } + }, + navigationMenu: { + primary: { + background: "#f7f7f7", + paragraph: "#666", + icon: "#666", + hover: "#eee" + }, + secondary: { background: "#EEEEEE" }, + selected: { + background: "#ddd", + hover: "#eee" + } + }, + contextMenu: { primary: { background: "#f7f7f7" } }, + editor: { selected: { background: "#e1e1e1" } }, + sheet: { selected: { paragraph: "#008836" } } + } +}; + +export const THEME_DARK: ThemeDefinition = { + name: "Notesnook Dark", + id: "default-dark", + version: 2.1, + license: "GPL-3.0-or-later", + homepage: "https://notesnook.com", + description: "The default dark theme for the Notesnook app", + colorScheme: "dark", + codeBlockCSS: ``, + compatibilityVersion: 1, + authors: [ + { + name: "Streetwriters", + email: "support@streetwriters.co", + url: "https://streetwriters.co" + } + ], + scopes: { + base: { + primary: { + accent: "#008836", + accentForeground: "#ffffff", + paragraph: "#F2F2F2", + background: "#181818", + border: "#2A2A2A", + heading: "#FFFFFF", + icon: "#FFFFFF", + separator: "#383838", + placeholder: "#404040", + hover: "#2b2b2b", + backdrop: "#35353580", + buttonForeground: "#FFFFFF" + }, + secondary: { + accent: "#0D9E46", + accentForeground: "#ffffff", + paragraph: "#A1A1A1", + background: "#252525", + border: "#0A5729", + heading: "#C0BFBF", + icon: "#808080", + separator: "#383838", + placeholder: "#404040", + hover: "#ffffff10", + backdrop: "#35353580", + buttonForeground: "#BFBFBF" + }, + tertiary: { + accent: "#0D9E46", + accentForeground: "#ffffff", + paragraph: "#818589", + background: "#2C2C2C", + border: "#2b2b2b", + heading: "#808080", + icon: "#808080", + separator: "#383838", + placeholder: "#404040", + hover: "#ffffff10", + backdrop: "#35353580" + }, + disabled: { + accent: "#008836", + accentForeground: "#ffffff", + paragraph: "#505050", + background: "#ffffff", + border: "#383838", + heading: "#212121", + icon: "#FFFFFF", + separator: "#383838", + placeholder: "#404040", + hover: "#ffffff10", + backdrop: "#35353580" + }, + selected: { + accent: "#008836", + accentForeground: "#ffffff", + paragraph: "#FBFBFB", + background: "#494949", + border: "#008836", + heading: "#e3e3e3", + icon: "#008836", + separator: "#383838", + placeholder: "#404040", + hover: "#ffffff10", + backdrop: "#35353580" + }, + error: { + accent: "#f54b42", + accentForeground: "#ffffff", + paragraph: "#f54b42", + background: "#250b0a", + border: "#383838", + heading: "#f54b42", + icon: "#f54b42", + separator: "#383838", + placeholder: "#404040", + hover: "#ffffff10", + backdrop: "#35353580" + }, + success: { + accent: "#4F8A10", + accentForeground: "#ffffff", + paragraph: "#4F8A10", + background: "#132204", + border: "#383838", + heading: "#4F8A10", + icon: "#4F8A10", + separator: "#383838", + placeholder: "#404040", + hover: "#ffffff10", + backdrop: "#35353580" + } + }, + list: { selected: { background: "#202020" } }, + contextMenu: { primary: { background: "#202020" } }, + sheet: { selected: { paragraph: "#008836" } } + }, + $schema: + "https://raw.githubusercontent.com/streetwriters/notesnook-themes/main/schemas/v1.schema.json" +}; diff --git a/apps/mobile/app/components/auth/header.tsx b/apps/mobile/app/components/auth/header.tsx index c73dd7f5b..e4be3ded9 100644 --- a/apps/mobile/app/components/auth/header.tsx +++ b/apps/mobile/app/components/auth/header.tsx @@ -50,15 +50,12 @@ export const AuthHeader = (props: { welcome?: boolean }) => { ) : ( { hideAuth((route.params as AuthParams)?.context); }} - style={{ - width: 30, - height: 30 - }} - size={26} + size={24} color={colors.primary.paragraph} /> )} diff --git a/apps/mobile/app/components/auth/signup.tsx b/apps/mobile/app/components/auth/signup.tsx index 7ab3e1390..ca6d152de 100644 --- a/apps/mobile/app/components/auth/signup.tsx +++ b/apps/mobile/app/components/auth/signup.tsx @@ -273,8 +273,15 @@ export const Signup = ({ alignSelf: "center" }} > - - {strings.alreadyHaveAccount()}{" "} + + {strings.signupAgreement[0]()} { + const { colors, isDark } = useThemeColors(); // Gesture-driven tilt const tiltX = useSharedValue(0); // rotateX: finger up/down const tiltY = useSharedValue(0); // rotateY: finger left/right @@ -134,37 +136,37 @@ export const IntroIllustration = () => { cx={116} cy={105} r={104.75} - stroke="#1F2722" + stroke={colors.primary.border} strokeWidth={0.5} /> - + {/* ── Defs ── */} @@ -213,14 +215,20 @@ export const IntroIllustration = () => { width={46.5} height={46.5} rx={7.75} - fill="#1A1D1B" - stroke="#233C2D" + fill={isDark ? "#1A1D1B" : colors.secondary.background} + stroke={colors.primary.accent} strokeWidth={0.5} /> - + @@ -236,13 +244,13 @@ export const IntroIllustration = () => { width={31.5} height={31.5} rx={7.75} - fill="#1A1D1B" - stroke="#233C2D" + fill={isDark ? "#1A1D1B" : colors.secondary.background} + stroke={colors.primary.accent} strokeWidth={0.5} /> @@ -258,8 +266,8 @@ export const IntroIllustration = () => { width={34.5} height={34.5} rx={7.75} - fill="#1A1D1B" - stroke="#233C2D" + fill={isDark ? "#1A1D1B" : colors.secondary.background} + stroke={colors.primary.accent} strokeWidth={0.5} /> { height={18.3333} x={8.3334} y={8.333} - fill="#171F1A" + fill={colors.secondary.background} /> @@ -287,14 +295,14 @@ export const IntroIllustration = () => { width={42.5} height={42.5} rx={7.75} - fill="#1A1D1B" - stroke="#233C2D" + fill={isDark ? "#1A1D1B" : colors.secondary.background} + stroke={colors.primary.accent} strokeWidth={0.5} /> diff --git a/apps/mobile/app/components/intro/index.tsx b/apps/mobile/app/components/intro/index.tsx index fabb36957..90f907d8a 100644 --- a/apps/mobile/app/components/intro/index.tsx +++ b/apps/mobile/app/components/intro/index.tsx @@ -20,10 +20,11 @@ along with this program. If not, see . import { strings } from "@notesnook/intl"; import { useThemeColors } from "@notesnook/theme"; import React from "react"; -import { Linking, Platform, useWindowDimensions, View } from "react-native"; +import { Platform, useWindowDimensions, View } from "react-native"; import Animated, { FadeIn, FadeOut } from "react-native-reanimated"; import { SafeAreaView } from "react-native-safe-area-context"; import { Spacing } from "../../common/design/spacing"; +import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets"; import useRotator from "../../hooks/use-rotator"; import Navigation from "../../services/navigation"; import SettingsService from "../../services/settings"; @@ -33,13 +34,12 @@ import Heading from "../ui/typography/heading"; import Paragraph from "../ui/typography/paragraph"; import { IntroIllustration } from "./illustration"; import { ProgressPills } from "./progress-pills"; -import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets"; const Intro = () => { const { colors } = useThemeColors(); const { width } = useWindowDimensions(); const isTablet = width > 600; - const rotator = useRotator([0, 1, 2], 10000, true); + const rotator = useRotator([0], 10000, true); const insets = useGlobalSafeAreaInsets(); const renderItem = React.useCallback( @@ -62,14 +62,12 @@ const Intro = () => { key={heading.value()} fontFamily="SEMI_BOLD" fontSize="XXL" - style={{ - marginTop: index !== 0 ? -5 : undefined - }} > {heading.value()} ) : ( { ) : null} {item.body ? ( - + {item.body()} ) : null} @@ -107,7 +105,7 @@ const Intro = () => { ), - [colors.primary.accent, colors.secondary.background, isTablet, width] + [colors.primary.paragraph, colors.secondary.paragraph] ); return ( diff --git a/apps/mobile/app/components/intro/progress-pills.tsx b/apps/mobile/app/components/intro/progress-pills.tsx index 5c60fc1a2..cb2ffbda8 100644 --- a/apps/mobile/app/components/intro/progress-pills.tsx +++ b/apps/mobile/app/components/intro/progress-pills.tsx @@ -17,10 +17,10 @@ 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 from "react"; import { View } from "react-native"; -import { useThemeColors } from "@notesnook/theme"; -import { Radius, Spacing } from "../../common/design/spacing"; +import { Spacing } from "../../common/design/spacing"; export const ProgressPills = (props: { activePillIndex: number; @@ -36,6 +36,7 @@ export const ProgressPills = (props: { > {new Array(props.count || 3).fill(0).map((item, index) => ( { @@ -298,7 +298,8 @@ const Input = ({ > {secureTextEntry && ( )} diff --git a/apps/mobile/app/components/ui/pressable/index.tsx b/apps/mobile/app/components/ui/pressable/index.tsx index 7e66e40e7..694db496a 100644 --- a/apps/mobile/app/components/ui/pressable/index.tsx +++ b/apps/mobile/app/components/ui/pressable/index.tsx @@ -86,7 +86,7 @@ const buttonTypes = ( } => ({ plain: { primary: "transparent", - text: colors.primary.paragraph, + text: colors.primary.buttonForeground, selected: colors.primary.hover, borderWidth: 0.8, borderSelectedColor: getColorLinearShade( @@ -97,7 +97,7 @@ const buttonTypes = ( }, "plain-outline": { primary: "transparent", - text: colors.primary.paragraph, + text: colors.primary.buttonForeground, selected: colors.primary.hover, borderWidth: 1, borderColor: colors.primary.border, @@ -116,7 +116,7 @@ const buttonTypes = ( }, secondary: { primary: colors.secondary.background, - text: colors.primary.paragraph, + text: colors.primary.buttonForeground, selected: colors.secondary.background, borderWidth: 0.8, borderColor: getColorLinearShade(colors.secondary.background, 0.05, isDark), @@ -128,7 +128,7 @@ const buttonTypes = ( }, selected: { primary: colors.selected.background, - text: colors.selected.paragraph, + text: colors.selected.buttonForeground, selected: colors.selected.background, borderWidth: 0.8, borderColor: getColorLinearShade(colors.selected.background, 0.05, isDark), @@ -225,7 +225,7 @@ const buttonTypes = ( }, errorShade: { primary: "transparent", - text: colors.error.paragraph, + text: colors.error.buttonForeground, selected: colors.error.background, borderWidth: 0.8, borderSelectedColor: getColorLinearShade( diff --git a/apps/mobile/app/screens/editor/source.ts b/apps/mobile/app/screens/editor/source.ts index 3f343edf2..ba7e06a44 100644 --- a/apps/mobile/app/screens/editor/source.ts +++ b/apps/mobile/app/screens/editor/source.ts @@ -28,5 +28,5 @@ const EditorMobileSourceUrl = * The url should be something like this: http://192.168.100.126:3000/index.html */ export const EDITOR_URI = __DEV__ - ? EditorMobileSourceUrl + ? "http://192.168.100.144:3000/index.html" : EditorMobileSourceUrl; diff --git a/apps/mobile/app/screens/editor/tiptap/use-editor-events.tsx b/apps/mobile/app/screens/editor/tiptap/use-editor-events.tsx index 276d2c0a5..6bd2e698e 100644 --- a/apps/mobile/app/screens/editor/tiptap/use-editor-events.tsx +++ b/apps/mobile/app/screens/editor/tiptap/use-editor-events.tsx @@ -717,6 +717,7 @@ export const useEditorEvents = ( break; } case EditorEvents.error: { + console.log(editorMessage.value.stack); presentSheet({ component: ( + + diff --git a/packages/icons/svgs/eye-open.svg b/packages/icons/svgs/eye-open.svg new file mode 100644 index 000000000..1a9217f40 --- /dev/null +++ b/packages/icons/svgs/eye-open.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/theme/src/theme-engine/types.ts b/packages/theme/src/theme-engine/types.ts index 9e535e3fe..08fa62c41 100644 --- a/packages/theme/src/theme-engine/types.ts +++ b/packages/theme/src/theme-engine/types.ts @@ -282,7 +282,7 @@ export type PreviewColors = { }; export const StaticColors = { - red: "#f44336", + red: "#F44336", orange: "#FF9800", yellow: "#FFD600", green: "#4CAF50", diff --git a/packages/theme/src/theme-engine/utils.ts b/packages/theme/src/theme-engine/utils.ts index a3ca06e09..f6d9b5e14 100644 --- a/packages/theme/src/theme-engine/utils.ts +++ b/packages/theme/src/theme-engine/utils.ts @@ -106,7 +106,9 @@ export function buildVariants( themeScope[variant]?.[color] || theme.scopes.base[variant]?.[color] || defaultThemeScope[variant]?.[color] || - defaultThemeBase[variant]?.[color] + defaultThemeBase[variant]?.[color] || + themeScope.primary?.[color] || + defaultThemeBase.primary?.[color] ); }