Prod 1974 language picker button breaks layout (#4815)

Co-authored-by: Lucano Vera <[email protected]>
ethyca · Apr 23, 2024 · 32f4302 · 32f4302
1 parent 7c93a73
commit 32f4302
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 103 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -33,6 +33,8 @@ The types of changes are:
 ### Fixed
 - Fixed bug prevented adding new privacy center translations [#4786](https://github.com/ethyca/fides/pull/4786)
 - Fixed bug where Privacy Policy links would be shown without a configured URL [#4801](https://github.com/ethyca/fides/pull/4801)
+- Fixed bug where Language selector button was overlapping other buttons when Privacy Policy wasn't present. [#4815](https://github.com/ethyca/fides/pull/4815)
+- Fixed bug where icons of the Language selector were displayed too small on some sites [#4815](https://github.com/ethyca/fides/pull/4815)
 
 ## [2.34.0](https://github.com/ethyca/fides/compare/2.33.1...2.34.0)
 

diff --git a/clients/fides-js/src/components/ConsentButtons.tsx b/clients/fides-js/src/components/ConsentButtons.tsx
@@ -19,7 +19,6 @@ export const ConsentButtons = ({
   onAcceptAll,
   onRejectAll,
   isMobile,
-  includePrivacyPolicy,
   saveOnly = false,
   options,
   isInModal,
@@ -31,52 +30,60 @@ export const ConsentButtons = ({
   onRejectAll: () => void;
   isMobile: boolean;
   options: FidesInitOptions;
-  includePrivacyPolicy?: boolean;
   saveOnly?: boolean;
   isInModal?: boolean;
-}) => (
-  <div id="fides-button-group">
-    {i18n.availableLanguages?.length > 1 && (
-      <LanguageSelector i18n={i18n} options={options} />
-    )}
-    {!!onManagePreferencesClick && (
-      <div className="fides-banner-button-group fides-manage-preferences-button-group">
-        <Button
-          buttonType={isMobile ? ButtonType.SECONDARY : ButtonType.TERTIARY}
-          label={i18n.t("exp.privacy_preferences_link_label")}
-          onClick={onManagePreferencesClick}
-          className="fides-manage-preferences-button"
-        />
+}) => {
+  const includeLanguageSelector = i18n.availableLanguages?.length > 1;
+  return (
+    <div id="fides-button-group">
+      <div
+        className={
+          isInModal
+            ? "fides-modal-button-group fides-modal-primary-actions"
+            : "fides-banner-button-group fides-banner-primary-actions"
+        }
+      >
+        {firstButton}
+        {!saveOnly && (
+          <Fragment>
+            <Button
+              buttonType={ButtonType.PRIMARY}
+              label={i18n.t("exp.reject_button_label")}
+              onClick={onRejectAll}
+              className="fides-reject-all-button"
+            />
+            <Button
+              buttonType={ButtonType.PRIMARY}
+              label={i18n.t("exp.accept_button_label")}
+              onClick={onAcceptAll}
+              className="fides-accept-all-button"
+            />
+          </Fragment>
+        )}
       </div>
-    )}
-    {includePrivacyPolicy && <PrivacyPolicyLink i18n={i18n} />}
-    <div
-      className={
-        isInModal
-          ? "fides-modal-button-group fides-modal-primary-actions"
-          : "fides-banner-button-group fides-banner-primary-actions"
-      }
-    >
-      {firstButton}
-      {!saveOnly && (
-        <Fragment>
-          <Button
-            buttonType={ButtonType.PRIMARY}
-            label={i18n.t("exp.reject_button_label")}
-            onClick={onRejectAll}
-            className="fides-reject-all-button"
-          />
+      <div
+        className={`${
+          isInModal
+            ? "fides-modal-button-group fides-modal-secondary-actions"
+            : "fides-banner-button-group fides-banner-secondary-actions"
+        } ${includeLanguageSelector ? "fides-button-group-i18n" : ""}`}
+      >
+        {includeLanguageSelector && (
+          <LanguageSelector i18n={i18n} options={options} />
+        )}
+        {!!onManagePreferencesClick && (
           <Button
-            buttonType={ButtonType.PRIMARY}
-            label={i18n.t("exp.accept_button_label")}
-            onClick={onAcceptAll}
-            className="fides-accept-all-button"
+            buttonType={isMobile ? ButtonType.SECONDARY : ButtonType.TERTIARY}
+            label={i18n.t("exp.privacy_preferences_link_label")}
+            onClick={onManagePreferencesClick}
+            className="fides-manage-preferences-button"
           />
-        </Fragment>
-      )}
+        )}
+        <PrivacyPolicyLink i18n={i18n} />
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 type NoticeKeys = Array<PrivacyNotice["notice_key"]>;
 
@@ -165,7 +172,6 @@ export const NoticeConsentButtons = ({
         ) : undefined
       }
       isMobile={isMobile}
-      includePrivacyPolicy={!isInModal}
       saveOnly={saveOnly}
       options={options}
     />

diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
@@ -65,18 +65,31 @@
   --fides-overlay-padding: 24px;
   --fides-overlay-button-border-radius: 6px;
   --fides-overlay-button-padding: 8px 16px;
-  --fides-overlay-link-padding: 4px 3px;
+  --fides-overlay-link-v-padding: 4px;
+  --fides-overlay-link-h-padding: 4px;
+  --fides-overlay-link-padding: var(--fides-overlay-link-v-padding)
+    var(--fides-overlay-link-h-padding);
   --fides-overlay-container-border-radius: 12px;
+  --fides-overlay-container-border-width: 1px;
   --fides-overlay-component-border-radius: 4px;
   --fides-overlay-banner-offset: 48px;
   --fides-banner-font-size-title: var(--16px);
 }
 
-div#fides-overlay {
+/*
+  WARNING: the `#fides-overlay` id is unreliable as it can be customized! Do not use here!!
+  However `.fides-overlay` gets applied to that same element and is consistently present.
+ */
+
+div.fides-overlay {
   z-index: 1000;
   position: fixed;
 }
 
+div#fides-overlay-wrapper * {
+  box-sizing: border-box;
+}
+
 .fides-banner,
 .fides-modal-container {
   font-family: var(--fides-overlay-font-family);
@@ -112,7 +125,6 @@ div#fides-banner {
   font-size: var(--fides-overlay-font-size-body);
   background: var(--fides-overlay-background-color);
   color: var(--fides-overlay-body-font-color);
-  box-sizing: border-box;
   padding: 24px;
   overflow-y: hidden;
 
@@ -122,7 +134,8 @@ div#fides-banner {
   justify-content: space-between;
   align-items: center;
   position: relative;
-  border-top: 1px solid var(--fides-overlay-primary-color);
+  border-top: var(--fides-overlay-container-border-width) solid
+    var(--fides-overlay-primary-color);
 }
 
 .fides-embedded div#fides-banner {
@@ -166,6 +179,14 @@ div#fides-banner-inner div#fides-button-group {
   margin-bottom: 0px;
   width: 100%;
   align-items: center;
+  flex-direction: row-reverse;
+}
+
+.fides-modal-footer div#fides-button-group {
+  flex-direction: column;
+  align-items: center;
+  margin-inline: var(--fides-overlay-padding);
+  gap: 12px;
 }
 
 div#fides-banner-inner-container {
@@ -299,9 +320,9 @@ div.fides-modal-content {
   font-family: var(--fides-overlay-font-family);
   font-size: var(--fides-overlay-font-size-body);
   color: var(--fides-overlay-body-font-color);
-  box-sizing: border-box;
   padding: var(--fides-overlay-padding);
-  border: 1px solid var(--fides-overlay-primary-color);
+  border: var(--fides-overlay-container-border-width) solid
+    var(--fides-overlay-primary-color);
   background-color: var(--fides-overlay-background-color);
   border-radius: var(--fides-overlay-container-border-radius);
   max-height: 680px;
@@ -350,7 +371,6 @@ div#fides-embed-container div#fides-consent-content {
   font-family: var(--fides-overlay-font-family);
   font-size: var(--fides-overlay-font-size-body);
   color: var(--fides-overlay-body-font-color);
-  box-sizing: border-box;
   background-color: var(--fides-overlay-background-color);
   border-radius: var(--fides-overlay-container-border-radius);
   border-bottom-left-radius: 0;
@@ -399,12 +419,13 @@ div#fides-consent-content .fides-modal-body {
 }
 
 .fides-modal-footer {
+  position: relative;
   display: flex;
   flex-direction: column;
   z-index: 5;
   background-color: var(--fides-overlay-background-color);
   bottom: 0px;
-  width: var(--fides-overlay-width);
+  width: 100%;
   border-bottom-left-radius: var(--fides-overlay-component-border-radius);
   border-bottom-right-radius: var(--fides-overlay-component-border-radius);
 }
@@ -427,6 +448,18 @@ div#fides-consent-content .fides-modal-description {
   margin-inline: var(--fides-overlay-padding);
 }
 
+.fides-banner-secondary-actions {
+  justify-content: space-between;
+}
+
+.fides-modal-secondary-actions {
+  justify-content: center;
+}
+
+.fides-banner-secondary-actions {
+  gap: 36px;
+}
+
 .fides-tcf-banner-container
   div#fides-banner
   div#fides-banner-inner
@@ -489,14 +522,12 @@ div#fides-banner .fides-close-button {
 div#fides-banner-inner .fides-privacy-policy {
   display: block;
   text-align: center;
-  margin-bottom: 0px;
   color: var(--fides-overlay-primary-color);
 }
 
 .fides-privacy-policy {
   display: block;
   text-align: center;
-  margin-bottom: var(--fides-overlay-padding);
   color: var(--fides-overlay-primary-color);
   font-family: var(--fides-overlay-font-family);
 }
@@ -544,7 +575,6 @@ div.fides-i18n-pseudo-button {
   display: inline-flex !important;
   align-items: center;
   justify-content: space-around;
-  box-sizing: content-box;
   position: relative;
   border-radius: 100vw;
   background-color: var(--fides-overlay-inactive-color);
@@ -558,6 +588,10 @@ div.fides-i18n-pseudo-button {
   justify-content: end;
 }
 
+div#fides-overlay-wrapper .fides-toggle .fides-toggle-display {
+  box-sizing: content-box;
+}
+
 .fides-toggle .fides-toggle-display::before {
   content: "";
 
@@ -1104,12 +1138,19 @@ div.fides-i18n-pseudo-button {
 .fides-i18n-menu {
   position: relative;
 }
+
 .fides-modal-container .fides-i18n-menu {
   position: absolute;
-  bottom: var(--fides-overlay-padding);
   left: var(--fides-overlay-padding);
 }
 
+.fides-modal-container .fides-button-group-i18n {
+  min-height: calc(
+    var(--fides-overlay-font-size-body) +
+      (var(--fides-overlay-link-v-padding) * 2)
+  );
+}
+
 div.fides-i18n-pseudo-button {
   /* looks like a button, but for a11y reasons don't actually make it a button (not focusable) */
   cursor: pointer;
@@ -1122,6 +1163,10 @@ div.fides-i18n-pseudo-button {
   white-space: nowrap;
 }
 
+div#fides-overlay-wrapper .fides-i18n-pseudo-button {
+  box-sizing: content-box;
+}
+
 .fides-i18n-popover {
   position: absolute;
   left: 0;

diff --git a/clients/fides-js/src/components/notices/NoticeOverlay.tsx b/clients/fides-js/src/components/notices/NoticeOverlay.tsx
@@ -1,6 +1,6 @@
 import "../fides.css";
 
-import { Fragment, FunctionComponent, h } from "preact";
+import { FunctionComponent, h } from "preact";
 import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
 
 import { getConsentContext } from "../../lib/consent-context";
@@ -31,7 +31,6 @@ import { transformConsentToFidesUserPreference } from "../../lib/shared-consent-
 import ConsentBanner from "../ConsentBanner";
 import { NoticeConsentButtons } from "../ConsentButtons";
 import Overlay from "../Overlay";
-import PrivacyPolicyLink from "../PrivacyPolicyLink";
 import { OverlayProps } from "../types";
 import { NoticeToggleProps, NoticeToggles } from "./NoticeToggles";
 import { useI18n } from "../../lib/i18n/i18n-context";
@@ -306,26 +305,23 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
         </div>
       )}
       renderModalFooter={({ onClose, isMobile }) => (
-        <Fragment>
-          <NoticeConsentButtons
-            experience={experience}
-            i18n={i18n}
-            enabledKeys={draftEnabledNoticeKeys}
-            onSave={(
-              consentMethod: ConsentMethod,
-              keys: Array<PrivacyNotice["notice_key"]>
-            ) => {
-              handleUpdatePreferences(consentMethod, keys);
-              onClose();
-            }}
-            isInModal
-            isAcknowledge={isAllNoticeOnly}
-            isMobile={isMobile}
-            saveOnly={privacyNoticeItems.length === 1}
-            options={options}
-          />
-          <PrivacyPolicyLink i18n={i18n} />
-        </Fragment>
+        <NoticeConsentButtons
+          experience={experience}
+          i18n={i18n}
+          enabledKeys={draftEnabledNoticeKeys}
+          onSave={(
+            consentMethod: ConsentMethod,
+            keys: Array<PrivacyNotice["notice_key"]>
+          ) => {
+            handleUpdatePreferences(consentMethod, keys);
+            onClose();
+          }}
+          isInModal
+          isAcknowledge={isAllNoticeOnly}
+          isMobile={isMobile}
+          saveOnly={privacyNoticeItems.length === 1}
+          options={options}
+        />
       )}
     />
   );