update landing page styling

RedHatInsights · Nov 22, 2024 · fee6050 · fee6050
1 parent 9241970
commit fee6050
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 17 deletions.
diff --git a/src/app/App.scss b/src/app/App.scss
@@ -47,16 +47,25 @@
     min-height: 500px;
   }
 
-  .pf-v5-c-card__body {
-    display: flex;
-    flex-direction: column;
-    .apid-tags__main {
-      margin-top: auto;
-      padding-top: var(--pf-v5-global--spacer--sm);
+  .pf-v5-c-card {
+    --pf-v5-c-card--m-selectable-raised--hover--before--BackgroundColor: none; 
+    &__header {
+      background: var(--pf-v5-global--BackgroundColor--150);
     }
     svg {
-      width: 38px;
-      height: 38px;
+      width: 28px;
+    }
+    &__body {
+      display: flex;
+      flex-direction: column;
+      .apid-tags__main {
+        margin-top: auto;
+        padding-top: var(--pf-v5-global--spacer--sm);
+      }
+      svg {
+        width: 38px;
+        height: 38px;
+      }
     }
   }
 }

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -129,14 +129,14 @@ export default function Home() {
 
           <PageSection variant={PageSectionVariants.light} className="pf-v5-u-p-md">
             <Flex direction={{ default: 'rowReverse' }}>
-              <Split className="apid-split-l-pagination">
-                <SplitItem className="pf-v5-u-pb-md pf-v5-u-pt-md-on-md pf-v5-u-pl-sm-on-md" isFilled>
+              <Split className="apid-split-l-pagination pf-v5-u-align-items-center-on-xl">
+                <SplitItem className="pf-v5-u-pb-md pf-v5-u-pt-md-on-md pf-v5-u-pl-sm-on-md">
                   <Button
                     className="pf-v5-u-mr-sm pf-v5-u-mb-sm"
                     component="a"
                     target="_blank"
                     href="https://developers.redhat.com/cheat-sheets/red-hat-insights-api-cheat-sheet"
-                    variant="secondary"
+                    variant="primary"
                     size="sm"
                   >
                     API Cheat Sheet

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
-import { Card as PFCard, CardBody, Split, SplitItem, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { Card as PFCard, CardBody, CardHeader, CardTitle, Divider, Split, SplitItem, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import Link from 'next/link';
 import { APIConfigurationIcons } from '@apidocs/common';
 
@@ -32,18 +32,21 @@ export const Card: FunctionComponent<PropsWithChildren<CardProps>> = ({ apiId, d
 
   return (
     <Link href={to} style={{ textDecoration: 'none' }} className="pf-v5-u-color-100">
-      <PFCard role="link" isSelectable isFullHeight ouiaId={apiId}>
-        <CardBody>
-          <Split className="pf-v5-u-mb-sm">
+      <PFCard role="link" isSelectableRaised isFullHeight ouiaId={apiId}>
+        <CardHeader className="pf-v5-u-p-md pf-v5-u-pt-sm pf-v5-u-pb-0">
+          <Split className="pf-v5-u-mb-0">
             <SplitItem>
               <TitleIcon />
             </SplitItem>
             <SplitItem>
-              <Text component="p" className="pf-v5-u-font-size-md pf-v5-u-m-sm pf-v5-u-ml-md">
+              <CardTitle className="pf-v5-u-pl-sm pf-v5-u-pt-sm pf-v5-u-align-self-flex-start">
                 {displayName}
-              </Text>
+              </CardTitle>
             </SplitItem>
           </Split>
+        </CardHeader> 
+        <Divider />  
+        <CardBody className="pf-v5-u-p-md">
           <TextContent>
             <Text component={TextVariants.small}>{description}</Text>
           </TextContent>