From 2491f201ee8a4bcfe61aefcaa6b6c8eead47f5e7 Mon Sep 17 00:00:00 2001 From: Ategon Date: Sat, 13 Jul 2024 19:25:16 -0400 Subject: [PATCH 1/3] Improve info sidebar --- package-lock.json | 28 ++++-- packages/client/package.json | 3 +- .../src/components/Info/InfoButtons.tsx | 49 ++++++++++ .../client/src/components/Info/InfoHeader.tsx | 29 ++++++ .../src/components/Info/InfoPrivacy.tsx | 22 +++++ .../client/src/components/Info/InfoRules.tsx | 37 ++++++++ .../src/components/Info/InfoSidebar.tsx | 92 ++++++++----------- .../client/src/components/Info/InfoText.tsx | 14 +++ .../src/components/Info/InfoWelcome.tsx | 16 ++++ .../client/src/components/Info/Privacy.tsx | 25 ----- packages/client/src/components/Info/Rules.tsx | 46 ---------- 11 files changed, 225 insertions(+), 136 deletions(-) create mode 100644 packages/client/src/components/Info/InfoButtons.tsx create mode 100644 packages/client/src/components/Info/InfoHeader.tsx create mode 100644 packages/client/src/components/Info/InfoPrivacy.tsx create mode 100644 packages/client/src/components/Info/InfoRules.tsx create mode 100644 packages/client/src/components/Info/InfoText.tsx create mode 100644 packages/client/src/components/Info/InfoWelcome.tsx delete mode 100644 packages/client/src/components/Info/Privacy.tsx delete mode 100644 packages/client/src/components/Info/Rules.tsx diff --git a/package-lock.json b/package-lock.json index 2e50baf..e4d17b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2393,6 +2393,7 @@ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", "optional": true, + "peer": true, "dependencies": { "@emotion/memoize": "0.7.4" } @@ -2401,7 +2402,8 @@ "version": "0.7.4", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", - "optional": true + "optional": true, + "peer": true }, "node_modules/@esbuild/aix-ppc64": { "version": "0.19.12", @@ -3050,6 +3052,14 @@ "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz", "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==" }, + "node_modules/@icons-pack/react-simple-icons": { + "version": "9.6.0", + "resolved": "https://registry.npmjs.org/@icons-pack/react-simple-icons/-/react-simple-icons-9.6.0.tgz", + "integrity": "sha512-8lDLssg+2aJutepQV/P4zlGm0fgujSeIItCYaLKo+25NtwepozWxZJOnc5WGHSi3HjiLcGmxI6dA2eiD5w3i+w==", + "peerDependencies": { + "react": "^16.13 || ^17 || ^18" + } + }, "node_modules/@internationalized/date": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.2.tgz", @@ -9741,20 +9751,21 @@ } }, "node_modules/framer-motion": { - "version": "11.0.5", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.5.tgz", - "integrity": "sha512-Lb0EYbQcSK/pgyQUJm+KzsQrKrJRX9sFRyzl9hSr9gFG4Mk8yP7BjhuxvRXzblOM/+JxycrJdCDVmOQBsjpYlw==", + "version": "11.3.2", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.2.tgz", + "integrity": "sha512-RgjSzrNFZmedWcvmW4MMc84A7UcoY37jocadE3Mbg3o+UMofodfyeNnYD/HR15UhP22/bb5KOebNhYOj4mYkpQ==", "dependencies": { "tslib": "^2.4.0" }, - "optionalDependencies": { - "@emotion/is-prop-valid": "^0.8.2" - }, "peerDependencies": { + "@emotion/is-prop-valid": "*", "react": "^18.0.0", "react-dom": "^18.0.0" }, "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, "react": { "optional": true }, @@ -16241,11 +16252,12 @@ "@fortawesome/free-brands-svg-icons": "^6.5.2", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@icons-pack/react-simple-icons": "^9.6.0", "@nextui-org/react": "^2.2.9", "@sc07-canvas/lib": "^1.0.0", "@typescript-eslint/parser": "^7.1.0", "eventemitter3": "^5.0.1", - "framer-motion": "^11.0.5", + "framer-motion": "^11.3.2", "lodash.throttle": "^4.1.1", "prop-types": "^15.8.1", "react": "^18.2.0", diff --git a/packages/client/package.json b/packages/client/package.json index 4c45fac..e838032 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -24,11 +24,12 @@ "@fortawesome/free-brands-svg-icons": "^6.5.2", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@icons-pack/react-simple-icons": "^9.6.0", "@nextui-org/react": "^2.2.9", "@sc07-canvas/lib": "^1.0.0", "@typescript-eslint/parser": "^7.1.0", "eventemitter3": "^5.0.1", - "framer-motion": "^11.0.5", + "framer-motion": "^11.3.2", "lodash.throttle": "^4.1.1", "prop-types": "^15.8.1", "react": "^18.2.0", diff --git a/packages/client/src/components/Info/InfoButtons.tsx b/packages/client/src/components/Info/InfoButtons.tsx new file mode 100644 index 0000000..fef9b4e --- /dev/null +++ b/packages/client/src/components/Info/InfoButtons.tsx @@ -0,0 +1,49 @@ +import { Button, Link } from "@nextui-org/react"; +import { SiDiscord, SiLemmy, SiMastodon, SiMatrix } from "@icons-pack/react-simple-icons" + +export const InfoButtons = () => { + return ( +
+ + + + +
+ ); +}; diff --git a/packages/client/src/components/Info/InfoHeader.tsx b/packages/client/src/components/Info/InfoHeader.tsx new file mode 100644 index 0000000..90101b5 --- /dev/null +++ b/packages/client/src/components/Info/InfoHeader.tsx @@ -0,0 +1,29 @@ +import { Button } from "@nextui-org/react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faXmark } from "@fortawesome/free-solid-svg-icons"; +import { faInfoCircle } from "@fortawesome/free-solid-svg-icons"; + +export type InfoHeaderProps = { + setInfoSidebar: (value: boolean) => void +} + +export const InfoHeader = ({ setInfoSidebar }: InfoHeaderProps) => { + return ( +
+
+
+ +
+

