From a6d6b702914b091c57df8568a6f905616690d9e9 Mon Sep 17 00:00:00 2001
From: Florian Zia <zia.florian@gmail.com>
Date: Tue, 17 Dec 2024 18:28:18 +0100
Subject: [PATCH] fix: Increase visibility for the plan selection button

---
 .../automatic-remove/AutomaticRemoveView.tsx         |  2 +-
 .../dataBrokerProfiles.module.scss                   | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/automatic-remove/AutomaticRemoveView.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/automatic-remove/AutomaticRemoveView.tsx
index 854975af82d..0a3422788a1 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/automatic-remove/AutomaticRemoveView.tsx
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/automatic-remove/AutomaticRemoveView.tsx
@@ -248,7 +248,7 @@ export function AutomaticRemoveView(props: Props) {
                     )}
               </span>
               <Button
-                variant="primary"
+                variant="secondary"
                 /* c8 ignore start */
                 onPress={() => {
                   selectedPlanIsYearly
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/dataBrokerProfiles.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/dataBrokerProfiles.module.scss
index 21f815cb59f..57824d78b94 100644
--- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/dataBrokerProfiles.module.scss
+++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/dataBrokerProfiles.module.scss
@@ -197,6 +197,18 @@
       font: $text-title-sm;
       font-weight: 500;
     }
+
+    // Invert color for the plan selection CTA to increase visibility
+    // against the purple background.
+    & > a {
+      color: $color-white;
+      box-shadow: inset 0 0 0 2px $color-white;
+
+      &:hover {
+        background-color: $color-white;
+        color: $color-purple-70;
+      }
+    }
   }
 }