From b0f8908c7e010575ef087a06793f1004b14b5b43 Mon Sep 17 00:00:00 2001
From: ewinchel <ewinchel@redhat.com>
Date: Tue, 2 Jul 2024 10:20:24 -0400
Subject: [PATCH 1/2] Update empty state styling

---
 .../FavoriteServices/EmptyState.scss          |  6 +--
 .../FavoriteServices/EmptyState.tsx           | 43 +++++++++++--------
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/components/FavoriteServices/EmptyState.scss b/src/components/FavoriteServices/EmptyState.scss
index 246257b6c..487f5b28e 100644
--- a/src/components/FavoriteServices/EmptyState.scss
+++ b/src/components/FavoriteServices/EmptyState.scss
@@ -1,8 +1,6 @@
 @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;
+.pf-v5-l-flex {
+  height: 100%;
 }
diff --git a/src/components/FavoriteServices/EmptyState.tsx b/src/components/FavoriteServices/EmptyState.tsx
index 0b86565ff..f535698fb 100644
--- 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>
   </>
 );
 

From 2aa8665f65df251344d314c10032553a4ba32daa Mon Sep 17 00:00:00 2001
From: ewinchel <ewinchel@redhat.com>
Date: Tue, 2 Jul 2024 11:35:19 -0400
Subject: [PATCH 2/2] lint fix

---
 .../FavoriteServices/EmptyState.tsx           | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/FavoriteServices/EmptyState.tsx b/src/components/FavoriteServices/EmptyState.tsx
index f535698fb..0b3f808aa 100644
--- a/src/components/FavoriteServices/EmptyState.tsx
+++ b/src/components/FavoriteServices/EmptyState.tsx
@@ -10,28 +10,28 @@ import './EmptyState.scss';
 
 const EmptyState = () => (
   <>
-  <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>
+    <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>
   </>
 );