From 874b5cd3672fcc629ae98a53e09800b76a2c283a Mon Sep 17 00:00:00 2001 From: jpople Date: Fri, 6 Dec 2024 13:03:36 -0600 Subject: [PATCH] Fix Fides brand link position on small screens (#5572) --- CHANGELOG.md | 1 + .../privacy-center/components/BrandLink.tsx | 40 ++++++++++++------ clients/privacy-center/components/Layout.tsx | 15 +------ .../consent/ConfigDrivenConsent.tsx | 2 + .../notice-driven/NoticeDrivenConsent.tsx | 6 ++- clients/privacy-center/pages/index.tsx | 42 ++++++++++++------- 6 files changed, 65 insertions(+), 41 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 67b323801c..db499e3ed4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -44,6 +44,7 @@ The types of changes are: - Updating dataset PUT to allow deleting all datasets [#5524](https://github.com/ethyca/fides/pull/5524) - Adds support for fides_key generation when parent_key is provided in Taxonomy create endpoints [#5542](https://github.com/ethyca/fides/pull/5542) - An integration will no longer re-enable after saving the connection form [#5555](https://github.com/ethyca/fides/pull/5555) +- Fixed positioning of Fides brand link in privacy center [#5572](https://github.com/ethyca/fides/pull/5572) ### Removed - Removed unnecessary debug logging from the load_file config helper [#5544](https://github.com/ethyca/fides/pull/5544) diff --git a/clients/privacy-center/components/BrandLink.tsx b/clients/privacy-center/components/BrandLink.tsx index c069ed57f6..15976ceb06 100644 --- a/clients/privacy-center/components/BrandLink.tsx +++ b/clients/privacy-center/components/BrandLink.tsx @@ -1,16 +1,32 @@ import { EthycaLogo, Link, LinkProps } from "fidesui"; -const BrandLink = (props: LinkProps) => ( - - Powered by - -); +import { useSettings } from "~/features/common/settings.slice"; + +const BrandLink = ({ + position = "absolute", + right = 6, + ...props +}: LinkProps) => { + const { SHOW_BRAND_LINK } = useSettings(); + + if (!SHOW_BRAND_LINK) { + return null; + } + + return ( + + Powered by + + ); +}; export default BrandLink; diff --git a/clients/privacy-center/components/Layout.tsx b/clients/privacy-center/components/Layout.tsx index 9565fc7f20..e1e73a498b 100644 --- a/clients/privacy-center/components/Layout.tsx +++ b/clients/privacy-center/components/Layout.tsx @@ -2,16 +2,13 @@ import { Flex } from "fidesui"; import Head from "next/head"; import React, { ReactNode } from "react"; -import BrandLink from "~/components/BrandLink"; import Logo from "~/components/Logo"; import { useConfig } from "~/features/common/config.slice"; -import { useSettings } from "~/features/common/settings.slice"; import { useStyles } from "~/features/common/styles.slice"; const Layout = ({ children }: { children: ReactNode }) => { const config = useConfig(); const styles = useStyles(); - const { SHOW_BRAND_LINK } = useSettings(); return ( <> @@ -32,17 +29,7 @@ const Layout = ({ children }: { children: ReactNode }) => { -
- {children} - {SHOW_BRAND_LINK && ( - - )} -
+
{children}
); }; diff --git a/clients/privacy-center/components/consent/ConfigDrivenConsent.tsx b/clients/privacy-center/components/consent/ConfigDrivenConsent.tsx index f59e7bb4e3..3808605783 100644 --- a/clients/privacy-center/components/consent/ConfigDrivenConsent.tsx +++ b/clients/privacy-center/components/consent/ConfigDrivenConsent.tsx @@ -14,6 +14,7 @@ import { useAppDispatch, useAppSelector } from "~/app/hooks"; import { inspectForBrowserIdentities } from "~/common/browser-identities"; import { useLocalStorage } from "~/common/hooks"; import { ErrorToastOptions, SuccessToastOptions } from "~/common/toast-options"; +import BrandLink from "~/components/BrandLink"; import { useConfig } from "~/features/common/config.slice"; import { changeConsent, @@ -209,6 +210,7 @@ const ConfigDrivenConsent = ({ cancelLabel="Cancel" saveLabel="Save" /> + ); }; diff --git a/clients/privacy-center/components/consent/notice-driven/NoticeDrivenConsent.tsx b/clients/privacy-center/components/consent/notice-driven/NoticeDrivenConsent.tsx index d8765f587c..bd24228af2 100644 --- a/clients/privacy-center/components/consent/notice-driven/NoticeDrivenConsent.tsx +++ b/clients/privacy-center/components/consent/notice-driven/NoticeDrivenConsent.tsx @@ -25,6 +25,7 @@ import { inspectForBrowserIdentities } from "~/common/browser-identities"; import { useLocalStorage } from "~/common/hooks"; import useI18n from "~/common/hooks/useI18n"; import { ErrorToastOptions, SuccessToastOptions } from "~/common/toast-options"; +import BrandLink from "~/components/BrandLink"; import { useProperty } from "~/features/common/property.slice"; import { selectPrivacyExperience, @@ -400,7 +401,10 @@ const NoticeDrivenConsent = ({ base64Cookie }: { base64Cookie: boolean }) => { onCancel={handleCancel} justifyContent="center" /> - + + + + ); }; diff --git a/clients/privacy-center/pages/index.tsx b/clients/privacy-center/pages/index.tsx index 287a0b8f91..e7c21b22fa 100644 --- a/clients/privacy-center/pages/index.tsx +++ b/clients/privacy-center/pages/index.tsx @@ -13,6 +13,7 @@ import React, { useEffect, useState } from "react"; import { useAppDispatch, useAppSelector } from "~/app/hooks"; import { ConfigErrorToastOptions } from "~/common/toast-options"; +import BrandLink from "~/components/BrandLink"; import ConsentCard from "~/components/consent/ConsentCard"; import { ConsentRequestModal, @@ -25,7 +26,10 @@ import { } from "~/components/modals/privacy-request-modal/PrivacyRequestModal"; import PrivacyCard from "~/components/PrivacyCard"; import { useConfig } from "~/features/common/config.slice"; -import { selectIsNoticeDriven } from "~/features/common/settings.slice"; +import { + selectIsNoticeDriven, + useSettings, +} from "~/features/common/settings.slice"; import { clearLocation, selectPrivacyExperience, @@ -68,6 +72,10 @@ const Home: NextPage = () => { let isConsentModalOpen = isConsentModalOpenConst; const getIdVerificationConfigQuery = useGetIdVerificationConfigQuery(); + const { SHOW_BRAND_LINK } = useSettings(); + const showPrivacyPolicyLink = + !!config.privacy_policy_url && !!config.privacy_policy_url_text; + // Subscribe to experiences just to see if there are any notices. // The subscription automatically handles skipping if overlay is not enabled useSubscribeToPrivacyExperienceQuery(); @@ -214,19 +222,25 @@ const Home: NextPage = () => { {paragraph} ))} - {config.privacy_policy_url && config.privacy_policy_url_text ? ( - - {config.privacy_policy_url_text} - - ) : null} + + {(SHOW_BRAND_LINK || showPrivacyPolicyLink) && ( + + {showPrivacyPolicyLink && ( + + {config.privacy_policy_url_text} + + )} + + + )}