Settings tweaks

components/Settings/CardStyle.tsx

@@ -5,7 +5,7 @@ import type { CardStyle } from '@/types';
 
 const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];
 
-export default function CardStyle() {
+export default function CardStyle({ className }: { className?: string }) {
 	const { gameData, isDM, settings, emitSettings } = useAppContext();
 
 	const tuneRadio = (cardStyle: CardStyle) => {
@@ -19,18 +19,18 @@ export default function CardStyle() {
 	};
 
 	return isDM ? (
-		<fieldset className="flex flex-col w-full">
-			<div className="text-xs my-1">Card style:</div>
+		<fieldset className={`flex flex-col w-full ${className}`}>
+			<div className="text-xs ml-1 mb-1">Card style:</div>
 			<div className="inline-flex overflow-hidden rounded-md w-full">
 				{cardStyleOptions.map((option, index) => (
 					<label
 						key={option}
 						className={`
+							flex justify-center
 							cursor-pointer
-							w-full px-4 py-2
-							text-sm font-medium
+							w-full px-3 py-2
+							text-xs font-medium
 							border border-yellow-500
-							flex justify-center items-center
 							transition hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700]
 							${settings.cardStyle === option ? 'bg-slate-700 text-yellow-300 font-extrabold' : 'bg-slate-800 hover:bg-slate-700'}
 							${index === 0 ? 'rounded-l-md' : ''}

components/Settings/ExternalLinks.tsx

@@ -1,14 +1,11 @@
 'use client';
 
-import { useAppContext } from '@/app/AppContext';
 import BuyMeACoffee from '@/components/BuyMeACoffee';
 import GitHubButton from '@/components/GitHubButton';
 
-export default function CardStyle() {
-	const { isDM } = useAppContext();
-
+export default function CardStyle({ className }: { className?: string }) {
 	return (
-		<span className={`w-full flex flex-row ${isDM ? 'justify-evenly' : 'justify-between'}`}>
+		<span className={`w-full flex flex-row justify-between ${className}`}>
 			<GitHubButton className="h-[35px] w-[125px]" />
 			<BuyMeACoffee className="h-[35px] w-[125px]" />
 		</span>

components/Settings/GameLinks.tsx

@@ -3,11 +3,11 @@
 import { useAppContext } from '@/app/AppContext';
 import CopyButton from '@/components/CopyButton';
 
-export default function Links() {
+export default function Links({ className }: { className?: string }) {
 	const { gameData, isDM } = useAppContext();
 
 	return (
-		<>
+		<div className={`w-full flex flex-col justify-between gap-2 ${className}`}>
 			{isDM && (
 				<CopyButton
 					title="Copy DM link"
@@ -22,6 +22,6 @@ export default function Links() {
 				tooltip={`${location.origin}/${gameData.spectatorID}`}
 				className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-slate-700 hover:bg-slate-600 hover:text-yellow-300 rounded-lg shadow"
 			/>
-		</>
+		</div>
 	);
 }

components/Settings/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { Settings as Gear } from 'lucide-react';
+import { CircleX, Settings as Gear } from 'lucide-react';
 import { Cinzel_Decorative } from 'next/font/google';
 
 import { useAppContext } from '@/app/AppContext';
@@ -31,12 +31,12 @@ export default function Settings() {
 				<div
 					className={`
 						fixed top-4 right-4
-						flex flex-col items-center justify-evenly
+						flex flex-col items-center justify-between
 						bg-slate-800 text-yellow-400
 						rounded-lg border border-yellow-400
-						h-full py-3 px-4
+						h-full p-8
 						transition-all duration-250
-						${open ? `opacity-100 ${isDM ? 'w-[350px] max-h-[375px]' : 'w-[300px] max-h-[175px]'}` : 'opacity-0 w-0 max-h-0'}
+						${open ? `opacity-100 ${isDM ? 'w-[350px] max-h-[425px]' : 'w-[325px] max-h-[200px]'}` : 'opacity-0 w-0 max-h-0'}
 					`}
 				>
 					<GameLinks />
@@ -44,9 +44,15 @@ export default function Settings() {
 					<CardStyle />
 					<ExternalLinks />
 				</div>
+				<button
+					className={`fixed top-4 right-4 p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
+					onClick={() => setOpen((prev) => !prev)}
+				>
+					<CircleX className="w-5 h-5" />
+				</button>
 			</Scrim>
 			<button
-				className={`p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer ${open ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
+				className={`p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
 				onClick={() => setOpen((prev) => !prev)}
 			>
 				<Gear className="w-5 h-5" />

components/Switch.tsx

@@ -4,13 +4,16 @@ export interface SwitchProps {
 	label: string;
 	value: boolean;
 	toggleAction: ChangeEventHandler<HTMLInputElement>;
+	className?: string;
 }
 
 const nonInitialCaps = /(?!^)([A-Z])/g;
 
-export default function Switch({ label, value, toggleAction }: SwitchProps) {
+export default function Switch({ label, value, toggleAction, className }: SwitchProps) {
 	return (
-		<label className="flex items-center justify-between w-full gap-2 cursor-pointer text-yellow-400 hover:text-yellow-300">
+		<label
+			className={`flex items-center justify-between gap-2 w-full cursor-pointer text-yellow-400 hover:text-yellow-300 ${className}`}
+		>
 			<span className="text-sm capitalize">{label.replace(nonInitialCaps, ' $1')}</span>
 
 			<div className="relative inline-block w-8 h-4 align-middle select-none transition duration-200 ease-in">