From 65e34f1551f2c1fc61158c79508e8ef6437d5729 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Sat, 21 Oct 2023 15:45:07 +0300
Subject: [PATCH] Mobile header Subscribe (#275)

---
 src/components/Discours/Footer.tsx            |  2 +-
 src/components/Nav/Header/Header.module.scss  | 34 -----------
 src/components/Nav/Header/Header.tsx          | 12 +---
 .../Subscribe}/Subscribe.module.scss          | 34 +++++++++++
 .../Subscribe}/Subscribe.tsx                  | 57 ++++++++++++-------
 src/components/_shared/Subscribe/index.ts     |  1 +
 src/pages/about/manifest.page.tsx             |  2 +-
 7 files changed, 77 insertions(+), 65 deletions(-)
 rename src/components/{Discours => _shared/Subscribe}/Subscribe.module.scss (64%)
 rename src/components/{Discours => _shared/Subscribe}/Subscribe.tsx (55%)
 create mode 100644 src/components/_shared/Subscribe/index.ts

diff --git a/src/components/Discours/Footer.tsx b/src/components/Discours/Footer.tsx
index 3a21afad..08328ff5 100644
--- a/src/components/Discours/Footer.tsx
+++ b/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'
diff --git a/src/components/Nav/Header/Header.module.scss b/src/components/Nav/Header/Header.module.scss
index a991f1a9..5cc89763 100644
--- a/src/components/Nav/Header/Header.module.scss
+++ b/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;
diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx
index b5743b6d..d68c8dcd 100644
--- a/src/components/Nav/Header/Header.tsx
+++ b/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}>
-                  <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>
-
+                <Subscribe variant={'mobileSubscription'} />
                 <p
                   class={styles.mobileDescription}
                   innerHTML={t(
diff --git a/src/components/Discours/Subscribe.module.scss b/src/components/_shared/Subscribe/Subscribe.module.scss
similarity index 64%
rename from src/components/Discours/Subscribe.module.scss
rename to src/components/_shared/Subscribe/Subscribe.module.scss
index 7cbba980..24f90587 100644
--- a/src/components/Discours/Subscribe.module.scss
+++ b/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;
+  }
+}
diff --git a/src/components/Discours/Subscribe.tsx b/src/components/_shared/Subscribe/Subscribe.tsx
similarity index 55%
rename from src/components/Discours/Subscribe.tsx
rename to src/components/_shared/Subscribe/Subscribe.tsx
index a2301204..2ea4e0e4 100644
--- a/src/components/Discours/Subscribe.tsx
+++ b/src/components/_shared/Subscribe/Subscribe.tsx
@@ -1,13 +1,15 @@
 import { createSignal, JSX, Show } from 'solid-js'
-
-import { useLocalize } from '../../context/localize'
-import { validateEmail } from '../../utils/validateEmail'
-import { Button } from '../_shared/Button'
-
+import { useLocalize } from '../../../context/localize'
+import { validateEmail } from '../../../utils/validateEmail'
+import { Button } from '../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}>
-          <input
-            type="email"
-            name="email"
-            value={email()}
-            onInput={handleInput}
-            class={styles.input}
-            placeholder={t('Fill email')}
-          />
-          <Button class={styles.button} type="submit" variant="secondary" value={t('Subscribe')} />
-        </div>
+        <Show
+          when={props.variant === 'mobileSubscription'}
+          fallback={
+            <div class={styles.controls}>
+              <input
+                type="email"
+                name="email"
+                value={email()}
+                onInput={handleInput}
+                class={styles.input}
+                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>
diff --git a/src/components/_shared/Subscribe/index.ts b/src/components/_shared/Subscribe/index.ts
new file mode 100644
index 00000000..77ee7e60
--- /dev/null
+++ b/src/components/_shared/Subscribe/index.ts
@@ -0,0 +1 @@
+export { Subscribe } from './Subscribe'
diff --git a/src/pages/about/manifest.page.tsx b/src/pages/about/manifest.page.tsx
index 9878de07..a4d2e4aa 100644
--- a/src/pages/about/manifest.page.tsx
+++ b/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'