Adjusting the styling use for the card

pegasystems · Apr 5, 2024 · a295e76 · a295e76
1 parent 85bba53
commit a295e76
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git 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
@@ -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;