@meduza/ui-kit-2 0.2.0 → 0.2.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "0.2.2",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",

package/src/DonatesTeaser/DonatesTeaser.module.css

@@ -14,7 +14,7 @@
 
   text-decoration: none;
 
-  background-color: #f66861;
+  background-color: #000;
 
   outline-width: 0;
 
@@ -26,10 +26,6 @@
   }
 }
 
-.root:hover .ctaInner::after {
-  opacity: 0.7;
-}
-
 .main {
   max-width: 852px;
   margin: 0 auto;
@@ -52,6 +48,8 @@
 }
 
 .text {
+  display: block;
+
   margin: 0;
 
   font-weight: normal;
@@ -82,7 +80,7 @@
 .cta a {
   display: block;
 
-  color: rgba(246, 104, 97, 1);
+  color: #fff;
   font-weight: 600;
 
   font-size: 11px;
@@ -116,19 +114,15 @@
 
 .ctaInner::after {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  top: 50%;
+  left: 50%;
   z-index: -1;
 
-  background-color: #eafe0b;
-
-  border-radius: 40px;
-
-  filter: blur(10px);
+  width: 501px;
+  height: 112px;
 
-  transition: opacity 250ms ease;
+  background-image: url("data:image/svg+xml,%3Csvg width='501' height='112' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_f)'%3E%3Cpath d='M466 56s-96.463 21-215.401 21C131.662 77 35 56 35 56s96.463-21 215.401-21C369.338 35 466 56 466 56z' fill='%23947E5D'/%3E%3C/g%3E%3Cg filter='url(%23filter1_df)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M140.431 55.604c0-11.38 9.224-20.604 20.603-20.604h178.932c11.379 0 20.604 9.225 20.604 20.604s-9.225 20.603-20.604 20.603H161.034c-11.379 0-20.603-9.224-20.603-20.603z' fill='%23000'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f' x='0' y='0' width='501' height='112' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='17.5' result='effect1_foregroundBlur'/%3E%3C/filter%3E%3Cfilter id='filter1_df' x='106.431' y='1' width='288.139' height='109.208' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='17'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3CfeGaussianBlur stdDeviation='2' result='effect2_foregroundBlur'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
+  transform: translate(-50%, -50%);
 
   content: '';
 }

package/src/DonatesTeaser/index.tsx

@@ -17,16 +17,15 @@ export const DonatesTeaser: React.FC<DonatesTeaserProps> = ({
 
   const data = {
     ru: {
-      title: 'Слушайте музыку, помогайте «Медузе»',
-      // subtitle:
-      //   '&laquo;Медуза&raquo; продолжает работать, потому что есть&nbsp;вы',
-      button: 'Дать денег',
+      title: 'Мы не сдаемся',
+      subtitle: 'Потому что вы с нами',
+      button: '«Медуза», я с тобой ',
       href: 'https://support.meduza.io'
     },
     en: {
-      title: 'Tune in and help Meduza!',
-      // subtitle: 'We’re only here thanks to you.',
-      button: 'Pledge today',
+      title: 'We won’t give up',
+      subtitle: 'Because you’re with us',
+      button: 'I’m with you, Meduza',
       href: 'https://support.meduza.io/en'
     }
   }
@@ -36,11 +35,11 @@ export const DonatesTeaser: React.FC<DonatesTeaserProps> = ({
       <div className={styles.main}>
         <h3 className={styles.title}>
           <span dangerouslySetInnerHTML={{ __html: data[lang].title }} />
-          {/* {` `}
+          {` `}
           <span
             className={styles.text}
             dangerouslySetInnerHTML={{ __html: data[lang].subtitle }}
-          /> */}
+          />
         </h3>
       </div>
 

package/src/ShopRelatedBlock/ShopRelatedBlock.module.css

@@ -7,9 +7,10 @@
   display: block;
   overflow: hidden;
 
+  color: #000;
+
   text-decoration: none;
 
-  color: #000;
   border-radius: 8px;
   outline-width: 0;
 
@@ -26,15 +27,15 @@
 
 .root::after {
   position: absolute;
-  z-index: 20;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-
-  content: '';
+  z-index: 20;
 
   border-radius: 8px;
+
+  content: '';
 }
 
 .root::before {
@@ -60,9 +61,9 @@
 .overlay,
 .overlayHeader {
   position: absolute;
-  z-index: 10;
   right: 0;
   left: 0;
+  z-index: 10;
 }
 
 .overlay {
@@ -88,10 +89,10 @@
 
   @media $mobile {
     position: absolute;
-    z-index: 10;
     right: 0;
     bottom: 0;
     left: 0;
+    z-index: 10;
 
     min-height: 295px;
     padding: 20px;
@@ -103,10 +104,10 @@
 .hasGradient .body {
   @media $mobile {
     position: absolute;
-    z-index: 10;
     right: 0;
     bottom: 0;
     left: 0;
+    z-index: 10;
 
     min-height: 295px;
 
@@ -120,15 +121,15 @@
 
 .picture::after {
   position: absolute;
-  z-index: 10;
   right: 1px;
   bottom: 0;
   left: 1px;
-
-  content: '';
+  z-index: 10;
 
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
+  content: '';
+
   @media $mobile {
     content: '';
   }
@@ -136,10 +137,10 @@
 
 .tag {
   position: absolute;
-  z-index: 10;
   top: 14px;
   right: 15px;
   left: 15px;
+  z-index: 10;
 
   color: rgba(255, 255, 255, 0.7);
 
@@ -160,9 +161,9 @@
 }
 
 .title {
-  font-family: $secondaryFont;
-  font-size: 19px;
   font-weight: 700;
+  font-size: 19px;
+  font-family: $secondaryFont;
   line-height: 23px;
 
   @media $landscapeTablet {