oddsgate-ds 1.0.58 → 1.0.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.58",
+  "version": "1.0.59",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/molecules/BlogCard/BlogCard.theme.ts

@@ -18,19 +18,6 @@ export const StyledBlogCard = styled(Card) <IBlogCard>`
     z-index: 10;
   }
 
-  & picture{
-    &:before{
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0,0,0,0.5);
-      z-index: 1;
-    }
-  }
-
   & figcaption{
 
   }

package/src/components/molecules/EventsCard/EventsCard.component.tsx

@@ -20,21 +20,21 @@ const EventsCard = ({
     <StyledEventsCard
       variant={variant}
       imageElement={
-        <ImageWrapper aspectRatioHeight={63}>{imageElement}</ImageWrapper>
+        <ImageWrapper aspectRatioHeight={100}>{imageElement}</ImageWrapper>
       }
     >
-      {category && <Chip variant='light' className='mb-5'>{category}</Chip>}
-      <Heading tag={'h3'} size={'h4'} className={'fw-bold textEllipsis'}>
+      {category && <Chip variant='dark' className='mb-5'>{category}</Chip>}
+      <Heading tag={'span'} size={'h4'} className={'fw-bold textEllipsis'}>
         {title}
       </Heading>
       {date && (
-        <RichText tag={'p'} className="text-end fw-bold mt-6">
+        <Heading tag={'span'} size={'h5'} className={'mt-3'}>
           {date}
-        </RichText>
+        </Heading>
       )}
 
       {linkElement}
-    </StyledEventsCard>
+    </StyledEventsCard >
   )
 }
 

package/src/components/molecules/EventsCard/EventsCard.theme.ts

@@ -3,23 +3,27 @@ import styled, { css } from 'styled-components';
 
 import Card from '../Card/Card.component';
 import { IEventsCard } from './EventsCard.interface';
-import { StyledChip } from '@/components/atoms/Chip/Chip.theme';
 
 export const StyledEventsCard = styled(Card) <IEventsCard>`
-  padding: 0;
-  background-color: ${colors.third50};
+  padding: 8px;
+  border-radius: 1.6rem;
+  transition: all 0.3s;
 
   picture{
-    border-radius: ${radius.rounded};
+    border-radius: 100%;
   }
   & figcaption{
-    padding:3rem;
+    color: ${colors.third10};
+    padding:0;
+    margin-top: 1rem;
   }
 
 
   &:hover{
-    & figcaption{
+    background-color: ${colors.third10};
 
+    & figcaption{
+      color: ${colors.secondary50};
     }
   }
 `;

package/src/components/molecules/NewsCard/NewsCard.theme.ts

@@ -6,15 +6,21 @@ import { INewsCard } from './NewsCard.interface';
 import { StyledChip } from '@/components/atoms/Chip/Chip.theme';
 
 export const StyledNewsCard = styled(Card) <INewsCard>`
-  padding: 0;
-  background-color: ${colors.third50};
-  border-radius: ${radius.rounded};
+  padding: 1rem;
+  color: ${colors.secondary50};
+  background-color: ${colors.third10};
+  border-radius: ${radius.sm};
 
-  picture{
-    border-radius: 0;
+
+  ${StyledChip}{
+    position: absolute;
+    top: 2rem;
+    left: 2rem;
+    z-index: 10;
   }
+
   & figcaption{
-    padding:3rem;
+
   }
 
 
@@ -23,20 +29,5 @@ export const StyledNewsCard = styled(Card) <INewsCard>`
 
     }
   }
-
-  @media only screen and (min-width: ${responsiveMedia}) {
-    display: flex;
-
-    & picture{
-      width: 30%;
-      order: 2;
-    }
-
-    & figcaption{
-      width: 70%;
-      padding: 3rem 5rem;
-      order: 1;
-    }
-  }
 `;