Style fixes

src/components/Pages/LayoutShoutsPage.tsx

@@ -103,7 +103,10 @@ export const LayoutShoutsPage = (props: PageProps) => {
       <Show when={isLoaded()} fallback={<Loading />}>
         <div class={styles.topicPage}>
           <Show when={layout() && Boolean(sortedArticles())}>
-            <h1>{title()}</h1>
+            <div class="wide-container">
+              <h1>{title()}</h1>
+            </div>
+
             <ModeSwitcher />
             <Row1 article={sortedArticles()[0]} />
             <Row2 articles={sortedArticles().slice(1, 3)} />

src/components/Views/Author.tsx

@@ -13,6 +13,7 @@ import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
 import { splitToPages } from '../../utils/splitToPages'
 import { RatingControl } from '../Article/RatingControl'
 import styles from './Author.module.scss'
+import stylesArticle from '../../styles/Article.module.scss'
 import { clsx } from 'clsx'
 import Userpic from '../Author/Userpic'
 import { Popup } from '../_shared/Popup'
@@ -95,6 +96,43 @@ export const AuthorView = (props: AuthorProps) => {
     }
   })
 
+  const zhopa = {
+    'v-kramer': {
+      _id: 'v-kramer',
+      id: 33,
+      slug: 'v-kramer',
+      name: 'Владислав Крамер',
+      bio: 'юрист, публицист, охотник на ведьм',
+      about: null,
+      userpic: '',
+      communities: null,
+      links: [],
+      createdAt: '2016-04-25T10:21:25.065000',
+      lastSeen: '2023-01-22T14:37:55.058203'
+    },
+    'aleksei-bodyashkin': {
+      id: 831,
+      name: 'Алексей Бодяшкин',
+      slug: 'aleksei-bodyashkin',
+      userpic:
+        'https://assets.discours.io/unsafe/100x/production/image/d4d5bf40-974c-11ed-9568-bf8d9bd79f61.jpg'
+    },
+    'vsevolod-korolyov': {
+      id: 680,
+      name: 'Всеволод Королёв',
+      slug: 'vsevolod-korolyov',
+      userpic:
+        'https://assets.discours.io/unsafe/100x/production/image/5b959660-944f-11ec-86dd-e3ee00090109.jpg'
+    },
+    'igor-bobyrev': { id: 790, name: 'Игорь Бобырев', slug: 'igor-bobyrev', userpic: '' },
+    'natasha-lozinskaya': {
+      id: 829,
+      name: 'Наташа Лозинская',
+      slug: 'natasha-lozinskaya',
+      userpic: ''
+    }
+  }
+
   return (
     <div class="author-page">
       <Show when={author()} fallback={<div class="center">{t('Loading')}</div>}>
@@ -118,11 +156,13 @@ export const AuthorView = (props: AuthorProps) => {
                     {t('Comments')}
                   </button>
                 </li>
+                {/*
                 <li classList={{ selected: searchParams().by === 'popular' }}>
                   <button type="button" onClick={() => changeSearchParam('by', 'popular')}>
                     Популярное
                   </button>
                 </li>
+*/}
                 <li classList={{ selected: searchParams().by === 'about' }}>
                   <button type="button" onClick={() => changeSearchParam('by', 'about')}>
                     О себе
@@ -162,13 +202,26 @@ export const AuthorView = (props: AuthorProps) => {
           </div>
         </div>
 
-        <Switch fallback={<p>дефолтное состояние</p>}>
+        <Switch
+          fallback={
+            <div class="wide-container">
+              <p>дефолтное состояние</p>
+            </div>
+          }
+        >
           <Match when={searchParams().by === 'about'}>
-            <h1>About</h1>
-            <p>{JSON.stringify(authorEntities())}</p>
+            <div class="wide-container">
+              <Show when={authorEntities()[author().slug].bio}>
+                <p>{authorEntities()[author().slug].bio}</p>
+              </Show>
+            </div>
           </Match>
           <Match when={searchParams().by === 'commented'}>
-            <For each={commented()}>{(comment) => <Comment comment={comment} />}</For>
+            <div class="wide-container">
+              <ul class={stylesArticle.comments}>
+                <For each={commented()}>{(comment) => <Comment comment={comment} />}</For>
+              </ul>
+            </div>
           </Match>
           <Match when={searchParams().by === 'popular'}>
             <Row1 article={sortedArticles()[0]} />

src/components/_shared/GrowingTextarea/GrowingTextarea.module.scss

@@ -2,7 +2,8 @@
   .wrapper {
     border: 2px solid #e8e8e8;
     border-radius: 8px;
-    padding: 16px;
+    padding: 3rem 1.6rem 1.6rem;
+    position: relative;
 
     .growArea {
       display: grid;
@@ -15,7 +16,7 @@
         transition: height 1.3s ease-in-out;
       }
 
-      & textarea {
+      textarea {
         margin-bottom: 0;
         font-family: inherit;
         resize: none;
@@ -36,14 +37,13 @@
       }
 
       &::after,
-      & textarea {
+      textarea {
         font-weight: 400;
         font-size: 14px;
         line-height: 20px;
         padding: 0;
         grid-area: 1 / 1 / 2 / 2;
         width: 100%;
-        min-height: unset;
       }
     }
 

src/components/_shared/GrowingTextarea/GrowingTextarea.tsx

@@ -47,6 +47,7 @@ const GrowingTextarea = (props: Props) => {
             onInput={(event) => handleChangeMessage(event)}
             placeholder={props?.placeholder}
           />
+          <label for="">{props?.placeholder}</label>
         </div>
         <div class={clsx(styles.actions, { [styles.visible]: inputText().trim().length > 0 })}>
           <div class={styles.buttons}>

src/locales/ru.json

@@ -26,6 +26,7 @@
   "Collaborate": "Помочь редактировать",
   "Comments": "Комментарии",
   "Communities": "Сообщества",
+  "Cooperate": "Соучаствовать",
   "Copy link": "Скопировать ссылку",
   "Create account": "Создать аккаунт",
   "Create post": "Создать публикацию",
@@ -65,6 +66,7 @@
   "I have an account": "У меня есть аккаунт!",
   "I have no account yet": "У меня еще нет аккаунта",
   "I know the password": "Я знаю пароль",
+  "Invite to collab": "Пригласить к участию",
   "Invalid email": "Проверьте правильность ввода почты",
   "Join": "Присоединиться",
   "Join our maillist": "Чтобы получать рассылку лучших публикаций, просто укажите свою почту",

src/styles/app.scss

@@ -243,11 +243,10 @@ button {
   border: 2px solid #000;
   border-radius: 0.8rem;
   color: #000;
-  font-size: 1.2em;
+  font-size: 1.4rem;
   line-height: 2.8rem;
   height: 3.2rem;
-  padding: 0;
-  width: 3.2rem;
+  padding: 0 1rem;
 
   &:hover {
     background: #000;
@@ -400,10 +399,9 @@ form {
   }
 
   textarea {
-    min-height: 10em;
-
     & ~ label {
-      top: 3rem;
+      left: 1.6rem;
+      top: 3.2rem;
     }
   }