Update #4018 and #4019

kkartunov · kkartunov · commit c78a268a3ec4 · 2020-02-24T12:39:52.000+02:00
diff --git a/src/shared/components/Contentful/Article/themes/default.scss b/src/shared/components/Contentful/Article/themes/default.scss
@@ -1,5 +1,5 @@
 @import "~styles/mixins";
-@import "../../ContentBlock/themes/TCO19_thypo";
+@import "~components/Contentful/default";
 
 .bannerBottomShape {
   background-image: url(assets/images/wave.svg);
@@ -170,14 +170,15 @@
       text-transform: uppercase;
     }
 
-    @include TCO19-default-headers;
+    @include gui-kit-headers;
 
     p {
       @include tc-body-md;
 
       color: $tco-black;
       font-size: 16px;
       line-height: 26px;
+      margin-bottom: 20px;
 
       strong {
         @include roboto-medium;
@@ -260,8 +261,13 @@
     }
 
     img {
-      max-width: 100%;
+      max-width: 70%;
       border-radius: 6px;
+      margin-bottom: 20px;
+
+      @include xs-to-sm {
+        max-width: 100%;
+      }
     }
 
     code {
diff --git a/src/shared/components/Contentful/Banner/themes/tco19.scss b/src/shared/components/Contentful/Banner/themes/tco19.scss
@@ -1,7 +1,7 @@
 /* TCO19 banner styling. */
 
 @import "~styles/mixins";
-@import "../../ContentBlock/themes/TCO19_thypo";
+@import "~components/Contentful/default";
 $contentWrapperPadding: 0;
 
 .container {
@@ -44,7 +44,7 @@ $contentWrapperPadding: 0;
         text-transform: uppercase;
       }
 
-      @include TCO19-default-headers;
+      @include gui-kit-headers;
 
       p {
         font-size: 16px;
diff --git a/src/shared/components/Contentful/Banner/themes/tco20.scss b/src/shared/components/Contentful/Banner/themes/tco20.scss
@@ -1,7 +1,7 @@
 /* TCO20 banner styling. */
 
 @import "~styles/mixins";
-@import "../../ContentBlock/themes/TCO19_thypo";
+@import "~components/Contentful/default";
 $contentWrapperPadding: 0;
 
 .container {
@@ -44,7 +44,7 @@ $contentWrapperPadding: 0;
         text-transform: uppercase;
       }
 
-      @include TCO19-default-headers;
+      @include gui-kit-headers;
 
       p {
         font-size: 16px;
diff --git a/src/shared/components/Contentful/ContentBlock/themes/TCO19.scss b/src/shared/components/Contentful/ContentBlock/themes/TCO19.scss
@@ -1,5 +1,5 @@
 @import "~styles/mixins";
-@import "./TCO19_thypo";
+@import "~components/Contentful/default";
 
 .contentWrapper {
   display: flex;
@@ -47,7 +47,7 @@
     color: $tco-black;
   }
 
-  @include TCO19-default-headers;
+  @include gui-kit-headers;
 
   p {
     @include tc-body-md;
diff --git a/src/shared/components/Contentful/ContentBlock/themes/TCO20.scss b/src/shared/components/Contentful/ContentBlock/themes/TCO20.scss
@@ -1,5 +1,5 @@
 @import "~styles/mixins";
-@import "./TCO19_thypo";
+@import "~components/Contentful/default";
 
 .contentWrapper {
   display: flex;
@@ -43,18 +43,19 @@
   h4,
   h5,
   h6 {
-    margin: 20px 0 10px;
     color: $tco-black;
   }
 
-  @include TCO19-default-headers;
+  @include gui-kit-headers;
 
   p {
     @include tc-body-md;
 
     color: $tco-black;
     font-size: 16px;
     line-height: 26px;
+    margin-bottom: 20px;
+    margin-top: 0px;
 
     strong {
       @include roboto-medium;
diff --git a/src/shared/components/Contentful/ContentBlock/themes/_TCO19_thypo.scss b/src/shared/components/Contentful/ContentBlock/themes/_TCO19_thypo.scss
diff --git a/src/shared/components/Contentful/ContentBlock/themes/blobCard.scss b/src/shared/components/Contentful/ContentBlock/themes/blobCard.scss
@@ -1,5 +1,5 @@
 @import "~styles/mixins";
-@import "./TCO19_thypo";
+@import "~components/Contentful/default";
 
 .contentWrapper {
   background-color: #0ab88a;
@@ -32,7 +32,7 @@
     text-transform: uppercase;
   }
 
-  @include TCO19-default-headers;
+  @include gui-kit-headers;
 
   p {
     font-family: "Roboto", Helvetica, Arial, sans-serif;
diff --git a/src/shared/components/Contentful/ContentBlock/themes/largeCard.scss b/src/shared/components/Contentful/ContentBlock/themes/largeCard.scss
@@ -1,5 +1,5 @@
 @import "~styles/mixins";
-@import "./TCO19_thypo";
+@import "~components/Contentful/default";
 
 .contentWrapper {
   background-color: #555;
@@ -40,7 +40,7 @@
     margin-bottom: 20px;
   }
 
-  @include TCO19-default-headers;
+  @include gui-kit-headers;
 
   p {
     font-family: "Roboto", Helvetica, Arial, sans-serif;
diff --git a/src/shared/components/Contentful/_default.scss b/src/shared/components/Contentful/_default.scss
@@ -1,3 +1,5 @@
+@import "~styles/mixins";
+
 @mixin default-headers {
   h1,
   h2,
@@ -50,3 +52,111 @@
     @include roboto-bold;
   }
 }
+
+@mixin gui-kit-headers {
+  h1 {
+    @include barlow-condensed-semi-bold;
+
+    font-size: 80px;
+    line-height: 74px;
+    text-transform: uppercase;
+    margin-top: 80px;
+    margin-bottom: 20px;
+
+    @include xs-to-sm {
+      font-size: 42px;
+      font-weight: 600;
+      line-height: 38px;
+      margin-top: 42px;
+      margin-bottom: 10px;
+    }
+  }
+
+  h2 {
+    @include barlow-condensed-medium;
+
+    font-size: 60px;
+    line-height: 58px;
+    text-transform: uppercase;
+    margin-top: 60px;
+    margin-bottom: 20px;
+
+    @include xs-to-sm {
+      font-size: 36px;
+      font-weight: 500;
+      margin-top: 36px;
+      margin-bottom: 10px;
+    }
+  }
+
+  h3 {
+    @include barlow-condensed-medium;
+
+    font-size: 48px;
+    line-height: 50px;
+    text-transform: uppercase;
+    margin-top: 40px;
+    margin-bottom: 20px;
+
+    @include xs-to-sm {
+      font-size: 31px;
+      font-weight: 500;
+      line-height: 33px;
+      margin-top: 31px;
+      margin-bottom: 10px;
+    }
+  }
+
+  h4 {
+    @include barlow-condensed-medium;
+
+    font-size: 34px;
+    line-height: 38px;
+    text-transform: uppercase;
+    margin-top: 40px;
+    margin-bottom: 10px;
+
+    @include xs-to-sm {
+      font-size: 25px;
+      font-weight: 500;
+      line-height: 27px;
+      margin-top: 25px;
+    }
+  }
+
+  h5 {
+    @include barlow-bold;
+
+    font-size: 24px;
+    line-height: 26px;
+    font-weight: 500;
+    text-transform: uppercase;
+    margin-top: 20px;
+    margin-bottom: 10px;
+
+    @include xs-to-sm {
+      font-size: 21px;
+      font-weight: 500;
+      line-height: 25px;
+      margin-top: 21px;
+    }
+  }
+
+  h6 {
+    @include barlow-bold;
+
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 500;
+    text-transform: uppercase;
+    margin-top: 20px;
+    margin-bottom: 10px;
+
+    @include xs-to-sm {
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 22px;
+      margin-top: 18px;
+    }
+  }
+}
diff --git a/src/shared/components/NewsletterSignupForMembers/modal.scss b/src/shared/components/NewsletterSignupForMembers/modal.scss
@@ -1,5 +1,5 @@
 @import "~styles/mixins";
-@import "~components/Contentful/ContentBlock/themes/TCO19_thypo";
+@import "~components/Contentful/default";
 
 .container {
   padding: 90px 60px;
@@ -18,7 +18,7 @@
 
 .modalMsg {
   @include tc-body-md;
-  @include TCO19-default-headers;
+  @include gui-kit-headers;
 
   margin: 24px 0;
   color: #2a2a2a;
