From a295e763e350d0eb2da0c17a997d32a471edfae4 Mon Sep 17 00:00:00 2001
From: Pamela Iglesias <pamela.iglesias@pega.com>
Date: Fri, 5 Apr 2024 15:13:53 -0300
Subject: [PATCH] Adjusting the styling use for the card

---
 src/components/Pega_Extensions_CaseLauncher/index.tsx | 3 ++-
 src/components/Pega_Extensions_CaseLauncher/styles.ts | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Pega_Extensions_CaseLauncher/index.tsx b/src/components/Pega_Extensions_CaseLauncher/index.tsx
index 8c47ffc..13b2b37 100644
--- a/src/components/Pega_Extensions_CaseLauncher/index.tsx
+++ b/src/components/Pega_Extensions_CaseLauncher/index.tsx
@@ -7,6 +7,7 @@ import {
   Button,
   Configuration
 } from '@pega/cosmos-react-core';
+import StyledCard from './styles';
 
 // interface for props
 export type CaseLauncherProps = {
@@ -38,7 +39,7 @@ export default function PegaExtensionsCaseLauncher(props: CaseLauncherProps) {
 
   return (
     <Configuration>
-      <Card>
+      <Card as={StyledCard}>
         <CardHeader>
           <Text variant='h2'>{heading}</Text>
         </CardHeader>
diff --git a/src/components/Pega_Extensions_CaseLauncher/styles.ts b/src/components/Pega_Extensions_CaseLauncher/styles.ts
index 6a51aa1..cb393b5 100644
--- a/src/components/Pega_Extensions_CaseLauncher/styles.ts
+++ b/src/components/Pega_Extensions_CaseLauncher/styles.ts
@@ -1,10 +1,11 @@
 import styled, { css } from 'styled-components';
 import { themeDefinition } from '@pega/cosmos-react-core';
 
-export default styled.article(({ theme }: { theme: typeof themeDefinition }) => {
+const StyledCard = styled.article(({ theme }: { theme: typeof themeDefinition }) => {
   return css`
     background-color: ${theme.base.colors.white};
     border-radius: 0.25rem;
     width: 100%;
   `;
 });
+export default StyledCard;