From 3374e9677a91d179b49a61640b288ca791d35efa Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Fri, 21 Oct 2022 16:24:24 +0300
Subject: [PATCH] Rewrite banner component to css module

---
 .../Discours/{Banner.scss => Banner.module.scss}       | 10 +++-------
 src/components/Discours/Banner.tsx                     |  9 +++++----
 2 files changed, 8 insertions(+), 11 deletions(-)
 rename src/components/Discours/{Banner.scss => Banner.module.scss} (82%)

diff --git a/src/components/Discours/Banner.scss b/src/components/Discours/Banner.module.scss
similarity index 82%
rename from src/components/Discours/Banner.scss
rename to src/components/Discours/Banner.module.scss
index 36557922..5a8bfc89 100644
--- a/src/components/Discours/Banner.scss
+++ b/src/components/Discours/Banner.module.scss
@@ -1,4 +1,4 @@
-.discours-banner {
+.discoursBanner {
   background: #f8f8f8;
   margin-bottom: 6.4rem;
   padding: 0.8rem 0 0;
@@ -7,10 +7,6 @@
     font-size: 80%;
   }
 
-  @include media-breakpoint-up(md) {
-    margin-top: -6.4rem;
-  }
-
   h3 {
     font-size: 3.2rem;
     font-weight: 800;
@@ -29,7 +25,7 @@
   }
 }
 
-.discours-banner__content {
+.discoursBannerContent {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -47,7 +43,7 @@
   }
 }
 
-.discours-banner__image {
+.discoursBannerImage {
   align-items: flex-end;
   display: flex;
 }
diff --git a/src/components/Discours/Banner.tsx b/src/components/Discours/Banner.tsx
index 22438dd7..17c8875a 100644
--- a/src/components/Discours/Banner.tsx
+++ b/src/components/Discours/Banner.tsx
@@ -1,12 +1,13 @@
-import './Banner.scss'
+import styles from './Banner.module.scss'
 import { t } from '../../utils/intl'
 import { showModal } from '../../stores/ui'
+import {clsx} from "clsx";
 
 export default () => {
   return (
-    <div class="discours-banner">
+    <div class={styles.discoursBanner}>
       <div class="wide-container row">
-        <div class="discours-banner__content col-lg-5">
+        <div class={clsx(styles.discoursBannerContent, 'col-lg-5')}>
           <h3>{t('Discours is created with our common effort')}</h3>
           <p>
             <a href="/about/help">{t('Support us')}</a>
@@ -16,7 +17,7 @@ export default () => {
             </a>
           </p>
         </div>
-        <div class="col-lg-6 offset-lg-1 discours-banner__image">
+        <div class={clsx(styles.discoursBannerImage, 'col-lg-6 offset-lg-1')}>
           <img src="/discours-banner.jpg" alt={t('Discours')} />
         </div>
       </div>