Mobile header Subscribe (#275)

src/components/Discours/Footer.tsx

@@ -1,7 +1,7 @@
 import { createMemo, For } from 'solid-js'
 import styles from './Footer.module.scss'
 import { Icon } from '../_shared/Icon'
-import Subscribe from './Subscribe'
+import { Subscribe } from '../_shared/Subscribe'
 
 import { clsx } from 'clsx'
 import { useLocalize } from '../../context/localize'

src/components/Nav/Header/Header.module.scss

@@ -244,40 +244,6 @@
   color: #696969;
 }
 
-.mobileSubscription {
-  margin-bottom: 5rem;
-
-  input[type='email'] {
-    background: #f7f7f8;
-    border: none;
-    border-radius: 1.6rem;
-    padding-right: 5.6rem;
-
-    &:not(:placeholder-shown) {
-      & ~ .mobileSubscriptionSubmit {
-        display: block;
-      }
-    }
-  }
-}
-
-.mobileSubscriptionSubmit {
-  aspect-ratio: 1/1;
-  display: none;
-  height: 100%;
-  position: absolute;
-  right: 0;
-  top: 0;
-
-  img {
-    aspect-ratio: 1/1;
-    left: 50%;
-    position: relative;
-    transform: translateX(-50%);
-    width: 16px !important;
-  }
-}
-
 .mainNavigationItemActive {
   background: var(--link-hover-background) !important;
   color: var(--link-hover-color) !important;

src/components/Nav/Header/Header.tsx

@@ -23,6 +23,7 @@ import styles from './Header.module.scss'
 import { apiClient } from '../../../utils/apiClient'
 import { RANDOM_TOPICS_COUNT } from '../../Views/Home'
 import { Link } from './Link'
+import { Subscribe } from '../../_shared/Subscribe'
 
 type Props = {
   title?: string
@@ -280,16 +281,7 @@ export const Header = (props: Props) => {
                 </ul>
 
                 <h4>{t('Newsletter')}</h4>
-                <form action="." class={styles.mobileSubscription}>
+                <Subscribe variant={'mobileSubscription'} />
-                  <div class="pretty-form__item">
-                    <input type="email" placeholder="Ваш email" id="subscription-email" />
-                    <label for="subscription-email">{t('Your email')}</label>
-                    <button class={styles.mobileSubscriptionSubmit}>
-                      <Icon name="arrow-right" />
-                    </button>
-                  </div>
-                </form>
-
                 <p
                   class={styles.mobileDescription}
                   innerHTML={t(

src/components/_shared/Subscribe/Subscribe.module.scss

@@ -60,3 +60,37 @@
   line-height: 16px;
   color: #d00820;
 }
+
+.mobileSubscription {
+  margin-bottom: 5rem;
+
+  input[type='email'] {
+    background: #f7f7f8;
+    border: none;
+    border-radius: 1.6rem;
+    padding-right: 5.6rem;
+
+    &:not(:placeholder-shown) {
+      & ~ .mobileSubscriptionSubmit {
+        display: block;
+      }
+    }
+  }
+}
+
+.mobileSubscriptionSubmit {
+  aspect-ratio: 1/1;
+  display: none;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  img {
+    aspect-ratio: 1/1;
+    left: 50%;
+    position: relative;
+    transform: translateX(-50%);
+    width: 16px !important;
+  }
+}

src/components/_shared/Subscribe/Subscribe.tsx

@@ -1,13 +1,15 @@
 import { createSignal, JSX, Show } from 'solid-js'
-
+import { useLocalize } from '../../../context/localize'
-import { useLocalize } from '../../context/localize'
+import { validateEmail } from '../../../utils/validateEmail'
-import { validateEmail } from '../../utils/validateEmail'
+import { Button } from '../Button'
-import { Button } from '../_shared/Button'
-
 import styles from './Subscribe.module.scss'
-import { useSnackbar } from '../../context/snackbar'
+import { useSnackbar } from '../../../context/snackbar'
+import { Icon } from '../Icon'
 
-export default () => {
+type Props = {
+  variant?: 'mobileSubscription'
+}
+export const Subscribe = (props: Props) => {
   const { t } = useLocalize()
 
   const [title, setTitle] = createSignal('')
@@ -69,19 +71,36 @@ export default () => {
   }
 
   return (
-    <form class={styles.form} onSubmit={handleSubmit} novalidate>
+    <form
+      class={props.variant === 'mobileSubscription' ? styles.mobileSubscription : styles.form}
+      onSubmit={handleSubmit}
+      novalidate
+    >
       <Show when={!title()} fallback={title()}>
-        <div class={styles.controls}>
+        <Show
-          <input
+          when={props.variant === 'mobileSubscription'}
-            type="email"
+          fallback={
-            name="email"
+            <div class={styles.controls}>
-            value={email()}
+              <input
-            onInput={handleInput}
+                type="email"
-            class={styles.input}
+                name="email"
-            placeholder={t('Fill email')}
+                value={email()}
-          />
+                onInput={handleInput}
-          <Button class={styles.button} type="submit" variant="secondary" value={t('Subscribe')} />
+                class={styles.input}
-        </div>
+                placeholder={t('Fill email')}
+              />
+              <Button class={styles.button} type="submit" variant="secondary" value={t('Subscribe')} />
+            </div>
+          }
+        >
+          <div class="pretty-form__item">
+            <input type="email" placeholder={t('Your email')} id="subscription-email" />
+            <label for="subscription-email">{t('Your email')}</label>
+            <button type="submit" class={styles.mobileSubscriptionSubmit}>
+              <Icon name="arrow-right" />
+            </button>
+          </div>
+        </Show>
         <Show when={emailError()}>
           <div class={styles.error}>{emailError()}</div>
         </Show>

src/components/_shared/Subscribe/index.ts

@@ -0,0 +1 @@
+export { Subscribe } from './Subscribe'

src/pages/about/manifest.page.tsx

@@ -2,7 +2,7 @@ import { createSignal, Show } from 'solid-js'
 import { PageLayout } from '../../components/_shared/PageLayout'
 import { Modal } from '../../components/Nav/Modal'
 import { Feedback } from '../../components/Discours/Feedback'
-import Subscribe from '../../components/Discours/Subscribe'
+import { Subscribe } from '../../components/_shared/Subscribe'
 import Opener from '../../components/Nav/Modal/Opener'
 import { Icon } from '../../components/_shared/Icon'