overview page tweaks: grey background for cards like general overview…

… page Signed-off-by: Jason Madigan <[email protected]>
Kuadrant · Oct 22, 2024 · dba0a42 · dba0a42
1 parent 4cc2458
commit dba0a42
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/src/components/KuadrantOverviewPage.tsx b/src/components/KuadrantOverviewPage.tsx
@@ -14,6 +14,7 @@ import {
   Flex,
   FlexItem,
   Text,
+  TextVariants,
   Stack,
   StackItem,
   Divider,
@@ -123,7 +124,7 @@ const KuadrantOverviewPage: React.FC = () => {
         <title data-test="example-page-title">{t('Kuadrant')}</title>
       </Helmet>
       <Page>
-        <PageSection variant="light">
+        <PageSection>
           <Title headingLevel="h1">{t('Kuadrant')} Overview</Title>
           <br />
 
@@ -142,17 +143,17 @@ const KuadrantOverviewPage: React.FC = () => {
               </CardHeader>
               <CardExpandableContent>
                 <CardBody>
-                  <Flex>
+                  <Flex className="kuadrant-overview-getting-started">
                     <FlexItem flex={{ default: 'flex_1' }}>
                       <Title headingLevel="h4" className="kuadrant-dashboard-learning">
                         <GlobeIcon /> {t('Learning Resources')}
                       </Title>
-                      <p>
+                      <Text component={TextVariants.small}>
                         {t(
                           'Learn how to create, import and use Kuadrant policies on OpenShift with step-by-step instructions and tasks.',
                         )}
-                      </p>
-                      <Stack hasGutter className="pf-u-mt-md">
+                      </Text>
+                      <Stack hasGutter className="pf-u-mt-sm">
                         <StackItem>
                           <Text
                             component="a"
@@ -196,11 +197,11 @@ const KuadrantOverviewPage: React.FC = () => {
                       <Title headingLevel="h4" className="kuadrant-dashboard-feature-highlights">
                         <OptimizeIcon /> {t('Feature Highlights')}
                       </Title>
-                      <p>
+                      <Text component={TextVariants.small}>
                         {t(
                           'Read about the latest information and key features in the Kuadrant highlights.',
                         )}
-                      </p>
+                      </Text>
                       <Stack hasGutter className="pf-u-mt-md">
                         <StackItem>
                           <Text
@@ -241,11 +242,11 @@ const KuadrantOverviewPage: React.FC = () => {
                       <Title headingLevel="h4" className="kuadrant-dashboard-enhance">
                         <ReplicatorIcon /> {t('Enhance Your Work')}
                       </Title>
-                      <p>
+                      <Text component={TextVariants.small}>
                         {t(
                           'Ease operational complexity with API management and App Connectivity by using additional Operators and tools.',
                         )}
-                      </p>
+                      </Text>
                       <Stack hasGutter className="pf-u-mt-md">
                         <StackItem>
                           <Text
@@ -288,7 +289,7 @@ const KuadrantOverviewPage: React.FC = () => {
                 <CardTitle>
                   <Title headingLevel="h2">{t('Policies')}</Title>
                 </CardTitle>
-                <CardBody className="pf-u-p-0">
+                <CardBody className="pf-u-p-10">
                   <ResourceList
                     resources={[
                       resourceGVKMapping['AuthPolicy'],
@@ -311,7 +312,7 @@ const KuadrantOverviewPage: React.FC = () => {
                 <CardTitle>
                   <Title headingLevel="h2">{t('Gateways')}</Title>
                 </CardTitle>
-                <CardBody className="pf-u-p-0">
+                <CardBody className="pf-u-p-10">
                   <ResourceList
                     resources={[resourceGVKMapping['Gateway']]}
                     columns={columns}
@@ -326,7 +327,7 @@ const KuadrantOverviewPage: React.FC = () => {
                 <CardTitle>
                   <Title headingLevel="h2">{t('APIs / HTTPRoutes')}</Title>
                 </CardTitle>
-                <CardBody className="pf-u-p-0">
+                <CardBody className="pf-u-p-10">
                   <ResourceList
                     resources={[resourceGVKMapping['HTTPRoute']]}
                     columns={columns}

diff --git a/src/components/kuadrant.css b/src/components/kuadrant.css
@@ -71,12 +71,16 @@
   margin-bottom: 0.5em;
 }
 
-.pf-theme-light  .kuadrant-dashboard-learning {
-  color: var(--pf-v5-chart-color-purple-400);
+.kuadrant-overview-getting-started small {
+  color: var(--pf-v5-global--Color--200);
+}
+
+.kuadrant-dashboard-learning {
+  color: var(--pf-global--palette--purple-700);
 }
 
 .pf-theme-dark .kuadrant-dashboard-learning  {
-  color: var(--pf-v5-chart-color-purple-200);
+  color: var(--pf-v5-global--palette--purple-200);
 }
 
 .kuadrant-dashboard-feature-highlights {
@@ -91,7 +95,7 @@
   text-decoration: none;
   color: var(--pf-global--palette--black);
   cursor: pointer;
-  font-size: 0.9rem;
+  font-size: 0.8rem;
 }
 
 .kuadrant-dashboard-resource-link:hover {