Add a few CSS classes to help with styling FidesJS button groups (#4789)

Co-authored-by: Neville Samuell <[email protected]>

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)

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}