upd styles & layout

src/components/Footer/Footer.js

@@ -4,8 +4,6 @@ import PropTypes from "prop-types"
 import useSiteMetadataQuery from "../../hooks/useSiteMetadataQuery"
 
 import LogoIcon from "../../images/logo-icon.svg"
-import GatsbyIcon from "../../images/gatsby-icon.svg"
-import NetlifyIcon from "../../images/netlify-icon.svg"
 import RssIcon from "../../images/rss-icon.svg"
 
 const Footer = ({ amp }) => {
@@ -72,27 +70,6 @@ const Footer = ({ amp }) => {
               </ul>
             </div>
           </div>
-          <div className="footer-nav__helpers">
-            <span>Разработка при помощи:</span>
-            <div className="helpers-icons">
-              <a
-                href="https://www.gatsbyjs.org/"
-                rel="noreferrer"
-                target="_blank"
-              >
-                <GatsbyIcon />
-                GatsbyJS
-              </a>
-              <a
-                href="https://www.netlify.com/"
-                rel="noreferrer"
-                target="_blank"
-              >
-                <NetlifyIcon />
-                Netlify
-              </a>
-            </div>
-          </div>
         </div>
         <div className="footer-content__copy">
           <div className="rss-feed">

src/components/Footer/Footer.scss

@@ -48,27 +48,6 @@ footer {
           }
         }
       }
-      & .footer-nav__helpers {
-        display: flex;
-        align-items: flex-end;
-        justify-content: flex-end;
-        flex-direction: column;
-        & span {
-          font-size: 14px;
-          margin-bottom: 10px;
-        }
-        & .helpers-icons {
-          display: flex;
-          align-items: center;
-          & a {
-            font-size: 0;
-          }
-          & a:nth-child(1) {
-            text-decoration: none;
-            margin-right: 10px;
-          }
-        }
-      }
     }
     &__copy {
       border-top: 1px solid rgba(0, 0, 0, 0.1);
@@ -160,14 +139,6 @@ footer {
           margin-bottom: 20px;
         }
       }
-      & .footer-nav__helpers {
-        align-items: center;
-        flex-direction: column;
-        & span {
-          margin-bottom: 15px;
-          margin-right: 0;
-        }
-      }
     }
   }
 }

src/components/Newsletter/Newsletter.js

@@ -1,23 +1,21 @@
 import React from "react"
 
 const Newsletter = () => {
+  const submitHandler = e => {
+    e.preventDefault()
+
+  }
+
   return (
     <div className="newsletter">
-      <div className="newsletter-heading">Новостная рассылка</div>
+      <div className="newsletter-heading"><span role="img" aria-label="hot">📫</span>{" "}Новостная рассылка</div>
       <div className="newsletter-content">
-        <form action="#" target='_blank'>
         <p>
-            <span role="img" aria-label="hot">
+          Подпишитесь на новостную рассылку чтобы не пропустить вышедшие статьи
-              🔥
-            </span>{" "}
-            At vero eos et accusamus et iusto odio dignissimos ducimus qui
-            blanditiis praesentium voluptatum deleniti atque corrupti quos
-            dolores et quas molestias excepturi sint occaecati cupiditate non
-            provident, similique sunt in culpa qui officia deserunt mollitia
-            animi, id est laborum et dolorum fuga
         </p>
+        <form onSubmit={submitHandler} action="#" target='_blank'>
           <div className="email-field">
-            <input placeholder="ваш e-mail" type="text" name="email" />
+            <input placeholder="ваш e-mail" type="email" name="email" />
             <button>Подписаться</button>
           </div>
         </form>

src/components/Newsletter/Newsletter.scss

@@ -1,36 +1,46 @@
 @import '../../styles/variables.scss';
 
 .newsletter {
-  border: 2px solid #6394F7;
   border-radius: 7px;
-  padding: 30px 25px;
+  background: linear-gradient(135.9deg, #f5f9ff, #f5f9ff 0.01%, #f6f4fb 98.96%);
+  padding: 25px 25px;
   & .newsletter-heading {
-    font-size: 21px;
+    font-size: 24px;
     font-weight: 700;
-    margin-bottom: 15px;
+    margin-bottom: 10px;
     color: $black-clr;
+    text-align: center;
   }
   & .newsletter-content {
+    text-align: center;
+    & p {
+      font-size: 15px;
+      margin-bottom: 10px;
+    }
     & form {
+      display: flex;
+      justify-content: center;
       & p {
         margin-bottom: 40px;
         font-size: 15px;
         color: $black-clr;
       }
       & .email-field {
-        display: flex;
+        margin-top: 10px;
+        display: inline-flex;
         & input {
-          width: 250px;
+          width: 300px;
-          height: 40px;
+          height: 35px;
           padding: 10px;
           font-family: 'Inter', sans-serif;
           font-size: 13px;
-          border-radius: 5px 0px 0px 5px;
+          border-radius: 5px;
         }
         & button {
           background: linear-gradient(112.92deg, #6395F8 0%, #463EAC 100%);
-          border-radius: 0px 5px 5px 0px;
+          border-radius: 5px;
-          height: 40px;
+          margin-left: 5px;
+          height: 35px;
           width: 130px;
           font-size: 13px;
           padding: 0 15px;
@@ -46,10 +56,14 @@
 
 .dark {
   & .newsletter {
+    background: #2A2A2A;
     & .newsletter-heading {
       color: $white-clr;
     }
     & .newsletter-content {
+      & p {
+        color: $white-clr;
+      }
       & form {
         & p {
           color: $white-clr;

src/styles/global.scss

@@ -343,8 +343,12 @@ html {
 body {
   font-family: 'Inter', sans-serif;
   margin: 0;
-  display: flex;
   height: 85%;
+}
+
+#gatsby-focus-wrapper {
+  display: flex;
+  min-height: 100vh;
   flex-direction: column;
 }