Merge pull request #2895 from epwinchell/empty2

Update empty state styling
RedHatInsights · Jul 10, 2024 · eb7eae8 · eb7eae8
2 parents fd7197c + 27faaf5
commit eb7eae8
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 23 deletions.
diff --git a/src/components/FavoriteServices/EmptyState.scss b/src/components/FavoriteServices/EmptyState.scss
@@ -1,8 +1,8 @@
 @import "~@redhat-cloud-services/frontend-components-utilities/styles/_all";
 @import '~@patternfly/patternfly/patternfly-addons.scss';
 
-.chr-l-stack__item-centered, .chr-c-card-centered {
-  display: flex;
-  justify-content: center;
-  text-align: center;
+.chrome-favoriteServices {
+  .pf-v5-l-flex {
+    height: 100%;
+  }
 }
diff --git a/src/components/FavoriteServices/EmptyState.tsx b/src/components/FavoriteServices/EmptyState.tsx
@@ -1,5 +1,6 @@
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
-import { StackItem } from '@patternfly/react-core/dist/dynamic/layouts/Stack';
+import { Flex } from '@patternfly/react-core/dist/dynamic/layouts/Flex';
+import { Stack, StackItem } from '@patternfly/react-core/dist/dynamic/layouts/Stack';
 import { Text, TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
 
 import React from 'react';
@@ -9,24 +10,28 @@ import './EmptyState.scss';
 
 const EmptyState = () => (
   <>
-    <StackItem className="chr-l-stack__item-centered pf-v5-u-mt-xl">
-      <img src="https://console.redhat.com/apps/frontend-assets/favoritedservices/favoriting-emptystate.svg" alt="favoriting image" />
-    </StackItem>
-    <StackItem className="chr-l-stack__item-centered pf-v5-u-mt-md">
-      <TextContent>
-        <Text component="h3" className="pf-v5-m-center">
-          No favorited services
-        </Text>
-        <Text component="small" className="pf-v5-u-mt-sm">
-          Add a service to your favorites to get started here.
-        </Text>
-      </TextContent>
-    </StackItem>
-    <StackItem className="chr-l-stack__item-centered pf-v5-u-mt-md">
-      <Button variant="primary" alt="View all services" component={(props) => <ChromeLink {...props} href="/allservices" />}>
-        View all services
-      </Button>
-    </StackItem>
+    <Flex className="pf-v5-u-justify-content-center pf-v5-u-align-items-stretch">
+      <Stack className="pf-v5-u-justify-content-center">
+        <StackItem className="pf-v5-u-text-align-center">
+          <img src="https://console.redhat.com/apps/frontend-assets/favoritedservices/favoriting-emptystate.svg" alt="favoriting image" />
+        </StackItem>
+        <StackItem className="pf-v5-u-text-align-center">
+          <TextContent>
+            <Text component="h3" className="pf-v5-m-center">
+              No favorited services
+            </Text>
+            <Text component="small" className="pf-v5-u-mt-sm">
+              Add a service to your favorites to get started here.
+            </Text>
+          </TextContent>
+        </StackItem>
+        <StackItem className="pf-v5-u-text-align-center pf-v5-u-mt-md">
+          <Button variant="primary" alt="View all services" component={(props) => <ChromeLink {...props} href="/allservices" />}>
+            View all services
+          </Button>
+        </StackItem>
+      </Stack>
+    </Flex>
   </>
 );