Minor Demo fixes (#5566)

ethyca · Dec 6, 2024 · c08f5ee · c08f5ee
1 parent 7abb307
commit c08f5ee
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/clients/fides-js/src/components/Overlay.tsx b/clients/fides-js/src/components/Overlay.tsx
@@ -153,7 +153,7 @@ const Overlay: FunctionComponent<Props> = ({
   }, [showBanner, setBannerIsOpen]);
 
   useEffect(() => {
-    if (!experience || options.modalLinkId === "") {
+    if (options.fidesEmbed || !experience || options.modalLinkId === "") {
       // If empty string is explicitly set, do not attempt to bind the modal link to the click handler.
       // developers using `Fides.showModal();` can use this to prevent polling for the modal link.
       return () => {};
@@ -211,7 +211,13 @@ const Overlay: FunctionComponent<Props> = ({
       }
       window.Fides.showModal = defaultShowModal;
     };
-  }, [options.modalLinkId, options.debug, handleOpenModal, experience]);
+  }, [
+    options.fidesEmbed,
+    options.modalLinkId,
+    options.debug,
+    handleOpenModal,
+    experience,
+  ]);
 
   const handleManagePreferencesClick = (): void => {
     handleOpenModal();

diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
@@ -485,7 +485,7 @@ div#fides-consent-content .fides-modal-description {
   justify-content: center;
 }
 
-.fides-modal-container .fides-button-group-brand {
+.fides-modal-footer .fides-button-group-brand {
   min-height: var(--fides-overlay-modal-secondary-button-group-height);
 }
 
@@ -1023,13 +1023,13 @@ div#fides-overlay-wrapper .fides-toggle .fides-toggle-display {
   position: relative;
 }
 
-.fides-modal-container .fides-i18n-menu {
+.fides-modal-footer .fides-i18n-menu {
   position: absolute;
   left: var(--fides-overlay-padding);
   bottom: var(--fides-overlay-padding);
 }
 
-.fides-modal-container .fides-button-group-i18n {
+.fides-modal-footer .fides-button-group-i18n {
   min-height: var(--fides-overlay-modal-secondary-button-group-height);
 }
 

diff --git a/clients/sample-app/src/pages/embedded-consent.tsx b/clients/sample-app/src/pages/embedded-consent.tsx
@@ -60,7 +60,17 @@ const IndexPage = ({ gtmContainerId, privacyCenterUrl }: Props) => {
         {/* Require FidesJS to "embed" it's UI onto the page, instead of as an overlay over the <body> itself. (see https://ethyca.com/docs/dev-docs/js/reference/interfaces/FidesOptions#fides_embed) */}
         <script>{`window.fides_overrides = { fides_embed: true, fides_disable_banner: true }`}</script>
         {/* Allow the embedded consent modal to fill the screen */}
-        <style>{`#fides-embed-container { --fides-overlay-width: 'auto' }`}</style>
+        <style>{`
+          #fides-embed-container {
+            --fides-overlay-width: 'auto'
+          }
+
+          body {
+            font-family: "Inter", sans-serif;
+            color: #171923;
+            font-size: 14px;
+          }
+        `}</style>
       </Head>
       {/**
       Insert the fides.js script and run the GTM integration once ready