From 07a3cfa6d389a5e52874c5183dd608537fff6db5 Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <anagstef@users.noreply.github.com>
Date: Wed, 20 Dec 2023 18:28:16 +0200
Subject: [PATCH] fix(clerk-js): Add detructive variant to all destructive
 Action Card components (#2422)

---
 .changeset/dirty-swans-joke.md                                | 2 ++
 .../src/ui/components/OrganizationProfile/DomainList.tsx      | 2 +-
 .../ui/components/UserProfile/ConnectedAccountsSection.tsx    | 2 +-
 .../clerk-js/src/ui/components/UserProfile/EmailsSection.tsx  | 2 +-
 .../clerk-js/src/ui/components/UserProfile/MfaSection.tsx     | 4 ++--
 .../clerk-js/src/ui/components/UserProfile/PhoneSection.tsx   | 2 +-
 .../clerk-js/src/ui/components/UserProfile/Web3Section.tsx    | 2 +-
 7 files changed, 9 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/dirty-swans-joke.md

diff --git a/.changeset/dirty-swans-joke.md b/.changeset/dirty-swans-joke.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/dirty-swans-joke.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx
index 52d80f3a73..19d4dc6ff7 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx
@@ -118,7 +118,7 @@ export const DomainList = withGate(
               </ProfileSection.Item>
 
               <Action.Open value='remove'>
-                <Action.Card>
+                <Action.Card variant='destructive'>
                   <RemoveDomainScreen domainId={domain.id} />
                 </Action.Card>
               </Action.Open>
diff --git a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
index 5d8129f708..1576920012 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
@@ -104,7 +104,7 @@ export const ConnectedAccountsSection = () => {
                 </Action.Closed>
 
                 <Action.Open value='remove'>
-                  <Action.Card>
+                  <Action.Card variant='destructive'>
                     <RemoveConnectedAccountScreen accountId={account.id} />
                   </Action.Card>
                 </Action.Open>
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
index 71fe558a14..6e7d82e9bf 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
@@ -69,7 +69,7 @@ export const EmailsSection = () => {
               </Action.Closed>
 
               <Action.Open value='remove'>
-                <Action.Card>
+                <Action.Card variant='destructive'>
                   <RemoveEmailScreen emailId={email.id} />
                 </Action.Card>
               </Action.Open>
diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx
index 342096b32a..273bdd8dfd 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx
@@ -58,7 +58,7 @@ export const MfaSection = () => {
               </ProfileSection.Item>
 
               <Action.Open value='remove'>
-                <Action.Card>
+                <Action.Card variant='destructive'>
                   <RemoveMfaTOTPScreen />
                 </Action.Card>
               </Action.Open>
@@ -89,7 +89,7 @@ export const MfaSection = () => {
                   </ProfileSection.Item>
 
                   <Action.Open value='remove'>
-                    <Action.Card>
+                    <Action.Card variant='destructive'>
                       <RemoveMfaPhoneCodeScreen phoneId={phone.id} />
                     </Action.Card>
                   </Action.Open>
diff --git a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
index 43226dd97e..03eaa9843d 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
@@ -69,7 +69,7 @@ export const PhoneSection = () => {
               </Action.Closed>
 
               <Action.Open value='remove'>
-                <Action.Card>
+                <Action.Card variant='destructive'>
                   <RemovePhoneScreen phoneId={phone.id} />
                 </Action.Card>
               </Action.Open>
diff --git a/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx b/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
index d963d7b860..cd559bf984 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
@@ -71,7 +71,7 @@ export const Web3Section = () => {
                 </Action.Closed>
 
                 <Action.Open value='remove'>
-                  <Action.Card>
+                  <Action.Card variant='destructive'>
                     <RemoveWeb3WalletScreen walletId={wallet.id} />
                   </Action.Card>
                 </Action.Open>