Improve info sidebar (2491f201) · Commits · Ategon Dev / Canvas

package-lock.json

+20 −8

Original line number	Diff line number	Diff line
		@@ -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",

packages/client/package.json

+2 −1

Original line number	Diff line number	Diff line
		@@ -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",

packages/client/src/components/Info/InfoButtons.tsx

0 → 100644

+49 −0

Original line number	Diff line number	Diff line
		import { Button, Link } from "@nextui-org/react";
		import { SiDiscord, SiLemmy, SiMastodon, SiMatrix } from "@icons-pack/react-simple-icons"

		export const InfoButtons = () => {
		return (
		<div className="p-2 flex gap-2 flex-wrap">
		<Button
		as={Link}
		size="sm"
		href="https://matrix.to/#/#canvas-meta:aftermath.gg?via=matrix.org"
		target="_blank"
		variant="ghost"
		>
		<SiMatrix size={18} />
		<p>Matrix</p>
		</Button>
		<Button
		as={Link}
		size="sm"
		href="https://discord.gg/mEUqXZw8kR"
		target="_blank"
		variant="ghost"
		>
		<SiDiscord size={18} />
		<p>Discord</p>
		</Button>
		<Button
		as={Link}
		size="sm"
		href="https://toast.ooo/c/canvas"
		target="_blank"
		variant="ghost"
		>
		<SiLemmy size={18} />
		<p>Lemmy</p>
		</Button>
		<Button
		as={Link}
		size="sm"
		href="https://social.fediverse.events/@canvas"
		target="_blank"
		variant="ghost"
		>
		<SiMastodon size={18} />
		<p>Mastodon</p>
		</Button>
		</div>
		);
		};

packages/client/src/components/Info/InfoHeader.tsx

0 → 100644

+29 −0

Original line number	Diff line number	Diff line
		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 (
		<header className="flex p-2 justify-between items-center">
		<div>
		<div className="flex items-center gap-2">
		<FontAwesomeIcon icon={faInfoCircle} size="lg" />
		<div>
		<h1 className="text-xl">Info</h1>
		<p className="text-xs text-default-600">Information about the event</p>
		</div>
		</div>

		</div>

		<Button size="sm" isIconOnly onClick={() => setInfoSidebar(false)}>
		<FontAwesomeIcon icon={faXmark} />
		</Button>
		</header>
		);
		};

packages/client/src/components/Info/Privacy.tsx→packages/client/src/components/Info/InfoPrivacy.tsx

+22 −0

Original line number	Diff line number	Diff line
		/**
		* Privacy policy listed in InfoSidebar
		*
		* TODO: Customize this w/o editing the source #46
		*
		* @returns
		*/
		export const Privacy = () => {
		import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
		import { faShieldHalved } from "@fortawesome/free-solid-svg-icons";

		export const InfoPrivacy = () => {
		return (
		<>
		<header>
		<h2>Privacy</h2>
		<div className="flex flex-col gap-2">
		<header className="flex items-center gap-1">
		<FontAwesomeIcon icon={faShieldHalved} size="2xs" className="pt-0.5" />
		<h2 className="text">Privacy</h2>
		</header>
		<section>
		<ul className="list-disc ml-5">
		<ul className="list-disc text-default-800 text-sm ml-10 flex flex-col gap-1">
		<li>
		Google Invisible Recaptcha is used to help prevent bots. Google's
		privacy policy and terms are available above.
		privacy policy and terms are available below.
		</li>
		<li>Usernames should not be assumed to be private</li>
		</ul>
		</section>
		</>
		</div>
		);
		};