From 18be993d6d2f5c356fd5408ae7c6a401137c837b Mon Sep 17 00:00:00 2001
From: Kenneth <kennethnym@hey.com>
Date: Sun, 26 Jan 2025 17:32:25 +0000
Subject: [PATCH] feat: impl button variant

---
 app/components/button.tsx     | 10 ++++++++--
 app/home/application-list.tsx | 16 +++++++++-------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/app/components/button.tsx b/app/components/button.tsx
index 08f1d03..4482c09 100644
--- a/app/components/button.tsx
+++ b/app/components/button.tsx
@@ -1,17 +1,23 @@
 import clsx from "clsx"
 
+const VARIANT_CLASSES = {
+	small: "text-xs py-0",
+} as const
+
 function Button({
 	className,
+	variant,
 	...props
 }: React.DetailedHTMLProps<
 	React.ButtonHTMLAttributes<HTMLButtonElement>,
 	HTMLButtonElement
->) {
+> & { variant?: keyof typeof VARIANT_CLASSES }) {
 	return (
 		<button
 			{...props}
 			className={clsx(
-				"text-sm bg-neutral-200 dark:bg-neutral-700 px-2 py-1 rounded",
+				"text-sm bg-neutral-200 dark:bg-neutral-700 px-2 py-1 rounded disabled:opacity-20",
+				variant ? VARIANT_CLASSES[variant] : "",
 				className,
 			)}
 		/>
diff --git a/app/home/application-list.tsx b/app/home/application-list.tsx
index e8df4e5..106df61 100644
--- a/app/home/application-list.tsx
+++ b/app/home/application-list.tsx
@@ -53,10 +53,11 @@ const StageItem = memo(({ step }: { step: string }) => {
 				{step}
 				{step !== DEFAULT_NODE.applicationSubmittedNode.key ? (
 					<Button
+						variant="small"
 						onClick={() => {
 							deleteStageInEntry(step, entry.name)
 						}}
-						className="text-xs py-0 invisible group-hover:visible"
+						className="invisible group-hover:visible"
 					>
 						Delete
 					</Button>
@@ -126,28 +127,29 @@ const DefaultActions = memo(() => {
 	return (
 		<div className="flex flex-row flex-wrap gap-2 pl-4 mt-2">
 			<Button
+				variant="small"
+				disabled={isApplicationFinalized}
 				onClick={() => {
 					setIsAddingStage(true)
 				}}
-				className="text-xs py-0"
 			>
 				New stage
 			</Button>
 			<Button
+				variant="small"
 				disabled={isApplicationFinalized}
-				className="text-xs py-0"
 				onClick={onAccepted}
 			>
 				Accepted
 			</Button>
 			<Button
+				variant="small"
 				disabled={isApplicationFinalized}
-				className="text-xs py-0"
 				onClick={onRejected}
 			>
 				Rejected
 			</Button>
-			<Button onClick={onDeleteApplication} className="text-xs py-0">
+			<Button variant="small" onClick={onDeleteApplication}>
 				Delete application
 			</Button>
 		</div>
@@ -175,10 +177,10 @@ const AddStageActions = memo(() => {
 
 	return (
 		<div className="flex flex-row space-x-2 pl-4 mt-2">
-			<Button onClick={onOk} className="text-xs py-0">
+			<Button variant="small" onClick={onOk}>
 				Ok
 			</Button>
-			<Button onClick={onCancel} className="text-xs py-0">
+			<Button variant="small" onClick={onCancel}>
 				Cancel
 			</Button>
 		</div>