From c13775cb163bf976b59bb9ad5644e83911b04691 Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Tue, 3 Oct 2023 16:48:41 -0700
Subject: [PATCH 01/14] First pass

---
 clients/fides-js/src/components/Toggle.tsx    |  4 +-
 clients/fides-js/src/components/fides.css     | 95 ++++++++++++++-----
 .../src/components/tcf/TcfOverlay.tsx         |  6 +-
 .../src/components/tcf/TcfVendors.tsx         | 10 +-
 4 files changed, 83 insertions(+), 32 deletions(-)

diff --git a/clients/fides-js/src/components/Toggle.tsx b/clients/fides-js/src/components/Toggle.tsx
index 4cae01a995..fc8a08860f 100644
--- a/clients/fides-js/src/components/Toggle.tsx
+++ b/clients/fides-js/src/components/Toggle.tsx
@@ -34,7 +34,9 @@ const Toggle = ({
         disabled={disabled}
       />
       {/* Mark as `hidden` so it will fall back to a regular checkbox if CSS is not available */}
-      <span className="fides-toggle-display" hidden />
+      <span className="fides-toggle-display" hidden>
+        {checked ? "Opt-in" : "Opt-out"}
+      </span>
     </label>
   );
 };
diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
index 3136b7729a..275ee737fa 100644
--- a/clients/fides-js/src/components/fides.css
+++ b/clients/fides-js/src/components/fides.css
@@ -37,13 +37,15 @@
   /* Switches */
   --fides-overlay-primary-active-color: var(--fides-overlay-primary-color);
   --fides-overlay-primary-active-disabled-color: #bda4f7;
-  --fides-overlay-inactive-color: #cbd5e0;
+  --fides-overlay-inactive-color: #e2e8f0;
+  --fides-overlay-inactive-font-color: #a0aec0;
   --fides-overlay-disabled-color: #e1e7ee;
   /* Dividers */
   --fides-overlay-row-divider-color: #e2e8f0;
   --fides-overlay-row-hover-color: var(--fides-overlay-hover-color);
   /* Badge */
   --fides-overlay-badge-background-color: #718096;
+  --fides-overlay-badge-border-radius: 2px;
   /* Select */
   --fides-overlay-select-border-color: #e2e8f0;
 
@@ -54,8 +56,9 @@
   --fides-overlay-font-size-title: 1.2em;
   --fides-overlay-font-size-buttons: 1.05em;
   --fides-overlay-padding: 1.5em;
-  --fides-overlay-button-border-radius: 4px;
+  --fides-overlay-button-border-radius: 6px;
   --fides-overlay-button-padding: 0.5em 1em;
+  --fides-overlay-container-border-radius: 12px;
   --fides-overlay-component-border-radius: 4px;
   --fides-overlay-banner-offset: 48px;
 }
@@ -99,7 +102,7 @@ div#fides-banner {
   color: var(--fides-overlay-body-font-color);
   box-sizing: border-box;
   padding: var(--fides-overlay-padding);
-  overflow-y: scroll;
+  overflow-y: auto;
 
   display: flex;
   flex-direction: row;
@@ -107,6 +110,8 @@ div#fides-banner {
   justify-content: space-between;
   align-items: center;
   position: relative;
+
+  padding-bottom: 0px;
 }
 
 div#fides-banner-inner {
@@ -137,7 +142,7 @@ div#fides-banner-container.fides-banner-top.fides-banner-hidden {
 @media screen and (min-width: 48em) {
   div#fides-banner {
     width: 75%;
-    border-radius: var(--fides-overlay-component-border-radius);
+    border-radius: var(--fides-overlay-container-border-radius);
     border: 1px solid var(--fides-overlay-primary-color);
   }
   div#fides-banner-container.fides-banner-bottom {
@@ -181,6 +186,14 @@ div#fides-button-group {
   margin-top: 0.5em;
   display: flex;
   justify-content: space-between;
+  margin-right: -0.5em;
+
+  position: sticky;
+  bottom: 0;
+  padding-top: 10px;
+  padding-bottom: 20px;
+  background-color: var(--fides-overlay-background-color);
+  z-index: 5;
 }
 
 div.fides-acknowledge-button-container {
@@ -210,6 +223,7 @@ button.fides-banner-button {
   font-family: inherit;
   line-height: 1.15;
   text-decoration: none;
+  font-weight: 600;
 }
 
 button.fides-banner-button:hover {
@@ -220,6 +234,7 @@ button.fides-banner-button.fides-banner-button-primary {
   background: var(--fides-overlay-primary-button-background-color);
   color: var(--fides-overlay-primary-button-text-color);
   border: none;
+  border-radius: var(--fides-overlay-button-border-radius);
 }
 
 button.fides-banner-button.fides-banner-button-primary:hover {
@@ -230,6 +245,7 @@ button.fides-banner-button.fides-banner-button-secondary {
   background: var(--fides-overlay-secondary-button-background-color);
   color: var(--fides-overlay-secondary-button-text-color);
   border: 1px solid var(--fides-overlay-primary-button-background-color);
+  border-radius: var(--fides-overlay-button-border-radius);
 }
 
 button.fides-banner-button.fides-banner-button-secondary:hover {
@@ -255,16 +271,20 @@ div.fides-modal-content {
   padding: var(--fides-overlay-padding);
   border: 1px solid var(--fides-overlay-primary-color);
   background-color: var(--fides-overlay-background-color);
-  border-radius: var(--fides-overlay-component-border-radius);
-  max-height: 100%;
+  border-radius: var(--fides-overlay-container-border-radius);
+  max-height: 600px;
   max-width: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
 
   z-index: 2;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 0px;
 }
 
 .fides-modal-container,
@@ -301,6 +321,20 @@ div#fides-modal .fides-modal-description {
 div#fides-modal .fides-modal-button-group {
   display: flex;
   width: 100%;
+  flex-direction: row;
+}
+
+/* Responsive overlay */
+@media (max-width: 48em) {
+  div#fides-modal .fides-modal-button-group {
+      flex-direction: column;
+  }
+
+  button.fides-banner-button {
+    margin: 0;
+    margin-right: 0.5em;
+    margin-bottom: 0.75em
+  }
 }
 
 .fides-close-button {
@@ -371,8 +405,8 @@ div#fides-modal .fides-modal-button-group {
 }
 
 .fides-toggle .fides-toggle-display {
-  --offset: 0.1em;
-  --diameter: 1em;
+  --offset: 4px;
+  --diameter: 16px;
   /**
   Because we have a "hidden" attr on this toggle element, some CSS libs customers use may include a global
   display: none on the hidden attr. To prevent our toggles from being hidden we use !important here
@@ -380,15 +414,15 @@ div#fides-modal .fides-modal-button-group {
   display: inline-flex !important;
   align-items: center;
   justify-content: space-around;
-
-  width: calc(var(--diameter) * 2 + var(--offset) * 2);
-  height: calc(var(--diameter) + var(--offset) * 2);
   box-sizing: content-box;
-
   position: relative;
   border-radius: 100vw;
   background-color: var(--fides-overlay-inactive-color);
+  color: var(--fides-overlay-inactive-font-color);
   transition: 250ms;
+
+  width: 95px;
+  height: 24px;
 }
 
 .fides-toggle .fides-toggle-display::before {
@@ -408,14 +442,17 @@ div#fides-modal .fides-modal-button-group {
 
   background-color: #fff;
   transition: inherit;
+
+  box-shadow: 0 1.3px 2.7px rgba(0,0,0,0.25);
 }
 
 /* Checked/unchecked states */
 .fides-toggle .fides-toggle-input:checked + .fides-toggle-display {
   background-color: var(--fides-overlay-primary-active-color);
+  color: var(--fides-overlay-primary-button-text-color);
 }
 .fides-toggle .fides-toggle-input:checked + .fides-toggle-display::before {
-  transform: translate(100%, -50%);
+  transform: translate(74px, -50%);
 }
 
 /* Disabled state */
@@ -460,7 +497,7 @@ div#fides-modal .fides-modal-button-group {
 }
 
 .fides-notice-toggle .fides-notice-toggle-title {
-  padding-inline: 0.5em 0;
+  padding-inline: 12px 12px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -481,7 +518,8 @@ div#fides-modal .fides-modal-button-group {
 }
 
 .fides-notice-toggle .fides-disclosure-visible {
-  padding-inline: 0.5em;
+  padding-inline: 0.75em;
+  overflow: auto; /* prevent margin collapse */
 }
 
 .fides-notice-toggle p {
@@ -494,7 +532,6 @@ div#fides-modal .fides-modal-button-group {
 }
 
 .fides-notice-toggle-header {
-  text-transform: uppercase;
   font-weight: 600;
 }
 
@@ -591,7 +628,7 @@ div#fides-modal .fides-modal-button-group {
   text-transform: uppercase;
   padding: 0 4px;
   font-weight: 600;
-  border-radius: var(--fides-overlay-button-border-radius);
+  border-radius: var(--fides-overlay-badge-border-radius);
   background: var(--fides-overlay-badge-background-color);
   color: white;
   font-size: 0.7em;
@@ -683,6 +720,7 @@ div#fides-modal .fides-modal-button-group {
   padding-left: 0;
   list-style: none;
   margin-left: 0;
+  margin-bottom: 0;
 }
 
 .fides-tcf-vendor-toggles {
@@ -691,10 +729,20 @@ div#fides-modal .fides-modal-button-group {
 
 .fides-legal-basis-labels {
   display: flex;
-  align-items: end;
+  align-items: center;
   justify-content: end;
-  font-size: 0.8em;
-  font-weight: 500;
+  font-size: 12px;
+  font-weight: 600;
+  margin-right: 12px
+}
+
+.fides-legal-basis-labels span {
+  display: inline-flex;
+  width: 95px;
+  margin-left: 16px;
+  line-height: 16px;
+  text-align: center;
+  justify-content: center;
 }
 
 /* Vendor purpose table */
@@ -705,7 +753,6 @@ div#fides-modal .fides-modal-button-group {
 
 .fides-vendor-details-table th,
 .fides-vendor-details-table td {
-  padding: 0.5em 1em;
   text-align: left;
   font-size: 0.9em;
 }
@@ -769,3 +816,7 @@ div#fides-modal .fides-modal-button-group {
 .fides-info-box p {
   margin: 0;
 }
+
+.fides-tabs .tabpanel-container {
+  overflow: hidden;
+}
diff --git a/clients/fides-js/src/components/tcf/TcfOverlay.tsx b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
index c747d6c4a6..3578f18eaf 100644
--- a/clients/fides-js/src/components/tcf/TcfOverlay.tsx
+++ b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
@@ -1,4 +1,4 @@
-import { h, FunctionComponent } from "preact";
+import { h, FunctionComponent, Fragment } from "preact";
 import { useState, useCallback, useMemo } from "preact/hooks";
 import { TCString } from "@iabtechlabtcf/core";
 import ConsentBanner from "../ConsentBanner";
@@ -356,7 +356,7 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
           onClose();
         };
         return (
-          <div>
+          <Fragment>
             <TcfTabs
               experience={experience}
               enabledIds={draftIds}
@@ -375,7 +375,7 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
                 />
               }
             />
-          </div>
+          </Fragment>
         );
       }}
     />
