Updates to consent experience styling

CHANGELOG.md

@@ -24,6 +24,7 @@ The types of changes are:
 - Moving Privacy Center endpoint logging behind debug flag [#5103](https://github.com/ethyca/fides/pull/5103)
 - Serve GVL languages as they are requested [#5112](https://github.com/ethyca/fides/pull/5112)
 - Changed text on system integrations tab to direct to new integration management [#5097](https://github.com/ethyca/fides/pull/5097)
+- Updates to consent experience styling [#5085](https://github.com/ethyca/fides/pull/5085)
 
 ### Developer Experience
 - Add `.syncignore` to reduce file sync size with new volumes [#5104](https://github.com/ethyca/fides/pull/5104)

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

@@ -67,21 +67,23 @@ const DataUseToggle = ({
         >
           <span className="fides-flex-center fides-justify-space-between">
             {title}
-            {badge ? <span className="fides-notice-badge">{badge}</span> : null}
           </span>
+        </span>
+        <span>
           {gpcBadge}
+          {badge ? <span className="fides-notice-badge">{badge}</span> : null}
+          {includeToggle ? (
+            <Toggle
+              name={title || ""}
+              id={noticeKey}
+              checked={checked}
+              onChange={onToggle}
+              disabled={disabled}
+              onLabel={onLabel}
+              offLabel={offLabel}
+            />
+          ) : null}
         </span>
-        {includeToggle ? (
-          <Toggle
-            name={title || ""}
-            id={noticeKey}
-            checked={checked}
-            onChange={onToggle}
-            disabled={disabled}
-            onLabel={onLabel}
-            offLabel={offLabel}
-          />
-        ) : null}
       </div>
       {children ? <div {...getDisclosureProps()}>{children}</div> : null}
     </div>

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

@@ -697,7 +697,7 @@ div#fides-overlay-wrapper .fides-toggle .fides-toggle-display {
 
 .fides-notice-toggle .fides-notice-toggle-trigger:before {
   display: inline-block;
-  width: 8px;
+  min-width: 8px;
   height: 8px;
   margin-right: calc(0.5rem + 2px);
   content: "";
@@ -781,13 +781,16 @@ div#fides-overlay-wrapper .fides-toggle .fides-toggle-display {
   font-size: var(--fides-overlay-font-size-body);
   white-space: nowrap;
   padding: 0 8px;
+  display: inline-flex;
 }
 
 .fides-gpc-badge {
   text-transform: uppercase;
   padding: 0 4px;
   font-weight: 700;
   border-radius: var(--fides-overlay-badge-border-radius);
+  display: inline-flex;
+  margin-left: 4px;
 }
 
 .fides-gpc-badge-applied,
@@ -846,6 +849,7 @@ div#fides-overlay-wrapper .fides-toggle .fides-toggle-display {
   align-items: center;
   height: 18px;
   margin-right: 8px;
+  margin-left: 4px;
   text-transform: uppercase;
   padding: 0 4px;
   font-weight: 600;

clients/privacy-center/cypress/e2e/consent-banner-tcf.cy.ts

@@ -348,16 +348,10 @@ describe("Fides-js TCF", () => {
         cy.get("#fides-tab-vendors").click();
         cy.get("#fides-panel-vendors").within(() => {
           cy.getByTestId("records-list-vendors").within(() => {
-            cy.get("span")
-              .contains(VENDOR_1.name)
-              .within(() => {
-                cy.get("span").contains("IAB TCF");
-              });
-            cy.get("span")
-              .contains(newVendor.name)
-              .within(() => {
-                cy.get("span").contains("IAB TCF");
-              });
+            cy.get("span").contains(VENDOR_1.name);
+            cy.get("span").contains("IAB TCF");
+            cy.get("span").contains(newVendor.name);
+            cy.get("span").contains("IAB TCF");
           });
           cy.get("span").contains(SYSTEM_1.name).should("not.exist");
 

clients/privacy-center/cypress/e2e/consent-banner.cy.ts

@@ -967,12 +967,8 @@ describe("Consent overlay", () => {
         cy.get("div.fides-gpc-banner").contains(
           "Global Privacy Control detected"
         );
-        cy.get("span")
-          .contains("Advertising with gpc enabled")
-          .parent()
-          .within(() => {
-            cy.get("span").contains("Global Privacy Control Applied");
-          });
+        cy.get("span").contains("Advertising with gpc enabled");
+        cy.get("span").contains("Global Privacy Control Applied");
       });
     });
 
@@ -1467,12 +1463,8 @@ describe("Consent overlay", () => {
         cy.get("div.fides-gpc-banner").contains(
           "Global Privacy Control detected"
         );
-        cy.get("span")
-          .contains("Advertising")
-          .parent()
-          .within(() => {
-            cy.get("span").contains("Global Privacy Control Overridden");
-          });
+        cy.get("span").contains("Advertising");
+        cy.get("span").contains("Global Privacy Control Overridden");
       });
     });
 
@@ -2176,19 +2168,19 @@ describe("Consent overlay", () => {
       cy.get("#fides-modal-link").click();
       cy.get(".fides-notice-toggle")
         .contains("Applied")
-        .parent()
+        .parents(".fides-notice-toggle-title")
         .within(() => {
           cy.get(".fides-gpc-label").contains("Applied");
         });
       cy.get(".fides-notice-toggle")
         .contains("Notice only")
-        .parent()
+        .parents(".fides-notice-toggle-title")
         .within(() => {
           cy.get(".fides-gpc-label").should("not.exist");
         });
       cy.get(".fides-notice-toggle")
         .contains("Overridden")
-        .parent()
+        .parents(".fides-notice-toggle-title")
         .within(() => {
           cy.get(".fides-gpc-label").contains("Overridden");
         });