2200 - Home screen header scaling and responsiveness issues (#2277)

ethyca · Jan 20, 2023 · 466ad97 · 466ad97
1 parent be33014
commit 466ad97
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,9 @@ The types of changes are:
 
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.5.0...main)
 
+### Fixed
+
+* Home screen header scaling and responsiveness issues [#2200](https://github.com/ethyca/fides/pull/2277)
 
 ## [2.5.0](https://github.com/ethyca/fides/compare/2.4.0...2.5.0)
 

diff --git a/clients/admin-ui/src/home/HomeBanner.tsx b/clients/admin-ui/src/home/HomeBanner.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Image, Spacer, Text } from "@fidesui/react";
+import { Flex, Image, Spacer, Text } from "@fidesui/react";
 import * as React from "react";
 
 import { useFeatures } from "~/features/common/features";
@@ -12,20 +12,20 @@ const HomeBanner: React.FC = () => {
       background="linear-gradient(180deg, #FFFFFF 0%, #F8F8FF 100%);"
       h="300px"
     >
-      <Box h="128px" px="36px" w="597px">
+      <Flex flexDir="column" mt="40px" pos="absolute" px="36px" w="597px">
         {hasSystems && (
           <>
             <Text
-              fontWeight="semibold"
               fontSize="32px"
+              fontWeight="semibold"
               h="40px"
               lineHeight="32px"
             >
               Welcome back!
             </Text>
             <Text
-              fontWeight="semibold"
               fontSize="18px"
+              fontWeight="semibold"
               h="36px"
               lineHeight="28px"
             >
@@ -43,16 +43,16 @@ const HomeBanner: React.FC = () => {
         {!hasSystems && (
           <>
             <Text
-              fontWeight="semibold"
               fontSize="32px"
+              fontWeight="semibold"
               h="40px"
               lineHeight="32px"
             >
               Welcome to Fides!
             </Text>
             <Text
-              fontWeight="semibold"
               fontSize="18px"
+              fontWeight="semibold"
               h="36px"
               lineHeight="28px"
             >
@@ -66,11 +66,11 @@ const HomeBanner: React.FC = () => {
             </Text>
           </>
         )}
-      </Box>
+      </Flex>
       <Spacer />
-      <Box>
-        <Image alt="" height="100%" src="/images/config_splash.svg" />
-      </Box>
+      <Flex flexShrink={0}>
+        <Image alt="" boxSize="100%" src="/images/config_splash.svg" />
+      </Flex>
     </Flex>
   );
 };

diff --git a/clients/admin-ui/src/home/HomeLayout.tsx b/clients/admin-ui/src/home/HomeLayout.tsx
@@ -20,7 +20,7 @@ const HomeLayout: React.FC<HomeLayoutProps> = ({ children, title }) => (
     </Head>
     <Header />
     <NavTopBar />
-    <Flex flexDirection="column" gap="40px" py={10} width="100vw">
+    <Flex flexDirection="column" gap="40px" width="100vw">
       {children}
     </Flex>
   </div>