From 6181e4e9fb5cb36ffbd85f1010a22597ca9a3282 Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Mon, 21 Aug 2023 12:20:06 +0500 Subject: [PATCH] mobile: theme fixes --- .../app/components/dialog-provider/index.js | 2 +- .../app/components/dialog/dialog-container.js | 2 +- apps/mobile/app/components/dialog/index.js | 2 +- apps/mobile/app/components/header/title.tsx | 9 ++- .../app/components/side-menu/menu-item.js | 2 +- apps/mobile/app/components/ui/tag/index.tsx | 4 +- apps/mobile/app/navigation/tabs-holder.js | 79 +++++++++++++------ 7 files changed, 67 insertions(+), 33 deletions(-) diff --git a/apps/mobile/app/components/dialog-provider/index.js b/apps/mobile/app/components/dialog-provider/index.js index 08cbe3ffd..702f8f598 100644 --- a/apps/mobile/app/components/dialog-provider/index.js +++ b/apps/mobile/app/components/dialog-provider/index.js @@ -39,7 +39,7 @@ import RestoreDataSheet from "../sheets/restore-data"; import PDFPreview from "../dialogs/pdf-preview"; const DialogProvider = () => { - const { colors } = useThemeColors(); + const { colors } = useThemeColors("dialog"); const loading = useNoteStore((state) => state.loading); return ( diff --git a/apps/mobile/app/components/dialog/dialog-container.js b/apps/mobile/app/components/dialog/dialog-container.js index 4ed387e35..32726c007 100644 --- a/apps/mobile/app/components/dialog/dialog-container.js +++ b/apps/mobile/app/components/dialog/dialog-container.js @@ -24,7 +24,7 @@ import { useThemeColors } from "@notesnook/theme"; import { getElevationStyle } from "../../utils/elevation"; const DialogContainer = ({ width, height, ...restProps }) => { - const { colors } = useThemeColors(); + const { colors } = useThemeColors("dialog"); return ( { - const { colors } = useThemeColors(); + const { colors } = useThemeColors("dialog"); const [visible, setVisible] = useState(false); const [inputValue, setInputValue] = useState(null); const inputRef = useRef(); diff --git a/apps/mobile/app/components/header/title.tsx b/apps/mobile/app/components/header/title.tsx index 97c83933e..63cb07ed1 100644 --- a/apps/mobile/app/components/header/title.tsx +++ b/apps/mobile/app/components/header/title.tsx @@ -114,7 +114,14 @@ export const Title = () => { # ) : null} - {title} + {title}{" "} + ) : null} diff --git a/apps/mobile/app/components/side-menu/menu-item.js b/apps/mobile/app/components/side-menu/menu-item.js index 632e533b2..47c782146 100644 --- a/apps/mobile/app/components/side-menu/menu-item.js +++ b/apps/mobile/app/components/side-menu/menu-item.js @@ -116,7 +116,7 @@ export const MenuItem = React.memo( ? colors.static.yellow : isFocused ? colors.selected.icon - : colors.secondary.icon + : colors.primary.icon } size={SIZE.lg - 2} /> diff --git a/apps/mobile/app/components/ui/tag/index.tsx b/apps/mobile/app/components/ui/tag/index.tsx index dd658adbb..b59df5161 100644 --- a/apps/mobile/app/components/ui/tag/index.tsx +++ b/apps/mobile/app/components/ui/tag/index.tsx @@ -16,9 +16,9 @@ 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 React from "react"; -import { View, ViewStyle } from "react-native"; import { useThemeColors } from "@notesnook/theme"; +import React from "react"; +import { ViewStyle } from "react-native"; import { SIZE } from "../../../utils/size"; import Paragraph from "../typography/paragraph"; diff --git a/apps/mobile/app/navigation/tabs-holder.js b/apps/mobile/app/navigation/tabs-holder.js index ce76326a9..590f29b69 100644 --- a/apps/mobile/app/navigation/tabs-holder.js +++ b/apps/mobile/app/navigation/tabs-holder.js @@ -72,6 +72,8 @@ import { NavigationStack } from "./navigation-stack"; const _TabsHolder = () => { const { colors, isDark } = useThemeColors(); + const { colors: editorToolbarColors } = useThemeColors("editorToolbar"); + const { colors: listColors } = useThemeColors("list"); const deviceMode = useSettingStore((state) => state.deviceMode); const setFullscreen = useSettingStore((state) => state.setFullscreen); const fullscreen = useSettingStore((state) => state.fullscreen); @@ -383,9 +385,58 @@ const _TabsHolder = () => { }; }, []); + const onChangeTab = useCallback( + async (obj) => { + if (obj.i === 2) { + editorState().movedAway = false; + editorState().isFocused = true; + activateKeepAwake(); + if (!editorState().currentlyEditing) { + eSendEvent(eOnLoadNote, { type: "new" }); + } + console.log("TO", editorToolbarColors.primary.background); + changeNavigationBarColor( + editorToolbarColors.primary.background, + isDark, + true + ); + } else { + if (obj.from === 2) { + deactivateKeepAwake(); + editorState().movedAway = true; + editorState().isFocused = false; + eSendEvent(eClearEditor, "removeHandler"); + setTimeout( + () => useEditorStore.getState().setSearchReplace(false), + 1 + ); + let id = useEditorStore.getState().currentEditingNote; + let note = db.notes.note(id); + if (note?.locked) { + eSendEvent(eClearEditor); + } + changeNavigationBarColor(listColors.primary.background, isDark, true); + } + } + }, + [editorToolbarColors, listColors, isDark] + ); + useEffect(() => { - changeNavigationBarColor(colors.primary.background, isDark, true); - }, [colors.primary.background, isDark]); + if (editorState().movedAway) { + changeNavigationBarColor(listColors.primary.background, isDark, true); + } else { + changeNavigationBarColor( + editorToolbarColors.primary.background, + isDark, + true + ); + } + }, [ + listColors.primary.background, + editorToolbarColors.primary.background, + isDark + ]); return ( { ); }; export const TabHolder = React.memo(_TabsHolder, () => true); - -const onChangeTab = async (obj) => { - if (obj.i === 2) { - editorState().movedAway = false; - editorState().isFocused = true; - activateKeepAwake(); - if (!editorState().currentlyEditing) { - eSendEvent(eOnLoadNote, { type: "new" }); - } - } else { - if (obj.from === 2) { - deactivateKeepAwake(); - editorState().movedAway = true; - editorState().isFocused = false; - eSendEvent(eClearEditor, "removeHandler"); - setTimeout(() => useEditorStore.getState().setSearchReplace(false), 1); - let id = useEditorStore.getState().currentEditingNote; - let note = db.notes.note(id); - if (note?.locked) { - eSendEvent(eClearEditor); - } - } - } -};