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' : ''}