From c52d4a20063954a9560baf0da2b737c32a48e0b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Guntars=20A=C5=A1manis-Graham?=
 <679632+guncha@users.noreply.github.com>
Date: Thu, 11 Apr 2024 16:59:30 -0700
Subject: [PATCH] Add a few CSS classes to help with styling FidesJS button
 groups (#4789)

Co-authored-by: Neville Samuell <neville@ethyca.com>
---
 CHANGELOG.md                                       | 1 +
 clients/fides-js/src/components/ConsentButtons.tsx | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c9a694f8f2..e50c3f4a2b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,7 @@ The types of changes are:
 - Changed display of Data Uses, Categories and Subjects to user friendly names in the Data map report [#4774](https://github.com/ethyca/fides/pull/4774)
 - Update active disabled Fides.js toggle color to light grey [#4778](https://github.com/ethyca/fides/pull/4778)
 - Update FidesJS fides_embed option to support embedding both banner & modal components [#4782](https://github.com/ethyca/fides/pull/4782)
+- Add a few CSS classes to help with styling FidesJS button groups [#4789](https://github.com/ethyca/fides/pull/4789)
 
 ### Fixed
 - Fixed select dropdowns being cut off by edges of modal forms [#4757](https://github.com/ethyca/fides/pull/4757)
diff --git a/clients/fides-js/src/components/ConsentButtons.tsx b/clients/fides-js/src/components/ConsentButtons.tsx
index c4fc20cee9..e0bb81da13 100644
--- a/clients/fides-js/src/components/ConsentButtons.tsx
+++ b/clients/fides-js/src/components/ConsentButtons.tsx
@@ -40,7 +40,7 @@ export const ConsentButtons = ({
       <LanguageSelector i18n={i18n} options={options} />
     )}
     {!!onManagePreferencesClick && (
-      <div className="fides-banner-button-group">
+      <div className="fides-banner-button-group fides-manage-preferences-button-group">
         <Button
           buttonType={isMobile ? ButtonType.SECONDARY : ButtonType.TERTIARY}
           label={i18n.t("exp.privacy_preferences_link_label")}
@@ -52,7 +52,9 @@ export const ConsentButtons = ({
     {includePrivacyPolicy && <PrivacyPolicyLink i18n={i18n} />}
     <div
       className={
-        isInModal ? "fides-modal-button-group" : "fides-banner-button-group"
+        isInModal
+          ? "fides-modal-button-group fides-modal-primary-actions"
+          : "fides-banner-button-group fides-banner-primary-actions"
       }
     >
       {firstButton}