Fixed all authors page style

src/components/Author/Card.module.scss

@@ -246,6 +246,8 @@
 }
 
 .authorsListItem {
+  margin-bottom: 1em !important;
+
   .authorName {
     @include font-size(2.2rem);
 

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()}>

src/components/Feed/Card.module.scss

@@ -23,7 +23,7 @@
 
   .icon {
     height: 1.2em;
-    width: 1.2em;
+    width: 100%;
   }
 }
 

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>

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 {

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>
   )
 }

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;

src/styles/AllTopics.module.scss

@@ -72,3 +72,7 @@
   margin-left: 0.5em;
   vertical-align: super;
 }
+
+.viewSwitcher {
+  margin-bottom: 2rem;
+}