From 8e6b70eb7e2a83e849dabe085814171aa62a2868 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Fri, 13 Oct 2023 09:10:24 +0300
Subject: [PATCH] Fix profile markup (#259)

---
 .../Article/AudioHeader/AudioHeader.tsx       |   2 -
 .../Author/AuthorCard/AuthorCard.module.scss  |   7 +-
 .../Author/AuthorCard/AuthorCard.tsx          | 559 +++++++++---------
 .../Views/Author/Author.module.scss           |   7 +-
 4 files changed, 284 insertions(+), 291 deletions(-)

diff --git a/src/components/Article/AudioHeader/AudioHeader.tsx b/src/components/Article/AudioHeader/AudioHeader.tsx
index 252ddc66..09f80bd9 100644
--- a/src/components/Article/AudioHeader/AudioHeader.tsx
+++ b/src/components/Article/AudioHeader/AudioHeader.tsx
@@ -5,8 +5,6 @@ import { MediaItem } from '../../../pages/types'
 import { createSignal, Show } from 'solid-js'
 import { Icon } from '../../_shared/Icon'
 import { Topic } from '../../../graphql/types.gen'
-import { getPagePath } from '@nanostores/router'
-import { router } from '../../../stores/router'
 import { CardTopic } from '../../Feed/CardTopic'
 
 type Props = {
diff --git a/src/components/Author/AuthorCard/AuthorCard.module.scss b/src/components/Author/AuthorCard/AuthorCard.module.scss
index 84609c03..240e4be2 100644
--- a/src/components/Author/AuthorCard/AuthorCard.module.scss
+++ b/src/components/Author/AuthorCard/AuthorCard.module.scss
@@ -625,7 +625,7 @@
   display: flex;
   flex-wrap: wrap;
   font-size: 1.4rem;
-  margin-top: 0.5rem;
+  margin-top: 1.5rem;
   gap: 1rem;
 
   @include media-breakpoint-down(md) {
@@ -637,7 +637,6 @@
   align-items: center;
   cursor: pointer;
   display: inline-flex;
-  margin-top: 1rem;
   margin-right: 3rem;
   vertical-align: top;
   border-bottom: unset !important;
@@ -669,10 +668,6 @@
 .subscribersCounter {
   font-weight: 500;
   margin-left: -0.6rem;
-
-  &:hover {
-    color: #696969;
-  }
 }
 
 .listWrapper {
diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index 8516cde4..4395d96d 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@@ -126,192 +126,168 @@ export const AuthorCard = (props: Props) => {
     setUserpicUrl(props.author.userpic.replace('100x', '500x500'))
   }
   return (
-    <>
+    <div
+      class={clsx(styles.author, props.class)}
+      classList={{
+        ['row']: props.isAuthorPage,
+        [styles.authorPage]: props.isAuthorPage,
+        [styles.authorComments]: props.isComments,
+        [styles.authorsListItem]: props.isAuthorsList,
+        [styles.feedMode]: props.isFeedMode,
+        [styles.nowrapView]: props.isNowrap
+      }}
+    >
+      <Show
+        when={props.isAuthorPage}
+        fallback={
+          <Userpic
+            name={props.author.name}
+            userpic={props.author.userpic}
+            hasLink={props.hasLink}
+            isBig={props.isAuthorPage}
+            isAuthorsList={props.isAuthorsList}
+            isFeedMode={props.isFeedMode}
+            slug={props.author.slug}
+            class={styles.circlewrap}
+          />
+        }
+      >
+        <div class="col-md-5">
+          <Userpic
+            name={props.author.name}
+            userpic={userpicUrl()}
+            hasLink={props.hasLink}
+            isBig={props.isAuthorPage}
+            isAuthorsList={props.isAuthorsList}
+            isFeedMode={props.isFeedMode}
+            slug={props.author.slug}
+            class={styles.circlewrap}
+          />
+        </div>
+      </Show>
+
       <div
-        class={clsx(styles.author, props.class)}
+        class={styles.authorDetails}
         classList={{
-          ['row']: props.isAuthorPage,
-          [styles.authorPage]: props.isAuthorPage,
-          [styles.authorComments]: props.isComments,
-          [styles.authorsListItem]: props.isAuthorsList,
-          [styles.feedMode]: props.isFeedMode,
-          [styles.nowrapView]: props.isNowrap
+          'col-md-15 col-xl-13': props.isAuthorPage,
+          [styles.authorDetailsShrinked]: props.isAuthorPage
         }}
       >
-        <Show
-          when={props.isAuthorPage}
-          fallback={
-            <Userpic
-              name={props.author.name}
-              userpic={props.author.userpic}
-              hasLink={props.hasLink}
-              isBig={props.isAuthorPage}
-              isAuthorsList={props.isAuthorsList}
-              isFeedMode={props.isFeedMode}
-              slug={props.author.slug}
-              class={styles.circlewrap}
-            />
-          }
-        >
-          <div class="col-md-5">
-            <Userpic
-              name={props.author.name}
-              userpic={userpicUrl()}
-              hasLink={props.hasLink}
-              isBig={props.isAuthorPage}
-              isAuthorsList={props.isAuthorsList}
-              isFeedMode={props.isFeedMode}
-              slug={props.author.slug}
-              class={styles.circlewrap}
-            />
+        <div class={styles.authorDetailsWrapper}>
+          <div class={styles.authorNameContainer}>
+            <ConditionalWrapper
+              condition={props.hasLink}
+              wrapper={(children) => (
+                <a class={styles.authorName} href={`/author/${props.author.slug}`}>
+                  {children}
+                </a>
+              )}
+            >
+              <span class={clsx({ [styles.authorName]: !props.hasLink })}>{name()}</span>
+            </ConditionalWrapper>
           </div>
-        </Show>
+          <Show
+            when={props.author.bio && !props.hideBio}
+            fallback={
+              props.showPublicationsCounter ? (
+                <div class={styles.authorAbout}>
+                  {t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}
+                </div>
+              ) : (
+                ''
+              )
+            }
+          >
+            <div
+              class={styles.authorAbout}
+              classList={{ 'text-truncate': props.truncateBio }}
+              innerHTML={props.author.bio}
+            />
+          </Show>
 
-        <div
-          class={styles.authorDetails}
-          classList={{
-            'col-md-15 col-xl-13': props.isAuthorPage,
-            [styles.authorDetailsShrinked]: props.isAuthorPage
-          }}
-        >
-          <div class={styles.authorDetailsWrapper}>
-            <div class={styles.authorNameContainer}>
-              <ConditionalWrapper
-                condition={props.hasLink}
-                wrapper={(children) => (
-                  <a class={styles.authorName} href={`/author/${props.author.slug}`}>
-                    {children}
+          <Show
+            when={
+              (props.followers && props.followers.length > 0) ||
+              (props.following && props.following.length > 0)
+            }
+          >
+            <div class={styles.subscribersContainer}>
+              <Switch>
+                <Match when={props.followers && props.followers.length > 0 && !props.isCurrentUser}>
+                  <a href="?modal=followers" class={styles.subscribers}>
+                    <For each={props.followers.slice(0, 3)}>
+                      {(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
+                    </For>
+                    <div class={styles.subscribersCounter}>
+                      {t('SubscriptionWithCount', { count: props.followers.length })}
+                    </div>
+                  </a>
+                </Match>
+                <Match when={props.followers && props.followers.length > 0 && props.isCurrentUser}>
+                  <Button
+                    variant="secondary"
+                    onClick={() => redirectPage(router, 'profileSettings')}
+                    value={t('Edit profile')}
+                  />
+                </Match>
+              </Switch>
+              <Switch>
+                <Match when={props.following && props.following.length > 0 && !props.isCurrentUser}>
+                  <a href="?modal=following" class={styles.subscribers}>
+                    <For each={props.following.slice(0, 3)}>
+                      {(f) => {
+                        if ('name' in f) {
+                          return <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />
+                        } else if ('title' in f) {
+                          return <Userpic name={f.title} userpic={f.pic} class={styles.userpic} />
+                        }
+                        return null
+                      }}
+                    </For>
+                    <div class={styles.subscribersCounter}>
+                      {t('SubscriberWithCount', { count: props?.following.length ?? 0 })}
+                    </div>
+                  </a>
+                </Match>
+                <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()}>
+            <div class={styles.authorSubscribeSocial}>
+              <For each={props.author.links}>
+                {(link) => (
+                  <a
+                    class={styles.socialLink}
+                    href={link.startsWith('http') ? link : `https://${link}`}
+                    target="_blank"
+                    rel="nofollow noopener"
+                  >
+                    <span class={styles.authorSubscribeSocialLabel}>
+                      {link.startsWith('http') ? link : `https://${link}`}
+                    </span>
                   </a>
                 )}
-              >
-                <span class={clsx({ [styles.authorName]: !props.hasLink })}>{name()}</span>
-              </ConditionalWrapper>
+              </For>
             </div>
-            <Show
-              when={props.author.bio && !props.hideBio}
-              fallback={
-                props.showPublicationsCounter ? (
-                  <div class={styles.authorAbout}>
-                    {t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}
-                  </div>
-                ) : (
-                  ''
-                )
-              }
-            >
-              <div
-                class={styles.authorAbout}
-                classList={{ 'text-truncate': props.truncateBio }}
-                innerHTML={props.author.bio}
-              />
-            </Show>
-
-            <Show
-              when={
-                (props.followers && props.followers.length > 0) ||
-                (props.following && props.following.length > 0)
-              }
-            >
-              <div class={styles.subscribersContainer}>
-                <Switch>
-                  <Match when={props.followers && props.followers.length > 0 && !props.isCurrentUser}>
-                    <a href="?modal=followers" class={styles.subscribers}>
-                      <For each={props.followers.slice(0, 3)}>
-                        {(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
-                      </For>
-                      <div class={styles.subscribersCounter}>
-                        {t('SubscriptionWithCount', { count: props.followers.length })}
-                      </div>
-                    </a>
-                  </Match>
-                  <Match when={props.followers && props.followers.length > 0 && props.isCurrentUser}>
-                    <Button
-                      variant="secondary"
-                      onClick={() => redirectPage(router, 'profileSettings')}
-                      value={t('Edit profile')}
-                    />
-                  </Match>
-                </Switch>
-                <Switch>
-                  <Match when={props.following && props.following.length > 0 && !props.isCurrentUser}>
-                    <a href="?modal=following" class={styles.subscribers}>
-                      <For each={props.following.slice(0, 3)}>
-                        {(f) => {
-                          if ('name' in f) {
-                            return <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />
-                          } else if ('title' in f) {
-                            return <Userpic name={f.title} userpic={f.pic} class={styles.userpic} />
-                          }
-                          return null
-                        }}
-                      </For>
-                      <div class={styles.subscribersCounter}>
-                        {t('SubscriberWithCount', { count: props?.following.length ?? 0 })}
-                      </div>
-                    </a>
-                  </Match>
-                  <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()}>
-              <div class={styles.authorSubscribeSocial}>
-                <For each={props.author.links}>
-                  {(link) => (
-                    <a
-                      class={styles.socialLink}
-                      href={link.startsWith('http') ? link : `https://${link}`}
-                      target="_blank"
-                      rel="nofollow noopener"
-                    >
-                      <span class={styles.authorSubscribeSocialLabel}>
-                        {link.startsWith('http') ? link : `https://${link}`}
-                      </span>
-                    </a>
-                  )}
-                </For>
-              </div>
-              <Show when={canFollow()}>
-                <div class={styles.authorSubscribe}>
-                  <Show
-                    when={subscribed()}
-                    fallback={
-                      <button
-                        onClick={handleSubscribe}
-                        class={clsx('button', styles.button)}
-                        classList={{
-                          [styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton,
-                          'button--subscribe': !props.isAuthorsList,
-                          'button--subscribe-topic': props.isAuthorsList || props.isTextButton,
-                          [styles.buttonWrite]: props.isAuthorsList || props.isTextButton,
-                          [styles.isSubscribing]: isSubscribing()
-                        }}
-                        disabled={isSubscribing()}
-                      >
-                        <Show when={!props.isAuthorsList && !props.isTextButton && !props.isAuthorPage}>
-                          <Icon name="author-subscribe" class={styles.icon} />
-                        </Show>
-                        <Show when={props.isTextButton || props.isAuthorPage}>
-                          <span class={clsx(styles.buttonLabel, styles.buttonLabelVisible)}>
-                            {t('Follow')}
-                          </span>
-                        </Show>
-                      </button>
-                    }
-                  >
+            <Show when={canFollow()}>
+              <div class={styles.authorSubscribe}>
+                <Show
+                  when={subscribed()}
+                  fallback={
                     <button
-                      onClick={() => subscribe(false)}
+                      onClick={handleSubscribe}
                       class={clsx('button', styles.button)}
                       classList={{
                         [styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton,
@@ -323,118 +299,139 @@ export const AuthorCard = (props: Props) => {
                       disabled={isSubscribing()}
                     >
                       <Show when={!props.isAuthorsList && !props.isTextButton && !props.isAuthorPage}>
-                        <Icon name="author-unsubscribe" class={styles.icon} />
+                        <Icon name="author-subscribe" class={styles.icon} />
                       </Show>
                       <Show when={props.isTextButton || props.isAuthorPage}>
-                        <span
-                          class={clsx(
-                            styles.buttonLabel,
-                            styles.buttonLabelVisible,
-                            styles.buttonUnfollowLabel
-                          )}
-                        >
-                          {t('Unfollow')}
-                        </span>
-                        <span
-                          class={clsx(
-                            styles.buttonLabel,
-                            styles.buttonLabelVisible,
-                            styles.buttonSubscribedLabel
-                          )}
-                        >
-                          {t('You are subscribed')}
+                        <span class={clsx(styles.buttonLabel, styles.buttonLabelVisible)}>
+                          {t('Follow')}
                         </span>
                       </Show>
                     </button>
-                  </Show>
+                  }
+                >
+                  <button
+                    onClick={() => subscribe(false)}
+                    class={clsx('button', styles.button)}
+                    classList={{
+                      [styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton,
+                      'button--subscribe': !props.isAuthorsList,
+                      'button--subscribe-topic': props.isAuthorsList || props.isTextButton,
+                      [styles.buttonWrite]: props.isAuthorsList || props.isTextButton,
+                      [styles.isSubscribing]: isSubscribing()
+                    }}
+                    disabled={isSubscribing()}
+                  >
+                    <Show when={!props.isAuthorsList && !props.isTextButton && !props.isAuthorPage}>
+                      <Icon name="author-unsubscribe" class={styles.icon} />
+                    </Show>
+                    <Show when={props.isTextButton || props.isAuthorPage}>
+                      <span
+                        class={clsx(
+                          styles.buttonLabel,
+                          styles.buttonLabelVisible,
+                          styles.buttonUnfollowLabel
+                        )}
+                      >
+                        {t('Unfollow')}
+                      </span>
+                      <span
+                        class={clsx(
+                          styles.buttonLabel,
+                          styles.buttonLabelVisible,
+                          styles.buttonSubscribedLabel
+                        )}
+                      >
+                        {t('You are subscribed')}
+                      </span>
+                    </Show>
+                  </button>
+                </Show>
 
-                  <Show when={!props.hideWriteButton}>
-                    <button
-                      class={clsx(styles.button, styles.buttonSubscribe)}
-                      classList={{
-                        'button--subscribe': !props.isAuthorsList,
-                        'button--subscribe-topic': props.isAuthorsList,
-                        [styles.buttonWrite]: props.liteButtons && props.isAuthorsList
-                      }}
-                      onClick={initChat}
-                    >
-                      <Show when={!props.isTextButton && !props.isAuthorPage}>
-                        <Icon name="comment" class={styles.icon} />
-                      </Show>
-                      <Show when={!props.liteButtons || props.isTextButton}>{t('Write')}</Show>
-                    </button>
-                  </Show>
-                </div>
-              </Show>
+                <Show when={!props.hideWriteButton}>
+                  <button
+                    class={clsx(styles.button, styles.buttonSubscribe)}
+                    classList={{
+                      'button--subscribe': !props.isAuthorsList,
+                      'button--subscribe-topic': props.isAuthorsList,
+                      [styles.buttonWrite]: props.liteButtons && props.isAuthorsList
+                    }}
+                    onClick={initChat}
+                  >
+                    <Show when={!props.isTextButton && !props.isAuthorPage}>
+                      <Icon name="comment" class={styles.icon} />
+                    </Show>
+                    <Show when={!props.liteButtons || props.isTextButton}>{t('Write')}</Show>
+                  </button>
+                </Show>
+              </div>
             </Show>
-          </ShowOnlyOnClient>
-        </div>
+          </Show>
+        </ShowOnlyOnClient>
+        <Show when={props.followers}>
+          <Modal variant="medium" name="followers" onClose={handleCloseFollowModals} maxHeight>
+            <>
+              <h2>{t('Followers')}</h2>
+              <div class={styles.listWrapper}>
+                <div class="row">
+                  <div class="col-24">
+                    <For each={props.followers}>
+                      {(follower: Author) => <AuthorBadge author={follower} />}
+                    </For>
+                  </div>
+                </div>
+              </div>
+            </>
+          </Modal>
+        </Show>
+
+        <Show when={props.following}>
+          <Modal variant="medium" name="following" onClose={handleCloseFollowModals} maxHeight>
+            <>
+              <h2>{t('Subscriptions')}</h2>
+              <ul class="view-switcher">
+                <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'all' })}>
+                  <button type="button" onClick={() => setSubscriptionFilter('all')}>
+                    {t('All')}
+                  </button>
+                  <span class="view-switcher__counter">{props.following.length}</span>
+                </li>
+                <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'users' })}>
+                  <button type="button" onClick={() => setSubscriptionFilter('users')}>
+                    {t('Users')}
+                  </button>
+                  <span class="view-switcher__counter">
+                    {props.following.filter((s) => 'name' in s).length}
+                  </span>
+                </li>
+                <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}>
+                  <button type="button" onClick={() => setSubscriptionFilter('topics')}>
+                    {t('Topics')}
+                  </button>
+                  <span class="view-switcher__counter">
+                    {props.following.filter((s) => 'title' in s).length}
+                  </span>
+                </li>
+              </ul>
+              <br />
+              <div class={styles.listWrapper}>
+                <div class="row">
+                  <div class="col-24">
+                    <For each={following()}>
+                      {(subscription) =>
+                        isAuthor(subscription) ? (
+                          <AuthorBadge author={subscription} />
+                        ) : (
+                          <TopicBadge topic={subscription} />
+                        )
+                      }
+                    </For>
+                  </div>
+                </div>
+              </div>
+            </>
+          </Modal>
+        </Show>
       </div>
-
-      <Show when={props.followers}>
-        <Modal variant="medium" name="followers" onClose={handleCloseFollowModals} maxHeight>
-          <>
-            <h2>{t('Followers')}</h2>
-            <div class={styles.listWrapper}>
-              <div class="row">
-                <div class="col-24">
-                  <For each={props.followers}>
-                    {(follower: Author) => <AuthorBadge author={follower} />}
-                  </For>
-                </div>
-              </div>
-            </div>
-          </>
-        </Modal>
-      </Show>
-
-      <Show when={props.following}>
-        <Modal variant="medium" name="following" onClose={handleCloseFollowModals} maxHeight>
-          <>
-            <h2>{t('Subscriptions')}</h2>
-            <ul class="view-switcher">
-              <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'all' })}>
-                <button type="button" onClick={() => setSubscriptionFilter('all')}>
-                  {t('All')}
-                </button>
-                <span class="view-switcher__counter">{props.following.length}</span>
-              </li>
-              <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'users' })}>
-                <button type="button" onClick={() => setSubscriptionFilter('users')}>
-                  {t('Users')}
-                </button>
-                <span class="view-switcher__counter">
-                  {props.following.filter((s) => 'name' in s).length}
-                </span>
-              </li>
-              <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}>
-                <button type="button" onClick={() => setSubscriptionFilter('topics')}>
-                  {t('Topics')}
-                </button>
-                <span class="view-switcher__counter">
-                  {props.following.filter((s) => 'title' in s).length}
-                </span>
-              </li>
-            </ul>
-            <br />
-            <div class={styles.listWrapper}>
-              <div class="row">
-                <div class="col-24">
-                  <For each={following()}>
-                    {(subscription) =>
-                      isAuthor(subscription) ? (
-                        <AuthorBadge author={subscription} />
-                      ) : (
-                        <TopicBadge topic={subscription} />
-                      )
-                    }
-                  </For>
-                </div>
-              </div>
-            </div>
-          </>
-        </Modal>
-      </Show>
-    </>
+    </div>
   )
 }
diff --git a/src/components/Views/Author/Author.module.scss b/src/components/Views/Author/Author.module.scss
index 45f849a3..5005b836 100644
--- a/src/components/Views/Author/Author.module.scss
+++ b/src/components/Views/Author/Author.module.scss
@@ -14,10 +14,13 @@
 }
 
 .authorHeader {
-  border-bottom: 2px solid #000;
+  border-bottom: 2px solid var(--default-color);
   margin-bottom: 2.4rem;
-  margin-top: -3.2rem;
   padding-bottom: 4rem;
+
+  @include media-breakpoint-up(lg) {
+    margin-top: -3.2rem;
+  }
 }
 
 .ratingContainer {