Improve standard layout for large width screens and polish misc. pages (

#2869)
ethyca · Mar 21, 2023 · c47699c · c47699c
1 parent 31ea3e3
commit c47699c
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 57 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,23 +17,26 @@ The types of changes are:
 
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.9.1...main)
 
+### Changed
+* Improved standard layout for large width screens and polished misc. pages [#2869](https://github.com/ethyca/fides/pull/2869)
+
 ## [2.9.1](https://github.com/ethyca/fides/compare/2.9.0...2.9.1)
 
 ### Added
 * Added Attentive erasure email connector [#2782](https://github.com/ethyca/fides/pull/2782)
 
 ### Changed
+* Improved standard layout for large width screens and polish misc. pages [#2869](https://github.com/ethyca/fides/pull/2869)
 * Removed dataset based email connectors [#2782](https://github.com/ethyca/fides/pull/2782)
 * Changed Auth0's authentication strategy from `bearer` to `oauth2_client_credentials` [#2820](https://github.com/ethyca/fides/pull/2820)
-* renamed the privacy declarations field "Privacy declaration name (deprecated)" to "Processing Activity" [#711](https://github.com/ethyca/fidesplus/issues/711)
+* Renamed the privacy declarations field "Privacy declaration name (deprecated)" to "Processing Activity" [#711](https://github.com/ethyca/fidesplus/issues/711)
 
 
 ### Fixed
 * Fixed issue where the scopes list passed into FidesUserPermission could get mutated with the total_scopes call [#2883](https://github.com/ethyca/fides/pull/2883)
 
 ### Removed
-
-* removed the `privacyDeclarationDeprecatedFields` flag [#711](https://github.com/ethyca/fidesplus/issues/711)
+* Removed the `privacyDeclarationDeprecatedFields` flag [#711](https://github.com/ethyca/fidesplus/issues/711)
 
 ## [2.9.0](https://github.com/ethyca/fides/compare/2.8.3...2.9.0)
 

diff --git a/clients/admin-ui/src/features/common/Layout.tsx b/clients/admin-ui/src/features/common/Layout.tsx
@@ -46,7 +46,7 @@ const Layout = ({
     isValidNotificationRoute;
 
   return (
-    <Flex data-testid={title} direction="column" height="100vh">
+    <Flex data-testid={title} direction="column">
       <Head>
         <title>Fides Admin UI - {title}</title>
         <meta name="description" content="Privacy Engineering Platform" />
@@ -56,7 +56,7 @@ const Layout = ({
       {/* TODO: remove this in a future release (see https://github.com/ethyca/fides/issues/2844) */}
       <NotificationBanner />
       <NavTopBar />
-      <Flex as="main" px={9} py={10} gap="40px" height="100%">
+      <Flex as="main" flexGrow={1} padding={10} gap={10}>
         <Box flex={0} flexShrink={0}>
           <NavSideBar />
         </Box>

diff --git a/clients/admin-ui/src/features/config-wizard/AddSystem.tsx b/clients/admin-ui/src/features/config-wizard/AddSystem.tsx
@@ -32,7 +32,7 @@ const AddSystem = () => {
 
   return (
     <Stack spacing={9} data-testid="add-systems">
-      <Stack spacing={6} w={{ base: "100%", md: "50%" }}>
+      <Stack spacing={6} maxWidth="600px">
         <Heading as="h3" size="lg" fontWeight="semibold">
           Fides helps you map your systems to manage your privacy
         </Heading>

diff --git a/clients/admin-ui/src/features/config-wizard/ConfigWizardWalkthrough.tsx b/clients/admin-ui/src/features/config-wizard/ConfigWizardWalkthrough.tsx
@@ -12,7 +12,7 @@ const ConfigWizardWalkthrough = () => {
   const step = useAppSelector(selectStep);
 
   return (
-    <Stack direction={["column", "row"]} bg="white" height="100vh" width="100%">
+    <Stack direction={["column", "row"]} bg="white">
       <Box display="flex" justifyContent="center" w="100%">
         {step === 1 ? <OrganizationInfoForm /> : null}
         {step === 2 ? <AddSystem /> : null}

diff --git a/clients/admin-ui/src/features/datastore-connections/ConnectionFilters.tsx b/clients/admin-ui/src/features/datastore-connections/ConnectionFilters.tsx
@@ -32,7 +32,13 @@ const useConstantFilters = () => {
 const ConnectionFilters: React.FC = () => {
   const { handleSearchChange, search } = useConstantFilters();
   return (
-    <Flex minWidth="fit-content" alignItems="center" gap="4" mb={6}>
+    <Flex
+      minWidth="fit-content"
+      alignItems="center"
+      gap="4"
+      mb={6}
+      flexWrap="wrap"
+    >
       <InputGroup size="sm" minWidth="308px">
         <InputLeftElement pointerEvents="none">
           <SearchLineIcon color="gray.300" w="17px" h="17px" />

diff --git a/clients/admin-ui/src/home/HomeBanner.tsx b/clients/admin-ui/src/home/HomeBanner.tsx
@@ -1,39 +1,40 @@
-import { Flex, Image, Spacer, Text } from "@fidesui/react";
+import { Flex, Text } from "@fidesui/react";
 import * as React from "react";
 
 import { useFeatures } from "~/features/common/features";
 
 const HomeBanner: React.FC = () => {
   const { systemsCount } = useFeatures();
   const hasSystems = systemsCount > 0;
+  const bannerHeight = "300px";
+  const bannerTextWidth = "600px";
 
   return (
     <Flex
+      position="relative"
+      height={bannerHeight}
       background="linear-gradient(180deg, #FFFFFF 0%, #F8F8FF 100%);"
-      h="300px"
+      overflow="hidden"
     >
-      <Flex flexDir="column" mt="40px" pos="absolute" px="36px" w="597px">
+      <Flex
+        flexDir="column"
+        position="absolute"
+        height={bannerHeight}
+        width={bannerTextWidth}
+        maxWidth="100%"
+        padding="10"
+      >
         {hasSystems && (
           <>
-            <Text
-              fontSize="32px"
-              fontWeight="semibold"
-              h="40px"
-              lineHeight="32px"
-            >
+            <Text fontSize="3xl" fontWeight="semibold">
               Welcome back!
             </Text>
-            <Text
-              fontSize="18px"
-              fontWeight="semibold"
-              h="36px"
-              lineHeight="28px"
-            >
+            <Text marginTop="1" fontSize="lg" fontWeight="semibold">
               {`${systemsCount} system${
                 systemsCount > 1 ? "s" : ""
               } currently under management`}
             </Text>
-            <Text fontSize="14px">
+            <Text marginTop="1" fontSize="sm">
               {`Fides is currently managing privacy for ${systemsCount} system${
                 systemsCount > 1 ? "s" : ""
               }. From here you can continue adding and managing systems, process privacy requests or generate reports for your privacy compliance requirements.`}
@@ -42,23 +43,13 @@ const HomeBanner: React.FC = () => {
         )}
         {!hasSystems && (
           <>
-            <Text
-              fontSize="32px"
-              fontWeight="semibold"
-              h="40px"
-              lineHeight="32px"
-            >
+            <Text fontSize="3xl" fontWeight="semibold">
               Welcome to Fides!
             </Text>
-            <Text
-              fontSize="18px"
-              fontWeight="semibold"
-              h="36px"
-              lineHeight="28px"
-            >
+            <Text marginTop="1" fontSize="lg" fontWeight="semibold">
               Start your privacy engineering journey today
             </Text>
-            <Text fontSize="14px">
+            <Text marginTop="1" fontSize="sm">
               Step one in setting up your privacy engineering platform is adding
               the systems you need to manage. Use the links below to add and
               configure systems within Fides for data mapping and privacy
@@ -67,10 +58,18 @@ const HomeBanner: React.FC = () => {
           </>
         )}
       </Flex>
-      <Spacer />
-      <Flex flexShrink={0}>
-        <Image alt="" boxSize="100%" src="/images/config_splash.svg" />
-      </Flex>
+      {/* Render the background image, using a min-width here to ensure there is
+      enough left margin to avoid colliding with the banner text above */}
+      <Flex
+        flexShrink={0}
+        width="100%"
+        minWidth="1120px"
+        height={bannerHeight}
+        backgroundImage="url('/images/config_splash.svg')"
+        backgroundSize="contain"
+        backgroundRepeat="no-repeat"
+        backgroundPosition="right"
+      />
     </Flex>
   );
 };

diff --git a/clients/admin-ui/src/home/HomeContent.tsx b/clients/admin-ui/src/home/HomeContent.tsx
@@ -1,4 +1,4 @@
-import { Center, Flex, SimpleGrid, Text } from "@fidesui/react";
+import { Flex, SimpleGrid, Text } from "@fidesui/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import * as React from "react";
@@ -12,8 +12,6 @@ import { selectThisUsersScopes } from "~/features/user-management";
 import { MODULE_CARD_ITEMS } from "./constants";
 import { configureTiles } from "./tile-config";
 
-const COLUMNS = 3;
-
 const HomeContent: React.FC = () => {
   const router = useRouter();
   const { plus } = useFeatures();
@@ -30,11 +28,8 @@ const HomeContent: React.FC = () => {
   );
 
   return (
-    <Center px="36px" data-testid="home-content">
-      <SimpleGrid
-        columns={list.length >= COLUMNS ? COLUMNS : list.length}
-        spacing="24px"
-      >
+    <Flex paddingX={10} data-testid="home-content">
+      <SimpleGrid columns={{ md: 2, xl: 3 }} spacing="24px">
         {list
           .sort((a, b) => (a.sortOrder > b.sortOrder ? 1 : -1))
           .map((item) => {
@@ -44,12 +39,13 @@ const HomeContent: React.FC = () => {
                 <Flex
                   background={`${item.color}.50`}
                   borderRadius="8px"
-                  boxShadow="base"
                   flexDirection="column"
                   maxH="164px"
                   overflow="hidden"
                   padding="16px 16px 20px 16px"
                   maxW="469.33px"
+                  border="1px solid"
+                  borderColor="transparent"
                   _hover={{
                     border: "1px solid",
                     borderColor: `${item.color}.500`,
@@ -96,7 +92,7 @@ const HomeContent: React.FC = () => {
             );
           })}
       </SimpleGrid>
-    </Center>
+    </Flex>
   );
 };
 

diff --git a/clients/admin-ui/src/home/HomeLayout.tsx b/clients/admin-ui/src/home/HomeLayout.tsx
@@ -13,17 +13,17 @@ type HomeLayoutProps = {
 };
 
 const HomeLayout: React.FC<HomeLayoutProps> = ({ children, title }) => (
-  <Flex data-testid={title} direction="column" height="100vh">
+  <Flex data-testid={title} direction="column">
     <Head>
       <title>Fides Admin UI - {title}</title>
-      <meta name="description" content="" />
+      <meta name="description" content="Privacy Engineering Platform" />
       <link rel="icon" href="/favicon.ico" />
     </Head>
     <Header />
     {/* TODO: remove this in a future release (see https://github.com/ethyca/fides/issues/2844) */}
     <NotificationBanner />
     <NavTopBar />
-    <Flex as="main" flexDirection="column" gap="40px" height="100%">
+    <Flex as="main" flexGrow={1} flexDirection="column" gap={10}>
       {children}
     </Flex>
   </Flex>

diff --git a/clients/admin-ui/src/theme/index.ts b/clients/admin-ui/src/theme/index.ts
@@ -7,9 +7,7 @@ const theme = extendTheme({
     global: {
       body: {
         bg: "white",
-      },
-      html: {
-        height: "100%",
+        minWidth: "container.lg",
       },
     },
   },