Info

+

Information about the event

+
+
+ +
+ + +
+ ); +}; diff --git a/packages/client/src/components/Info/InfoPrivacy.tsx b/packages/client/src/components/Info/InfoPrivacy.tsx new file mode 100644 index 0000000..e5e59da --- /dev/null +++ b/packages/client/src/components/Info/InfoPrivacy.tsx @@ -0,0 +1,22 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faShieldHalved } from "@fortawesome/free-solid-svg-icons"; + +export const InfoPrivacy = () => { + return ( +
+
+ +

Privacy

+
+
+
    +
  • + Google Invisible Recaptcha is used to help prevent bots. Google's + privacy policy and terms are available below. +
    • +
  • Usernames should not be assumed to be private
    • +
+
+
+ ); +}; diff --git a/packages/client/src/components/Info/InfoRules.tsx b/packages/client/src/components/Info/InfoRules.tsx new file mode 100644 index 0000000..af1fc0e --- /dev/null +++ b/packages/client/src/components/Info/InfoRules.tsx @@ -0,0 +1,37 @@ +import { faGavel } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +export const InfoRules = () => { + return ( +
+
+ +

Rules

+
+
+
    +
  1. +

    No alternate accounts

    +

    We want to keep it fair and not require people to create more + accounts to defend their art

    +
    2. +
  2. +

    No bots/automated placements

    +

    We're land of the humans, not bots

    +
    3. +
  3. +

    No hate speech or adjacent

    +
    4. +
  4. +

    No gore or nudity (NSFW/NSFL)

    +
    5. +
+

+ This canvas is built upon good faith rules, therefore moderators have + complete discretion on the rules. If you have any questions, ask in + the Matrix space or the Discord +

+
+
+ ) +}; \ No newline at end of file diff --git a/packages/client/src/components/Info/InfoSidebar.tsx b/packages/client/src/components/Info/InfoSidebar.tsx index 1a8473d..2ee4de0 100644 --- a/packages/client/src/components/Info/InfoSidebar.tsx +++ b/packages/client/src/components/Info/InfoSidebar.tsx @@ -1,10 +1,9 @@ -import { Button, Link } from "@nextui-org/react"; +import { Divider } from "@nextui-org/react"; import { useAppContext } from "../../contexts/AppContext"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faXmark } from "@fortawesome/free-solid-svg-icons"; -import { faDiscord } from "@fortawesome/free-brands-svg-icons"; -import { Rules } from "./Rules"; -import { Privacy } from "./Privacy"; +import { InfoHeader } from "./InfoHeader"; +import { InfoText } from "./InfoText"; +import { InfoButtons } from "./InfoButtons"; +import { motion } from "framer-motion" /** * Information sidebar @@ -17,58 +16,39 @@ export const InfoSidebar = () => { const { infoSidebar, setInfoSidebar } = useAppContext(); return ( -
-
-

Information

-
- -
-
-
- - +
+ + + +
+ + + + + +
- - - Build {__COMMIT_HASH__} -
-
- - +
+

Build {__COMMIT_HASH__}

+
+
+
); }; diff --git a/packages/client/src/components/Info/InfoText.tsx b/packages/client/src/components/Info/InfoText.tsx new file mode 100644 index 0000000..d92ecaf --- /dev/null +++ b/packages/client/src/components/Info/InfoText.tsx @@ -0,0 +1,14 @@ +import { InfoPrivacy } from "./InfoPrivacy"; +import { InfoRules } from "./InfoRules"; +import { InfoWelcome } from "./InfoWelcome"; + +export const InfoText = () => { + return ( +
+ + + +
+ ) +}; + diff --git a/packages/client/src/components/Info/InfoWelcome.tsx b/packages/client/src/components/Info/InfoWelcome.tsx new file mode 100644 index 0000000..029e4be --- /dev/null +++ b/packages/client/src/components/Info/InfoWelcome.tsx @@ -0,0 +1,16 @@ +import { faFire } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +export const InfoWelcome = () => { + return ( +
+
+ +

Welcome

+
+
+

Welcome to canvas! This is an event that lasts for 72 hours where users can place pixels every so often on a shared canvas. Everyone has access to the same canvas and pixels can be placed in any location to create things on the canvas.

+
+
+ ) +}; \ No newline at end of file diff --git a/packages/client/src/components/Info/Privacy.tsx b/packages/client/src/components/Info/Privacy.tsx deleted file mode 100644 index cd027a8..0000000 --- a/packages/client/src/components/Info/Privacy.tsx +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Privacy policy listed in InfoSidebar - * - * TODO: Customize this w/o editing the source #46 - * - * @returns - */ -export const Privacy = () => { - return ( - <> -
-

Privacy

-
-
- -
- - ); -}; diff --git a/packages/client/src/components/Info/Rules.tsx b/packages/client/src/components/Info/Rules.tsx deleted file mode 100644 index 5a3a608..0000000 --- a/packages/client/src/components/Info/Rules.tsx +++ /dev/null @@ -1,46 +0,0 @@ -/** - * Rules listed inside InfoSidebar - * - * TODO: Customize this w/o editing the source #46 - * - * @returns - */ -export const Rules = () => { - return ( - <> -
-

Rules

-
-
-

Welcome to Canvas!

-

- We just have a couple rules, to use the canvas you must agree to them -

-
    -
  1. - No alternative accounts -
    - We want to keep it fair and not require people to create more - accounts to defend their art -
    2. -
  2. - No bots/automated placements -
    - We're land of the humans, not bots -
    3. -
  3. - No hate speech or adjacent -
    4. -
  4. - No gore or nudity (NSFW/NSFL) -
    5. -
- - This canvas is built upon good faith rules, therefore moderators have - complete discretion on the rules. If you have any questions, ask in - the Matrix space or the Discord - -
- - ); -}; -- GitLab From 76aac2cd3869e0cd70e268b47435d3d64787c7df Mon Sep 17 00:00:00 2001 From: Ategon Date: Mon, 15 Jul 2024 11:48:55 -0400 Subject: [PATCH 2/3] Add dark mode --- package-lock.json | 24 +++++++ .../admin/src/components/ToastWrapper.tsx | 13 ++++ packages/admin/src/main.tsx | 3 +- packages/client/package.json | 2 + packages/client/src/components/App.tsx | 3 +- .../src/components/Chat/OpenChatButton.tsx | 12 +++- .../client/src/components/Header/Header.tsx | 67 ++++--------------- .../src/components/Header/HeaderLeft.tsx | 32 +++++++++ .../src/components/Header/HeaderRight.tsx | 42 ++++++++++++ .../src/components/Header/ThemeSwitcher.tsx | 34 ++++++++++ .../src/components/Info/InfoSidebar.tsx | 4 +- .../components/Settings/SettingsSidebar.tsx | 2 +- .../client/src/components/ToastWrapper.tsx | 13 ++++ .../src/components/Toolbar/Palette.scss | 2 - .../client/src/components/Toolbar/Palette.tsx | 8 +-- packages/client/src/index.tsx | 7 +- packages/client/src/style.scss | 4 -- 17 files changed, 202 insertions(+), 70 deletions(-) create mode 100644 packages/admin/src/components/ToastWrapper.tsx create mode 100644 packages/client/src/components/Header/HeaderLeft.tsx create mode 100644 packages/client/src/components/Header/HeaderRight.tsx create mode 100644 packages/client/src/components/Header/ThemeSwitcher.tsx create mode 100644 packages/client/src/components/ToastWrapper.tsx diff --git a/package-lock.json b/package-lock.json index 2fe6cce..e3d112a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/packages/admin/src/components/ToastWrapper.tsx b/packages/admin/src/components/ToastWrapper.tsx new file mode 100644 index 0000000..a1f159c --- /dev/null +++ b/packages/admin/src/components/ToastWrapper.tsx @@ -0,0 +1,13 @@ +import { useTheme } from "next-themes"; +import { ToastContainer } from "react-toastify"; + +export const ToastWrapper = () => { + const { theme } = useTheme() + + return ( + + ); +}; \ No newline at end of file diff --git a/packages/admin/src/main.tsx b/packages/admin/src/main.tsx index b1a8e3b..f5784c0 100644 --- a/packages/admin/src/main.tsx +++ b/packages/admin/src/main.tsx @@ -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( - + diff --git a/packages/client/package.json b/packages/client/package.json index e838032..82d621e 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -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", diff --git a/packages/client/src/components/App.tsx b/packages/client/src/components/App.tsx index fcba090..1ed9799 100644 --- a/packages/client/src/components/App.tsx +++ b/packages/client/src/components/App.tsx @@ -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 = () => { - + ); diff --git a/packages/client/src/components/Chat/OpenChatButton.tsx b/packages/client/src/components/Chat/OpenChatButton.tsx index 33dd348..0d06933 100644 --- a/packages/client/src/components/Chat/OpenChatButton.tsx +++ b/packages/client/src/components/Chat/OpenChatButton.tsx @@ -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 && } + { + config?.chat?.element_host && + } ); }; diff --git a/packages/client/src/components/Header/Header.tsx b/packages/client/src/components/Header/Header.tsx index f9a2b91..bb3c74a 100644 --- a/packages/client/src/components/Header/Header.tsx +++ b/packages/client/src/components/Header/Header.tsx @@ -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 {loadChat && }; -}; +import { HeaderLeft } from "./HeaderLeft"; +import { HeaderRight } from "./HeaderRight"; export const Header = () => { const { connected } = useAppContext(); @@ -20,48 +10,19 @@ export const Header = () => { return (
{import.meta.env.VITE_INCLUDE_EVENT_INFO && } - -
- {!connected && ( -
- - Disconnected - -
- )} -
- +
+ + {!connected && ( +
+ + Disconnected + +
+ )} + +
); }; -const HeaderLeft = () => { - const { setInfoSidebar } = useAppContext(); - - return ( -
- - - {import.meta.env.DEV && ( - - )} -
- ); -}; - -const HeaderRight = () => { - const { setSettingsSidebar, hasAdmin } = useAppContext(); - return ( -
- - - {hasAdmin && ( - - )} - -
- ); -}; diff --git a/packages/client/src/components/Header/HeaderLeft.tsx b/packages/client/src/components/Header/HeaderLeft.tsx new file mode 100644 index 0000000..3b3959c --- /dev/null +++ b/packages/client/src/components/Header/HeaderLeft.tsx @@ -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 ( +
+ + + {import.meta.env.DEV && ( + + )} +
+ ); +}; \ No newline at end of file diff --git a/packages/client/src/components/Header/HeaderRight.tsx b/packages/client/src/components/Header/HeaderRight.tsx new file mode 100644 index 0000000..3b144ce --- /dev/null +++ b/packages/client/src/components/Header/HeaderRight.tsx @@ -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 {loadChat && }; +}; + +export const HeaderRight = () => { + const { setSettingsSidebar, hasAdmin } = useAppContext(); + + return ( +
+ +
+ + + {hasAdmin && ( + + )} + +
+
+ ); +}; \ No newline at end of file diff --git a/packages/client/src/components/Header/ThemeSwitcher.tsx b/packages/client/src/components/Header/ThemeSwitcher.tsx new file mode 100644 index 0000000..5bf98cd --- /dev/null +++ b/packages/client/src/components/Header/ThemeSwitcher.tsx @@ -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 ( + + ) +}; \ No newline at end of file diff --git a/packages/client/src/components/Info/InfoSidebar.tsx b/packages/client/src/components/Info/InfoSidebar.tsx index 2ee4de0..24a18c2 100644 --- a/packages/client/src/components/Info/InfoSidebar.tsx +++ b/packages/client/src/components/Info/InfoSidebar.tsx @@ -24,13 +24,13 @@ export const InfoSidebar = () => { transition={{ type: 'spring', stiffness: 50 }} /> { return (
diff --git a/packages/client/src/components/ToastWrapper.tsx b/packages/client/src/components/ToastWrapper.tsx new file mode 100644 index 0000000..2f3ac86 --- /dev/null +++ b/packages/client/src/components/ToastWrapper.tsx @@ -0,0 +1,13 @@ +import { useTheme } from "next-themes"; +import { ToastContainer } from "react-toastify"; + +export const ToastWrapper = () => { + const { theme } = useTheme() + + return ( + + ); +}; \ No newline at end of file diff --git a/packages/client/src/components/Toolbar/Palette.scss b/packages/client/src/components/Toolbar/Palette.scss index 424ceeb..57d1335 100644 --- a/packages/client/src/components/Toolbar/Palette.scss +++ b/packages/client/src/components/Toolbar/Palette.scss @@ -12,8 +12,6 @@ z-index: 10; position: relative; - background-color: #fff; - .pallete-colors { // display: flex; // width: 100%; diff --git a/packages/client/src/components/Toolbar/Palette.tsx b/packages/client/src/components/Toolbar/Palette.tsx index 056b02f..b3f9a3a 100644 --- a/packages/client/src/components/Toolbar/Palette.tsx +++ b/packages/client/src/components/Toolbar/Palette.tsx @@ -29,7 +29,7 @@ export const Palette = () => { }, []); return ( -
+
- +
)}
)} diff --git a/packages/client/src/index.tsx b/packages/client/src/index.tsx index fc201d9..0f89944 100644 --- a/packages/client/src/index.tsx +++ b/packages/client/src/index.tsx @@ -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( - + +
+ +
+ diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss index 5b1d2ee..8eb97cc 100644 --- a/packages/client/src/style.scss +++ b/packages/client/src/style.scss @@ -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; -- GitLab From 5b67bc7b8be25fac5220efb9d9cd7ba291317345 Mon Sep 17 00:00:00 2001 From: Ategon Date: Mon, 15 Jul 2024 12:20:41 -0400 Subject: [PATCH 3/3] Fix dark mode issues --- packages/client/src/components/Chat/OpenChatButton.tsx | 2 +- packages/client/src/components/Header/HeaderLeft.tsx | 4 ++-- packages/client/src/components/Header/HeaderRight.tsx | 4 ++-- packages/client/src/components/Header/ThemeSwitcher.tsx | 2 +- packages/client/src/components/PixelWhoisSidebar.tsx | 4 ++-- packages/client/src/components/Toolbar/Palette.scss | 3 +-- 6 files changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/client/src/components/Chat/OpenChatButton.tsx b/packages/client/src/components/Chat/OpenChatButton.tsx index 0d06933..1f16221 100644 --- a/packages/client/src/components/Chat/OpenChatButton.tsx +++ b/packages/client/src/components/Chat/OpenChatButton.tsx @@ -19,7 +19,7 @@ const OpenChatButton = () => { config?.chat?.element_host && {hasAdmin && ( - diff --git a/packages/client/src/components/Header/ThemeSwitcher.tsx b/packages/client/src/components/Header/ThemeSwitcher.tsx index 5bf98cd..eb3dc2b 100644 --- a/packages/client/src/components/Header/ThemeSwitcher.tsx +++ b/packages/client/src/components/Header/ThemeSwitcher.tsx @@ -26,7 +26,7 @@ export function ThemeSwitcher() { if(!mounted) return null return ( - diff --git a/packages/client/src/components/PixelWhoisSidebar.tsx b/packages/client/src/components/PixelWhoisSidebar.tsx index 4db4814..6f2189f 100644 --- a/packages/client/src/components/PixelWhoisSidebar.tsx +++ b/packages/client/src/components/PixelWhoisSidebar.tsx @@ -77,7 +77,7 @@ export const PixelWhoisSidebar = () => { return (
{loading && ( @@ -95,7 +95,7 @@ export const PixelWhoisSidebar = () => {
-
+