mobile: theme fixes

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 (

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 (
     <View

apps/mobile/app/components/dialog/index.js

@@ -38,7 +38,7 @@ import { useCallback } from "react";
 import { Button } from "../ui/button";
 
 export const Dialog = ({ context = "global" }) => {
-  const { colors } = useThemeColors();
+  const { colors } = useThemeColors("dialog");
   const [visible, setVisible] = useState(false);
   const [inputValue, setInputValue] = useState(null);
   const inputRef = useRef();

apps/mobile/app/components/header/title.tsx

@@ -114,7 +114,14 @@ export const Title = () => {
               #
             </Heading>
           ) : null}
-          {title} <Tag visible={currentScreen.beta} text="BETA" />
+          {title}{" "}
+          <Tag
+            style={{
+              backgroundColor: "transparent"
+            }}
+            visible={currentScreen.beta}
+            text="BETA"
+          />
         </Heading>
       ) : null}
     </>

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}
           />

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 <http://www.gnu.org/licenses/>.
 */
-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";
 

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 (
     <View
@@ -482,27 +533,3 @@ const _TabsHolder = () => {
   );
 };
 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);
-      }
-    }
-  }
-};