Fixed feedback popup style

src/components/Discours/Feedback.tsx

@@ -1,5 +1,6 @@
 import { hideModal } from '../../stores/ui'
 import { useLocalize } from '../../context/localize'
+import { Button } from '../_shared/Button'
 
 export const Feedback = () => {
   const { t } = useLocalize()
@@ -21,10 +22,10 @@ export const Feedback = () => {
   }
 
   return (
-    <form method={method} action={action}>
+    <form method={method} action={action} onSubmit={submit}>
       <input type="text" name="contact" placeholder="email" ref={contactElement} />
       <textarea cols="12" name="message" rows="3" placeholder={t('Write to us')} ref={msgElement} />
-      <input type="submit" onClick={submit} />
+      <Button value={'Отправить'} />
     </form>
   )
 }

src/components/Nav/Modal/Modal.module.scss

@@ -16,18 +16,24 @@
 .modal {
   background: #fff;
   max-width: 1000px;
+  padding: 5.4rem 2.4rem 2.4rem;
   position: relative;
-  width: 80%;
+  width: 100%;
+
+  @include media-breakpoint-up(sm) {
+    padding: 4.2rem;
+    width: 80%;
+  }
 
   .close {
     position: absolute;
-    top: 1em;
+    top: 1.6rem;
     cursor: pointer;
     height: 18px;
     width: 16px;
     opacity: 1;
     padding: 0;
-    right: 0;
+    right: 1.6rem;
     transition: opacity 0.3s;
     z-index: 1;
 
@@ -37,17 +43,17 @@
     }
 
     &:hover {
-      opacity: 0.5;
+      background: #000;
+
+      .icon {
+        filter: invert(1);
+      }
     }
 
     .icon {
       height: 100%;
       width: 100%;
     }
-
-    @media (width >= 800px) and (width <= 991px) {
-      // top: 11em;
-    }
   }
 
   &.narrow {

src/pages/about/manifest.page.tsx

@@ -125,9 +125,7 @@ export const ManifestPage = () => {
                 <h3 id="donate">Поддерживать проект</h3>
               </summary>
               <p>
-                Дискурс существует на&nbsp;пожертвования читателей. Если вам нравится журнал, пожалуйста,
-              </p>
-              <p>
+                Дискурс существует на&nbsp;пожертвования читателей. Если вам нравится журнал, пожалуйста,{' '}
                 <a href="/about/help">поддержите</a> нашу работу. Ваши пожертвования пойдут на&nbsp;выпуск
                 новых материалов, оплату серверов, труда программистов, дизайнеров и&nbsp;редакторов.
               </p>
@@ -165,13 +163,13 @@ export const ManifestPage = () => {
                 Советуйте Дискурс друзьям и&nbsp;знакомым. Обсуждайте и&nbsp;распространяйте наши
                 публикации&nbsp;&mdash; все материалы открытой редакции можно читать и&nbsp;перепечатывать
                 бесплатно. Подпишитесь на&nbsp;самиздат <a href="https://vk.com/discoursio">ВКонтакте</a>,
-                в&nbsp;<a href="https://facebook.com/discoursio">Фейсбуке</a>
-                и&nbsp;в&nbsp;<a href="https://t.me/discoursio">Телеграме</a>, а&nbsp;также на&nbsp;
+                в&nbsp;<a href="https://facebook.com/discoursio">Фейсбуке</a> и&nbsp;в&nbsp;
+                <a href="https://t.me/discoursio">Телеграме</a>, а&nbsp;также на&nbsp;
                 <Opener name="subscribe">рассылку лучших материалов</Opener>, чтобы не&nbsp;пропустить
                 ничего интересного.
               </p>
               <p>
-                <a href="https://forms.gle/9UnHBAz9Q3tjH5dAA">Рассказывайте о&nbsp;впечатлениях</a>
+                <a href="https://forms.gle/9UnHBAz9Q3tjH5dAA">Рассказывайте о&nbsp;впечатлениях</a>{' '}
                 от&nbsp;материалов открытой редакции, <Opener name="feedback">делитесь идеями</Opener>,
                 интересными темами, о&nbsp;которых хотели бы узнать больше, и&nbsp;историями, которые нужно
                 рассказать.

src/styles/app.scss

@@ -810,7 +810,7 @@ figure {
 
 .content-index {
   @include font-size(1.4rem);
-
+  line-height: 1.4;
   margin: 0 3.6rem 2em 0;
 
   @include media-breakpoint-up(md) {