Merge branch 'main' of ssh://git.sc07.company:2424/sc07/canvas (24928c8b) · Commits · Ategon Dev / Canvas

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

deleted100644 → 0

+0 −29

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/InfoSidebar.tsx

+9 −31

Original line number	Diff line number	Diff line
		import { Divider } from "@nextui-org/react";
		import { useAppContext } from "../../contexts/AppContext";
		import { InfoHeader } from "./InfoHeader";
		import { InfoText } from "./InfoText";
		import { InfoButtons } from "./InfoButtons";
		import { motion } from "framer-motion"
		import { SidebarBase } from "../SidebarBase";
		import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";

		/**
		* Information sidebar
		@@ -16,39 +15,18 @@ export const InfoSidebar = () => {
		const { infoSidebar, setInfoSidebar } = useAppContext();

		return (
		<SidebarBase shown={infoSidebar} setSidebarShown={setInfoSidebar} icon={faInfoCircle} title="Info" description="Information about the event" side="Left">
		<div className="flex flex-col h-full justify-between">
		<div>
		<motion.div
		className="absolute w-screen h-screen z-50 left-0 top-0 bg-black"
		initial={{ opacity: 0, visibility: 'hidden' }}
		animate={{ opacity: infoSidebar ? 0.25 : 0, visibility: infoSidebar ? 'visible' : 'hidden' }}
		transition={{ type: 'spring', stiffness: 50 }}
		/>
		<motion.div
		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 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 }}
		>
		<div>
		<InfoHeader setInfoSidebar={setInfoSidebar} />

		<Divider />

		<InfoButtons />
		<InfoText />
		</div>

		<div className="p-2">
		<p className="text-xs text-default-600">Build {__COMMIT_HASH__}</p>
		<div id="grecaptcha-badge"></div>
		</div>
		</motion.div>
		</div>
		);

		</SidebarBase>
		)
		};
		No newline at end of file

packages/client/src/components/Overlay/OverlaySettings.tsx

+6 −5

Original line number	Diff line number	Diff line
		@@ -6,11 +6,12 @@ export const OverlaySettings = () => {
		useAppContext();

		return (
		<>
		<header>
		<h2>Overlays</h2>
		<div className="flex flex-col gap-4 p-2">
		<header className="flex flex-col gap-2">
		<h2 className="text-xl">Overlays</h2>
		<p className="text-xs text-default-600">Overlays to display additional info over the canvas</p>
		</header>
		<section>
		<section className="flex flex-col gap-2">
		<Switch
		isSelected={blankOverlay.enabled}
		onValueChange={(v) =>
		@@ -56,6 +57,6 @@ export const OverlaySettings = () => {
		/>
		)}
		</section>
		</>
		</div>
		);
		};

packages/client/src/components/Settings/ChatSettings.tsx

+17 −10

Original line number	Diff line number	Diff line
		@@ -8,18 +8,25 @@ export const ChatSettings = () => {
		const { loadChat, setLoadChat } = useAppContext();

		return (
		<>
		<header>
		<div className="flex flex-col p-2">
		<header className="flex flex-col gap-2">
		<div className="flex items-center">
		<Switch
		size="sm"
		isSelected={loadChat \|\| false}
		onValueChange={setLoadChat}
		/>
		<h2>Chat</h2>
		<h2 className="text-xl">Chat</h2>
		</div>
		<p className="text-default-600 text-xs">Chatting with other canvas users</p>
		</header>
		<section>
		<React.Suspense>{loadChat && <InnerChatSettings />}</React.Suspense>
		<React.Suspense>{loadChat &&
		<div className="mt-4">
		<InnerChatSettings />
		</div>
		}</React.Suspense>
		</section>
		</>
		</div>
		);
		};

packages/client/src/components/Settings/SettingsSidebar.tsx

+26 −33

Original line number	Diff line number	Diff line
		import { Button } from "@nextui-org/react";
		import { faGear } from "@fortawesome/free-solid-svg-icons";
		import { useAppContext } from "../../contexts/AppContext";
		import { SidebarBase } from "../SidebarBase";
		import { Button, Divider } from "@nextui-org/react";
		import { TemplateSettings } from "./TemplateSettings";
		import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
		import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
		import { ChatSettings } from "./ChatSettings";
		import { OverlaySettings } from "../Overlay/OverlaySettings";

		export const SettingsSidebar = () => {
		const { settingsSidebar, setSettingsSidebar, setShowKeybinds } =
		useAppContext();
		const { settingsSidebar, setSettingsSidebar, setShowKeybinds } = useAppContext();

		return (
		<div
		className="sidebar sidebar-right bg-white text-black dark:bg-black dark:text-white"
		style={{ ...(settingsSidebar ? {} : { display: "none" }) }}
		>
		<header>
		<h1>Settings</h1>
		<div className="flex-grow" />
		<Button size="sm" isIconOnly onClick={() => setSettingsSidebar(false)}>
		<FontAwesomeIcon icon={faXmark} />
		</Button>
		</header>
		<SidebarBase shown={settingsSidebar} setSidebarShown={setSettingsSidebar} icon={faGear} title="Settings" description="Configuration options for customizing your experience" side="Right">
		<div className="p-4 flex flex-col gap-4">
		<TemplateSettings />
		<Divider />
		<ChatSettings />
		<Divider />
		<OverlaySettings />
		<Divider />
		<section>
		abc
		<Button
		onPress={() => {
		setShowKeybinds(true);
		@@ -33,9 +28,7 @@ export const SettingsSidebar = () => {
		Keybinds
		</Button>
		</section>
		<TemplateSettings />
		<ChatSettings />
		<OverlaySettings />
		</div>
		);
		</SidebarBase>
		)
		};
		No newline at end of file