Added create article controls to the header

public/locales/ru/translation.json

@@ -147,6 +147,7 @@
   "Report": "Пожаловаться",
   "Resend code": "Выслать подтверждение",
   "Restore password": "Восстановить пароль",
+  "Save": "Сохранить",
   "Save settings": "Сохранить настройки",
   "Search": "Поиск",
   "Search author": "Поиск автора",

src/components/Nav/HeaderAuth.tsx

@@ -13,6 +13,7 @@ import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
 import { useSession } from '../../context/session'
 import { useLocalize } from '../../context/localize'
 import { getPagePath } from '@nanostores/router'
+import { Button } from '../_shared/Button'
 
 type HeaderAuthProps = {
   setIsProfilePopupVisible: (value: boolean) => void
@@ -53,7 +54,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
               </div>
             </Show>
 
-            <Show when={isAuthenticated()}>
+            <Show when={isAuthenticated() && page().route !== 'create'}>
               <div class={styles.userControlItem}>
                 <a href="#" onClick={handleBellIconClick}>
                   <div>
@@ -63,6 +64,16 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
               </div>
             </Show>
 
+            <Show when={isAuthenticated() && page().route === 'create'}>
+              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
+                <Button value={t('Save')} variant={'outline'} />
+              </div>
+
+              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
+                <Button value={t('Publish')} variant={'outline'} />
+              </div>
+            </Show>
+
             <Show when={visibleWarnings()}>
               <div class={clsx(styles.userControlItem, 'notifications')}>
                 <Notifications />
@@ -70,7 +81,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
             </Show>
 
             <Show
-              when={isAuthenticated()}
+              when={isAuthenticated() && page().route !== 'create'}
               fallback={
                 <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
                   <a href="?modal=auth&mode=login">

src/components/Views/Create.tsx

@@ -88,9 +88,8 @@ export const CreateView = () => {
 
       <form onSubmit={handleFormSubmit}>
         <div class="wide-container">
-          <div class="shift-content">
           <div class="row">
-              <div class="col-md-20 col-lg-18 col-xl-16">
+            <div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">
               <div
                 class={clsx(styles.create, {
                   [styles.visible]: page().route === 'create'
@@ -216,7 +215,6 @@ export const CreateView = () => {
             </div>
           </div>
         </div>
-        </div>
       </form>
     </div>
   )

src/components/_shared/Button/Button.module.scss

@@ -37,13 +37,29 @@
     line-height: 21px;
     color: #696969;
 
-    &.hover,
+    &:hover,
-    &.active {
+    &:active {
       text-decoration: underline;
       color: #141414;
     }
   }
 
+  &.outline {
+    border: 3px solid #f2f2f2;
+    border-radius: 1.2em;
+    cursor: pointer;
+    font-weight: bold;
+    margin-right: 0.8em;
+    padding: 0;
+
+    &:hover,
+    &:active {
+      background: #000;
+      border-color: #000;
+      color: #fff;
+    }
+  }
+
   &:disabled,
   &:disabled:hover {
     cursor: default;