fix: update icon button sizing to match design

jaaydenh · jaaydenh · commit 798a0546c216 · 2025-01-17T19:13:45.000Z
diff --git a/site/src/components/Button/Button.tsx b/site/src/components/Button/Button.tsx
@@ -10,10 +10,10 @@ import { cn } from "utils/cn";
 export const buttonVariants = cva(
 	`inline-flex items-center justify-center gap-1 whitespace-nowrap
 	border-solid rounded-md transition-colors min-w-20
-	text-sm font-semibold font-medium  cursor-pointer no-underline
+	text-sm font-semibold font-medium cursor-pointer no-underline
 	focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
 	disabled:pointer-events-none disabled:text-content-disabled
-	[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:p-[2px]`,
+	[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:p-0.5`,
 	{
 		variants: {
 			variant: {
@@ -30,6 +30,7 @@ export const buttonVariants = cva(
 			size: {
 				lg: "h-10 px-3 py-2 [&_svg]:size-icon-lg",
 				sm: "h-[30px] px-2 py-1.5 text-xs [&_svg]:size-icon-sm",
+				icon: "h-[30px] min-w-[30px] px-1 py-1.5 [&_svg]:size-icon-sm",
 			},
 		},
 		defaultVariants: {
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -349,7 +349,8 @@ const OrganizationRow: FC<OrganizationRowProps> = ({
 			<TableCell>
 				<Button
 					variant="outline"
-					className="w-8 h-8 min-w-10 text-content-primary"
+					size="icon"
+					className="text-content-primary"
 					aria-label="delete"
 					onClick={() => onDelete(idpOrg)}
 				>
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx
@@ -290,7 +290,8 @@ const GroupRow: FC<GroupRowProps> = ({ idpGroup, coderGroup, onDelete }) => {
 			<TableCell>
 				<Button
 					variant="outline"
-					className="w-8 h-8 min-w-10 text-content-primary"
+					size="icon"
+					className="text-content-primary"
 					aria-label="delete"
 					onClick={() => onDelete(idpGroup)}
 				>
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx
@@ -211,7 +211,8 @@ const RoleRow: FC<RoleRowProps> = ({ idpRole, coderRoles, onDelete }) => {
 			<TableCell>
 				<Button
 					variant="outline"
-					className="w-8 h-8 min-w-10 text-content-primary"
+					size="icon"
+					className="text-content-primary"
 					aria-label="delete"
 					onClick={() => onDelete(idpRole)}
 				>
