fix: stop text from overflowing on delete org button (#16549)

brettkolodny · web-flow · commit 1ce4dfe0583c · 2025-02-14T11:13:28.000-05:00
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)
diff --git 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>>;
