From 2dcde960a23c2c0d1d4418d000594c93f33590b3 Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Wed, 12 Feb 2025 21:00:04 +0000
Subject: [PATCH 1/6] chore: convert styles to tailwind

---
 .../OrganizationSettingsPageView.tsx          | 45 +------------------
 1 file changed, 2 insertions(+), 43 deletions(-)

diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
index 7dcf23bf4a4a6..c025e48fe9d85 100644
--- a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
+++ b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
@@ -126,12 +126,12 @@ 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-primary items-center justify-between border border-solid border-surface-quaternary rounded-[8px] p-3 pl-[18px] gap-2 flex-grow">
 							<span>Deleting an organization is irreversible.</span>
 							<Button variant="destructive" onClick={() => setIsDeleting(true)}>
 								Delete this organization
@@ -152,44 +152,3 @@ export const OrganizationSettingsPageView: FC<
 	);
 };
 
-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>>;

From a859e8154f710ca3d6f1dd777efb93fd42adc10d Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Wed, 12 Feb 2025 21:55:52 +0000
Subject: [PATCH 2/6] fix: match colors closer to original designs

---
 .../OrganizationSettingsPage/OrganizationSettingsPageView.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
index c025e48fe9d85..ff45c189e3b8f 100644
--- a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
+++ b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
@@ -131,7 +131,7 @@ export const OrganizationSettingsPageView: FC<
 						title="Settings"
 						description="Change or delete your organization."
 					>
-						<div className="flex bg-surface-primary items-center justify-between border border-solid border-surface-quaternary rounded-[8px] p-3 pl-[18px] gap-2 flex-grow">
+						<div className="flex bg-surface-orange items-center justify-between border border-solid border-orange-600 rounded-[8px] p-3 pl-[18px] gap-2 flex-grow">
 							<span>Deleting an organization is irreversible.</span>
 							<Button variant="destructive" onClick={() => setIsDeleting(true)}>
 								Delete this organization

From 02a758939b1655a20705ae0aa2a39fcc25a2d32d Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Wed, 12 Feb 2025 22:00:54 +0000
Subject: [PATCH 3/6] fix: set min width on button to stop overflow

---
 .../OrganizationSettingsPage/OrganizationSettingsPageView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
index ff45c189e3b8f..908523fc6fa00 100644
--- a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
+++ b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
@@ -131,9 +131,9 @@ export const OrganizationSettingsPageView: FC<
 						title="Settings"
 						description="Change or delete your organization."
 					>
-						<div className="flex bg-surface-orange items-center justify-between border border-solid border-orange-600 rounded-[8px] p-3 pl-[18px] gap-2 flex-grow">
+						<div className="flex bg-surface-orange items-center justify-between border border-solid border-orange-600 rounded-[8px] p-3 pl-[18px] gap-2 flex-grow //flex-wrap">
 							<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>

From 44d9fbfebd4dc7338406f9418bca27d8f28a89ff Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Wed, 12 Feb 2025 22:05:03 +0000
Subject: [PATCH 4/6] fix: format

---
 .../OrganizationSettingsPageView.tsx                       | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
index 908523fc6fa00..f5cfef72d1168 100644
--- a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
+++ b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
@@ -133,7 +133,11 @@ export const OrganizationSettingsPageView: FC<
 					>
 						<div className="flex bg-surface-orange items-center justify-between border border-solid border-orange-600 rounded-[8px] p-3 pl-[18px] gap-2 flex-grow //flex-wrap">
 							<span>Deleting an organization is irreversible.</span>
-							<Button variant="destructive" onClick={() => setIsDeleting(true)} className="min-w-fit">
+							<Button
+								variant="destructive"
+								onClick={() => setIsDeleting(true)}
+								className="min-w-fit"
+							>
 								Delete this organization
 							</Button>
 						</div>
@@ -151,4 +155,3 @@ export const OrganizationSettingsPageView: FC<
 		</div>
 	);
 };
-

From d90e20d0790f754b1b3010afc54d5ac8b6fa00bf Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Wed, 12 Feb 2025 22:05:52 +0000
Subject: [PATCH 5/6] fix: remove unused classes

---
 .../OrganizationSettingsPage/OrganizationSettingsPageView.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
index f5cfef72d1168..8d89ba962a846 100644
--- a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
+++ b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
@@ -131,7 +131,7 @@ export const OrganizationSettingsPageView: FC<
 						title="Settings"
 						description="Change or delete your organization."
 					>
-						<div className="flex bg-surface-orange items-center justify-between border border-solid border-orange-600 rounded-[8px] p-3 pl-[18px] gap-2 flex-grow //flex-wrap">
+						<div className="flex bg-surface-orange items-center justify-between border border-solid border-orange-600 rounded-[8px] p-3 pl-[18px] gap-2 flex-grow">
 							<span>Deleting an organization is irreversible.</span>
 							<Button
 								variant="destructive"

From 517165313f11fa9415f80eab2ae1ef1ecddc4ef0 Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Fri, 14 Feb 2025 15:45:06 +0000
Subject: [PATCH 6/6] fix: remove hard coded tailwind values

---
 .../OrganizationSettingsPage/OrganizationSettingsPageView.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
index 8d89ba962a846..16738ca7dd52d 100644
--- a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
+++ b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
@@ -131,7 +131,7 @@ export const OrganizationSettingsPageView: FC<
 						title="Settings"
 						description="Change or delete your organization."
 					>
-						<div className="flex bg-surface-orange items-center justify-between border border-solid border-orange-600 rounded-[8px] p-3 pl-[18px] gap-2 flex-grow">
+						<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"