consent overlay - rearrange buttons and update spacing (#4391)

Co-authored-by: Allison King <[email protected]>
ethyca · Nov 7, 2023 · 7e23d55 · 7e23d55
1 parent bce0664
commit 7e23d55
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 63 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,7 +32,8 @@ The types of changes are:
 - "is_service_specific" default updated when building TC strings on the backend [#4377](https://github.com/ethyca/fides/pull/4377)
 - Redact cli, database, and redis configuration information from GET api/v1/config API request responses. [#4379](https://github.com/ethyca/fides/pull/4379)
 
-### Fixed
+### Fixed 
+- Fix button arrangment and spacing for TCF and non-TCF consent overlay banner and modal [#4391](https://github.com/ethyca/fides/pull/4391)
 - Replaced h1 element with div to use exisitng fides styles in consent modal [#4399](https://github.com/ethyca/fides/pull/4399)
 
 ## [2.23.2](https://github.com/ethyca/fides/compare/2.23.1...2.23.2)

diff --git a/clients/fides-js/src/components/ConsentBanner.tsx b/clients/fides-js/src/components/ConsentBanner.tsx
@@ -22,6 +22,7 @@ interface BannerProps {
   children?: ComponentChildren;
   onVendorPageClick?: () => void;
   renderButtonGroup: (props: ButtonGroupProps) => VNode;
+  className?: string;
 }
 
 const ConsentBanner: FunctionComponent<BannerProps> = ({
@@ -32,6 +33,7 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
   children,
   onVendorPageClick,
   renderButtonGroup,
+  className,
 }) => {
   const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
 
@@ -62,7 +64,7 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
       className={`fides-banner 
         fides-banner-bottom 
         ${bannerIsOpen ? "" : "fides-banner-hidden"} 
-        ${window.Fides.options.tcfEnabled ? "fides-tcf-banner-container" : ""}`}
+        ${className}`}
     >
       <div id="fides-banner">
         <div id="fides-banner-inner">

diff --git a/clients/fides-js/src/components/ConsentButtons.tsx b/clients/fides-js/src/components/ConsentButtons.tsx
@@ -48,13 +48,13 @@ export const ConsentButtons = ({
       {firstButton || null}
       <Button
         buttonType={ButtonType.PRIMARY}
-        label={experienceConfig.accept_button_label}
-        onClick={onAcceptAll}
+        label={experienceConfig.reject_button_label}
+        onClick={onRejectAll}
       />
       <Button
         buttonType={ButtonType.PRIMARY}
-        label={experienceConfig.reject_button_label}
-        onClick={onRejectAll}
+        label={experienceConfig.accept_button_label}
+        onClick={onAcceptAll}
       />
     </div>
     {children}