fix Fides brand link position on small screens

ethyca · Dec 6, 2024 · e6f1fa7 · e6f1fa7
1 parent ca8e847
commit e6f1fa7
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 41 deletions.
diff --git 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) => (
-  <Link
-    fontSize="8px"
-    color="gray.400"
-    isExternal
-    textDecoration="none"
-    _hover={{ textDecoration: "none" }}
-    {...props}
-  >
-    Powered by <EthycaLogo color="minos.500" h="20px" w="31px" />
-  </Link>
-);
+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 (
+    <Link
+      fontSize="8px"
+      color="gray.400"
+      isExternal
+      position={position}
+      right={right}
+      textDecoration="none"
+      _hover={{ textDecoration: "none" }}
+      {...props}
+    >
+      Powered by <EthycaLogo color="minos.500" h="20px" w="31px" />
+    </Link>
+  );
+};
 
 export default BrandLink;
diff --git 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 (
     <>
       <Head>
@@ -32,17 +29,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
           <Logo src={config.logo_path ?? ""} href={config.logo_url ?? ""} />
         </Flex>
       </header>
-      <div>
-        {children}
-        {SHOW_BRAND_LINK && (
-          <BrandLink
-            position="absolute"
-            bottom={16}
-            right={6}
-            href="https://fid.es/powered"
-          />
-        )}
-      </div>
+      <div>{children}</div>
     </>
   );
 };

diff --git 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"
       />
+      <BrandLink bottom={0} />
     </Stack>
   );
 };

diff --git 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"
       />
-      <PrivacyPolicyLink alignSelf="center" experience={experience} />
+      <Stack flexDirection="row" alignItems="center">
+        <PrivacyPolicyLink experience={experience} />
+        <BrandLink />
+      </Stack>
     </Box>
   );
 };

diff --git 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}
           </Text>
         ))}
-        {config.privacy_policy_url && config.privacy_policy_url_text ? (
-          <Link
-            fontSize={["small", "medium"]}
-            fontWeight="medium"
-            textAlign="center"
-            textDecoration="underline"
-            color="gray.600"
-            href={config.privacy_policy_url}
-            isExternal
-          >
-            {config.privacy_policy_url_text}
-          </Link>
-        ) : null}
+
+        {(SHOW_BRAND_LINK || showPrivacyPolicyLink) && (
+          <Stack flexDirection="row">
+            {showPrivacyPolicyLink && (
+              <Link
+                fontSize={["small", "medium"]}
+                fontWeight="medium"
+                textAlign="center"
+                textDecoration="underline"
+                color="gray.600"
+                href={config.privacy_policy_url!}
+                isExternal
+              >
+                {config.privacy_policy_url_text}
+              </Link>
+            )}
+            <BrandLink />
+          </Stack>
+        )}
       </Stack>
       <PrivacyRequestModal
         isOpen={isPrivacyModalOpen}