FreakU
/
canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dark-mode' into 'main' 

Dark mode

See merge request sc07/canvas!16
This commit is contained in:
Grant 2024-07-15 15:54:59 +00:00
parent 112f72b4d9 282b67deed
commit eb7b275ba1
17 changed files with 202 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
package-lock.json generated
View File

@ -6278,6 +6278,19 @@
"tslib": "^2.4.0"
}
},
"node_modules/@theme-toggles/react": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@theme-toggles/react/-/react-4.1.0.tgz",
"integrity": "sha512-h3SuJMsej8DfelHt5fjNIlaMfJOK52Vku4pPDVoHaTwjAcoTr4fn8hzeur2oiqWBYFYfKugvv1RdQaBFXaiPKg==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/alfiejones"
},
"peerDependencies": {
"react": "^16 || ^17 || ^18",
"react-dom": "^16 || ^17 || ^18"
}
},
"node_modules/@tsconfig/node10": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
@ -16261,10 +16274,12 @@
"@icons-pack/react-simple-icons": "^9.6.0",
"@nextui-org/react": "^2.2.9",
"@sc07-canvas/lib": "^1.0.0",
"@theme-toggles/react": "^4.1.0",
"@typescript-eslint/parser": "^7.1.0",
"eventemitter3": "^5.0.1",
"framer-motion": "^11.3.2",
"lodash.throttle": "^4.1.1",
"next-themes": "^0.3.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@ -16472,6 +16487,15 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
},
"packages/client/node_modules/next-themes": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
"integrity": "sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==",
"peerDependencies": {
"react": "^16.8 || ^17 || ^18",
"react-dom": "^16.8 || ^17 || ^18"
}
},
"packages/lib": {
"name": "@sc07-canvas/lib",
"version": "1.0.0",

13
packages/admin/src/components/ToastWrapper.tsx Normal file
View File

@ -0,0 +1,13 @@
import { useTheme } from "next-themes";
import { ToastContainer } from "react-toastify";
export const ToastWrapper = () => {
const { theme } = useTheme()
return (
<ToastContainer
position="bottom-right"
theme={theme}
/>
);
};

3
packages/admin/src/main.tsx
View File

@ -10,6 +10,7 @@ import { AccountsPage } from "./pages/Accounts/Accounts/page.tsx";
import { ServiceSettingsPage } from "./pages/Service/settings.tsx";
import { ToastContainer } from "react-toastify";
import { AuditLog } from "./pages/AuditLog/auditlog.tsx";
import { ToastWrapper } from "./components/ToastWrapper.tsx";
const router = createBrowserRouter(
[
@ -47,7 +48,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
<ThemeProvider defaultTheme="system">
<RouterProvider router={router} />
<ToastContainer position="bottom-right" />
<ToastWrapper />
</ThemeProvider>
</NextUIProvider>
</React.StrictMode>

2
packages/client/package.json
View File

@ -27,10 +27,12 @@
"@icons-pack/react-simple-icons": "^9.6.0",
"@nextui-org/react": "^2.2.9",
"@sc07-canvas/lib": "^1.0.0",
"@theme-toggles/react": "^4.1.0",
"@typescript-eslint/parser": "^7.1.0",
"eventemitter3": "^5.0.1",
"framer-motion": "^11.3.2",
"lodash.throttle": "^4.1.1",
"next-themes": "^0.3.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",

3
packages/client/src/components/App.tsx
View File

@ -19,6 +19,7 @@ import { WelcomeModal } from "./Welcome/WelcomeModal";
import { InfoSidebar } from "./Info/InfoSidebar";
import { ModModal } from "./Moderation/ModModal";
import { DynamicModals } from "./DynamicModals";
import { ToastWrapper } from "./ToastWrapper";
const Chat = lazy(() => import("./Chat/Chat"));
@ -152,7 +153,7 @@ const AppInner = () => {
<WelcomeModal />
<ModModal />
<ToastContainer position="top-left" />
<ToastWrapper />
<DynamicModals />
</>
);

12
packages/client/src/components/Chat/OpenChatButton.tsx
View File

@ -1,6 +1,8 @@
import { Badge, Button, Link } from "@nextui-org/react";
import { useChatContext } from "../../contexts/ChatContext";
import { useAppContext } from "../../contexts/AppContext";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faComments } from "@fortawesome/free-solid-svg-icons";
const OpenChatButton = () => {
const { config } = useAppContext();
@ -13,7 +15,15 @@ const OpenChatButton = () => {
color="danger"
size="sm"
>
{config?.chat?.element_host && <Button onPress={doLogin}>Chat</Button>}
{
config?.chat?.element_host &&
<Button
onPress={doLogin}
variant="ghost"
>
<FontAwesomeIcon icon={faComments} />
<p>Chat</p>
</Button>}
</Badge>
);
};

49
packages/client/src/components/Header/Header.tsx
View File

@ -1,18 +1,8 @@
import { Button, Card, CardBody, Link } from "@nextui-org/react";
import { Card, CardBody } from "@nextui-org/react";
import { useAppContext } from "../../contexts/AppContext";
import { User } from "./User";
import { Debug } from "@sc07-canvas/lib/src/debug";
import React, { lazy } from "react";
import { AccountStanding } from "./AccountStanding";
import { EventInfoOverlay } from "../EventInfoOverlay";
const OpenChatButton = lazy(() => import("../Chat/OpenChatButton"));
const DynamicChat = () => {
const { loadChat } = useAppContext();
return <React.Suspense>{loadChat && <OpenChatButton />}</React.Suspense>;
};
import { HeaderLeft } from "./HeaderLeft";
import { HeaderRight } from "./HeaderRight";
export const Header = () => {
const { connected } = useAppContext();
@ -20,8 +10,8 @@ export const Header = () => {
return (
<header id="main-header">
{import.meta.env.VITE_INCLUDE_EVENT_INFO && <EventInfoOverlay />}
<div className="flex justify-between w-full">
<HeaderLeft />
<div className="spacer"></div>
{!connected && (
<div>
<Card>
@ -29,39 +19,10 @@ export const Header = () => {
</Card>
</div>
)}
<div className="spacer"></div>
<HeaderRight />
</div>
</header>
);
};
const HeaderLeft = () => {
const { setInfoSidebar } = useAppContext();
return (
<div className="box">
<AccountStanding />
<Button onPress={() => setInfoSidebar(true)}>Info</Button>
{import.meta.env.DEV && (
<Button onPress={() => Debug.openDebugTools()}>Debug Tools</Button>
)}
</div>
);
};
const HeaderRight = () => {
const { setSettingsSidebar, hasAdmin } = useAppContext();
return (
<div className="box">
<User />
<Button onClick={() => setSettingsSidebar(true)}>Settings</Button>
{hasAdmin && (
<Button href="/admin" target="_blank" as={Link}>
Admin
</Button>
)}
<DynamicChat />
</div>
);
};

32
packages/client/src/components/Header/HeaderLeft.tsx Normal file
View File

@ -0,0 +1,32 @@
import { Button } from "@nextui-org/react";
import { useAppContext } from "../../contexts/AppContext";
import { AccountStanding } from "./AccountStanding";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Debug } from "@sc07-canvas/lib/src/debug";
import { faInfoCircle, faTools } from "@fortawesome/free-solid-svg-icons";
export const HeaderLeft = () => {
const { setInfoSidebar } = useAppContext();
return (
<div className="box gap-2 flex">
<AccountStanding />
<Button
onPress={() => setInfoSidebar(true)}
variant="ghost"
>
<FontAwesomeIcon icon={faInfoCircle} />
<p>Info</p>
</Button>
{import.meta.env.DEV && (
<Button
onPress={() => Debug.openDebugTools()}
variant="ghost"
>
<FontAwesomeIcon icon={faTools} />
<p>Debug Tools</p>
</Button>
)}
</div>
);
};

42
packages/client/src/components/Header/HeaderRight.tsx Normal file
View File

@ -0,0 +1,42 @@
import { Button, Link } from "@nextui-org/react";
import { useAppContext } from "../../contexts/AppContext";
import { User } from "./User";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ThemeSwitcher } from "./ThemeSwitcher";
import { faGear, faHammer } from "@fortawesome/free-solid-svg-icons";
import React, { lazy } from "react";
const OpenChatButton = lazy(() => import("../Chat/OpenChatButton"));
const DynamicChat = () => {
const { loadChat } = useAppContext();
return <React.Suspense>{loadChat && <OpenChatButton />}</React.Suspense>;
};
export const HeaderRight = () => {
const { setSettingsSidebar, hasAdmin } = useAppContext();
return (
<div className="box flex flex-col gap-2">
<User />
<div className="flex gap-2">
<Button
onClick={() => setSettingsSidebar(true)}
variant="ghost"
>
<FontAwesomeIcon icon={faGear} />
<p>Settings</p>
</Button>
<ThemeSwitcher />
{hasAdmin && (
<Button href="/admin" target="_blank" as={Link} variant="ghost" >
<FontAwesomeIcon icon={faHammer} />
<p>Admin</p>
</Button>
)}
<DynamicChat />
</div>
</div>
);
};

34
packages/client/src/components/Header/ThemeSwitcher.tsx Normal file
View File

@ -0,0 +1,34 @@
import "@theme-toggles/react/css/Classic.css"
import { Classic } from "@theme-toggles/react"
import {useTheme} from "next-themes";
import { useEffect, useState } from "react";
import { Button } from "@nextui-org/react";
export function ThemeSwitcher() {
const [mounted, setMounted] = useState(false)
const { theme, setTheme } = useTheme()
const [isToggled, setToggle] = useState(false)
useEffect(() => {
setMounted(true)
setToggle(theme === 'dark')
}, [])
useEffect(() => {
if (isToggled) {
setTheme('dark')
} else {
setTheme('light')
}
}, [isToggled])
if(!mounted) return null
return (
<Button onClick={() => { setToggle(!isToggled) }} variant="ghost">
<Classic toggled={isToggled} placeholder={undefined} />
<p>{theme === 'dark' ? "Dark" : "Light"}</p>
</Button>
)
};

4
packages/client/src/components/Info/InfoSidebar.tsx
View File

@ -24,13 +24,13 @@ export const InfoSidebar = () => {
transition={{ type: 'spring', stiffness: 50 }}
/>
<motion.div
className="min-w-[20rem] max-w-[75vw] md:max-w-[30vw] bg-white text-black flex flex-col justify-between fixed left-0 h-full shadow-xl overflow-y-auto z-50 top-0"
className="min-w-[20rem] max-w-[75vw] md:max-w-[30vw] bg-white dark:bg-black flex flex-col justify-between fixed left-0 h-full shadow-xl overflow-y-auto z-50 top-0"
initial={{ x: '-150%' }}
animate={{ x: infoSidebar ? '-50%' : '-150%' }}
transition={{ type: 'spring', stiffness: 50 }}
/>
<motion.div
className="min-w-[20rem] max-w-[75vw] md:max-w-[30vw] bg-white text-black flex flex-col justify-between fixed left-0 h-full shadow-xl overflow-y-auto z-50 top-0"
className="min-w-[20rem] max-w-[75vw] md:max-w-[30vw] bg-white dark:bg-black text-black dark:text-white flex flex-col justify-between fixed left-0 h-full shadow-xl overflow-y-auto z-50 top-0"
initial={{ x: '-100%' }}
animate={{ x: infoSidebar ? 0 : '-100%' }}
transition={{ type: 'spring', stiffness: 50 }}

2
packages/client/src/components/Settings/SettingsSidebar.tsx
View File

@ -12,7 +12,7 @@ export const SettingsSidebar = () => {
return (
<div
className="sidebar sidebar-right"
className="sidebar sidebar-right bg-white text-black dark:bg-black dark:text-white"
style={{ ...(settingsSidebar ? {} : { display: "none" }) }}
>
<header>

13
packages/client/src/components/ToastWrapper.tsx Normal file
View File

@ -0,0 +1,13 @@
import { useTheme } from "next-themes";
import { ToastContainer } from "react-toastify";
export const ToastWrapper = () => {
const { theme } = useTheme()
return (
<ToastContainer
position="top-left"
theme={theme}
/>
);
};

2
packages/client/src/components/Toolbar/Palette.scss
View File

@ -12,8 +12,6 @@
z-index: 10;
position: relative;
background-color: #fff;
.pallete-colors {
// display: flex;
// width: 100%;

8
packages/client/src/components/Toolbar/Palette.tsx
View File

@ -29,7 +29,7 @@ export const Palette = () => {
}, []);
return (
<div id="pallete">
<div id="pallete" className="bg-[#fff] dark:bg-[#000]">
<div className="pallete-colors">
<button
aria-label="Deselect Color"
@ -71,12 +71,12 @@ export const Palette = () => {
{import.meta.env.VITE_INCLUDE_EVENT_INFO ? (
<>The event hasn't started yet</>
) : (
<>
<div className="flex gap-3 items-center">
You are not logged in
<Button as={Link} href="/api/login" className="user-login">
<Button as={Link} href="/api/login" className="user-login" variant="faded">
Login
</Button>
</>
</div>
)}
</div>
)}

5
packages/client/src/index.tsx
View File

@ -1,6 +1,7 @@
import React from "react";
import { createRoot } from "react-dom/client";
import { NextUIProvider } from "@nextui-org/react";
import { ThemeProvider } from 'next-themes'
import App from "./components/App";
import Bugsnag from "@bugsnag/js";
@ -26,7 +27,11 @@ root.render(
<React.StrictMode>
<ErrorBoundary>
<NextUIProvider>
<ThemeProvider attribute="class" defaultTheme="system">
<div className="w-screen h-screen bg-[#ddd] dark:bg-[#060606]">
<App />
</div>
</ThemeProvider>
</NextUIProvider>
</ErrorBoundary>
</React.StrictMode>

4
packages/client/src/style.scss
View File

@ -10,8 +10,6 @@ html,
body {
overscroll-behavior: contain;
touch-action: none;
background-color: #ddd !important;
}
header#main-header {
@ -150,8 +148,6 @@ main {
position: fixed;
top: 0;
z-index: 9998;
background-color: #fff;
color: #000;
height: 100%;
min-width: 20rem;