mirror of
https://github.com/stonith404/pingvin-share.git
synced 2025-02-12 01:48:10 -05:00
feat: use system color theme
This commit is contained in:
parent
db7edc4cd6
commit
d902aae03f
5 changed files with 51 additions and 108 deletions
frontend/src
components
pages
|
@ -1,41 +0,0 @@
|
||||||
import {
|
|
||||||
ColorScheme,
|
|
||||||
ColorSchemeProvider,
|
|
||||||
MantineProvider,
|
|
||||||
} from "@mantine/core";
|
|
||||||
import { ModalsProvider } from "@mantine/modals";
|
|
||||||
import { setCookies } from "cookies-next";
|
|
||||||
import { Dispatch, ReactNode, SetStateAction } from "react";
|
|
||||||
import mantineTheme from "../../styles/mantine.style";
|
|
||||||
|
|
||||||
const ThemeProvider = ({
|
|
||||||
children,
|
|
||||||
colorScheme,
|
|
||||||
setColorScheme,
|
|
||||||
}: {
|
|
||||||
children: ReactNode;
|
|
||||||
colorScheme: ColorScheme;
|
|
||||||
setColorScheme: Dispatch<SetStateAction<ColorScheme>>;
|
|
||||||
}) => {
|
|
||||||
const toggleColorScheme = (value?: ColorScheme) => {
|
|
||||||
const nextColorScheme =
|
|
||||||
value || (colorScheme === "dark" ? "light" : "dark");
|
|
||||||
setColorScheme(nextColorScheme);
|
|
||||||
setCookies("mantine-color-scheme", nextColorScheme, {
|
|
||||||
maxAge: 60 * 60 * 24 * 30,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MantineProvider theme={{ colorScheme, ...mantineTheme }} withGlobalStyles>
|
|
||||||
<ColorSchemeProvider
|
|
||||||
colorScheme={colorScheme}
|
|
||||||
toggleColorScheme={toggleColorScheme}
|
|
||||||
>
|
|
||||||
<ModalsProvider>{children}</ModalsProvider>
|
|
||||||
</ColorSchemeProvider>
|
|
||||||
</MantineProvider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ThemeProvider;
|
|
|
@ -1,8 +1,7 @@
|
||||||
import { ActionIcon, Avatar, Menu } from "@mantine/core";
|
import { ActionIcon, Avatar, Menu } from "@mantine/core";
|
||||||
import { NextLink } from "@mantine/next";
|
import { NextLink } from "@mantine/next";
|
||||||
import { DoorExit, Link, Moon } from "tabler-icons-react";
|
import { DoorExit, Link } from "tabler-icons-react";
|
||||||
import authService from "../../services/auth.service";
|
import authService from "../../services/auth.service";
|
||||||
import ToggleThemeButton from "./ToggleThemeButton";
|
|
||||||
|
|
||||||
const ActionAvatar = () => {
|
const ActionAvatar = () => {
|
||||||
return (
|
return (
|
||||||
|
@ -13,13 +12,12 @@ const ActionAvatar = () => {
|
||||||
</ActionIcon>
|
</ActionIcon>
|
||||||
</Menu.Target>
|
</Menu.Target>
|
||||||
<Menu.Dropdown>
|
<Menu.Dropdown>
|
||||||
<Menu.Label>My account</Menu.Label>
|
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
component={NextLink}
|
component={NextLink}
|
||||||
href="/account/shares"
|
href="/account/shares"
|
||||||
icon={<Link size={14} />}
|
icon={<Link size={14} />}
|
||||||
>
|
>
|
||||||
Shares
|
My shares
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
|
@ -29,10 +27,6 @@ const ActionAvatar = () => {
|
||||||
>
|
>
|
||||||
Sign out
|
Sign out
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Label>Settings</Menu.Label>
|
|
||||||
<Menu.Item icon={<Moon size={14} />}>
|
|
||||||
<ToggleThemeButton />
|
|
||||||
</Menu.Item>
|
|
||||||
</Menu.Dropdown>
|
</Menu.Dropdown>
|
||||||
</Menu>
|
</Menu>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import {
|
import {
|
||||||
|
Box,
|
||||||
Burger,
|
Burger,
|
||||||
Container,
|
Container,
|
||||||
createStyles,
|
createStyles,
|
||||||
|
@ -111,7 +112,7 @@ const NavBar = () => {
|
||||||
const user = useUser();
|
const user = useUser();
|
||||||
const [opened, toggleOpened] = useDisclosure(false);
|
const [opened, toggleOpened] = useDisclosure(false);
|
||||||
|
|
||||||
const [authenticatedLinks, setAuthenticatedLinks] = useState<Link[]>([
|
const authenticatedLinks = [
|
||||||
{
|
{
|
||||||
link: "/upload",
|
link: "/upload",
|
||||||
label: "Upload",
|
label: "Upload",
|
||||||
|
@ -119,7 +120,7 @@ const NavBar = () => {
|
||||||
{
|
{
|
||||||
component: <ActionAvatar />,
|
component: <ActionAvatar />,
|
||||||
},
|
},
|
||||||
]);
|
];
|
||||||
|
|
||||||
const [unauthenticatedLinks, setUnauthenticatedLinks] = useState<Link[]>([
|
const [unauthenticatedLinks, setUnauthenticatedLinks] = useState<Link[]>([
|
||||||
{
|
{
|
||||||
|
@ -149,16 +150,15 @@ const NavBar = () => {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const { classes, cx } = useStyles();
|
const { classes, cx } = useStyles();
|
||||||
console.log(user);
|
|
||||||
const items = (
|
const items = (
|
||||||
<>
|
<>
|
||||||
{(user ? authenticatedLinks : unauthenticatedLinks).map((link) => {
|
{(user ? authenticatedLinks : unauthenticatedLinks).map((link) => {
|
||||||
if (link.component) {
|
if (link.component) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Container pl={5} py={15}>
|
<Box pl={5} py={15}>
|
||||||
{link.component}
|
{link.component}
|
||||||
</Container>
|
</Box>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -185,8 +185,8 @@ const NavBar = () => {
|
||||||
<Image
|
<Image
|
||||||
src="/img/logo.svg"
|
src="/img/logo.svg"
|
||||||
alt="Pinvgin Share Logo"
|
alt="Pinvgin Share Logo"
|
||||||
height={40}
|
height={35}
|
||||||
width={40}
|
width={35}
|
||||||
/>
|
/>
|
||||||
<Text weight={600}>Pingvin Share</Text>
|
<Text weight={600}>Pingvin Share</Text>
|
||||||
</Group>
|
</Group>
|
||||||
|
|
|
@ -1,19 +0,0 @@
|
||||||
import { Switch, useMantineColorScheme } from "@mantine/core";
|
|
||||||
|
|
||||||
const ToggleThemeButton = () => {
|
|
||||||
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Switch
|
|
||||||
size="sm"
|
|
||||||
checked={colorScheme == "dark"}
|
|
||||||
onClick={(v) =>
|
|
||||||
toggleColorScheme(v.currentTarget.checked ? "dark" : "light")
|
|
||||||
}
|
|
||||||
onLabel="ON"
|
|
||||||
offLabel="OFF"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ToggleThemeButton;
|
|
|
@ -5,15 +5,14 @@ import {
|
||||||
MantineProvider,
|
MantineProvider,
|
||||||
Stack,
|
Stack,
|
||||||
} from "@mantine/core";
|
} from "@mantine/core";
|
||||||
|
import { useColorScheme } from "@mantine/hooks";
|
||||||
import { ModalsProvider } from "@mantine/modals";
|
import { ModalsProvider } from "@mantine/modals";
|
||||||
import { NotificationsProvider } from "@mantine/notifications";
|
import { NotificationsProvider } from "@mantine/notifications";
|
||||||
import { getCookie } from "cookies-next";
|
import { getCookie, setCookies } from "cookies-next";
|
||||||
import { GetServerSidePropsContext } from "next";
|
import { GetServerSidePropsContext } from "next";
|
||||||
import type { AppProps } from "next/app";
|
import type { AppProps } from "next/app";
|
||||||
import getConfig from "next/config";
|
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import Footer from "../components/Footer";
|
import Footer from "../components/Footer";
|
||||||
import ThemeProvider from "../components/mantine/ThemeProvider";
|
|
||||||
import Header from "../components/navBar/NavBar";
|
import Header from "../components/navBar/NavBar";
|
||||||
import { UserContext } from "../hooks/user.hook";
|
import { UserContext } from "../hooks/user.hook";
|
||||||
import authService from "../services/auth.service";
|
import authService from "../services/auth.service";
|
||||||
|
@ -23,12 +22,13 @@ import globalStyle from "../styles/mantine.style";
|
||||||
import { CurrentUser } from "../types/user.type";
|
import { CurrentUser } from "../types/user.type";
|
||||||
import { GlobalLoadingContext } from "../utils/loading.util";
|
import { GlobalLoadingContext } from "../utils/loading.util";
|
||||||
|
|
||||||
const { publicRuntimeConfig } = getConfig()
|
|
||||||
|
|
||||||
function App(
|
function App(
|
||||||
props: AppProps & { colorScheme: ColorScheme; environmentVariables: any }
|
props: AppProps & { colorScheme: ColorScheme; environmentVariables: any }
|
||||||
) {
|
) {
|
||||||
const { Component, pageProps } = props;
|
const { Component, pageProps } = props;
|
||||||
|
|
||||||
|
const systemTheme = useColorScheme();
|
||||||
|
|
||||||
const [colorScheme, setColorScheme] = useState<ColorScheme>(
|
const [colorScheme, setColorScheme] = useState<ColorScheme>(
|
||||||
props.colorScheme
|
props.colorScheme
|
||||||
);
|
);
|
||||||
|
@ -36,19 +36,29 @@ function App(
|
||||||
const [user, setUser] = useState<CurrentUser | null>(null);
|
const [user, setUser] = useState<CurrentUser | null>(null);
|
||||||
|
|
||||||
const getInitalData = async () => {
|
const getInitalData = async () => {
|
||||||
console.log(publicRuntimeConfig)
|
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
setUser(await userService.getCurrentUser());
|
setUser(await userService.getCurrentUser());
|
||||||
|
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setInterval(async () => await authService.refreshAccessToken(), 30 * 1000);
|
setInterval(async () => await authService.refreshAccessToken(), 30 * 1000);
|
||||||
getInitalData();
|
getInitalData();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setCookies("mantine-color-scheme", systemTheme, {
|
||||||
|
maxAge: 60 * 60 * 24 * 30,
|
||||||
|
});
|
||||||
|
setColorScheme(systemTheme);
|
||||||
|
}, [systemTheme]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MantineProvider withGlobalStyles withNormalizeCSS theme={globalStyle}>
|
<MantineProvider
|
||||||
<ThemeProvider colorScheme={colorScheme} setColorScheme={setColorScheme}>
|
withGlobalStyles
|
||||||
|
withNormalizeCSS
|
||||||
|
theme={{ colorScheme, ...globalStyle }}
|
||||||
|
>
|
||||||
<GlobalStyle />
|
<GlobalStyle />
|
||||||
<NotificationsProvider>
|
<NotificationsProvider>
|
||||||
<ModalsProvider>
|
<ModalsProvider>
|
||||||
|
@ -72,7 +82,6 @@ function App(
|
||||||
</GlobalLoadingContext.Provider>
|
</GlobalLoadingContext.Provider>
|
||||||
</ModalsProvider>
|
</ModalsProvider>
|
||||||
</NotificationsProvider>
|
</NotificationsProvider>
|
||||||
</ThemeProvider>
|
|
||||||
</MantineProvider>
|
</MantineProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue