diff --git a/apps/web/public/index.html b/apps/web/public/index.html index c0716b7f2..cc45ca3ca 100644 --- a/apps/web/public/index.html +++ b/apps/web/public/index.html @@ -1,47 +1,27 @@ - - - - - - - - - - - - - - + + + + + + - - + - - - - - - - - - - Notesnook - Your private note taking space + + + + + + + + + + Notesnook - Your private note taking space - - - - - - -
-
+
- - - - - - - - - - - - - - - - - - - -
-
-
- - -

- Hello World -

- - + + + \ No newline at end of file diff --git a/apps/web/src/app.js b/apps/web/src/app.js index cd5cc5b1d..1c3646e9d 100644 --- a/apps/web/src/app.js +++ b/apps/web/src/app.js @@ -30,8 +30,8 @@ import Config from "./utils/config"; import { useStore } from "./stores/app-store"; import { Toaster } from "react-hot-toast"; import { ViewLoader } from "./components/loaders/view-loader"; -import { NavigationLoader } from "./components/loaders/navigation-loader"; -import { StatusBarLoader } from "./components/loaders/status-bar-loader"; +import NavigationMenu from "./components/navigation-menu"; +import StatusBar from "./components/status-bar"; import { EditorLoader } from "./components/loaders/editor-loader"; const GlobalMenuWrapper = React.lazy(() => @@ -41,8 +41,6 @@ const AppEffects = React.lazy(() => import("./app-effects")); const MobileAppEffects = React.lazy(() => import("./app-effects.mobile")); const CachedRouter = React.lazy(() => import("./components/cached-router")); const HashRouter = React.lazy(() => import("./components/hash-router")); -const NavigationMenu = React.lazy(() => import("./components/navigation-menu")); -const StatusBar = React.lazy(() => import("./components/status-bar")); function App() { const isMobile = useMobile(); @@ -142,16 +140,11 @@ function DesktopAppContents({ isAppLoaded, show, setShow }) { priority={LayoutPriority.Low} > - { - setShow(state || !show); - }, - isTablet: isNarrow + { + setShow(state || !show); }} - fallback={} + isTablet={isNarrow} /> @@ -191,11 +184,7 @@ function DesktopAppContents({ isAppLoaded, show, setShow }) { - } - component={StatusBar} - condition={isAppLoaded} - /> + ); } @@ -223,14 +212,7 @@ function MobileAppContents({ isAppLoaded }) { flexShrink: 0 }} > - {} - }} - fallback={} - /> + {}} isTablet={false} /> - - + + - + - - + + ); diff --git a/apps/web/src/components/loaders/list-loader.tsx b/apps/web/src/components/loaders/list-loader.tsx index f0e219bf0..f8c67d6f8 100644 --- a/apps/web/src/components/loaders/list-loader.tsx +++ b/apps/web/src/components/loaders/list-loader.tsx @@ -28,10 +28,10 @@ export const ListLoader = memo(function ListLoader() { return ( <> - + - + - + @@ -53,18 +53,16 @@ export const ListLoader = memo(function ListLoader() { - + - + @@ -72,7 +70,6 @@ export const ListLoader = memo(function ListLoader() { height={10} inline width={10} - baseColor="var(--hover)" circle style={{ marginLeft: 5 }} /> diff --git a/apps/web/src/components/loaders/navigation-loader.tsx b/apps/web/src/components/loaders/navigation-loader.tsx deleted file mode 100644 index d2b4524e8..000000000 --- a/apps/web/src/components/loaders/navigation-loader.tsx +++ /dev/null @@ -1,70 +0,0 @@ -/* -This file is part of the Notesnook project (https://notesnook.com/) - -Copyright (C) 2022 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 { memo } from "react"; -import Skeleton from "react-loading-skeleton"; -import { Box, Flex } from "@theme-ui/components"; -import "react-loading-skeleton/dist/skeleton.css"; - -export const NavigationLoader = memo(function NavigationLoader() { - return ( - - {[0, 1, 2, 3, 4, 5].map((i) => ( - - - - - - - ))} - - ); -}); diff --git a/apps/web/src/components/loaders/status-bar-loader.tsx b/apps/web/src/components/loaders/status-bar-loader.tsx deleted file mode 100644 index f7f3595f1..000000000 --- a/apps/web/src/components/loaders/status-bar-loader.tsx +++ /dev/null @@ -1,46 +0,0 @@ -/* -This file is part of the Notesnook project (https://notesnook.com/) - -Copyright (C) 2022 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 { memo } from "react"; -import Skeleton from "react-loading-skeleton"; -import { Box } from "@theme-ui/components"; -import "react-loading-skeleton/dist/skeleton.css"; - -export const StatusBarLoader = memo(function StatusBarLoader() { - return ( - - - - ); -}); diff --git a/apps/web/src/components/loaders/view-loader.tsx b/apps/web/src/components/loaders/view-loader.tsx index f9c75b575..b4db08882 100644 --- a/apps/web/src/components/loaders/view-loader.tsx +++ b/apps/web/src/components/loaders/view-loader.tsx @@ -25,23 +25,12 @@ import { ListLoader } from "./list-loader"; export const ViewLoader = memo(function ViewLoader() { return ( - - - + + + - - + + diff --git a/apps/web/src/components/theme-provider/index.js b/apps/web/src/components/theme-provider/index.js index f307e89ff..2870e5c50 100644 --- a/apps/web/src/components/theme-provider/index.js +++ b/apps/web/src/components/theme-provider/index.js @@ -20,12 +20,18 @@ along with this program. If not, see . import { useStore } from "../../stores/theme-store"; import { ThemeProvider as EmotionThemeProvider } from "@emotion/react"; import { useTheme } from "@notesnook/theme"; +import { useEffect } from "react"; function ThemeProviderWrapper(props) { const theme = useStore((store) => store.theme); const accent = useStore((store) => store.accent); const themeProperties = useTheme({ accent, theme }); + useEffect(() => { + const root = document.querySelector("html"); + if (root) root.setAttribute("data-theme", theme); + }, [theme]); + return ( {props.children instanceof Function