Error page

src/components/Views/FourOuFour.tsx

@@ -1,5 +1,6 @@
 import { t } from '../../utils/intl'
 import Icon from '../Nav/Icon'
+import '../../styles/FourOuFour.scss'
 
 export const FourOuFour = (_props) => {
   return (
@@ -7,34 +8,34 @@ export const FourOuFour = (_props) => {
       <div class="error-page">
         <div class="container">
           <div class="row">
-            <a href="/">
+            <div class="col-sm-7 offset-sm-3">
+              <a href="/" class="image-link">
                 <img class="error-image" src="/error.svg" alt="error" width="auto" height="auto" />
               </a>
             </div>
+          </div>
           <div class="row">
-            <div class="col-md-2 col-sm-3 col-sm-offset-2">
+            <div class="col-md-2 col-sm-3 offset-sm-2 error-text-container">
               <div class="error-text">
-                <div>{t('Empty')}</div>
+                <div>{t('Error')}</div>
-                <div class="big ng-binding">404</div>
+                <div class="big">404</div>
               </div>
             </div>
-            <div class="col-sm-4">
+            <div class="col-sm-4 search-form-container">
               <div class="error-explain">
-                <p class="text-left">{t(`You've reached a non-existed page`)}</p>
+                <p>{t(`You've reached a non-existed page`)}</p>
-                <p class="text-left">{t('Try to find another way')}:</p>
+                <p>{t('Try to find another way')}:</p>
-                <form class="errorform ng-pristine ng-valid" action="/search" method="get">
+                <form class="errorform pretty-form" action="/search" method="get">
-                  <div class="discours-form">
+                  <div class="pretty-form__item">
-                    <div class="form-group">
+                    <input type="text" name="q" placeholder={t('Search')} id="search-field" />
-                      <a class="col-sm-2">
+                    <label for="search-field">{t('Search')}</label>
+                    <button type="submit" class="search-submit">
                       <Icon name="search" />
-                      </a>
+                    </button>
-                    </div>
                   </div>
                 </form>
                 <p class="text-center">
-                  <a class="black-link" href="/">
+                  <a href="/">{t('Back to mainpage')}</a>
-                    {t('Back to mainpage')}
-                  </a>
                 </p>
               </div>
             </div>

src/locales/ru.json

@@ -5,6 +5,7 @@
   "All posts": "Все публикации",
   "All topics": "Все темы",
   "Authors": "Авторы",
+  "Back to mainpage": "Вернуться на главную",
   "Become an author": "Стать автором",
   "Bookmarked": "Сохранено",
   "By alphabet": "По алфавиту",

src/styles/FourOuFour.scss

@@ -0,0 +1,70 @@
+.error-page-wrapper {
+  height: 100vh;
+}
+
+.error-page {
+  position: relative;
+  top: 35%;
+  transform: translateY(-40%);
+
+  .error-image {
+    display: block;
+    margin: auto;
+    width: 85%;
+  }
+
+  .error-text {
+    font-weight: 300;
+    font-size: 28px;
+    left: 80px;
+    position: absolute;
+    text-align: center;
+    top: -2.25em;
+
+    .big {
+      font-weight: 900;
+      letter-spacing: 4px;
+      font-size: 60px;
+    }
+  }
+
+  .error-explain {
+    font-size: 16px;
+    position: absolute;
+    top: -3.4em;
+    left: 65px;
+
+    p {
+      margin: 0 0 0.3em;
+    }
+  }
+
+  .image-link:hover {
+    background: none;
+  }
+
+  .search-submit {
+    height: 100%;
+    padding: 0 1em;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .pretty-form {
+    margin-top: 0.5em;
+  }
+
+  .pretty-form__item input {
+    padding-right: 2.7em;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+}
+
+.error-text-container,
+.search-form-container {
+  position: relative;
+}