diff --git a/clients/fides-js/src/components/tcf/TcfVendors.tsx b/clients/fides-js/src/components/tcf/TcfVendors.tsx
index b2ec2c9259..0fa8bb4e9c 100644
--- a/clients/fides-js/src/components/tcf/TcfVendors.tsx
+++ b/clients/fides-js/src/components/tcf/TcfVendors.tsx
@@ -47,8 +47,8 @@ const VendorDetails = ({
     <table className="fides-vendor-details-table">
       <thead>
         <tr>
-          <th>{label}</th>
-          {dataRetention ? <th>Retention</th> : null}
+          <th width="80%">{label}</th>
+          {dataRetention ? <th width="20%">Retention</th> : null}
         </tr>
       </thead>
       <tbody>
@@ -246,7 +246,7 @@ const TcfVendors = ({
       {/* DEFER: ideally we use a table object, but then DataUseToggles would need to be reworked
       or we would need a separate component. */}
       <div className="fides-legal-basis-labels">
-        <span className="fides-margin-right">Legitimate interest</span>
+        <span>Legitimate interest</span>
         <span>Consent</span>
       </div>
       {vendorsToDisplay.map((vendor) => {
@@ -283,9 +283,7 @@ const TcfVendors = ({
             checked={enabledVendorLegintIds.indexOf(vendor.id) !== -1}
             badge={gvlVendor ? "IAB TCF" : undefined}
             secondToggle={
-              <div
-                style={{ width: "50px", display: "flex", marginLeft: ".2em" }}
-              >
+              <div style={{ display: "flex", marginLeft: "16px" }}>
                 {isConsent ? (
                   <Toggle
                     name={`${vendor.name}-consent`}

From ad84405f89943730755ae135d7040845dadf050d Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Thu, 5 Oct 2023 09:47:53 -0700
Subject: [PATCH 02/14] Additional styling

---
 .../fides-js/src/components/ConsentBanner.tsx | 55 +++++++----
 .../src/components/ConsentButtons.tsx         |  2 +-
 .../fides-js/src/components/ConsentModal.tsx  | 18 +---
 clients/fides-js/src/components/Overlay.tsx   |  3 +
 .../src/components/PrivacyPolicyLink.tsx      | 28 ++++++
 clients/fides-js/src/components/fides.css     | 98 +++++++++++++------
 .../src/components/tcf/TcfConsentButtons.tsx  |  2 +-
 .../src/components/tcf/TcfOverlay.tsx         | 58 +++++++----
 .../src/components/tcf/TcfVendors.tsx         | 10 +-
 9 files changed, 186 insertions(+), 88 deletions(-)
 create mode 100644 clients/fides-js/src/components/PrivacyPolicyLink.tsx

diff --git a/clients/fides-js/src/components/ConsentBanner.tsx b/clients/fides-js/src/components/ConsentBanner.tsx
index 77bd84ea72..47683ca2c4 100644
--- a/clients/fides-js/src/components/ConsentBanner.tsx
+++ b/clients/fides-js/src/components/ConsentBanner.tsx
@@ -1,4 +1,10 @@
-import { h, FunctionComponent, ComponentChildren } from "preact";
+import {
+  h,
+  FunctionComponent,
+  ComponentChildren,
+  Component,
+  VNode,
+} from "preact";
 import { getConsentContext } from "../lib/consent-context";
 import { ExperienceConfig } from "../lib/consent-types";
 import CloseButton from "./CloseButton";
@@ -11,6 +17,8 @@ interface BannerProps {
   bannerIsOpen: boolean;
   children: ComponentChildren;
   onVendorPageClick?: () => void;
+  buttonGroup: VNode;
+  bannerType?: String;
 }
 
 const ConsentBanner: FunctionComponent<BannerProps> = ({
@@ -19,6 +27,8 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
   bannerIsOpen,
   children,
   onVendorPageClick,
+  buttonGroup,
+  bannerType,
 }) => {
   const showGpcBadge = getConsentContext().globalPrivacyControl;
   return (
@@ -31,27 +41,32 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
       <div id="fides-banner">
         <div id="fides-banner-inner">
           <CloseButton ariaLabel="Close banner" onClick={onClose} />
-          <div id="fides-banner-heading">
-            <div id="fides-banner-title" className="fides-banner-title">
-              {experience.title}
+          <div id="fides-banner-inner-container">
+            <div id="fides-banner-inner-description">
+              <div id="fides-banner-heading">
+                <div id="fides-banner-title" className="fides-banner-title">
+                  {experience.title}
+                </div>
+                {showGpcBadge && bannerType !== "TCF" ? (
+                  <GpcBadge
+                    label="Global Privacy Control Signal"
+                    status="detected"
+                  />
+                ) : null}
+              </div>
+              <div
+                id="fides-banner-description"
+                className="fides-banner-description"
+              >
+                <ExperienceDescription
+                  description={experience.description}
+                  onVendorPageClick={onVendorPageClick}
+                />
+              </div>
             </div>
-            {showGpcBadge ? (
-              <GpcBadge
-                label="Global Privacy Control Signal"
-                status="detected"
-              />
-            ) : null}
+            <div id="fides-banner-inner-tcf">{children}</div>
           </div>
-          <div
-            id="fides-banner-description"
-            className="fides-banner-description"
-          >
-            <ExperienceDescription
-              description={experience.description}
-              onVendorPageClick={onVendorPageClick}
-            />
-          </div>
-          {children}
+          {buttonGroup}
         </div>
       </div>
     </div>
diff --git a/clients/fides-js/src/components/ConsentButtons.tsx b/clients/fides-js/src/components/ConsentButtons.tsx
index 4627d1fe02..f704e28af3 100644
--- a/clients/fides-js/src/components/ConsentButtons.tsx
+++ b/clients/fides-js/src/components/ConsentButtons.tsx
@@ -23,7 +23,7 @@ export const ConsentButtons = ({
 }) => (
   <div id="fides-button-group">
     {onManagePreferencesClick ? (
-      <div>
+      <div style={{ display: "flex", marginRight: "24px" }}>
         <Button
           buttonType={ButtonType.TERTIARY}
           label={experienceConfig.privacy_preferences_link_label}
diff --git a/clients/fides-js/src/components/ConsentModal.tsx b/clients/fides-js/src/components/ConsentModal.tsx
index e36623c348..637e33afe1 100644
--- a/clients/fides-js/src/components/ConsentModal.tsx
+++ b/clients/fides-js/src/components/ConsentModal.tsx
@@ -1,21 +1,24 @@
-import { ComponentChildren, h } from "preact";
+import { ComponentChildren, VNode, h } from "preact";
 import { Attributes } from "../lib/a11y-dialog";
 import { ExperienceConfig } from "../lib/consent-types";
 
 import CloseButton from "./CloseButton";
 import GpcInfo from "./GpcInfo";
 import ExperienceDescription from "./ExperienceDescription";
+import PrivacyPolicyLink from "./PrivacyPolicyLink";
 
 const ConsentModal = ({
   attributes,
   experience,
   children,
   onVendorPageClick,
+  modalType,
 }: {
   attributes: Attributes;
   experience: ExperienceConfig;
   children: ComponentChildren;
   onVendorPageClick?: () => void;
+  modalType?: String;
 }) => {
   const { container, overlay, dialog, title, closeButton } = attributes;
 
@@ -49,19 +52,8 @@ const ConsentModal = ({
             description={experience.description}
           />
         </p>
-        <GpcInfo />
+        {modalType !== "TCF" && <GpcInfo />}
         {children}
-        {experience.privacy_policy_link_label &&
-        experience.privacy_policy_url ? (
-          <a
-            href={experience.privacy_policy_url}
-            rel="noopener noreferrer"
-            target="_blank"
-            className="fides-modal-privacy-policy"
-          >
-            {experience.privacy_policy_link_label}
-          </a>
-        ) : null}
       </div>
     </div>
   );
diff --git a/clients/fides-js/src/components/Overlay.tsx b/clients/fides-js/src/components/Overlay.tsx
index ec9d4d4716..2a6bcdb9ca 100644
--- a/clients/fides-js/src/components/Overlay.tsx
+++ b/clients/fides-js/src/components/Overlay.tsx
@@ -33,6 +33,7 @@ interface Props {
   renderBanner: (props: RenderBannerProps) => VNode | null;
   renderModalContent: (props: RenderModalContent) => VNode;
   onVendorPageClick?: () => void;
+  overlayType?: String;
 }
 
 const Overlay: FunctionComponent<Props> = ({
@@ -42,6 +43,7 @@ const Overlay: FunctionComponent<Props> = ({
   renderBanner,
   renderModalContent,
   onVendorPageClick,
+  overlayType,
 }) => {
   const delayBannerMilliseconds = 100;
   const delayModalLinkMilliseconds = 200;
@@ -153,6 +155,7 @@ const Overlay: FunctionComponent<Props> = ({
         attributes={attributes}
         experience={experience.experience_config}
         onVendorPageClick={onVendorPageClick}
+        modalType={overlayType}
       >
         {renderModalContent({ onClose: handleCloseModal })}
       </ConsentModal>
diff --git a/clients/fides-js/src/components/PrivacyPolicyLink.tsx b/clients/fides-js/src/components/PrivacyPolicyLink.tsx
new file mode 100644
index 0000000000..3facaf5418
--- /dev/null
+++ b/clients/fides-js/src/components/PrivacyPolicyLink.tsx
@@ -0,0 +1,28 @@
+import { h } from "preact";
+import { ExperienceConfig } from "../lib/consent-types";
+
+const PrivacyPolicyLink = ({
+  experience,
+}: {
+  experience?: ExperienceConfig;
+}) => {
+  if (
+    !experience?.privacy_policy_link_label ||
+    !experience?.privacy_policy_url
+  ) {
+    return null;
+  }
+
+  return (
+    <a
+      href={experience.privacy_policy_url}
+      rel="noopener noreferrer"
+      target="_blank"
+      className="fides-privacy-policy"
+    >
+      {experience.privacy_policy_link_label}
+    </a>
+  );
+};
+
+export default PrivacyPolicyLink;
diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
index 275ee737fa..d39299e51b 100644
--- a/clients/fides-js/src/components/fides.css
+++ b/clients/fides-js/src/components/fides.css
@@ -53,7 +53,7 @@
   --fides-overlay-font-family: Inter, sans-serif;
   --fides-overlay-font-size-body-small: 0.875em;
   --fides-overlay-font-size-body: 0.95em;
-  --fides-overlay-font-size-title: 1.2em;
+  --fides-overlay-font-size-title: 1em;
   --fides-overlay-font-size-buttons: 1.05em;
   --fides-overlay-padding: 1.5em;
   --fides-overlay-button-border-radius: 6px;
@@ -61,6 +61,7 @@
   --fides-overlay-container-border-radius: 12px;
   --fides-overlay-component-border-radius: 4px;
   --fides-overlay-banner-offset: 48px;
+  --fides-banner-button-font-size: 1em;
 }
 
 div#fides-overlay {
@@ -93,7 +94,6 @@ div#fides-banner-container {
   display: flex;
   justify-content: center;
   visibility: visible;
-  max-height: 100%;
 }
 
 div#fides-banner {
@@ -101,8 +101,8 @@ div#fides-banner {
   background: var(--fides-overlay-background-color);
   color: var(--fides-overlay-body-font-color);
   box-sizing: border-box;
-  padding: var(--fides-overlay-padding);
-  overflow-y: auto;
+  padding: 24px 40px 40px 40px;
+  overflow-y: hidden;
 
   display: flex;
   flex-direction: row;
@@ -110,8 +110,6 @@ div#fides-banner {
   justify-content: space-between;
   align-items: center;
   position: relative;
-
-  padding-bottom: 0px;
 }
 
 div#fides-banner-inner {
@@ -138,27 +136,41 @@ div#fides-banner-container.fides-banner-top.fides-banner-hidden {
   visibility: hidden;
 }
 
+div#fides-banner-inner div#fides-button-group {
+  padding-top: 0px;
+  padding-bottom: 0px;
+  margin-top: 0px;
+}
+
+div#fides-banner-inner-container {
+  display: flex;
+  flex-direction: row;
+  gap: 60px;
+}
+
+div#fides-banner-inner-description {
+  flex-basis: 50%;
+}
+
+div#fides-banner-inner-tcf {
+  flex-basis: 50%;
+  max-height: 200px;
+  margin-top: 3em;
+  overflow-y: auto;
+}
+
 /* Responsive banner */
 @media screen and (min-width: 48em) {
   div#fides-banner {
-    width: 75%;
-    border-radius: var(--fides-overlay-container-border-radius);
-    border: 1px solid var(--fides-overlay-primary-color);
-  }
-  div#fides-banner-container.fides-banner-bottom {
-    bottom: var(--fides-overlay-banner-offset);
+    width: 100%;
+    border-top: 1px solid var(--fides-overlay-primary-color);
   }
+
   div#fides-banner-container.fides-banner-top {
     top: var(--fides-overlay-banner-offset);
   }
 }
 
-@media only screen and (min-width: 80em) {
-  div#fides-banner {
-    width: 60%;
-  }
-}
-
 div#fides-banner-heading {
   display: flex;
   margin-right: 0.8em;
@@ -175,23 +187,18 @@ div#fides-banner-title {
 }
 
 div#fides-banner-description {
-  margin-top: 0.75em;
+  margin-top: 16px;
+  margin-bottom: 24px;
   line-height: 1.2em;
-  min-width: 33%;
   flex: 1;
-  margin-bottom: 0.5em;
 }
 
 div#fides-button-group {
   margin-top: 0.5em;
   display: flex;
   justify-content: space-between;
-  margin-right: -0.5em;
 
-  position: sticky;
-  bottom: 0;
   padding-top: 10px;
-  padding-bottom: 20px;
   background-color: var(--fides-overlay-background-color);
   z-index: 5;
 }
@@ -207,7 +214,7 @@ div.fides-banner-acknowledge .fides-banner-button {
 }
 
 button.fides-banner-button {
-  font-size: var(--fides-overlay-font-size-buttons);
+  font-size: var(--fides-banner-button-font-size);
   display: inline-block;
   flex: auto;
   cursor: pointer;
@@ -259,7 +266,9 @@ button.fides-banner-button.fides-banner-button-tertiary {
   color: var(--fides-overlay-link-font-color);
   text-decoration: underline;
   cursor: pointer;
-  line-height: 2em;
+  font-weight: 500;
+  font-size: var(--fides-overlay-font-size-body);
+  line-height: 20px;
 }
 
 /** Modal */
@@ -272,7 +281,7 @@ div.fides-modal-content {
   border: 1px solid var(--fides-overlay-primary-color);
   background-color: var(--fides-overlay-background-color);
   border-radius: var(--fides-overlay-container-border-radius);
-  max-height: 600px;
+  max-height: 680px;
   max-width: 100%;
   overflow-y: auto;
 
@@ -314,6 +323,15 @@ div#fides-modal .fides-modal-header {
   color: var(--fides-overlay-title-font-color);
 }
 
+div#fides-modal .fides-modal-footer {
+  display: flex;
+  flex-direction: column;
+  position: sticky;
+  bottom: 0px;
+  z-index: 5;
+  background-color: var(--fides-overlay-background-color);
+}
+
 div#fides-modal .fides-modal-description {
   margin: 1em 0 1em 0;
 }
@@ -372,10 +390,17 @@ div#fides-modal .fides-modal-button-group {
   margin-bottom: 1em;
 }
 
-.fides-modal-privacy-policy {
+div#fides-banner-inner .fides-privacy-policy {
+  display: block;
+  text-align: center;
+  color: var(--fides-overlay-primary-color);
+}
+
+.fides-modal-content .fides-privacy-policy {
   display: block;
   text-align: center;
-  margin-top: 1.5em;
+  margin-top: 24px;
+  margin-bottom: 24px;
   color: var(--fides-overlay-primary-color);
 }
 
@@ -452,7 +477,7 @@ div#fides-modal .fides-modal-button-group {
   color: var(--fides-overlay-primary-button-text-color);
 }
 .fides-toggle .fides-toggle-input:checked + .fides-toggle-display::before {
-  transform: translate(74px, -50%);
+  transform: translate(70px, -50%);
 }
 
 /* Disabled state */
@@ -491,6 +516,7 @@ div#fides-modal .fides-modal-button-group {
 .fides-disclosure-hidden {
   display: flex;
   visibility: hidden;
+  overflow: hidden;
   height: 0px;
   margin-top: 0px;
   margin-bottom: 0px;
@@ -501,6 +527,7 @@ div#fides-modal .fides-modal-button-group {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  border-bottom: 1px solid var(--fides-overlay-row-divider-color);
 }
 
 .fides-notice-toggle .fides-notice-toggle-trigger {
@@ -527,6 +554,14 @@ div#fides-modal .fides-modal-button-group {
   margin-bottom: 1.1em;
 }
 
+.fides-notice-toggle-title .fides-flex-center {
+  align-items: center;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  margin-right: 32px;
+}
+
 .fides-notice-toggle-expanded {
   background-color: var(--fides-overlay-row-hover-color);
 }
@@ -798,6 +833,7 @@ div#fides-modal .fides-modal-button-group {
   display: flex;
   padding: 1.1em;
   border-radius: var(--fides-overlay-component-border-radius);
+  justify-content: space-around;
 }
 
 .fides-vendor-info-label {
diff --git a/clients/fides-js/src/components/tcf/TcfConsentButtons.tsx b/clients/fides-js/src/components/tcf/TcfConsentButtons.tsx
index abee012177..776ea16a9a 100644
--- a/clients/fides-js/src/components/tcf/TcfConsentButtons.tsx
+++ b/clients/fides-js/src/components/tcf/TcfConsentButtons.tsx
@@ -1,4 +1,4 @@
-import { VNode, h } from "preact";
+import { Fragment, VNode, h } from "preact";
 
 import { PrivacyExperience } from "../../lib/consent-types";
 import { ConsentButtons } from "../ConsentButtons";
diff --git a/clients/fides-js/src/components/tcf/TcfOverlay.tsx b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
index 3578f18eaf..89d3558db4 100644
--- a/clients/fides-js/src/components/tcf/TcfOverlay.tsx
+++ b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
@@ -2,6 +2,7 @@ import { h, FunctionComponent, Fragment } from "preact";
 import { useState, useCallback, useMemo } from "preact/hooks";
 import { TCString } from "@iabtechlabtcf/core";
 import ConsentBanner from "../ConsentBanner";
+import PrivacyPolicyLink from "../PrivacyPolicyLink";
 
 import {
   debugLog,
@@ -319,6 +320,7 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
       options={options}
       experience={experience}
       cookie={cookie}
+      overlayType="TCF"
       onVendorPageClick={() => {
         setActiveTabIndex(2);
       }}
@@ -333,20 +335,33 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
             onClose={onClose}
             experience={experienceConfig}
             onVendorPageClick={goToVendorTab}
+            bannerType="TCF"
+            buttonGroup={
+              <div
+                style={{
+                  display: "flex",
+                  width: "calc(50% - 30px)",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <TcfConsentButtons
+                  experience={experience}
+                  onManagePreferencesClick={onManagePreferencesClick}
+                  onSave={(keys) => {
+                    handleUpdateAllPreferences(keys);
+                    onSave();
+                  }}
+                />
+                <PrivacyPolicyLink experience={experience.experience_config} />
+              </div>
+            }
           >
-            <InitialLayer experience={experience} />
             <VendorInfoBanner
               experience={experience}
               goToVendorTab={goToVendorTab}
             />
-            <TcfConsentButtons
-              experience={experience}
-              onManagePreferencesClick={onManagePreferencesClick}
-              onSave={(keys) => {
-                handleUpdateAllPreferences(keys);
-                onSave();
-              }}
-            />
+            <InitialLayer experience={experience} />
           </ConsentBanner>
         ) : null;
       }}
@@ -364,17 +379,20 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
               activeTabIndex={activeTabIndex}
               onTabChange={setActiveTabIndex}
             />
-            <TcfConsentButtons
-              experience={experience}
-              onSave={onSave}
-              firstButton={
-                <Button
-                  buttonType={ButtonType.SECONDARY}
-                  label={experience.experience_config?.save_button_label}
-                  onClick={() => onSave(draftIds)}
-                />
-              }
-            />
+            <div class="fides-modal-footer">
+              <TcfConsentButtons
+                experience={experience}
+                onSave={onSave}
+                firstButton={
+                  <Button
+                    buttonType={ButtonType.SECONDARY}
+                    label={experience.experience_config?.save_button_label}
+                    onClick={() => onSave(draftIds)}
+                  />
+                }
+              />
+              <PrivacyPolicyLink experience={experience.experience_config} />
+            </div>
           </Fragment>
         );
       }}
diff --git a/clients/fides-js/src/components/tcf/TcfVendors.tsx b/clients/fides-js/src/components/tcf/TcfVendors.tsx
index 0fa8bb4e9c..3886580873 100644
--- a/clients/fides-js/src/components/tcf/TcfVendors.tsx
+++ b/clients/fides-js/src/components/tcf/TcfVendors.tsx
@@ -48,7 +48,11 @@ const VendorDetails = ({
       <thead>
         <tr>
           <th width="80%">{label}</th>
-          {dataRetention ? <th width="20%">Retention</th> : null}
+          {dataRetention ? (
+            <th width="20%" style={{ textAlign: "right" }}>
+              Retention
+            </th>
+          ) : null}
         </tr>
       </thead>
       <tbody>
@@ -61,7 +65,9 @@ const VendorDetails = ({
             <tr key={item.id}>
               <td>{item.name}</td>
               {dataRetention ? (
-                <td>{retention == null ? "N/A" : `${retention} day(s)`}</td>
+                <td style={{ textAlign: "right" }}>
+                  {retention == null ? "N/A" : `${retention} day(s)`}
+                </td>
               ) : null}
             </tr>
           );

From 0be3aea73bdd58614a93c0204fd3a03cf575d30f Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Thu, 5 Oct 2023 14:51:29 -0700
Subject: [PATCH 03/14] Matching more of the designs

---
 clients/fides-js/rollup.config.mjs            |  2 +-
 .../fides-js/src/components/ConsentBanner.tsx | 13 ++--
 .../src/components/ConsentButtons.tsx         | 13 +++-
 .../fides-js/src/components/ConsentModal.tsx  |  1 -
 .../src/components/PrivacyPolicyLink.tsx      | 22 ++++---
 clients/fides-js/src/components/fides.css     | 30 ++++++----
 .../src/components/notices/NoticeOverlay.tsx  | 59 ++++++++++++-------
 .../src/components/tcf/TcfConsentButtons.tsx  |  8 ++-
 .../src/components/tcf/TcfOverlay.tsx         | 20 ++++---
 .../src/components/tcf/VendorInfoBanner.tsx   |  4 +-
 10 files changed, 111 insertions(+), 61 deletions(-)

diff --git a/clients/fides-js/rollup.config.mjs b/clients/fides-js/rollup.config.mjs
index ebb021464a..15e9419d4b 100644
--- a/clients/fides-js/rollup.config.mjs
+++ b/clients/fides-js/rollup.config.mjs
@@ -10,7 +10,7 @@ import postcss from "rollup-plugin-postcss";
 
 const NAME = "fides";
 const IS_DEV = process.env.NODE_ENV === "development";
-const GZIP_SIZE_ERROR_KB = 20; // fail build if bundle size exceeds this
+const GZIP_SIZE_ERROR_KB = 22; // fail build if bundle size exceeds this
 const GZIP_SIZE_WARN_KB = 15; // log a warning if bundle size exceeds this
 
 // TCF
diff --git a/clients/fides-js/src/components/ConsentBanner.tsx b/clients/fides-js/src/components/ConsentBanner.tsx
index 47683ca2c4..cc35fde73c 100644
--- a/clients/fides-js/src/components/ConsentBanner.tsx
+++ b/clients/fides-js/src/components/ConsentBanner.tsx
@@ -15,7 +15,7 @@ interface BannerProps {
   experience: ExperienceConfig;
   onClose: () => void;
   bannerIsOpen: boolean;
-  children: ComponentChildren;
+  children?: ComponentChildren;
   onVendorPageClick?: () => void;
   buttonGroup: VNode;
   bannerType?: String;
@@ -41,7 +41,12 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
       <div id="fides-banner">
         <div id="fides-banner-inner">
           <CloseButton ariaLabel="Close banner" onClick={onClose} />
-          <div id="fides-banner-inner-container">
+          <div
+            id="fides-banner-inner-container"
+            style={{
+              gridTemplateColumns: children ? "1fr 1fr" : "1fr",
+            }}
+          >
             <div id="fides-banner-inner-description">
               <div id="fides-banner-heading">
                 <div id="fides-banner-title" className="fides-banner-title">
@@ -64,9 +69,9 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
                 />
               </div>
             </div>
-            <div id="fides-banner-inner-tcf">{children}</div>
+            {children}
+            {buttonGroup}
           </div>
-          {buttonGroup}
         </div>
       </div>
     </div>
diff --git a/clients/fides-js/src/components/ConsentButtons.tsx b/clients/fides-js/src/components/ConsentButtons.tsx
index f704e28af3..7176da41c8 100644
--- a/clients/fides-js/src/components/ConsentButtons.tsx
+++ b/clients/fides-js/src/components/ConsentButtons.tsx
@@ -1,4 +1,4 @@
-import { h, VNode } from "preact";
+import { ComponentChildren, h, VNode } from "preact";
 import Button from "./Button";
 import {
   ButtonType,
@@ -14,16 +14,18 @@ export const ConsentButtons = ({
   firstButton,
   onAcceptAll,
   onRejectAll,
+  children,
 }: {
   experienceConfig: ExperienceConfig;
   onManagePreferencesClick?: () => void;
   firstButton?: VNode;
   onAcceptAll: () => void;
   onRejectAll: () => void;
+  children: ComponentChildren;
 }) => (
   <div id="fides-button-group">
     {onManagePreferencesClick ? (
-      <div style={{ display: "flex", marginRight: "24px" }}>
+      <div style={{ display: "flex" }}>
         <Button
           buttonType={ButtonType.TERTIARY}
           label={experienceConfig.privacy_preferences_link_label}
@@ -44,6 +46,7 @@ export const ConsentButtons = ({
         onClick={onAcceptAll}
       />
     </div>
+    {children}
   </div>
 );
 
@@ -56,6 +59,7 @@ interface NoticeConsentButtonProps {
   enabledKeys: NoticeKeys;
   isAcknowledge: boolean;
   isInModal?: boolean;
+  children?: ComponentChildren;
 }
 
 export const NoticeConsentButtons = ({
@@ -65,6 +69,7 @@ export const NoticeConsentButtons = ({
   enabledKeys,
   isInModal,
   isAcknowledge,
+  children,
 }: NoticeConsentButtonProps) => {
   if (!experience.experience_config || !experience.privacy_notices) {
     return null;
@@ -118,6 +123,8 @@ export const NoticeConsentButtons = ({
           />
         ) : undefined
       }
-    />
+    >
+      {children}
+    </ConsentButtons>
   );
 };
diff --git a/clients/fides-js/src/components/ConsentModal.tsx b/clients/fides-js/src/components/ConsentModal.tsx
index 637e33afe1..cf1f05b115 100644
--- a/clients/fides-js/src/components/ConsentModal.tsx
+++ b/clients/fides-js/src/components/ConsentModal.tsx
@@ -5,7 +5,6 @@ import { ExperienceConfig } from "../lib/consent-types";
 import CloseButton from "./CloseButton";
 import GpcInfo from "./GpcInfo";
 import ExperienceDescription from "./ExperienceDescription";
-import PrivacyPolicyLink from "./PrivacyPolicyLink";
 
 const ConsentModal = ({
   attributes,
diff --git a/clients/fides-js/src/components/PrivacyPolicyLink.tsx b/clients/fides-js/src/components/PrivacyPolicyLink.tsx
index 3facaf5418..b0a5aa57c7 100644
--- a/clients/fides-js/src/components/PrivacyPolicyLink.tsx
+++ b/clients/fides-js/src/components/PrivacyPolicyLink.tsx
@@ -14,14 +14,22 @@ const PrivacyPolicyLink = ({
   }
 
   return (
-    <a
-      href={experience.privacy_policy_url}
-      rel="noopener noreferrer"
-      target="_blank"
-      className="fides-privacy-policy"
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
     >
-      {experience.privacy_policy_link_label}
-    </a>
+      <a
+        href={experience.privacy_policy_url}
+        rel="noopener noreferrer"
+        target="_blank"
+        className="fides-privacy-policy"
+      >
+        {experience.privacy_policy_link_label}
+      </a>
+    </div>
   );
 };
 
diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
index d39299e51b..534adff818 100644
--- a/clients/fides-js/src/components/fides.css
+++ b/clients/fides-js/src/components/fides.css
@@ -140,21 +140,26 @@ div#fides-banner-inner div#fides-button-group {
   padding-top: 0px;
   padding-bottom: 0px;
   margin-top: 0px;
+  margin-bottom: 0px;
+  width: 100%;
 }
 
 div#fides-banner-inner-container {
-  display: flex;
-  flex-direction: row;
-  gap: 60px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column-gap: 60px;
 }
 
 div#fides-banner-inner-description {
-  flex-basis: 50%;
+  grid-column: 1;
+  grid-row: 1;
 }
 
-div#fides-banner-inner-tcf {
-  flex-basis: 50%;
-  max-height: 200px;
+div#fides-tcf-banner-inner {
+  grid-column: 2;
+  grid-row: 1 / 3;
+  height: 0;
+  min-height: 100%;
   margin-top: 3em;
   overflow-y: auto;
 }
@@ -195,6 +200,7 @@ div#fides-banner-description {
 
 div#fides-button-group {
   margin-top: 0.5em;
+  margin-bottom: var(--fides-overlay-padding);
   display: flex;
   justify-content: space-between;
 
@@ -393,14 +399,14 @@ div#fides-modal .fides-modal-button-group {
 div#fides-banner-inner .fides-privacy-policy {
   display: block;
   text-align: center;
+  margin-bottom: 0px;
   color: var(--fides-overlay-primary-color);
 }
 
 .fides-modal-content .fides-privacy-policy {
   display: block;
   text-align: center;
-  margin-top: 24px;
-  margin-bottom: 24px;
+  margin-bottom: var(--fides-overlay-padding);
   color: var(--fides-overlay-primary-color);
 }
 
@@ -559,7 +565,6 @@ div#fides-banner-inner .fides-privacy-policy {
   display: flex;
   width: 100%;
   justify-content: space-between;
-  margin-right: 32px;
 }
 
 .fides-notice-toggle-expanded {
@@ -595,13 +600,14 @@ div#fides-banner-inner .fides-privacy-policy {
 .fides-gpc-label {
   font-weight: 600;
   font-size: 0.9em;
+  text-wrap: nowrap;
 }
 
 .fides-gpc-badge {
   text-transform: uppercase;
   padding: 0 4px;
   font-weight: 700;
-  border-radius: var(--fides-overlay-button-border-radius);
+  border-radius: 4px;
 }
 
 .fides-gpc-badge-applied,
@@ -834,6 +840,8 @@ div#fides-banner-inner .fides-privacy-policy {
   padding: 1.1em;
   border-radius: var(--fides-overlay-component-border-radius);
   justify-content: space-around;
+  position: sticky;
+  top: 0;
 }
 
 .fides-vendor-info-label {
diff --git a/clients/fides-js/src/components/notices/NoticeOverlay.tsx b/clients/fides-js/src/components/notices/NoticeOverlay.tsx
index 2dfcd96523..ab1d24625f 100644
--- a/clients/fides-js/src/components/notices/NoticeOverlay.tsx
+++ b/clients/fides-js/src/components/notices/NoticeOverlay.tsx
@@ -22,6 +22,7 @@ import NoticeToggles from "./NoticeToggles";
 import { OverlayProps } from "../types";
 import { useConsentServed } from "../../lib/hooks";
 import { updateCookieFromNoticePreferences } from "../../lib/cookie";
+import PrivacyPolicyLink from "../PrivacyPolicyLink";
 
 const NoticeOverlay: FunctionComponent<OverlayProps> = ({
   experience,
@@ -113,18 +114,29 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
             bannerIsOpen={isOpen}
             onClose={onClose}
             experience={experienceConfig}
-          >
-            <NoticeConsentButtons
-              experience={experience}
-              onManagePreferencesClick={onManagePreferencesClick}
-              enabledKeys={draftEnabledNoticeKeys}
-              onSave={(keys) => {
-                handleUpdatePreferences(keys);
-                onSave();
-              }}
-              isAcknowledge={isAllNoticeOnly}
-            />
-          </ConsentBanner>
+            buttonGroup={
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <NoticeConsentButtons
+                  experience={experience}
+                  onManagePreferencesClick={onManagePreferencesClick}
+                  enabledKeys={draftEnabledNoticeKeys}
+                  onSave={(keys) => {
+                    handleUpdatePreferences(keys);
+                    onSave();
+                  }}
+                  isAcknowledge={isAllNoticeOnly}
+                >
+                  <PrivacyPolicyLink experience={experienceConfig} />
+                </NoticeConsentButtons>
+              </div>
+            }
+          />
         ) : null
       }
       renderModalContent={({ onClose }) => (
@@ -136,16 +148,19 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
               onChange={setDraftEnabledNoticeKeys}
             />
           </div>
-          <NoticeConsentButtons
-            experience={experience}
-            enabledKeys={draftEnabledNoticeKeys}
-            onSave={(keys) => {
-              handleUpdatePreferences(keys);
-              onClose();
-            }}
-            isInModal
-            isAcknowledge={isAllNoticeOnly}
-          />
+          <div class="fides-modal-footer">
+            <NoticeConsentButtons
+              experience={experience}
+              enabledKeys={draftEnabledNoticeKeys}
+              onSave={(keys) => {
+                handleUpdatePreferences(keys);
+                onClose();
+              }}
+              isInModal
+              isAcknowledge={isAllNoticeOnly}
+            ></NoticeConsentButtons>
+            <PrivacyPolicyLink experience={experience.experience_config} />
+          </div>
         </div>
       )}
     />
diff --git a/clients/fides-js/src/components/tcf/TcfConsentButtons.tsx b/clients/fides-js/src/components/tcf/TcfConsentButtons.tsx
index 776ea16a9a..ec37b4c671 100644
--- a/clients/fides-js/src/components/tcf/TcfConsentButtons.tsx
+++ b/clients/fides-js/src/components/tcf/TcfConsentButtons.tsx
@@ -1,4 +1,4 @@
-import { Fragment, VNode, h } from "preact";
+import { ComponentChildren, VNode, h } from "preact";
 
 import { PrivacyExperience } from "../../lib/consent-types";
 import { ConsentButtons } from "../ConsentButtons";
@@ -14,6 +14,7 @@ interface TcfConsentButtonProps {
   onManagePreferencesClick?: () => void;
   onSave: (keys: EnabledIds) => void;
   firstButton?: VNode;
+  children?: ComponentChildren;
 }
 
 const getAllIds = (
@@ -34,6 +35,7 @@ export const TcfConsentButtons = ({
   onManagePreferencesClick,
   onSave,
   firstButton,
+  children,
 }: TcfConsentButtonProps) => {
   if (!experience.experience_config) {
     return null;
@@ -74,6 +76,8 @@ export const TcfConsentButtons = ({
       onAcceptAll={handleAcceptAll}
       onRejectAll={handleRejectAll}
       firstButton={firstButton}
-    />
+    >
+      {children}
+    </ConsentButtons>
   );
 };
diff --git a/clients/fides-js/src/components/tcf/TcfOverlay.tsx b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
index 89d3558db4..1fd2137ac0 100644
--- a/clients/fides-js/src/components/tcf/TcfOverlay.tsx
+++ b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
@@ -340,9 +340,10 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
               <div
                 style={{
                   display: "flex",
-                  width: "calc(50% - 30px)",
                   justifyContent: "space-between",
                   alignItems: "center",
+                  gridColumn: 1,
+                  gridRow: 2,
                 }}
               >
                 <TcfConsentButtons
@@ -352,16 +353,19 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
                     handleUpdateAllPreferences(keys);
                     onSave();
                   }}
-                />
-                <PrivacyPolicyLink experience={experience.experience_config} />
+                >
+                  <PrivacyPolicyLink experience={experienceConfig} />
+                </TcfConsentButtons>
               </div>
             }
           >
-            <VendorInfoBanner
-              experience={experience}
-              goToVendorTab={goToVendorTab}
-            />
-            <InitialLayer experience={experience} />
+            <div id="fides-tcf-banner-inner">
+              <VendorInfoBanner
+                experience={experience}
+                goToVendorTab={goToVendorTab}
+              />
+              <InitialLayer experience={experience} />
+            </div>
           </ConsentBanner>
         ) : null;
       }}
diff --git a/clients/fides-js/src/components/tcf/VendorInfoBanner.tsx b/clients/fides-js/src/components/tcf/VendorInfoBanner.tsx
index 06cee4a575..d9f225328a 100644
--- a/clients/fides-js/src/components/tcf/VendorInfoBanner.tsx
+++ b/clients/fides-js/src/components/tcf/VendorInfoBanner.tsx
@@ -69,9 +69,9 @@ const VendorInfoBanner = ({
         count={counts.total}
         onClick={goToVendorTab}
       />
-      <VendorInfo label="Vendors who use consent" count={counts.consent} />
+      <VendorInfo label="Vendors using consent" count={counts.consent} />
       <VendorInfo
-        label="Vendors who use legitimate interest"
+        label="Vendors using legitimate interest"
         count={counts.legint}
       />
     </div>

From ae8fb9c4ca24a9770495db6764b8c06496046848 Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Thu, 5 Oct 2023 17:40:32 -0700
Subject: [PATCH 04/14] Adding class to banner button group

---
 clients/fides-js/src/components/ConsentButtons.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/clients/fides-js/src/components/ConsentButtons.tsx b/clients/fides-js/src/components/ConsentButtons.tsx
index 7176da41c8..ae08e1b71a 100644
--- a/clients/fides-js/src/components/ConsentButtons.tsx
+++ b/clients/fides-js/src/components/ConsentButtons.tsx
@@ -33,7 +33,11 @@ export const ConsentButtons = ({
         />
       </div>
     ) : null}
-    <div className={firstButton ? "fides-modal-button-group" : undefined}>
+    <div
+      className={
+        firstButton ? "fides-modal-button-group" : "fides-banner-button-group"
+      }
+    >
       {firstButton || null}
       <Button
         buttonType={ButtonType.PRIMARY}

From 1c5baddc2973f94828544012ea0f531dd728d8fe Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Fri, 6 Oct 2023 10:29:45 -0700
Subject: [PATCH 05/14] Adding middle button prop to button group

---
 clients/fides-js/src/components/ConsentButtons.tsx        | 6 ++++++
 clients/fides-js/src/components/notices/NoticeOverlay.tsx | 7 ++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/clients/fides-js/src/components/ConsentButtons.tsx b/clients/fides-js/src/components/ConsentButtons.tsx
index ae08e1b71a..18262a453b 100644
--- a/clients/fides-js/src/components/ConsentButtons.tsx
+++ b/clients/fides-js/src/components/ConsentButtons.tsx
@@ -12,6 +12,7 @@ export const ConsentButtons = ({
   experienceConfig,
   onManagePreferencesClick,
   firstButton,
+  middleButton,
   onAcceptAll,
   onRejectAll,
   children,
@@ -19,6 +20,7 @@ export const ConsentButtons = ({
   experienceConfig: ExperienceConfig;
   onManagePreferencesClick?: () => void;
   firstButton?: VNode;
+  middleButton?: VNode;
   onAcceptAll: () => void;
   onRejectAll: () => void;
   children: ComponentChildren;
@@ -33,6 +35,7 @@ export const ConsentButtons = ({
         />
       </div>
     ) : null}
+    {middleButton || null}
     <div
       className={
         firstButton ? "fides-modal-button-group" : "fides-banner-button-group"
@@ -64,6 +67,7 @@ interface NoticeConsentButtonProps {
   isAcknowledge: boolean;
   isInModal?: boolean;
   children?: ComponentChildren;
+  middleButton?: VNode;
 }
 
 export const NoticeConsentButtons = ({
@@ -74,6 +78,7 @@ export const NoticeConsentButtons = ({
   isInModal,
   isAcknowledge,
   children,
+  middleButton,
 }: NoticeConsentButtonProps) => {
   if (!experience.experience_config || !experience.privacy_notices) {
     return null;
@@ -127,6 +132,7 @@ export const NoticeConsentButtons = ({
           />
         ) : undefined
       }
+      middleButton={middleButton}
     >
       {children}
     </ConsentButtons>
diff --git a/clients/fides-js/src/components/notices/NoticeOverlay.tsx b/clients/fides-js/src/components/notices/NoticeOverlay.tsx
index ab1d24625f..0ff1e8e3fe 100644
--- a/clients/fides-js/src/components/notices/NoticeOverlay.tsx
+++ b/clients/fides-js/src/components/notices/NoticeOverlay.tsx
@@ -131,9 +131,10 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
                     onSave();
                   }}
                   isAcknowledge={isAllNoticeOnly}
-                >
-                  <PrivacyPolicyLink experience={experienceConfig} />
-                </NoticeConsentButtons>
+                  middleButton={
+                    <PrivacyPolicyLink experience={experienceConfig} />
+                  }
+                />
               </div>
             }
           />

From ff5961683a61eeb1d25a230a69db6f0b5f93084d Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Fri, 6 Oct 2023 10:50:24 -0700
Subject: [PATCH 06/14] Preventing modal from closing when clicking outside

---
 clients/fides-js/src/components/Overlay.tsx | 2 +-
 clients/fides-js/src/components/fides.css   | 1 +
 clients/fides-js/src/lib/a11y-dialog.tsx    | 6 +++++-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/clients/fides-js/src/components/Overlay.tsx b/clients/fides-js/src/components/Overlay.tsx
index 2a6bcdb9ca..5151767e53 100644
--- a/clients/fides-js/src/components/Overlay.tsx
+++ b/clients/fides-js/src/components/Overlay.tsx
@@ -56,7 +56,7 @@ const Overlay: FunctionComponent<Props> = ({
 
   const { instance, attributes } = useA11yDialog({
     id: "fides-modal",
-    role: "dialog",
+    role: "alertdialog",
     title: experience?.experience_config?.title || "",
     onClose: dispatchCloseEvent,
   });
diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
index 534adff818..ce611312a8 100644
--- a/clients/fides-js/src/components/fides.css
+++ b/clients/fides-js/src/components/fides.css
@@ -309,6 +309,7 @@ div.fides-modal-content {
   right: 0;
   bottom: 0;
   left: 0;
+  background-color: rgba(0,0,0,0.25);
 }
 
 .fides-modal-container {
diff --git a/clients/fides-js/src/lib/a11y-dialog.tsx b/clients/fides-js/src/lib/a11y-dialog.tsx
index cb4734fc40..7e583b7270 100644
--- a/clients/fides-js/src/lib/a11y-dialog.tsx
+++ b/clients/fides-js/src/lib/a11y-dialog.tsx
@@ -10,7 +10,11 @@ const useA11yDialogInstance = () => {
   const [instance, setInstance] = useState<A11yDialogLib | null>(null);
   const container = useCallback((node: Element) => {
     if (node !== null) {
-      setInstance(new A11yDialogLib(node));
+      const dialog = new A11yDialogLib(node);
+      dialog
+        .on("show", () => (document.documentElement.style.overflowY = "hidden"))
+        .on("hide", () => (document.documentElement.style.overflowY = ""));
+      setInstance(dialog);
     }
   }, []);
   return { instance, container };

From d33f8ce08ef0114a536d5c834ca1597b025bf6a8 Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Fri, 6 Oct 2023 11:24:54 -0700
Subject: [PATCH 07/14] Lint fixes

---
 clients/fides-js/src/components/ConsentBanner.tsx         | 8 +-------
 clients/fides-js/src/components/ConsentModal.tsx          | 2 +-
 clients/fides-js/src/components/notices/NoticeOverlay.tsx | 4 ++--
 clients/fides-js/src/components/tcf/TcfOverlay.tsx        | 2 +-
 clients/fides-js/src/lib/a11y-dialog.tsx                  | 8 ++++++--
 5 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/clients/fides-js/src/components/ConsentBanner.tsx b/clients/fides-js/src/components/ConsentBanner.tsx
index cc35fde73c..fe6c4c867a 100644
--- a/clients/fides-js/src/components/ConsentBanner.tsx
+++ b/clients/fides-js/src/components/ConsentBanner.tsx
@@ -1,10 +1,4 @@
-import {
-  h,
-  FunctionComponent,
-  ComponentChildren,
-  Component,
-  VNode,
-} from "preact";
+import { h, FunctionComponent, ComponentChildren, VNode } from "preact";
 import { getConsentContext } from "../lib/consent-context";
 import { ExperienceConfig } from "../lib/consent-types";
 import CloseButton from "./CloseButton";
diff --git a/clients/fides-js/src/components/ConsentModal.tsx b/clients/fides-js/src/components/ConsentModal.tsx
index cf1f05b115..0633ab7626 100644
--- a/clients/fides-js/src/components/ConsentModal.tsx
+++ b/clients/fides-js/src/components/ConsentModal.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, VNode, h } from "preact";
+import { ComponentChildren, h } from "preact";
 import { Attributes } from "../lib/a11y-dialog";
 import { ExperienceConfig } from "../lib/consent-types";
 
diff --git a/clients/fides-js/src/components/notices/NoticeOverlay.tsx b/clients/fides-js/src/components/notices/NoticeOverlay.tsx
index 0ff1e8e3fe..6095ca2e47 100644
--- a/clients/fides-js/src/components/notices/NoticeOverlay.tsx
+++ b/clients/fides-js/src/components/notices/NoticeOverlay.tsx
@@ -149,7 +149,7 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
               onChange={setDraftEnabledNoticeKeys}
             />
           </div>
-          <div class="fides-modal-footer">
+          <div className="fides-modal-footer">
             <NoticeConsentButtons
               experience={experience}
               enabledKeys={draftEnabledNoticeKeys}
@@ -159,7 +159,7 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
               }}
               isInModal
               isAcknowledge={isAllNoticeOnly}
-            ></NoticeConsentButtons>
+            />
             <PrivacyPolicyLink experience={experience.experience_config} />
           </div>
         </div>
diff --git a/clients/fides-js/src/components/tcf/TcfOverlay.tsx b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
index 1fd2137ac0..665b549474 100644
--- a/clients/fides-js/src/components/tcf/TcfOverlay.tsx
+++ b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
@@ -383,7 +383,7 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
               activeTabIndex={activeTabIndex}
               onTabChange={setActiveTabIndex}
             />
-            <div class="fides-modal-footer">
+            <div className="fides-modal-footer">
               <TcfConsentButtons
                 experience={experience}
                 onSave={onSave}
diff --git a/clients/fides-js/src/lib/a11y-dialog.tsx b/clients/fides-js/src/lib/a11y-dialog.tsx
index 7e583b7270..a9174ab63d 100644
--- a/clients/fides-js/src/lib/a11y-dialog.tsx
+++ b/clients/fides-js/src/lib/a11y-dialog.tsx
@@ -12,8 +12,12 @@ const useA11yDialogInstance = () => {
     if (node !== null) {
       const dialog = new A11yDialogLib(node);
       dialog
-        .on("show", () => (document.documentElement.style.overflowY = "hidden"))
-        .on("hide", () => (document.documentElement.style.overflowY = ""));
+        .on("show", () => {
+          document.documentElement.style.overflowY = "hidden";
+        })
+        .on("hide", () => {
+          document.documentElement.style.overflowY = "";
+        });
       setInstance(dialog);
     }
   }, []);

From baf9545928bdcdbab04abfcc29a93746787cb313 Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Fri, 6 Oct 2023 11:29:06 -0700
Subject: [PATCH 08/14] Running prettier

---
 clients/fides-js/src/components/fides.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
index ce611312a8..928b56613d 100644
--- a/clients/fides-js/src/components/fides.css
+++ b/clients/fides-js/src/components/fides.css
@@ -309,7 +309,7 @@ div.fides-modal-content {
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: rgba(0,0,0,0.25);
+  background-color: rgba(0, 0, 0, 0.25);
 }
 
 .fides-modal-container {
@@ -352,13 +352,13 @@ div#fides-modal .fides-modal-button-group {
 /* Responsive overlay */
 @media (max-width: 48em) {
   div#fides-modal .fides-modal-button-group {
-      flex-direction: column;
+    flex-direction: column;
   }
 
   button.fides-banner-button {
     margin: 0;
     margin-right: 0.5em;
-    margin-bottom: 0.75em
+    margin-bottom: 0.75em;
   }
 }
 
@@ -475,7 +475,7 @@ div#fides-banner-inner .fides-privacy-policy {
   background-color: #fff;
   transition: inherit;
 
-  box-shadow: 0 1.3px 2.7px rgba(0,0,0,0.25);
+  box-shadow: 0 1.3px 2.7px rgba(0, 0, 0, 0.25);
 }
 
 /* Checked/unchecked states */
@@ -775,7 +775,7 @@ div#fides-banner-inner .fides-privacy-policy {
   justify-content: end;
   font-size: 12px;
   font-weight: 600;
-  margin-right: 12px
+  margin-right: 12px;
 }
 
 .fides-legal-basis-labels span {

From 25211f27959a7f3d94f7371f9d87c9b69bbfb2cf Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Fri, 6 Oct 2023 13:35:37 -0700
Subject: [PATCH 09/14] Differentiating between banner and modal title fonts

---
 clients/fides-js/src/components/fides.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
index 928b56613d..27031e46a4 100644
--- a/clients/fides-js/src/components/fides.css
+++ b/clients/fides-js/src/components/fides.css
@@ -61,6 +61,7 @@
   --fides-overlay-container-border-radius: 12px;
   --fides-overlay-component-border-radius: 4px;
   --fides-overlay-banner-offset: 48px;
+  --fides-banner-font-size-title: 1em;
   --fides-banner-button-font-size: 1em;
 }
 
@@ -183,7 +184,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;
   margin-top: 0.2em;
   min-width: 33%;

From 32aa41886da30e952bca098f730e66a1c4b69cba Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Fri, 6 Oct 2023 15:18:28 -0700
Subject: [PATCH 10/14] Changes based on PR feedback

---
 .../fides-js/src/components/ConsentBanner.tsx | 10 +++---
 .../src/components/ConsentButtons.tsx         |  4 ++-
 .../fides-js/src/components/ConsentModal.tsx  |  6 ++--
 clients/fides-js/src/components/Overlay.tsx   |  3 --
 .../src/components/notices/NoticeOverlay.tsx  | 32 +++++++------------
 .../src/components/tcf/TcfOverlay.tsx         | 28 +++++-----------
 clients/fides-js/src/lib/consent-context.ts   |  4 +++
 7 files changed, 36 insertions(+), 51 deletions(-)

diff --git a/clients/fides-js/src/components/ConsentBanner.tsx b/clients/fides-js/src/components/ConsentBanner.tsx
index fe6c4c867a..58940c333b 100644
--- a/clients/fides-js/src/components/ConsentBanner.tsx
+++ b/clients/fides-js/src/components/ConsentBanner.tsx
@@ -9,10 +9,13 @@ interface BannerProps {
   experience: ExperienceConfig;
   onClose: () => void;
   bannerIsOpen: boolean;
+  /**
+   * Passing in children components will automatically set the container to be a 2x2 grid,
+   * it is up to the child components to specify how they'll be placed within the grid
+   * */
   children?: ComponentChildren;
   onVendorPageClick?: () => void;
   buttonGroup: VNode;
-  bannerType?: String;
 }
 
 const ConsentBanner: FunctionComponent<BannerProps> = ({
@@ -22,7 +25,6 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
   children,
   onVendorPageClick,
   buttonGroup,
-  bannerType,
 }) => {
   const showGpcBadge = getConsentContext().globalPrivacyControl;
   return (
@@ -46,12 +48,12 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
                 <div id="fides-banner-title" className="fides-banner-title">
                   {experience.title}
                 </div>
-                {showGpcBadge && bannerType !== "TCF" ? (
+                {showGpcBadge && (
                   <GpcBadge
                     label="Global Privacy Control Signal"
                     status="detected"
                   />
-                ) : null}
+                )}
               </div>
               <div
                 id="fides-banner-description"
diff --git a/clients/fides-js/src/components/ConsentButtons.tsx b/clients/fides-js/src/components/ConsentButtons.tsx
index 18262a453b..caaf327951 100644
--- a/clients/fides-js/src/components/ConsentButtons.tsx
+++ b/clients/fides-js/src/components/ConsentButtons.tsx
@@ -20,10 +20,12 @@ export const ConsentButtons = ({
   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;
-  children: ComponentChildren;
+  /** Added as siblings to the button group after the "accept/reject" buttons */
+  children?: ComponentChildren;
 }) => (
   <div id="fides-button-group">
     {onManagePreferencesClick ? (
diff --git a/clients/fides-js/src/components/ConsentModal.tsx b/clients/fides-js/src/components/ConsentModal.tsx
index 0633ab7626..0527ad7856 100644
--- a/clients/fides-js/src/components/ConsentModal.tsx
+++ b/clients/fides-js/src/components/ConsentModal.tsx
@@ -5,21 +5,21 @@ import { ExperienceConfig } from "../lib/consent-types";
 import CloseButton from "./CloseButton";
 import GpcInfo from "./GpcInfo";
 import ExperienceDescription from "./ExperienceDescription";
+import { getConsentContext } from "../fides";
 
 const ConsentModal = ({
   attributes,
   experience,
   children,
   onVendorPageClick,
-  modalType,
 }: {
   attributes: Attributes;
   experience: ExperienceConfig;
   children: ComponentChildren;
   onVendorPageClick?: () => void;
-  modalType?: String;
 }) => {
   const { container, overlay, dialog, title, closeButton } = attributes;
+  const showGpcBadge = getConsentContext().globalPrivacyControl;
 
   return (
     // @ts-ignore A11yDialog ref obj type isn't quite the same
@@ -51,7 +51,7 @@ const ConsentModal = ({
             description={experience.description}
           />
         </p>
-        {modalType !== "TCF" && <GpcInfo />}
+        {showGpcBadge && <GpcInfo />}
         {children}
       </div>
     </div>
diff --git a/clients/fides-js/src/components/Overlay.tsx b/clients/fides-js/src/components/Overlay.tsx
index 5151767e53..c7756b05ad 100644
--- a/clients/fides-js/src/components/Overlay.tsx
+++ b/clients/fides-js/src/components/Overlay.tsx
@@ -33,7 +33,6 @@ interface Props {
   renderBanner: (props: RenderBannerProps) => VNode | null;
   renderModalContent: (props: RenderModalContent) => VNode;
   onVendorPageClick?: () => void;
-  overlayType?: String;
 }
 
 const Overlay: FunctionComponent<Props> = ({
@@ -43,7 +42,6 @@ const Overlay: FunctionComponent<Props> = ({
   renderBanner,
   renderModalContent,
   onVendorPageClick,
-  overlayType,
 }) => {
   const delayBannerMilliseconds = 100;
   const delayModalLinkMilliseconds = 200;
@@ -155,7 +153,6 @@ const Overlay: FunctionComponent<Props> = ({
         attributes={attributes}
         experience={experience.experience_config}
         onVendorPageClick={onVendorPageClick}
-        modalType={overlayType}
       >
         {renderModalContent({ onClose: handleCloseModal })}
       </ConsentModal>
diff --git a/clients/fides-js/src/components/notices/NoticeOverlay.tsx b/clients/fides-js/src/components/notices/NoticeOverlay.tsx
index 6095ca2e47..791d239ace 100644
--- a/clients/fides-js/src/components/notices/NoticeOverlay.tsx
+++ b/clients/fides-js/src/components/notices/NoticeOverlay.tsx
@@ -115,27 +115,19 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
             onClose={onClose}
             experience={experienceConfig}
             buttonGroup={
-              <div
-                style={{
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
+              <NoticeConsentButtons
+                experience={experience}
+                onManagePreferencesClick={onManagePreferencesClick}
+                enabledKeys={draftEnabledNoticeKeys}
+                onSave={(keys) => {
+                  handleUpdatePreferences(keys);
+                  onSave();
                 }}
-              >
-                <NoticeConsentButtons
-                  experience={experience}
-                  onManagePreferencesClick={onManagePreferencesClick}
-                  enabledKeys={draftEnabledNoticeKeys}
-                  onSave={(keys) => {
-                    handleUpdatePreferences(keys);
-                    onSave();
-                  }}
-                  isAcknowledge={isAllNoticeOnly}
-                  middleButton={
-                    <PrivacyPolicyLink experience={experienceConfig} />
-                  }
-                />
-              </div>
+                isAcknowledge={isAllNoticeOnly}
+                middleButton={
+                  <PrivacyPolicyLink experience={experienceConfig} />
+                }
+              />
             }
           />
         ) : null
diff --git a/clients/fides-js/src/components/tcf/TcfOverlay.tsx b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
index 665b549474..34123f8410 100644
--- a/clients/fides-js/src/components/tcf/TcfOverlay.tsx
+++ b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
@@ -320,7 +320,6 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
       options={options}
       experience={experience}
       cookie={cookie}
-      overlayType="TCF"
       onVendorPageClick={() => {
         setActiveTabIndex(2);
       }}
@@ -335,28 +334,17 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
             onClose={onClose}
             experience={experienceConfig}
             onVendorPageClick={goToVendorTab}
-            bannerType="TCF"
             buttonGroup={
-              <div
-                style={{
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  gridColumn: 1,
-                  gridRow: 2,
+              <TcfConsentButtons
+                experience={experience}
+                onManagePreferencesClick={onManagePreferencesClick}
+                onSave={(keys) => {
+                  handleUpdateAllPreferences(keys);
+                  onSave();
                 }}
               >
-                <TcfConsentButtons
-                  experience={experience}
-                  onManagePreferencesClick={onManagePreferencesClick}
-                  onSave={(keys) => {
-                    handleUpdateAllPreferences(keys);
-                    onSave();
-                  }}
-                >
-                  <PrivacyPolicyLink experience={experienceConfig} />
-                </TcfConsentButtons>
-              </div>
+                <PrivacyPolicyLink experience={experienceConfig} />
+              </TcfConsentButtons>
             }
           >
             <div id="fides-tcf-banner-inner">
diff --git a/clients/fides-js/src/lib/consent-context.ts b/clients/fides-js/src/lib/consent-context.ts
index 564f65c552..359cfa9a01 100644
--- a/clients/fides-js/src/lib/consent-context.ts
+++ b/clients/fides-js/src/lib/consent-context.ts
@@ -13,6 +13,10 @@ declare global {
  * having to modify the browser before the script runs.
  */
 const getGlobalPrivacyControl = (): boolean | undefined => {
+  if (window.Fides.options.tcfEnabled) {
+    return false;
+  }
+
   if (typeof window.navigator?.globalPrivacyControl === "boolean") {
     return window.navigator.globalPrivacyControl;
   }

From 528788bb94d968b18731503375d712ab782f628d Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Mon, 9 Oct 2023 11:42:33 -0700
Subject: [PATCH 11/14] Moving all on off buttons

---
 clients/fides-js/src/components/fides.css     | 12 ++++----
 .../src/components/tcf/DoubleToggleTable.tsx  |  2 +-
 .../fides-js/src/components/tcf/TcfTabs.tsx   | 30 ++++++++++---------
 .../src/components/tcf/TcfVendors.tsx         |  5 +++-
 4 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
index ffe65f6707..81240e851e 100644
--- a/clients/fides-js/src/components/fides.css
+++ b/clients/fides-js/src/components/fides.css
@@ -163,6 +163,7 @@ div#fides-tcf-banner-inner {
   min-height: 100%;
   margin-top: 3em;
   overflow-y: auto;
+  scrollbar-gutter: stable;
 }
 
 /* Responsive banner */
@@ -549,7 +550,6 @@ div#fides-banner-inner .fides-privacy-policy {
   align-items: center;
   display: flex;
   width: 100%;
-  justify-content: space-between;
 }
 
 .fides-notice-toggle-expanded {
@@ -829,9 +829,9 @@ div#fides-banner-inner .fides-privacy-policy {
 .fides-all-on-off-buttons {
   display: flex;
   justify-content: end;
-  margin-bottom: 1em;
-}
+  margin-bottom: 8px;
 
-.fides-all-on-button {
-  margin-right: 0.9em;
-}
+  > button {
+    margin-right: 12px;
+  }
+}
\ No newline at end of file
diff --git a/clients/fides-js/src/components/tcf/DoubleToggleTable.tsx b/clients/fides-js/src/components/tcf/DoubleToggleTable.tsx
index 41df56788a..6362051f94 100644
--- a/clients/fides-js/src/components/tcf/DoubleToggleTable.tsx
+++ b/clients/fides-js/src/components/tcf/DoubleToggleTable.tsx
@@ -143,7 +143,7 @@ const DoubleToggleTable = <T extends Item>({
           checked={enabledLegintIds.indexOf(`${item.id}`) !== -1}
           badge={renderBadgeLabel ? renderBadgeLabel(item) : undefined}
           secondToggle={
-            <div style={{ display: "flex", marginLeft: ".2em" }}>
+            <div style={{ display: "flex", marginLeft: "16px" }}>
               {item.isConsent ? (
                 <Toggle
                   name={`${item.name}-consent`}
diff --git a/clients/fides-js/src/components/tcf/TcfTabs.tsx b/clients/fides-js/src/components/tcf/TcfTabs.tsx
index 9d901f7724..73c59d3f65 100644
--- a/clients/fides-js/src/components/tcf/TcfTabs.tsx
+++ b/clients/fides-js/src/components/tcf/TcfTabs.tsx
@@ -98,25 +98,27 @@ const TcfTabs = ({
             exercise you consent for each vendor based on the legal basis they
             assert.
           </InfoBox>
-          <AllOnOffButtons
-            enabledIds={enabledIds}
-            onChange={onChange}
-            modelTypeMappings={{
-              vendorsConsent: [
-                ...(experience.tcf_vendor_consents || []),
-                ...(experience.tcf_system_consents || []),
-              ],
-              vendorsLegint: [
-                ...(experience.tcf_vendor_legitimate_interests || []),
-                ...(experience.tcf_system_legitimate_interests || []),
-              ],
-            }}
-          />
           <TcfVendors
             experience={experience}
             enabledVendorConsentIds={enabledIds.vendorsConsent}
             enabledVendorLegintIds={enabledIds.vendorsLegint}
             onChange={handleUpdateDraftState}
+            allOnOffButtons={
+              <AllOnOffButtons
+                enabledIds={enabledIds}
+                onChange={onChange}
+                modelTypeMappings={{
+                  vendorsConsent: [
+                    ...(experience.tcf_vendor_consents || []),
+                    ...(experience.tcf_system_consents || []),
+                  ],
+                  vendorsLegint: [
+                    ...(experience.tcf_vendor_legitimate_interests || []),
+                    ...(experience.tcf_system_legitimate_interests || []),
+                  ],
+                }}
+              />
+            }
           />
         </div>
       ),
diff --git a/clients/fides-js/src/components/tcf/TcfVendors.tsx b/clients/fides-js/src/components/tcf/TcfVendors.tsx
index d85272512b..938cd90365 100644
--- a/clients/fides-js/src/components/tcf/TcfVendors.tsx
+++ b/clients/fides-js/src/components/tcf/TcfVendors.tsx
@@ -1,4 +1,4 @@
-import { h } from "preact";
+import { VNode, h } from "preact";
 import { useMemo, useState } from "preact/hooks";
 import { Vendor } from "@iabtechlabtcf/core";
 import {
@@ -188,11 +188,13 @@ const TcfVendors = ({
   enabledVendorConsentIds,
   enabledVendorLegintIds,
   onChange,
+  allOnOffButtons,
 }: {
   experience: PrivacyExperience;
   enabledVendorConsentIds: string[];
   enabledVendorLegintIds: string[];
   onChange: (payload: UpdateEnabledIds) => void;
+  allOnOffButtons: VNode;
 }) => {
   const [isFiltered, setIsFiltered] = useState(false);
 
@@ -222,6 +224,7 @@ const TcfVendors = ({
   return (
     <div>
       <FilterButtons filters={FILTERS} onChange={handleFilter} />
+      {allOnOffButtons}
       <DoubleToggleTable<VendorRecord>
         title="Vendors"
         items={vendorsToDisplay}

From 2803482ca666f97d8fcc38a50fcd81a1ee2c9d2a Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Mon, 9 Oct 2023 12:28:46 -0700
Subject: [PATCH 12/14] Running prettier

---
 clients/fides-js/src/components/fides.css | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
index 81240e851e..da63a30858 100644
--- a/clients/fides-js/src/components/fides.css
+++ b/clients/fides-js/src/components/fides.css
@@ -234,6 +234,7 @@ button.fides-banner-button {
   background: var(--fides-overlay-primary-button-background-color);
   color: var(--fides-overlay-primary-button-text-color);
   border: 1px solid;
+  border-radius: var(--fides-overlay-button-border-radius);
 
   font-family: inherit;
   line-height: 1.15;
@@ -249,7 +250,6 @@ button.fides-banner-button.fides-banner-button-primary {
   background: var(--fides-overlay-primary-button-background-color);
   color: var(--fides-overlay-primary-button-text-color);
   border: none;
-  border-radius: var(--fides-overlay-button-border-radius);
 }
 
 button.fides-banner-button.fides-banner-button-primary:hover {
@@ -260,7 +260,6 @@ button.fides-banner-button.fides-banner-button-secondary {
   background: var(--fides-overlay-secondary-button-background-color);
   color: var(--fides-overlay-secondary-button-text-color);
   border: 1px solid var(--fides-overlay-primary-button-background-color);
-  border-radius: var(--fides-overlay-button-border-radius);
 }
 
 button.fides-banner-button.fides-banner-button-secondary:hover {
@@ -834,4 +833,4 @@ div#fides-banner-inner .fides-privacy-policy {
   > button {
     margin-right: 12px;
   }
-}
\ No newline at end of file
+}

From db39bfec1138028e6920dcd20856c8fbc8820328 Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Mon, 9 Oct 2023 12:51:39 -0700
Subject: [PATCH 13/14] One more styling change

---
 clients/fides-js/src/components/fides.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
index da63a30858..8473e1ad25 100644
--- a/clients/fides-js/src/components/fides.css
+++ b/clients/fides-js/src/components/fides.css
@@ -45,7 +45,7 @@
   --fides-overlay-row-hover-color: var(--fides-overlay-hover-color);
   /* Badge */
   --fides-overlay-badge-background-color: #718096;
-  --fides-overlay-badge-border-radius: 2px;
+  --fides-overlay-badge-border-radius: 4px;
   /* Select */
   --fides-overlay-select-border-color: #e2e8f0;
 
@@ -591,7 +591,7 @@ div#fides-banner-inner .fides-privacy-policy {
   text-transform: uppercase;
   padding: 0 4px;
   font-weight: 700;
-  border-radius: 4px;
+  border-radius: var(--fides-overlay-badge-border-radius);
 }
 
 .fides-gpc-badge-applied,

From b208e11f88110203725501bf0658a692c6947503 Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Tue, 10 Oct 2023 08:55:39 -0700
Subject: [PATCH 14/14] Updating change log and docstring

---
 CHANGELOG.md                                | 1 +
 clients/fides-js/src/lib/consent-context.ts | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 436829ea4f..777a851076 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,7 @@ The types of changes are:
 - Update frontend to use new legal basis dimension on vendors [#4216](https://github.com/ethyca/fides/pull/4216)
 - Updated privacy center patch preferences call to handle updated API response [#4235](https://github.com/ethyca/fides/pull/4235)
 - Added our CMP ID [#4233](https://github.com/ethyca/fides/pull/4233)
+- Styling improvements for the fides.js consent banners and modals [#4222](https://github.com/ethyca/fides/pull/4222)
 
 ### Fixed
 - TCF overlay can initialize its consent preferences from a cookie [#4124](https://github.com/ethyca/fides/pull/4124)
diff --git a/clients/fides-js/src/lib/consent-context.ts b/clients/fides-js/src/lib/consent-context.ts
index 359cfa9a01..fb7b0f2d56 100644
--- a/clients/fides-js/src/lib/consent-context.ts
+++ b/clients/fides-js/src/lib/consent-context.ts
@@ -11,6 +11,8 @@ declare global {
  * query parameter. For example: `privacy-center.example.com/consent?globalPrivacyControl=true`.
  * This allows fides.js to function as if GPC is enabled while testing or demoing without
  * having to modify the browser before the script runs.
+ *
+ * GPC is not considered if TCF is enabled.
  */
 const getGlobalPrivacyControl = (): boolean | undefined => {
   if (window.Fides.options.tcfEnabled) {