Convert donate form styles to css module

src/components/Discours/Donate.module.scss

@@ -1,6 +1,6 @@
-.donate-form input,
+.donateForm input,
-.donate-form label,
+.donateForm label,
-.donate-form .btn {
+.donateForm .btn {
   font-family: Muller, Arial, Helvetica, sans-serif;
   border: solid 1px #595959;
   border-radius: 3px;
@@ -10,7 +10,7 @@
   text-align: center;
 }
 
-.donate-form input {
+.donateForm input {
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     appearance: none;
@@ -48,7 +48,7 @@
   }
 }
 
-.donate-form .btn {
+.donateForm .btn {
   cursor: pointer;
   flex: 1;
   padding: 5px 10px;
@@ -63,7 +63,7 @@
   }
 }
 
-.btn-group {
+.btnGroup {
   input {
     &:first-child + .btn {
       border-top-right-radius: 0;
@@ -76,12 +76,12 @@
     }
   }
 
-  .payment-type {
+  .paymentType {
     width: 50%;
   }
 }
 
-.donate-buttons-container {
+.donateButtonsContainer {
   align-items: center;
   display: flex;
   flex: 1;
@@ -113,14 +113,14 @@
   }
 }
 
-.donate-input {
+.donateInput {
   @include media-breakpoint-down(sm) {
     flex: 1 100%;
     margin: 0 !important;
   }
 }
 
-.send-btn {
+.sendBtn {
   border: 2px solid #000;
   background-color: #000;
   color: #fff !important;
@@ -137,40 +137,10 @@
   }
 }
 
-.payment-choose {
+.paymentChoose {
   display: flex;
 }
 
-.form-group:not(:first-child) {
+.formGroup:not(:first-child) {
   margin-top: 20px;
 }
-
-.discours-help .modalwrap__inner {
-  max-width: 500px;
-}
-
-/*
-
-.payment-form {
-padding: 0 !important;
-
-.button {
-	display: block;
-	padding-bottom: 1.5rem;
-	padding-top: 1.5rem;
-	width: 100%;
-}
-}
-
-.delimiter-container {
-position: relative;
-}
-
-.delimiter {
-left: 100%;
-line-height: 1;
-position: absolute;
-top: 50%;
-transform: translate(-50%, calc(-50% - 0.8rem));
-}
-*/

src/components/Discours/Donate.tsx

@@ -1,10 +1,12 @@
-import '../../styles/help.scss'
+import { clsx } from 'clsx'
 import { createSignal, onMount } from 'solid-js'
 
 import { useLocalize } from '../../context/localize'
 import { useSnackbar } from '../../context/snackbar'
 import { showModal } from '../../stores/ui'
 
+import styles from './Donate.module.scss'
+
 export const Donate = () => {
   const { t } = useLocalize()
   const once = ''
@@ -119,27 +121,27 @@ export const Donate = () => {
   }
 
   return (
-    <form class="discours-form donate-form" action="" method="post">
+    <form class={styles.donateForm} action="" method="post">
       <input type="hidden" name="shopId" value="156465" />
       <input value="148805" name="scid" type="hidden" />
       <input value="0" name="customerNumber" type="hidden" />
 
-      <div class="form-group">
+      <div class={styles.formGroup}>
-        <div class="donate-buttons-container" ref={amountSwitchElement}>
+        <div class={styles.donateButtonsContainer} ref={amountSwitchElement}>
           <input type="radio" name="amount" id="fix250" value="250" />
-          <label for="fix250" class="btn donate-value-radio">
+          <label for="fix250" class={styles.btn}>
             250&thinsp;₽
           </label>
           <input type="radio" name="amount" id="fix500" value="500" checked />
-          <label for="fix500" class="btn donate-value-radio">
+          <label for="fix500" class={styles.btn}>
             500&thinsp;₽
           </label>
           <input type="radio" name="amount" id="fix1000" value="1000" />
-          <label for="fix1000" class="btn donate-value-radio">
+          <label for="fix1000" class={styles.btn}>
             1000&thinsp;₽
           </label>
           <input
-            class="form-control donate-input"
+            class={styles.donateInput}
             required
             ref={customAmountElement}
             type="number"
@@ -149,8 +151,8 @@ export const Donate = () => {
         </div>
       </div>
 
-      <div class="form-group" id="payment-type" classList={{ showing: showingPayment() }}>
+      <div class={styles.formGroup} id="payment-type" classList={{ showing: showingPayment() }}>
-        <div class="btn-group payment-choose" data-toggle="buttons">
+        <div class={clsx(styles.btnGroup, styles.paymentChoose)} data-toggle="buttons">
           <input
             type="radio"
             autocomplete="off"
@@ -159,7 +161,11 @@ export const Donate = () => {
             onClick={() => setPeriod(once)}
             checked={period() === once}
           />
-          <label for="once" class="btn payment-type" classList={{ active: period() === once }}>
+          <label
+            for="once"
+            class={clsx(styles.btn, styles.paymentType)}
+            classList={{ active: period() === once }}
+          >
             {t('One time')}
           </label>
           <input
@@ -170,14 +176,18 @@ export const Donate = () => {
             onClick={() => setPeriod(monthly)}
             checked={period() === monthly}
           />
-          <label for="monthly" class="btn payment-type" classList={{ active: period() === monthly }}>
+          <label
+            for="monthly"
+            class={clsx(styles.btn, styles.paymentType)}
+            classList={{ active: period() === monthly }}
+          >
             {t('Every month')}
           </label>
         </div>
       </div>
 
-      <div class="form-group">
+      <div class={styles.formGroup}>
-        <a href={''} class="btn send-btn donate" onClick={show}>
+        <a href={''} class={clsx(styles.btn, styles.sendBtn)} onClick={show}>
           {t('Help discours to grow')}
         </a>
       </div>

src/components/Views/StaticPage.tsx

@@ -1,6 +1,7 @@
+import { JSX } from 'solid-js'
+
 import { PageLayout } from '../_shared/PageLayout'
 import { TableOfContents } from '../TableOfContents'
-import { JSX } from 'solid-js'
 
 export const StaticPage = (props: {
   title: string

src/pages/about/guide.page.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@solidjs/meta'
 
-import { useLocalize } from '../../context/localize'
 import { StaticPage } from '../../components/Views/StaticPage'
+import { useLocalize } from '../../context/localize'
 
 export const GuidePage = () => {
   const { t } = useLocalize()

src/pages/about/help.page.tsx

@@ -1,8 +1,8 @@
 import { Meta } from '@solidjs/meta'
 
 import { Donate } from '../../components/Discours/Donate'
-import { useLocalize } from '../../context/localize'
 import { StaticPage } from '../../components/Views/StaticPage'
+import { useLocalize } from '../../context/localize'
 
 export const HelpPage = () => {
   const { t } = useLocalize()

src/pages/about/manifest.page.tsx

@@ -2,8 +2,8 @@ import { Subscribe } from '../../components/_shared/Subscribe'
 import { Feedback } from '../../components/Discours/Feedback'
 import { Modal } from '../../components/Nav/Modal'
 import Opener from '../../components/Nav/Modal/Opener'
-import { useLocalize } from '../../context/localize'
 import { StaticPage } from '../../components/Views/StaticPage'
+import { useLocalize } from '../../context/localize'
 
 export const ManifestPage = () => {
   const { t } = useLocalize()