From 1ce4dfe0583cd74356d7dde8215f95e20a527b02 Mon Sep 17 00:00:00 2001
From: brettkolodny <brettkolodny@gmail.com>
Date: Fri, 14 Feb 2025 11:13:28 -0500
Subject: [PATCH] fix: stop text from overflowing on delete org button (#16549)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #16433

I also took the opportunity to convert the components to tailwind. Since
there aren't designs for this piece of UI yet I tried to match it as
closely as possible using the existing tailwind config

![Screenshot 2025-02-12 at 5 03
58 PM](https://github.com/user-attachments/assets/71d66269-9440-4692-91ba-fed2e5cb5821)
---
 .../OrganizationSettingsPageView.tsx          | 52 +++----------------
 1 file changed, 7 insertions(+), 45 deletions(-)

diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
index 7dcf23bf4a..16738ca7dd 100644
--- a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
+++ b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
@@ -126,14 +126,18 @@ export const OrganizationSettingsPageView: FC<
 			</HorizontalForm>
 
 			{!organization.is_default && (
-				<HorizontalContainer css={{ marginTop: 48 }}>
+				<HorizontalContainer className="mt-12">
 					<HorizontalSection
 						title="Settings"
 						description="Change or delete your organization."
 					>
-						<div css={styles.dangerSettings}>
+						<div className="flex bg-surface-orange items-center justify-between border border-solid border-orange-600 rounded-md p-3 pl-4 gap-2 flex-grow">
 							<span>Deleting an organization is irreversible.</span>
-							<Button variant="destructive" onClick={() => setIsDeleting(true)}>
+							<Button
+								variant="destructive"
+								onClick={() => setIsDeleting(true)}
+								className="min-w-fit"
+							>
 								Delete this organization
 							</Button>
 						</div>
@@ -151,45 +155,3 @@ export const OrganizationSettingsPageView: FC<
 		</div>
 	);
 };
-
-const styles = {
-	dangerSettings: (theme) => ({
-		display: "flex",
-		backgroundColor: theme.roles.danger.background,
-		alignItems: "center",
-		justifyContent: "space-between",
-		border: `1px solid ${theme.roles.danger.outline}`,
-		borderRadius: 8,
-		padding: 12,
-		paddingLeft: 18,
-		gap: 8,
-		lineHeight: "18px",
-		flexGrow: 1,
-
-		"& .option": {
-			color: theme.roles.danger.fill.solid,
-			"&.Mui-checked": {
-				color: theme.roles.danger.fill.solid,
-			},
-		},
-
-		"& .info": {
-			fontSize: 14,
-			fontWeight: 600,
-			color: theme.roles.danger.text,
-		},
-	}),
-	dangerButton: (theme) => ({
-		borderColor: theme.roles.danger.outline,
-		color: theme.roles.danger.text,
-
-		"&.MuiLoadingButton-loading": {
-			color: theme.roles.danger.disabled.text,
-		},
-
-		"&:hover:not(:disabled)": {
-			backgroundColor: theme.roles.danger.hover.background,
-			borderColor: theme.roles.danger.hover.fill.outline,
-		},
-	}),
-} satisfies Record<string, Interpolation<Theme>>;