update landing page styling (#427)

* update landing page styling * lint fix * use compact label variant * update label groups * fix toggle button positioning * lint fix
RedHatInsights · Nov 27, 2024 · 6ca1200 · 6ca1200
1 parent 9241970
commit 6ca1200
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 19 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">
+              <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" isFilled>
                   <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,19 @@ 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">
-                {displayName}
-              </Text>
+              <CardTitle className="pf-v5-u-pl-sm pf-v5-u-pt-sm pf-v5-u-align-self-flex-start">{displayName}</CardTitle>
             </SplitItem>
           </Split>
+        </CardHeader>
+        <Divider />
+        <CardBody className="pf-v5-u-p-md">
           <TextContent>
             <Text component={TextVariants.small}>{description}</Text>
           </TextContent>

diff --git a/src/components/Tags/Tag.tsx b/src/components/Tags/Tag.tsx
@@ -21,5 +21,9 @@ const colorForLabelType = (type: APILabel['type']): LabelProps['color'] => {
 };
 
 export const Tag: FunctionComponent<TagProps> = ({ value }) => {
-  return <Label color={colorForLabelType(value.type)}>{value.name}</Label>;
+  return (
+    <Label color={colorForLabelType(value.type)} isCompact>
+      {value.name}
+    </Label>
+  );
 };
diff --git a/src/components/Tags/Tags.tsx b/src/components/Tags/Tags.tsx
@@ -3,5 +3,9 @@ import { LabelGroup } from '@patternfly/react-core';
 
 export const Tags: FunctionComponent<PropsWithChildren> = ({ children }) => {
   const numLabels = Children.toArray(children).length <= 4 ? 4 : 3;
-  return <LabelGroup numLabels={numLabels}>{children}</LabelGroup>;
+  return (
+    <LabelGroup numLabels={numLabels} isCompact>
+      {children}
+    </LabelGroup>
+  );
 };