diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx index 9d227492..97780e21 100644 --- a/src/pages/_document.jsx +++ b/src/pages/_document.jsx @@ -9,11 +9,7 @@ export default function Document() { content="A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations." /> - +
diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 672e5641..687075b5 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -2,6 +2,7 @@ import useSWR, { SWRConfig } from "swr"; import Head from "next/head"; import dynamic from "next/dynamic"; +import classNames from "classnames"; import { useTranslation } from "next-i18next"; import { useEffect, useContext, useState } from "react"; import { BiError } from "react-icons/bi"; @@ -12,12 +13,12 @@ import BookmarksGroup from "components/bookmarks/group"; import Widget from "components/widgets/widget"; import Revalidate from "components/toggles/revalidate"; import createLogger from "utils/logger"; +import useWindowFocus from "utils/hooks/window-focus"; import { getSettings } from "utils/config/config"; import { ColorContext } from "utils/contexts/color"; import { ThemeContext } from "utils/contexts/theme"; import { SettingsContext } from "utils/contexts/settings"; import { bookmarksResponse, servicesResponse, widgetsResponse } from "utils/config/api-response"; -import useWindowFocus from "utils/hooks/window-focus"; const ThemeToggle = dynamic(() => import("components/toggles/theme"), { ssr: false, @@ -74,7 +75,7 @@ export async function getStaticProps() { } } -export default function Index({ initialSettings, fallback }) { +function Index({ initialSettings, fallback }) { const windowFocused = useWindowFocus(); const [stale, setStale] = useState(false); const { data: errorsData } = useSWR("/api/validate"); @@ -119,7 +120,7 @@ export default function Index({ initialSettings, fallback }) { if (errorsData && errorsData.length > 0) { return ( -
+
{errorsData.map((error, i) => (
{ @@ -186,12 +187,12 @@ function Home({ initialSettings }) { return ( <> - {settings.title || "Homepage"} - {settings.base && } - {settings.favicon && } + {initialSettings.title || "Homepage"} + {initialSettings.base && } + {initialSettings.favicon && } -
-
+
+
{widgets && ( <> @@ -215,7 +216,7 @@ function Home({ initialSettings }) { {services && (
{services.map((group) => ( - + ))}
)} @@ -229,9 +230,9 @@ function Home({ initialSettings }) { )}
- {!settings?.color && } + {!initialSettings?.color && } - {!settings?.theme && } + {!initialSettings?.theme && }
@@ -241,3 +242,23 @@ function Home({ initialSettings }) { ); } + +export default function Wrapper({ initialSettings, fallback }) { + return ( +
+
+ +
+
+ ); +} diff --git a/src/styles/globals.css b/src/styles/globals.css index ce1ee181..34c97333 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -9,33 +9,50 @@ padding: 0; } +html, body { font-family: Manrope, "Manrope-Fallback", Arial, sans-serif; + overflow: hidden; +} + +#page_wrapper { + width: 100vw; + height: 100vh; + margin: 0; + padding: 0; overflow: overlay; } -.light body::-webkit-scrollbar { +.light #page_container { + scrollbar-color: rgb(var(--color-300)) rgb(var(--color-200)); +} + +.dark #page_container { + scrollbar-color: rgb(var(--color-600)) rgb(var(--color-700)); +} + +.light ::-webkit-scrollbar { width: 0.75em; } -.light body::-webkit-scrollbar-track { +.light ::-webkit-scrollbar-track { background-color: rgb(var(--color-200)); } -.light body::-webkit-scrollbar-thumb { +.light ::-webkit-scrollbar-thumb { background-color: rgb(var(--color-300)); border-radius: 0.25em; } -.dark body::-webkit-scrollbar { +.dark ::-webkit-scrollbar { width: 0.75em; } -.dark body::-webkit-scrollbar-track { +.dark ::-webkit-scrollbar-track { background-color: rgb(var(--color-700)); } -.dark body::-webkit-scrollbar-thumb { +.dark ::-webkit-scrollbar-thumb { background-color: rgb(var(--color-600)); border-radius: 0.25em; } diff --git a/src/utils/contexts/color.jsx b/src/utils/contexts/color.jsx index 83aa692d..d7d985f0 100644 --- a/src/utils/contexts/color.jsx +++ b/src/utils/contexts/color.jsx @@ -20,7 +20,7 @@ export function ColorProvider({ initialTheme, children }) { const [color, setColor] = useState(getInitialColor); const rawSetColor = (rawColor) => { - const root = window.document.documentElement; + const root = window.document.getElementById("page_wrapper"); root.classList.remove(`theme-${lastColor}`); root.classList.add(`theme-${rawColor}`); diff --git a/src/utils/contexts/theme.jsx b/src/utils/contexts/theme.jsx index 89b5a57b..85d613fc 100644 --- a/src/utils/contexts/theme.jsx +++ b/src/utils/contexts/theme.jsx @@ -22,7 +22,7 @@ export function ThemeProvider({ initialTheme, children }) { const [theme, setTheme] = useState(getInitialTheme); const rawSetTheme = (rawTheme) => { - const root = window.document.documentElement; + const root = window.document.getElementById("page_wrapper"); const isDark = rawTheme === "dark"; root.classList.remove(isDark ? "light" : "dark");