add info & welcome modal (related #1) (e9b1f4c4) · Commits · Marius DAVID / Canvas

package-lock.json

+22 −0

Original line number	Diff line number	Diff line
		@@ -2854,6 +2854,27 @@
		"node": ">=6"
		}
		},
		"node_modules/@fortawesome/free-brands-svg-icons": {
		"version": "6.5.2",
		"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz",
		"integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==",
		"hasInstallScript": true,
		"dependencies": {
		"@fortawesome/fontawesome-common-types": "6.5.2"
		},
		"engines": {
		"node": ">=6"
		}
		},
		"node_modules/@fortawesome/free-brands-svg-icons/node_modules/@fortawesome/fontawesome-common-types": {
		"version": "6.5.2",
		"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
		"integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
		"hasInstallScript": true,
		"engines": {
		"node": ">=6"
		}
		},
		"node_modules/@fortawesome/free-solid-svg-icons": {
		"version": "6.5.1",
		"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz",
		@@ -16015,6 +16036,7 @@
		"license": "ISC",
		"dependencies": {
		"@fortawesome/fontawesome-svg-core": "^6.5.1",
		"@fortawesome/free-brands-svg-icons": "^6.5.2",
		"@fortawesome/free-solid-svg-icons": "^6.5.1",
		"@fortawesome/react-fontawesome": "^0.2.0",
		"@nextui-org/react": "^2.2.9",

+1 −0

Original line number	Diff line number	Diff line
		@@ -18,6 +18,7 @@
		},
		"dependencies": {
		"@fortawesome/fontawesome-svg-core": "^6.5.1",
		"@fortawesome/free-brands-svg-icons": "^6.5.2",
		"@fortawesome/free-solid-svg-icons": "^6.5.1",
		"@fortawesome/react-fontawesome": "^0.2.0",
		"@nextui-org/react": "^2.2.9",

+4 −0

Original line number	Diff line number	Diff line
		@@ -15,6 +15,8 @@ import "../lib/keybinds";
		import { PixelWhoisSidebar } from "./PixelWhoisSidebar";
		import { KeybindModal } from "./KeybindModal";
		import { ProfileModal } from "./Profile/ProfileModal";
		import { WelcomeModal } from "./Welcome/WelcomeModal";
		import { InfoSidebar } from "./Info/InfoSidebar";

		const Chat = lazy(() => import("./Chat/Chat"));

		@@ -139,11 +141,13 @@ const AppInner = () => {

		<DebugModal />
		<SettingsSidebar />
		<InfoSidebar />
		<PixelWhoisSidebar />
		<KeybindModal />
		<AuthErrors />

		<ProfileModal />
		<WelcomeModal />

		<ToastContainer position="top-left" />
		</>

+5 −2

Original line number	Diff line number	Diff line
		@@ -13,11 +13,14 @@ const DynamicChat = () => {
		};

		export const Header = () => {
		const { setSettingsSidebar, connected, hasAdmin } = useAppContext();
		const { setSettingsSidebar, connected, hasAdmin, setInfoSidebar } =
		useAppContext();

		return (
		<header id="main-header">
		<div></div>
		<div className="box">
		<Button onPress={() => setInfoSidebar(true)}>Info</Button>
		</div>
		<div className="spacer"></div>
		{!connected && (
		<div>

0 → 100644

+57 −0

Original line number	Diff line number	Diff line
		import { Button, Link } 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";

		/**
		* Information sidebar
		*
		* TODO: add customization for this post-event (#46)
		*
		* @returns
		*/
		export const InfoSidebar = () => {
		const { infoSidebar, setInfoSidebar } = useAppContext();

		return (
		<div
		className="sidebar sidebar-left"
		style={{ ...(infoSidebar ? {} : { display: "none" }) }}
		>
		<header>
		<h1>Information</h1>
		<div className="flex-grow" />
		<Button size="sm" isIconOnly onClick={() => setInfoSidebar(false)}>
		<FontAwesomeIcon icon={faXmark} />
		</Button>
		</header>
		<section>
		<div className="flex gap-1 *:flex-grow">
		<Button
		as={Link}
		href="https://matrix.to/#/#canvas-meta:aftermath.gg?via=matrix.org"
		target="_blank"
		>
		Matrix Space
		</Button>
		<Button
		as={Link}
		href="https://discord.gg/mEUqXZw8kR"
		target="_blank"
		>
		{/* i do not know why faDiscord doesn't match the types, but it does render */}
		<FontAwesomeIcon icon={faDiscord as any} />
		Discord
		</Button>
		</div>
		<Button as={Link} href="https://toast.ooo/c/canvas">
		<div className="flex flex-col text-center">
		<span>Lemmy</span>
		<span className="text-xs">!canvas@toast.ooo</span>
		</div>
		</Button>
		</section>
		</div>
		);
		};