Author page style fixes

src/components/Article/Comment.module.scss

@@ -225,7 +225,7 @@
   margin-bottom: 1.2rem;
 
   @include media-breakpoint-up(md) {
-    align-items: start;
+    align-items: center;
     display: flex;
   }
 }

src/components/Author/AuthorCard/AuthorCard.module.scss

@@ -1,5 +1,5 @@
 .author {
-  align-items: baseline;
+  align-items: center;
   display: flex;
   flex-flow: row nowrap;
   margin-bottom: 1.6rem;
@@ -226,8 +226,10 @@
   }
 
   .button {
+    padding-left: 2rem;
+    padding-right: 2rem;
     margin-right: 0.5em;
-    width: 9em;
+    //width: 9em;
 
     &:first-of-type {
       margin-left: 0;
@@ -256,7 +258,7 @@
 .authorSubscribeSocial {
   align-items: center;
   display: flex;
-  margin: 0 0.8rem 2rem;
+  margin: 0 0.8rem 2rem 0;
 
   @include media-breakpoint-down(sm) {
     flex: 1 100%;
@@ -318,25 +320,32 @@
   }
 }
 
+.buttonWriteAuthorPage {
+  background: #f6f6f6 !important;
+  border-radius: 0.8rem;
+}
+
 .authorPage {
+  align-items: center;
+
   @include media-breakpoint-down(md) {
     justify-content: center;
   }
 
   .authorName {
-    @include font-size(3.4rem);
+    @include font-size(4rem);
-
+    font-weight: 700;
-    font-weight: 500;
     margin-bottom: 0.2em;
   }
 
   .authorAbout {
-    @include font-size(2rem);
     color: #696969;
+    @include font-size(2rem);
+    font-weight: 500;
   }
 
   .authorSubscribe {
-    margin: 2rem -0.8rem 0;
+    margin: 2rem -0.8rem 0 0;
     padding-left: 0;
 
     @include media-breakpoint-down(md) {
@@ -391,7 +400,7 @@
 
   .button {
     min-height: 4rem;
-    margin: 0 0.8rem;
+    margin: 0 0.8rem 0 0;
     vertical-align: middle;
 
     @include media-breakpoint-down(sm) {
@@ -431,12 +440,12 @@
 .authorComments {
   .authorName {
     @include font-size(1.2rem);
-
+    line-height: 1.2;
     margin-bottom: 0;
   }
 
   .circlewrap {
-    margin-top: -0.6em;
+    margin-top: -0.4em;
   }
 }
 
@@ -496,11 +505,21 @@
     &:not(:first-child) {
       margin-left: -1.8rem;
     }
+
+    > * {
+      line-height: 1.8rem;
+      min-width: auto;
+    }
   }
 }
 
 .subscribersCounter {
+  font-weight: 500;
   margin-left: -0.6rem;
+
+  &:hover {
+    color: #696969;
+  }
 }
 
 .listWrapper {

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -354,7 +354,7 @@ export const AuthorCard = (props: Props) => {
                     <button
                       class={styles.button}
                       classList={{
-                        [styles.buttonSubscribe]: !props.isAuthorsList,
+                        [styles.buttonWriteAuthorPage]: !props.isAuthorsList,
                         'button--subscribe': !props.isAuthorsList,
                         'button--subscribe-topic': props.isAuthorsList,
                         [styles.buttonWrite]: props.liteButtons && props.isAuthorsList

src/components/Author/Userpic/Userpic.module.scss

@@ -26,6 +26,7 @@
     color: #000;
     font-size: small;
     text-align: center;
+    text-transform: uppercase;
     line-height: 32px;
     width: 100%;
     height: 100%;

src/components/Views/Author/Author.module.scss

@@ -8,7 +8,7 @@
   }
 
   .groupControls {
-    margin-bottom: 2em !important;
+    margin-bottom: 6rem !important;
     margin-top: 0 !important;
 
     @include media-breakpoint-down(md) {
@@ -19,6 +19,12 @@
   }
 }
 
+.authorHeader {
+  border-bottom: 2px solid #000;
+  margin-bottom: 2.4rem;
+  padding-bottom: 4rem;
+}
+
 .ratingContainer {
   @include font-size(1.5rem);
   display: inline-flex;

src/components/Views/Author/Author.tsx

@@ -126,12 +126,14 @@ export const AuthorView = (props: Props) => {
     <div class={styles.authorPage}>
       <div class="wide-container">
         <Show when={author()}>
+          <div class={styles.authorHeader}>
             <AuthorCard
               author={author()}
               isAuthorPage={true}
               followers={followers()}
               following={following()}
             />
+          </div>
         </Show>
         <div class={clsx(styles.groupControls, 'row')}>
           <div class="col-md-16">
@@ -204,33 +206,33 @@ export const AuthorView = (props: Props) => {
 
         <Match when={page().route === 'author'}>
           <Show when={sortedArticles().length === 1}>
-            <Row1 article={sortedArticles()[0]} noAuthorLink={true} />
+            <Row1 article={sortedArticles()[0]} noAuthorLink={true} nodate={true} />
           </Show>
 
           <Show when={sortedArticles().length === 2}>
-            <Row2 articles={sortedArticles()} isEqual={true} noAuthorLink={true} />
+            <Row2 articles={sortedArticles()} isEqual={true} noAuthorLink={true} nodate={true} />
           </Show>
 
           <Show when={sortedArticles().length === 3}>
-            <Row3 articles={sortedArticles()} noAuthorLink={true} />
+            <Row3 articles={sortedArticles()} noAuthorLink={true} nodate={true} />
           </Show>
 
           <Show when={sortedArticles().length > 3}>
-            <Row1 article={sortedArticles()[0]} noAuthorLink={true} />
+            <Row1 article={sortedArticles()[0]} noAuthorLink={true} nodate={true} />
             <Row2 articles={sortedArticles().slice(1, 3)} isEqual={true} noAuthorLink={true} />
-            <Row1 article={sortedArticles()[3]} noAuthorLink={true} />
+            <Row1 article={sortedArticles()[3]} noAuthorLink={true} nodate={true} />
             <Row2 articles={sortedArticles().slice(4, 6)} isEqual={true} noAuthorLink={true} />
-            <Row1 article={sortedArticles()[6]} noAuthorLink={true} />
+            <Row1 article={sortedArticles()[6]} noAuthorLink={true} nodate={true} />
             <Row2 articles={sortedArticles().slice(7, 9)} isEqual={true} noAuthorLink={true} />
 
             <For each={shouts()}>
               {(shout) => (
                 <>
-                  <Row1 article={shout[0]} noAuthorLink={true} />
+                  <Row1 article={shout[0]} noAuthorLink={true} nodate={true} />
                   <Row2 articles={shout.slice(1, 3)} isEqual={true} noAuthorLink={true} />
-                  <Row1 article={shout[3]} noAuthorLink={true} />
+                  <Row1 article={shout[3]} noAuthorLink={true} nodate={true} />
                   <Row2 articles={shout.slice(4, 6)} isEqual={true} noAuthorLink={true} />
-                  <Row1 article={shout[6]} noAuthorLink={true} />
+                  <Row1 article={shout[6]} noAuthorLink={true} nodate={true} />
                   <Row2 articles={shout.slice(7, 9)} isEqual={true} noAuthorLink={true} />
                 </>
               )}