Author page style fixes

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -231,8 +231,8 @@ export const AuthorCard = (props: Props) => {
                   />
                 </Match>
               </Switch>
-              <Switch>
+
-                <Match when={props.following && props.following.length > 0 && !props.isCurrentUser}>
+              <Show when={props.following && props.following.length > 0}>
                 <a href="?modal=following" class={styles.subscribers}>
                   <For each={props.following.slice(0, 3)}>
                     {(f) => {
@@ -248,23 +248,12 @@ export const AuthorCard = (props: Props) => {
                     {t('SubscriberWithCount', { count: props?.following.length ?? 0 })}
                   </div>
                 </a>
-                </Match>
+              </Show>
-                <Match when={props.following && props.following.length > 0 && props.isCurrentUser}>
-                  <SharePopup
-                    containerCssClass={stylesHeader.control}
-                    title={props.author.name}
-                    description={props.author.bio}
-                    imageUrl={props.author.userpic}
-                    shareUrl={getShareUrl({ pathname: `/author/${props.author.slug}` })}
-                    trigger={<Button variant="secondary" value={t('Share')} />}
-                  />
-                </Match>
-              </Switch>
             </div>
           </Show>
         </div>
         <ShowOnlyOnClient>
-          <Show when={isSessionLoaded()}>
+          <Show when={isSessionLoaded() && props.author.links}>
             <div class={styles.authorSubscribeSocial}>
               <For each={props.author.links}>
                 {(link) => (
@@ -384,6 +373,19 @@ export const AuthorCard = (props: Props) => {
           </Modal>
         </Show>
 
+        <Show when={props.isCurrentUser}>
+          <div class={styles.subscribersContainer}>
+            <SharePopup
+              containerCssClass={stylesHeader.control}
+              title={props.author.name}
+              description={props.author.bio}
+              imageUrl={props.author.userpic}
+              shareUrl={getShareUrl({ pathname: `/author/${props.author.slug}` })}
+              trigger={<Button variant="secondary" value={t('Share')} />}
+            />
+          </div>
+        </Show>
+
         <Show when={props.following}>
           <Modal variant="medium" name="following" onClose={handleCloseFollowModals} maxHeight>
             <>

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

@@ -68,7 +68,7 @@
 
   &.big {
     aspect-ratio: 1/1;
-    margin: 0 auto;
+    margin: 0 auto 1rem;
     max-width: 168px;
     height: auto;
     width: 100%;

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

@@ -16,6 +16,7 @@
 .authorHeader {
   border-bottom: 2px solid var(--default-color);
   margin-bottom: 2.4rem;
+  margin-top: 1.8rem;
   padding-bottom: 4rem;
 
   @include media-breakpoint-up(lg) {