Create article settings page

src/components/Pages/CreateSettingsPage.module.scss

@@ -0,0 +1,21 @@
+.articlePreview {
+  border: 2px solid #e8e8e8;
+  min-height: 10em;
+  padding: 1rem 1.2rem;
+}
+
+.saveBlock {
+  background: #f1f1f1;
+  line-height: 1.4;
+  margin-top: 6.4rem;
+  padding: 1.6rem 3.2rem;
+  text-align: center;
+
+  @include media-breakpoint-up(md) {
+    padding: 3.2rem 8rem;
+  }
+
+  .button {
+    margin: 0 divide($container-padding-x, 2);
+  }
+}

src/components/Pages/CreateSettingsPage.tsx

@@ -1,7 +1,100 @@
 import { PageWrap } from '../_shared/PageWrap'
+import styles from './CreateSettingsPage.module.scss'
+import { clsx } from 'clsx'
 
 export const CreateSettingsPage = () => {
-  return <PageWrap>Настройки публикации</PageWrap>
+  return (
+    <PageWrap>
+      <div class="wide-container">
+        <div class="shift-content">
+          <div class="row">
+            <div class="col-md-10 col-lg-9 col-xl-8">
+              <h1>Настройки публикации</h1>
+              <form>
+                <h4>Заголовок</h4>
+                <div class="pretty-form__item">
+                  <input
+                    type="text"
+                    name="header"
+                    id="header"
+                    placeholder="Придумайте заголовок вашей истории"
+                  />
+                  <label for="header">Придумайте заголовок вашей истории</label>
+                </div>
+
+                <h4>Подзаголовок</h4>
+                <div class="pretty-form__item">
+                  <input type="text" name="subheader" id="subheader" placeholder="Подзаголовок" />
+                  <label for="subheader">Подзаголовок</label>
+                </div>
+
+                <h4>Лид</h4>
+                <div class="pretty-form__item">
+                  <textarea name="lead" id="lead" placeholder="Лид"></textarea>
+                  <label for="lead">Лид</label>
+                </div>
+
+                <h4>Выбор сообщества</h4>
+                <p class="description">Сообщества можно перечислить через запятую</p>
+                <div class="pretty-form__item">
+                  <input
+                    type="text"
+                    name="community"
+                    id="community"
+                    placeholder="Сообщества"
+                    class="nolabel"
+                  />
+                </div>
+
+                <h4>Темы</h4>
+                <p class="description">
+                  Добавьте несколько тем, чтобы читатель знал, о&nbsp;чем ваш материал, и&nbsp;мог найти его
+                  на&nbsp;страницах интересных ему тем. Темы можно менять местами, первая тема становится
+                  заглавной
+                </p>
+                <div class="pretty-form__item">
+                  <input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />
+                </div>
+
+                <h4>Соавторы</h4>
+                <p class="description">У каждого соавтора можно добавить роль</p>
+                <div class="pretty-form__item--with-button">
+                  <div class="pretty-form__item">
+                    <input type="text" name="authors" id="authors" placeholder="Введите имя или e-mail" />
+                    <label for="authors">Введите имя или e-mail</label>
+                  </div>
+                  <button class="button button--submit">Добавить</button>
+                </div>
+
+                <div class="row">
+                  <div class="col-md-6">Михаил Драбкин</div>
+                  <div class="col-md-6">
+                    <input type="text" name="coauthor" id="coauthor1" class="nolabel" />
+                  </div>
+                </div>
+
+                <h4>Карточка материала на&nbsp;главной</h4>
+                <p class="description">
+                  Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет
+                  выглядеть на&nbsp;главной странице
+                </p>
+                <div class={styles.articlePreview}></div>
+
+                <div class={styles.saveBlock}>
+                  <p>
+                    Проверьте ещё раз введённые данные, если всё верно, вы&nbsp;можете сохранить или
+                    опубликовать ваш текст
+                  </p>
+                  <button class={clsx('button button--outline', styles.button)}>Сохранить</button>
+                  <button class={clsx('button button--submit', styles.button)}>Опубликовать</button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </PageWrap>
+  )
 }
 
 // for lazy loading

src/styles/app.scss

@@ -306,12 +306,22 @@ button {
   }
 }
 
-.button--submit {
+.button--submit,
+.button--outline {
   @include font-size(2rem);
-
   padding: 1.6rem 2rem;
 }
 
+.button--outline {
+  background: none;
+  box-shadow: inset 0 0 0 2px #000;
+  color: #000;
+
+  &:hover {
+    box-shadow: inset 0 0 0 2px #ccc;
+  }
+}
+
 form {
   .pretty-form__item {
     position: relative;
@@ -325,6 +335,30 @@ form {
     }
   }
 
+  .pretty-form__item--with-button {
+    margin-bottom: 1.6rem;
+
+    @include media-breakpoint-up(sm) {
+      display: flex;
+    }
+
+    input {
+      flex: 1;
+
+      @include media-breakpoint-up(sm) {
+        margin-bottom: 0 !important;
+      }
+    }
+
+    *:first-child {
+      flex: 1;
+
+      @include media-breakpoint-up(sm) {
+        margin-right: 1em;
+      }
+    }
+  }
+
   input[type='text'],
   input[type='email'],
   input[type='password'],