Page Header/Breadcrumb fixes (#5626)

ethyca · Dec 19, 2024 · 365ffc5 · 365ffc5
1 parent 35602e7
commit 365ffc5
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 72 deletions.
diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/DiscoveryMonitorBreadcrumbs.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/DiscoveryMonitorBreadcrumbs.tsx
@@ -28,7 +28,6 @@ const DiscoveryMonitorBreadcrumbs = ({
   if (!resourceUrn) {
     breadcrumbItems.push({
       title: "All activity",
-      icon: DATA_BREADCRUMB_ICONS[0],
     });
   }
 

diff --git a/clients/admin-ui/src/pages/consent/privacy-notices/[id].tsx b/clients/admin-ui/src/pages/consent/privacy-notices/[id].tsx
@@ -50,19 +50,16 @@ const PrivacyNoticeDetailPage = () => {
           { title: "All privacy Notices", href: PRIVACY_NOTICES_ROUTE },
           { title: data.name },
         ]}
-      >
-        <Box width={{ base: "100%", lg: "70%" }}>
-          <Text fontSize="sm" mb={8}>
-            Configure your privacy notice including consent mechanism,
-            associated data uses and the locations in which this should be
-            displayed to users.
-          </Text>
-        </Box>
-      </PageHeader>
+      />
       <Box
         width={{ base: "100%", lg: "70%" }}
         data-testid="privacy-notice-detail-page"
       >
+        <Text fontSize="sm" mb={8}>
+          Configure your privacy notice including consent mechanism, associated
+          data uses and the locations in which this should be displayed to
+          users.
+        </Text>
         <PrivacyNoticeForm
           privacyNotice={data}
           availableTranslations={availableTranslations}

diff --git a/clients/admin-ui/src/pages/consent/reporting/index.tsx b/clients/admin-ui/src/pages/consent/reporting/index.tsx
@@ -7,16 +7,15 @@ import ConsentReporting from "~/features/consent-reporting/ConsentReporting";
 
 const ConsentReportingPage = () => (
   <Layout title="Consent reporting">
-    <PageHeader heading="Consent reporting">
-      <Text fontSize="sm" width={{ base: "100%", lg: "50%" }}>
+    <PageHeader heading="Consent reporting" />
+    <Box data-testid="consent">
+      <Text fontSize="sm" mb={6} width={{ base: "100%", lg: "50%" }}>
         Download a CSV containing a report of consent preferences made by users
         on your sites. Select a date range below and click &quot;Download
         report&quot;. Depending on the number of records in the date range you
         select, it may take several minutes to prepare the file after you click
         &quot;Download report&quot;.
       </Text>
-    </PageHeader>
-    <Box data-testid="consent">
       <ConsentReporting />
     </Box>
   </Layout>

diff --git a/clients/admin-ui/src/pages/messaging/[id].tsx b/clients/admin-ui/src/pages/messaging/[id].tsx
@@ -104,19 +104,14 @@ const EditPropertyPage: NextPage = () => {
             }`,
           },
         ]}
-      >
-        <Box data-testid="add-messaging-template">
-          <Box maxWidth="720px">
-            <Box padding={2}>
-              <PropertySpecificMessagingTemplateForm
-                template={messagingTemplate}
-                handleSubmit={handleSubmit}
-                handleDelete={onDeleteOpen}
-              />
-            </Box>
-          </Box>
-        </Box>
-      </PageHeader>
+      />
+      <Box data-testid="add-messaging-template" maxWidth="720px">
+        <PropertySpecificMessagingTemplateForm
+          template={messagingTemplate}
+          handleSubmit={handleSubmit}
+          handleDelete={onDeleteOpen}
+        />
+      </Box>
       <ConfirmationModal
         isOpen={deleteIsOpen}
         onClose={onDeleteClose}

diff --git a/clients/admin-ui/src/pages/settings/domains.tsx b/clients/admin-ui/src/pages/settings/domains.tsx
@@ -161,22 +161,18 @@ const CORSConfigurationPage: NextPage = () => {
   return (
     <Layout title="Domains">
       <Box data-testid="management-domains">
-        <PageHeader heading="Domains">
-          <Box maxWidth="600px">
-            <Text fontSize="sm">
-              For Fides to work on your website(s), each of your domains must be
-              listed below. You can add and remove domains at any time up to the
-              quantity included in your license. For more information on
-              managing domains{" "}
-              <DocsLink href="https://fid.es/domain-configuration">
-                read here
-              </DocsLink>
-              .
-            </Text>
-          </Box>
-        </PageHeader>
-
-        <Box maxW="600px" paddingY={3}>
+        <PageHeader heading="Domains" />
+        <Box maxW="600px">
+          <Text fontSize="sm" pb={6}>
+            For Fides to work on your website(s), each of your domains must be
+            listed below. You can add and remove domains at any time up to the
+            quantity included in your license. For more information on managing
+            domains{" "}
+            <DocsLink href="https://fid.es/domain-configuration">
+              read here
+            </DocsLink>
+            .
+          </Text>
           <FormSection
             data-testid="api-set-domains-form"
             title="Organization domains"

diff --git a/clients/admin-ui/src/pages/settings/locations.tsx b/clients/admin-ui/src/pages/settings/locations.tsx
@@ -19,13 +19,12 @@ const LocationsPage: NextPage = () => {
   return (
     <Layout title="Locations">
       <Box data-testid="location-management">
-        <PageHeader heading="Locations">
-          <Text fontSize="sm" maxWidth="720px">
-            Select the locations that you operate in and Fides will make sure
-            that you are automatically presented with the relevant regulatory
-            guidelines and global frameworks for your locations.
-          </Text>
-        </PageHeader>
+        <PageHeader heading="Locations" />
+        <Text fontSize="sm" maxWidth="720px" pb={6}>
+          Select the locations that you operate in and Fides will make sure that
+          you are automatically presented with the relevant regulatory
+          guidelines and global frameworks for your locations.
+        </Text>
         <Box>
           {isLoading ? (
             <Spinner />

diff --git a/clients/admin-ui/src/pages/settings/organization.tsx b/clients/admin-ui/src/pages/settings/organization.tsx
@@ -25,14 +25,13 @@ const OrganizationPage: NextPage = () => {
   return (
     <Layout title="Organization">
       <Box data-testid="organization-management">
-        <PageHeader heading="Organization Management">
-          <Text maxWidth="600px" fontSize="sm">
+        <PageHeader heading="Organization Management" />
+        <Box maxWidth="600px">
+          <Text pb={6} fontSize="sm">
             Please use this section to manage your organization&lsquo;s details,
             including key information that will be recorded in the RoPA (Record
             of Processing Activities).
           </Text>
-        </PageHeader>
-        <Box maxWidth="600px">
           <Box background="gray.50" padding={2}>
             <OrganizationForm organization={organization} />
           </Box>

diff --git a/clients/admin-ui/src/pages/settings/regulations.tsx b/clients/admin-ui/src/pages/settings/regulations.tsx
@@ -21,20 +21,15 @@ const RegulationsPage: NextPage = () => {
   return (
     <Layout title="Regulations">
       <Box data-testid="regulation-management">
-        <PageHeader heading="Regulations">
-          <Text marginBottom={4} fontSize="sm" maxWidth="600px">
-            Select the regulations that apply to your organizations compliance
-            requirements. The selections you make here will automatically update
-            your location selections.{" "}
-            <Link
-              as={NextLink}
-              href={LOCATIONS_ROUTE}
-              color="complimentary.500"
-            >
-              You can view your location settings here.
-            </Link>
-          </Text>
-        </PageHeader>
+        <PageHeader heading="Regulations" />
+        <Text pb={6} fontSize="sm" maxWidth="600px">
+          Select the regulations that apply to your organizations compliance
+          requirements. The selections you make here will automatically update
+          your location selections.{" "}
+          <Link as={NextLink} href={LOCATIONS_ROUTE} color="complimentary.500">
+            You can view your location settings here.
+          </Link>
+        </Text>
         <Box>
           {isLoading ? (
             <Spinner />

diff --git a/clients/admin-ui/src/pages/systems/configure/[id]/test-datasets.tsx b/clients/admin-ui/src/pages/systems/configure/[id]/test-datasets.tsx
@@ -1,4 +1,4 @@
-import { Box, HStack } from "fidesui";
+import { HStack } from "fidesui";
 import type { NextPage } from "next";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
@@ -66,9 +66,7 @@ const TestDatasetPage: NextPage = () => {
           },
           { title: "Test datasets" },
         ]}
-      >
-        <Box position="relative" />
-      </PageHeader>
+      />
       <HStack
         alignItems="stretch"
         flex="1"