From 0827521104854c5e991915f6d9ca49805b09f4b8 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Wed, 11 Sep 2024 23:06:38 +0100 Subject: Make card styles more robust and usable --- thallium-frontend/src/components/Card.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/thallium-frontend/src/components/Card.tsx b/thallium-frontend/src/components/Card.tsx index ac38c5a..d4fa5a7 100644 --- a/thallium-frontend/src/components/Card.tsx +++ b/thallium-frontend/src/components/Card.tsx @@ -18,7 +18,7 @@ const CardTitle = styled.div<{ $seamless?: boolean; }>` top: -16px; left: 16px; background-color: ${({ theme }) => theme.cardBackgroundColor}; - ${({ $seamless, theme }) => $seamless ? "" : `background: linear-gradient(0deg, ${theme.cardBackgroundColor} 0%, ${theme.cardBackgroundColor} 45%, ${theme.backgroundColor} 55%)`}; + ${({ $seamless, theme }) => $seamless ? "" : `background: linear-gradient(0deg, ${theme.cardBackgroundColor}ff 0%, ${theme.cardBackgroundColor}ff 45%, ${theme.backgroundColor}ff 50%, ${theme.backgroundColor}00 50%)`}; padding: 0 8px; font-weight: bold; z-index: 1; @@ -29,15 +29,18 @@ interface CardProps { title: string; children: React.ReactNode; seamless?: boolean; + className?: string; } -const Card: React.FC = ({ title, children, seamless }: CardProps) => { +const Card: React.FC = ({ title, children, seamless, className }: CardProps) => { return ( - + {title} {children} ); }; -export default Card; +const StyledCard = styled(Card)``; + +export default StyledCard; -- cgit v1.2.3