[fides.js] Fix button arrangement

CHANGELOG.md

@@ -41,6 +41,7 @@ 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)
 - "isServiceSpecific" default updated when building TC strings on the frontend [#4384](https://github.com/ethyca/fides/pull/4384)
 - Redact cli, database, and redis configuration information from GET api/v1/config API request responses. [#4379](https://github.com/ethyca/fides/pull/4379)
+- Button ordering in fides.js UI [#4407](https://github.com/ethyca/fides/pull/4407)
 
 ## [2.23.3](https://github.com/ethyca/fides/compare/2.23.2...2.23.3)
 

clients/fides-js/src/components/ConsentButtons.tsx

@@ -1,4 +1,4 @@
-import { ComponentChildren, h, VNode } from "preact";
+import { h, VNode } from "preact";
 import Button from "./Button";
 import {
   ButtonType,
@@ -7,27 +7,24 @@ import {
   PrivacyNotice,
   ExperienceConfig,
 } from "../lib/consent-types";
+import PrivacyPolicyLink from "./PrivacyPolicyLink";
 
 export const ConsentButtons = ({
   experienceConfig,
   onManagePreferencesClick,
   firstButton,
-  middleButton,
   onAcceptAll,
   onRejectAll,
-  children,
   isMobile,
+  includePrivacyPolicy,
 }: {
   experienceConfig: ExperienceConfig;
   onManagePreferencesClick?: () => void;
   firstButton?: VNode;
-  /** Used to add a button between the "manage preferences" button and the "accept/reject" buttons */
-  middleButton?: VNode;
   onAcceptAll: () => void;
   onRejectAll: () => void;
-  /** Added as siblings to the button group after the "accept/reject" buttons */
-  children?: ComponentChildren;
   isMobile: boolean;
+  includePrivacyPolicy?: boolean;
 }) => (
   <div id="fides-button-group">
     {onManagePreferencesClick ? (
@@ -39,7 +36,9 @@ export const ConsentButtons = ({
         />
       </div>
     ) : null}
-    {middleButton || null}
+    {includePrivacyPolicy ? (
+      <PrivacyPolicyLink experience={experienceConfig} />
+    ) : null}
     <div
       className={
         firstButton ? "fides-modal-button-group" : "fides-banner-button-group"
@@ -57,7 +56,6 @@ export const ConsentButtons = ({
         onClick={onAcceptAll}
       />
     </div>
-    {children}
   </div>
 );
 
@@ -70,8 +68,6 @@ interface NoticeConsentButtonProps {
   enabledKeys: NoticeKeys;
   isAcknowledge: boolean;
   isInModal?: boolean;
-  children?: ComponentChildren;
-  middleButton?: VNode;
   isMobile: boolean;
 }
 
@@ -82,8 +78,6 @@ export const NoticeConsentButtons = ({
   enabledKeys,
   isInModal,
   isAcknowledge,
-  children,
-  middleButton,
   isMobile,
 }: NoticeConsentButtonProps) => {
   if (!experience.experience_config || !experience.privacy_notices) {
@@ -138,10 +132,8 @@ export const NoticeConsentButtons = ({
           />
         ) : undefined
       }
-      middleButton={middleButton}
       isMobile={isMobile}
-    >
-      {children}
-    </ConsentButtons>
+      includePrivacyPolicy={!isInModal}
+    />
   );
 };

clients/fides-js/src/components/fides.css

@@ -67,6 +67,7 @@
   --fides-overlay-container-border-radius: 12px;
   --fides-overlay-component-border-radius: 4px;
   --fides-overlay-banner-offset: 48px;
+  --fides-banner-font-size-title: var(--16px);
 }
 
 div#fides-overlay {
@@ -182,7 +183,7 @@ div#fides-banner-heading {
 }
 
 div#fides-banner-title {
-  font-size: var(--fides-overlay-font-size-title);
+  font-size: var(--fides-banner-font-size-title);
   font-weight: 600;
   line-height: 1.5em;
   min-width: 33%;
@@ -1001,12 +1002,6 @@ div#fides-banner-inner .fides-privacy-policy {
   border-width: 1px 0 0 0;
   padding: 24px 40px 40px 40px;
 }
-.fides-tcf-banner-container
-  div#fides-banner
-  div#fides-banner-inner
-  div#fides-button-group {
-  justify-content: flex-start;
-}
 .fides-tcf-banner-container #fides-privacy-policy-link {
-  margin-left: auto;
+  margin: auto;
 }

clients/fides-js/src/components/notices/NoticeOverlay.tsx

@@ -159,7 +159,6 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
                 onSave();
               }}
               isAcknowledge={isAllNoticeOnly}
-              middleButton={<PrivacyPolicyLink experience={experienceConfig} />}
               isMobile={isMobile}
             />
           )}

clients/fides-js/src/components/tcf/TcfConsentButtons.tsx

@@ -1,4 +1,4 @@
-import { ComponentChildren, VNode, h } from "preact";
+import { VNode, h } from "preact";
 
 import { PrivacyExperience } from "../../lib/consent-types";
 import { ConsentButtons } from "../ConsentButtons";
@@ -9,8 +9,8 @@ interface TcfConsentButtonProps {
   onManagePreferencesClick?: () => void;
   onSave: (keys: EnabledIds) => void;
   firstButton?: VNode;
-  children?: ComponentChildren;
   isMobile: boolean;
+  includePrivacyPolicy?: boolean;
 }
 
 const getAllIds = (modelList: TcfModels) => {
@@ -25,8 +25,8 @@ export const TcfConsentButtons = ({
   onManagePreferencesClick,
   onSave,
   firstButton,
-  children,
   isMobile,
+  includePrivacyPolicy,
 }: TcfConsentButtonProps) => {
   if (!experience.experience_config) {
     return null;
@@ -71,8 +71,7 @@ export const TcfConsentButtons = ({
       onRejectAll={handleRejectAll}
       firstButton={firstButton}
       isMobile={isMobile}
-    >
-      {children}
-    </ConsentButtons>
+      includePrivacyPolicy={includePrivacyPolicy}
+    />
   );
 };

clients/fides-js/src/components/tcf/TcfOverlay.tsx

@@ -366,9 +366,8 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
                   onSave();
                 }}
                 isMobile={isMobile}
-              >
-                <PrivacyPolicyLink experience={experienceConfig} />
-              </TcfConsentButtons>
+                includePrivacyPolicy
+              />
             )}
             className="fides-tcf-banner-container"
           >