From c086a242b7ef6162b979859041e57bd9bf230cfb Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Thu, 1 Dec 2022 00:50:33 +0300
Subject: [PATCH] Fixed all authors page style

---
 src/components/Author/Card.module.scss        |  2 ++
 src/components/Author/Card.tsx                |  7 +++++-
 src/components/Feed/Card.module.scss          |  2 +-
 src/components/Views/AllAuthors.tsx           | 23 ++++++++++---------
 .../_shared/SearchField.module.scss           |  7 ++++++
 src/components/_shared/SearchField.tsx        |  8 +------
 src/components/_shared/Stat.module.scss       |  2 +-
 src/styles/AllTopics.module.scss              |  4 ++++
 8 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/components/Author/Card.module.scss b/src/components/Author/Card.module.scss
index 743e8c26..e91b971d 100644
--- a/src/components/Author/Card.module.scss
+++ b/src/components/Author/Card.module.scss
@@ -246,6 +246,8 @@
 }
 
 .authorsListItem {
+  margin-bottom: 1em !important;
+
   .authorName {
     @include font-size(2.2rem);
 
diff --git a/src/components/Author/Card.tsx b/src/components/Author/Card.tsx
index 732d8f10..d88eb45d 100644
--- a/src/components/Author/Card.tsx
+++ b/src/components/Author/Card.tsx
@@ -9,6 +9,7 @@ import { locale } from '../../stores/ui'
 import { follow, unfollow } from '../../stores/zine/common'
 import { clsx } from 'clsx'
 import { useSession } from '../../context/session'
+import { StatMetrics } from '../_shared/StatMetrics'
 
 interface AuthorCardProps {
   caption?: string
@@ -68,7 +69,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
             <div class={styles.authorName}>{name()}</div>
           </Show>
 
-          <Show when={!props.hideDescription}>
+          <Show when={!props.hideDescription && props.author.bio}>
             {props.isAuthorsList}
             <div
               class={styles.authorAbout}
@@ -76,6 +77,10 @@ export const AuthorCard = (props: AuthorCardProps) => {
               innerHTML={props.author.bio}
             ></div>
           </Show>
+
+          <Show when={props.author.stat}>
+            <StatMetrics fields={['shouts', 'followers', 'comments']} stat={props.author.stat} />
+          </Show>
         </div>
 
         <Show when={canFollow()}>
diff --git a/src/components/Feed/Card.module.scss b/src/components/Feed/Card.module.scss
index 3ef3717e..42cc1ba0 100644
--- a/src/components/Feed/Card.module.scss
+++ b/src/components/Feed/Card.module.scss
@@ -23,7 +23,7 @@
 
   .icon {
     height: 1.2em;
-    width: 1.2em;
+    width: 100%;
   }
 }
 
diff --git a/src/components/Views/AllAuthors.tsx b/src/components/Views/AllAuthors.tsx
index b45f846f..d6115ddc 100644
--- a/src/components/Views/AllAuthors.tsx
+++ b/src/components/Views/AllAuthors.tsx
@@ -181,17 +181,18 @@ export const AllAuthorsView = (props: AllAuthorsViewProps) => {
           <Show when={searchParams().by && searchParams().by !== 'title'}>
             <For each={filterResults().slice(0, limit())}>
               {(author) => (
-                <>
-                  <AuthorCard
-                    author={author}
-                    hasLink={true}
-                    subscribed={subscribed(author.slug)}
-                    noSocialButtons={true}
-                    isAuthorsList={true}
-                    truncateBio={true}
-                  />
-                  <StatMetrics fields={['shouts', 'followers', 'comments']} stat={author.stat} />
-                </>
+                <div class="row">
+                  <div class="col-lg-10 col-xl-9">
+                    <AuthorCard
+                      author={author}
+                      hasLink={true}
+                      subscribed={subscribed(author.slug)}
+                      noSocialButtons={true}
+                      isAuthorsList={true}
+                      truncateBio={true}
+                    />
+                  </div>
+                </div>
               )}
             </For>
           </Show>
diff --git a/src/components/_shared/SearchField.module.scss b/src/components/_shared/SearchField.module.scss
index 8826e69e..97efe522 100644
--- a/src/components/_shared/SearchField.module.scss
+++ b/src/components/_shared/SearchField.module.scss
@@ -5,9 +5,16 @@
   input {
     border: none;
     border-bottom: 1px solid #ccc;
+    box-shadow: 0 0 0 #ccc;
     font-family: inherit;
     font-size: inherit;
+    outline: none;
+    transition: box-shadow 0.3s;
     width: 100%;
+
+    &:focus {
+      box-shadow: 0 3px 0 #ccc;
+    }
   }
 
   label {
diff --git a/src/components/_shared/SearchField.tsx b/src/components/_shared/SearchField.tsx
index 51eee4c8..e0e46e5f 100644
--- a/src/components/_shared/SearchField.tsx
+++ b/src/components/_shared/SearchField.tsx
@@ -14,13 +14,7 @@ export const SearchField = (props: SearchFieldProps) => {
       <label for="search-field">
         <Icon name="search" class={styles.icon} />
       </label>
-      <input
-        id="search-field"
-        type="text"
-        class="search-input"
-        onInput={handleInputChange}
-        placeholder={t('Search')}
-      />
+      <input id="search-field" type="text" onInput={handleInputChange} placeholder={t('Search')} />
     </div>
   )
 }
diff --git a/src/components/_shared/Stat.module.scss b/src/components/_shared/Stat.module.scss
index 183bea64..5e44af00 100644
--- a/src/components/_shared/Stat.module.scss
+++ b/src/components/_shared/Stat.module.scss
@@ -3,7 +3,7 @@
 
   color: #9fa1a7;
   display: flex;
-  margin-bottom: 1em;
+  margin: 0.5em 0 1em;
 
   @include media-breakpoint-down(md) {
     flex-wrap: wrap;
diff --git a/src/styles/AllTopics.module.scss b/src/styles/AllTopics.module.scss
index 02decc7f..bf815603 100644
--- a/src/styles/AllTopics.module.scss
+++ b/src/styles/AllTopics.module.scss
@@ -72,3 +72,7 @@
   margin-left: 0.5em;
   vertical-align: super;
 }
+
+.viewSwitcher {
+  margin-bottom: 2rem;
+}