From e16cf73e300b0a4644d08bed9c6c65cb70a7d499 Mon Sep 17 00:00:00 2001
From: epwinchell <1287144+epwinchell@users.noreply.github.com>
Date: Mon, 2 Oct 2023 09:52:52 -0400
Subject: [PATCH] Landing fav card updates (#2643)

---
 .../e2e/release-gate/favorite-services.cy.tsx |  2 +-
 .../FavoriteServices/LandingNavFavorites.tsx  | 22 ++++++++-----------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/cypress/e2e/release-gate/favorite-services.cy.tsx b/cypress/e2e/release-gate/favorite-services.cy.tsx
index 62559c286..c409bbb52 100644
--- a/cypress/e2e/release-gate/favorite-services.cy.tsx
+++ b/cypress/e2e/release-gate/favorite-services.cy.tsx
@@ -132,6 +132,6 @@ describe('Favorite-services', () => {
       }
     });
     cy.wait(2000);
-    cy.get('.chr-c-favorite-service__tile').find('.pf-v5-u-mb-sm').should('contain', serviceName);
+    cy.get('.chr-c-favorite-service__tile').find('.pf-v5-u-pb-0').should('contain', serviceName);
   });
 });
diff --git a/src/components/FavoriteServices/LandingNavFavorites.tsx b/src/components/FavoriteServices/LandingNavFavorites.tsx
index 9fbd7dff7..0ae113256 100644
--- a/src/components/FavoriteServices/LandingNavFavorites.tsx
+++ b/src/components/FavoriteServices/LandingNavFavorites.tsx
@@ -1,4 +1,4 @@
-import { Card, CardBody } from '@patternfly/react-core/dist/dynamic/components/Card';
+import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core/dist/dynamic/components/Card';
 import { Flex, FlexItem } from '@patternfly/react-core/dist/dynamic/layouts/Flex';
 import { Gallery, GalleryItem } from '@patternfly/react-core/dist/dynamic/layouts/Gallery';
 import { Icon } from '@patternfly/react-core/dist/dynamic/components/Icon';
@@ -32,17 +32,11 @@ const LandingNavFavorites = () => {
     return favoritedServices.slice((page - 1) * perPage, page * perPage).map((favorite, index) => (
       <GalleryItem key={index}>
         <Link to={favorite.pathname} className="chr-c-favorite-service__tile">
-          <Card isFullHeight isFlat isSelectableRaised>
-            <CardBody className="pf-v5-u-p-lg pf-v5-u-pt-xl">
-              <TextContent className="pf-v5-u-text-align-center">
-                <Text component="p" className="pf-v5-u-mb-sm">
-                  {favorite.name}
-                </Text>
-                <Text component="p" className="pf-v5-u-font-size-xs">
-                  {getBundle(favorite.pathname)}
-                </Text>
-              </TextContent>
-            </CardBody>
+          <Card isClickable>
+            <CardHeader selectableActions={{ selectableActionId: 'id', selectableActionAriaLabelledby: 'clickable-card' }} className="pf-v5-u-pb-0">
+              <CardTitle className="pf-v5-u-text-align-center pf-v5-u-active-color-100 pf-v5-u-font-size-sm">{favorite.name}</CardTitle>
+            </CardHeader>
+            <CardBody className="pf-v5-u-text-align-center pf-v5-u-color-100 pf-v5-u-font-size-xs">{getBundle(favorite.pathname)}</CardBody>
           </Card>
         </Link>
       </GalleryItem>
@@ -84,7 +78,9 @@ const LandingNavFavorites = () => {
         <EmptyState />
       ) : (
         <React.Fragment>
-          <Gallery hasGutter>{buildFavorites()}</Gallery>
+          <Gallery className="pf-v5-u-pt-md" hasGutter>
+            {buildFavorites()}
+          </Gallery>
         </React.Fragment>
       )}
     </React.Fragment>