From b13eb1c91d0ab67b5d4aaf653d4fdc809669d7ab Mon Sep 17 00:00:00 2001
From: MrTRyy <67070141+MrTRyy@users.noreply.github.com>
Date: Sat, 23 Dec 2023 23:43:38 +0100
Subject: [PATCH] Add new FancyMiniContentCard components

---
 src/Routes/ExperimentalRoute/ExperimentalRoute.tsx        | 8 +++++---
 src/components/atoms/FancyCard/FancyCard.style.tsx        | 7 ++++++-
 src/components/atoms/FancyCard/FancyCard.tsx              | 4 ++--
 .../FancyMiniContentCard/FancyMiniContentCard.style.tsx   | 2 --
 .../FancyMiniContentCard/FancyMiniContentCard.tsx         | 6 +++---
 .../templates/FancyMiniContentCard/sizeSettings.ts        | 2 +-
 6 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
index a306a00e5..1955e430c 100644
--- a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
+++ b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
@@ -65,11 +65,13 @@ export default function ExperimentalRoute() {
 
   return (
     <>
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+        <FancyMiniContentCard size="sm" title="Test klkfkl dlfklkfdklfd " symbol={Icon} />
+        <FancyMiniContentCard size="md" title="Test kkdfk jkjkjkdf" symbol={Icon} />
+        <FancyMiniContentCard size="lg" title="Test kdlkdfklfdkl klkl" symbol={Icon} />
+      </div>
       <DesignWrapper>
         <DesignArea title="Test">
-          <FancyMiniContentCard size="sm" title="Test" symbol={Icon} />
-          <FancyMiniContentCard size="md" title="Test" symbol={Icon} />
-          <FancyMiniContentCard size="lg" title="Test" symbol={Icon} />
           <FancyCard>
             <FancyContent flexDirection="column" flexJustify="center">
               <FancyContent.Icon size="xl">
diff --git a/src/components/atoms/FancyCard/FancyCard.style.tsx b/src/components/atoms/FancyCard/FancyCard.style.tsx
index 4326b3a67..83599e507 100644
--- a/src/components/atoms/FancyCard/FancyCard.style.tsx
+++ b/src/components/atoms/FancyCard/FancyCard.style.tsx
@@ -14,9 +14,14 @@ type IStyledCard = IStyledPrefixAndOmiter<StyledCardProps>;
 //the main design of the card
 export const StyledCard = styled(FancyBox)<IStyledCard & { theme: TTheme }>`
   display: inline-block;
-  overflow: hidden;
   box-sizing: border-box;
+  aspect-ratio: 1/1;
   padding: ${({ $padding, $size = 'md', theme }) => ($padding ? theme.spacing[sizeSettings[$size].padding] : '')};
   border-radius: ${({ $roundedEdges }) => ($roundedEdges ? edgeCalculation($roundedEdges) : '')};
   ${({ $shadow }) => $shadow && boxShadow.sm};
 `;
+
+export const InnerCard = styled.div`
+  width: 100%;
+  height: 100%;
+`;
diff --git a/src/components/atoms/FancyCard/FancyCard.tsx b/src/components/atoms/FancyCard/FancyCard.tsx
index 535fa55df..eb1a1dd47 100644
--- a/src/components/atoms/FancyCard/FancyCard.tsx
+++ b/src/components/atoms/FancyCard/FancyCard.tsx
@@ -1,4 +1,4 @@
-import { StyledCard } from './FancyCard.style';
+import { InnerCard, StyledCard } from './FancyCard.style';
 import { IFancyBox } from '@/components/atoms/FancyBox/';
 import { StyledCardProps } from '@/components/atoms/FancyCard/Card.model';
 
@@ -21,7 +21,7 @@ export default function FancyCard(props: ICard) {
 
   return (
     <StyledCard $size={size} $padding={padding} $roundedEdges={roundedEdges} $shadow={shadow} {...fancyBox}>
-      {children}
+      <InnerCard>{children}</InnerCard>
     </StyledCard>
   );
 }
diff --git a/src/components/templates/FancyMiniContentCard/FancyMiniContentCard.style.tsx b/src/components/templates/FancyMiniContentCard/FancyMiniContentCard.style.tsx
index 3f6b11200..f77379947 100644
--- a/src/components/templates/FancyMiniContentCard/FancyMiniContentCard.style.tsx
+++ b/src/components/templates/FancyMiniContentCard/FancyMiniContentCard.style.tsx
@@ -1,12 +1,10 @@
 import { styled } from 'styled-components';
 
 import { FancyCard } from '@/components/atoms/FancyCard';
-import { sizeSettings } from './sizeSettings';
 import { TFancyMiniContentCardProps } from './FancyMiniContentCard';
 import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker';
 
 type IStyledCard = IStyledPrefixAndPicker<TFancyMiniContentCardProps, 'size'>;
 export const StyledCard = styled(FancyCard)<IStyledCard>`
   aspect-ratio: 1/1;
-  width: ${({ $size = 'md' }) => sizeSettings[$size].size};
 `;
diff --git a/src/components/templates/FancyMiniContentCard/FancyMiniContentCard.tsx b/src/components/templates/FancyMiniContentCard/FancyMiniContentCard.tsx
index 377d53c70..57df5f00b 100644
--- a/src/components/templates/FancyMiniContentCard/FancyMiniContentCard.tsx
+++ b/src/components/templates/FancyMiniContentCard/FancyMiniContentCard.tsx
@@ -14,14 +14,14 @@ export type TFancyMiniContentCardProps = {
 };
 
 export default function FancyMiniContentCard(props: TFancyMiniContentCardProps) {
-  const { size } = props;
+  const { size, title, description } = props;
   return (
     <StyledCard $size={size}>
       <FancyFlexBox flexDirection="column" flexAlign="center" flexJustify="center" fitBox>
         <FancySVGAtom size="xl">{props.symbol}</FancySVGAtom>
 
-        <Typography type="h4">Moooiin</Typography>
-        <Typography type="content">Moooiin</Typography>
+        <Typography type="h4">{title}</Typography>
+        <Typography type="content">{description}</Typography>
       </FancyFlexBox>
     </StyledCard>
   );
diff --git a/src/components/templates/FancyMiniContentCard/sizeSettings.ts b/src/components/templates/FancyMiniContentCard/sizeSettings.ts
index 4a90285af..2f57f93d2 100644
--- a/src/components/templates/FancyMiniContentCard/sizeSettings.ts
+++ b/src/components/templates/FancyMiniContentCard/sizeSettings.ts
@@ -10,7 +10,7 @@ export const sizeSettings = {
     borderRadius: 'lg',
   },
   lg: {
-    size: globalSizes.lg.elementSize,
+    size: globalSizes.xxl.elementSize,
     padding: 'xl',
     borderRadius: 'xl',
   },