fixes #132

packages/shared-components/components/PenaltyDropdown.tsx

@@ -9,12 +9,14 @@ export const PenaltyDropdown = ({
 	btnTip,
 	btnName,
 	Icon,
+	showBtnName = false,
 }: {
 	onClick: (data: { reason: string; until: Date | null }) => void;
 	showDatePicker?: boolean;
 	btnClassName?: string;
 	btnName: string;
 	btnTip?: string;
+	showBtnName?: boolean;
 	Icon: ReactNode;
 }) => {
 	const [open, setOpen] = useState(false);
@@ -25,25 +27,29 @@ export const PenaltyDropdown = ({
 			<div tabIndex={0} role="button"></div>
 			<div className="indicator">
 				<button
-					className={cn("btn btn-xs btn-square btn-soft cursor-pointer", btnClassName)}
+					className={cn(
+						"btn btn-xs btn-soft cursor-pointer",
+						!showBtnName && "btn-square",
+						btnClassName,
+					)}
 					onClick={() => setOpen(!open)}
 				>
-					{Icon}
+					{Icon} {showBtnName && <span className="hidden md:inline-block">{btnName}</span>}
 				</button>
 			</div>
 			{open && (
 				<div
-					className="dropdown-content bg-base-100 rounded-box z-1 p-4 shadow-sm space-y-4 shadow-md"
+					className="dropdown-content bg-base-100 rounded-box z-1 space-y-4 p-4 shadow-md shadow-sm"
 					style={{ minWidth: "500px", right: "40px" }}
 				>
 					<button
-						className="absolute top-2 right-2 btn btn-xs btn-circle btn-ghost"
+						className="btn btn-xs btn-circle btn-ghost absolute right-2 top-2"
 						onClick={() => setOpen(false)}
 						type="button"
 					>
 						<span className="text-xl leading-none">&times;</span>
 					</button>
-					<h2 className="text-xl font-bold text-center">{btnName}</h2>
+					<h2 className="text-center text-xl font-bold">{btnName}</h2>
 					<textarea
 						value={reason}
 						onChange={(e) => setReason(e.target.value)}
@@ -53,7 +59,7 @@ export const PenaltyDropdown = ({
 					/>
 					{showDatePicker && (
 						<select
-							className="select w-full select-bordered"
+							className="select select-bordered w-full"
 							value={until}
 							onChange={(e) => setUntil(e.target.value)}
 						>
@@ -74,7 +80,7 @@ export const PenaltyDropdown = ({
 						</select>
 					)}
 					<button
-						className={cn("btn w-full btn-square btn-soft tooltip tooltip-bottom", btnClassName)}
+						className={cn("btn btn-square btn-soft tooltip tooltip-bottom w-full", btnClassName)}
 						data-tip={btnTip}
 						onClick={() => {
 							let untilDate: Date | null = null;