oddsgate-ds 1.0.99 → 1.0.101

package/package.json

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

package/src/components/atoms/FormField/FormField.theme.tsx

@@ -77,6 +77,25 @@ export const StyledFieldContainer = styled.div<IFormField>`
         }
       }
 
+      input::file-selector-button {
+        font-family: inherit;
+        color: ${colors.secondary50};
+        background-color: ${colors.primary50};
+        ${fontSize('h5')};
+        padding: 0.8rem 1.6rem;
+        border-radius: 50px;
+        text-transform: uppercase;
+
+        border: 0;
+        outline: 0;
+        cursor:pointer;
+        transition: all 0.3s ease;
+
+        &:hover{
+          opacity: 0.6;
+        }
+      }
+
       textarea{
         border-radius: 46px;
         height: 11.5rem;

package/src/components/atoms/SocialLinks/SocialLinks.theme.ts

@@ -1,7 +1,7 @@
+import { colors, responsiveMedia } from '@/styles/variables';
 import styled, { css } from 'styled-components';
 
 import { ISocialLinks } from './SocialLinks.interface';
-import { colors } from '@/styles/variables';
 
 export const StyledSocialLinks = styled.ul<ISocialLinks>`
   display: inline-flex;
@@ -15,8 +15,8 @@ export const StyledSocialLinks = styled.ul<ISocialLinks>`
       align-items: center;
       justify-content: center;
 
-      width: 2.8rem;
-      height: 2.8rem;
+      width: 4rem;
+      height: 4rem;
       border-radius: 50%;
       text-align: center;
 
@@ -32,6 +32,19 @@ export const StyledSocialLinks = styled.ul<ISocialLinks>`
     }
   }
 
+  @media only screen and (min-width: ${responsiveMedia}) {
+    & li{
+      & a{
+        width: 6rem;
+        height: 6rem;
+      }
+
+      & i{
+        font-size: 2.4rem;
+      }
+    }
+  }
+
   ${(props) => {
     switch (props.variant) {
       case "light": default:

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

@@ -35,7 +35,7 @@ const BlogCard = ({
         {description}
       </Heading>
       {date && (
-        <RichText tag={'p'} className="fw-bold mt-4">
+        <RichText tag={'span'} className="fw-bold mt-4">
           {date}
         </RichText>
       )}

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

@@ -20,6 +20,12 @@ export const StyledBlogCard = styled(Card) <IBlogCard>`
     z-index: 10;
   }
 
+  & picture{
+    & img{
+      opacity: 1 !important;
+    }
+  }
+
   & figcaption{
 
   }

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

@@ -1,4 +1,4 @@
-import { colors, radius } from '@/styles/variables';
+import { colors, radius, responsiveMedia } from '@/styles/variables';
 import styled, { css } from 'styled-components';
 
 import { ILicenseCard } from './LicenseCard.interface';
@@ -14,8 +14,15 @@ export const StyledLicenseCard = styled.div <ILicenseCard>`
 
   & img{
     width: 100%;
-    max-width: 7rem;
+    max-width: 4rem;
     object-fit: contain;
   }
+
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    & img{
+      max-width: 7rem;
+    }
+  }
 `;
 

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

@@ -20,10 +20,12 @@ const NewsCard = ({
     <StyledNewsCard
       $variant={variant}
       imageElement={
-        <ImageWrapper aspectRatioHeight={63}>{imageElement}</ImageWrapper>
+        <>
+          {category && <Chip variant='light'>{category}</Chip>}
+          <ImageWrapper aspectRatioHeight={63}>{imageElement}</ImageWrapper>
+        </>
       }
     >
-      {category && <Chip variant='light' className='mb-5'>{category}</Chip>}
       <Heading tag={'h3'} size={variant === "featured" ? "h3" : 'h4'} className={'fw-bold textEllipsis mt-4'}>
         {title}
       </Heading>

package/src/styles/variables.ts

@@ -173,7 +173,7 @@ export const grid_conf: {
   breakpoints: {
     $xs: "",
     $sm: "576px",
-    $md: "768px",
+    $md: "769px",
     $lg: "980px",
     $xl: "1280px"
   }