From 9ec36168ae907c426e8b36431d646aa4f51fc231 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Fri, 10 May 2024 17:14:06 +0300
Subject: [PATCH] Topic header fixes

---
 .../Author/AuthorCard/AuthorCard.module.scss  | 58 -------------------
 .../Author/AuthorCard/AuthorCard.tsx          | 55 +-----------------
 src/components/Topic/Full.module.scss         | 40 ++++++++++---
 src/components/Topic/Full.tsx                 | 21 ++++++-
 .../Subscribers/Subscribers.module.scss       | 57 ++++++++++++++++++
 .../_shared/Subscribers/Subscribers.tsx       | 57 ++++++++++++++++++
 src/components/_shared/Subscribers/index.ts   |  1 +
 7 files changed, 169 insertions(+), 120 deletions(-)
 create mode 100644 src/components/_shared/Subscribers/Subscribers.module.scss
 create mode 100644 src/components/_shared/Subscribers/Subscribers.tsx
 create mode 100644 src/components/_shared/Subscribers/index.ts

diff --git a/src/components/Author/AuthorCard/AuthorCard.module.scss b/src/components/Author/AuthorCard/AuthorCard.module.scss
index 3e13863e..14db38aa 100644
--- a/src/components/Author/AuthorCard/AuthorCard.module.scss
+++ b/src/components/Author/AuthorCard/AuthorCard.module.scss
@@ -429,64 +429,6 @@
   }
 }
 
-.subscribersContainer {
-  display: flex;
-  flex-wrap: wrap;
-  font-size: 1.4rem;
-  margin-top: 1.5rem;
-
-  @include media-breakpoint-down(md) {
-    justify-content: center;
-  }
-}
-
-.subscribers {
-  align-items: center;
-  cursor: pointer;
-  display: inline-flex;
-  margin: 0 2% 1rem;
-  vertical-align: top;
-  border-bottom: unset !important;
-
-  &:first-child {
-    margin-left: 0;
-  }
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  .subscribersItem {
-    position: relative;
-
-    &:nth-child(1) {
-      z-index: 2;
-    }
-
-    &:nth-child(2) {
-      z-index: 1;
-    }
-
-    &:not(:last-child) {
-      margin-right: -4px;
-      box-shadow: 0 0 0 1px var(--background-color);
-    }
-  }
-
-  .subscribersCounter {
-    font-weight: 500;
-    margin-left: 1rem;
-  }
-
-  &:hover {
-    background: none !important;
-
-    .subscribersCounter {
-      background: var(--background-color-invert);
-    }
-  }
-}
-
 .listWrapper {
   max-height: 70vh;
 }
diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index c3b1ccd3..53d764c5 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@@ -18,6 +18,7 @@ import { Modal } from '../../Nav/Modal'
 import { TopicBadge } from '../../Topic/TopicBadge'
 import { Button } from '../../_shared/Button'
 import { ShowOnlyOnClient } from '../../_shared/ShowOnlyOnClient'
+import { Subscribers } from '../../_shared/Subscribers'
 import { AuthorBadge } from '../AuthorBadge'
 import { Userpic } from '../Userpic'
 
@@ -126,59 +127,7 @@ export const AuthorCard = (props: Props) => {
             <div class={styles.authorAbout} innerHTML={props.author.bio} />
           </Show>
           <Show when={props.followers?.length > 0 || props.following?.length > 0}>
-            <div class={styles.subscribersContainer}>
-              <Show when={props.followers && props.followers.length > 0}>
-                <a href="?m=followers" class={styles.subscribers}>
-                  <For each={props.followers.slice(0, 3)}>
-                    {(f) => (
-                      <Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />
-                    )}
-                  </For>
-                  <div class={styles.subscribersCounter}>
-                    {t('SubscriberWithCount', {
-                      count: props.followers.length ?? 0,
-                    })}
-                  </div>
-                </a>
-              </Show>
-
-              <Show when={props.following && props.following.length > 0}>
-                <a href="?m=following" class={styles.subscribers}>
-                  <For each={props.following.slice(0, 3)}>
-                    {(f) => {
-                      if ('name' in f) {
-                        return (
-                          <Userpic
-                            size={'XS'}
-                            name={f.name}
-                            userpic={f.pic}
-                            class={styles.subscribersItem}
-                          />
-                        )
-                      }
-
-                      if ('title' in f) {
-                        return (
-                          <Userpic
-                            size={'XS'}
-                            name={f.title}
-                            userpic={f.pic}
-                            class={styles.subscribersItem}
-                          />
-                        )
-                      }
-
-                      return null
-                    }}
-                  </For>
-                  <div class={styles.subscribersCounter}>
-                    {t('SubscriptionWithCount', {
-                      count: props?.following.length ?? 0,
-                    })}
-                  </div>
-                </a>
-              </Show>
-            </div>
+            <Subscribers followers={props.followers} following={props.following} />
           </Show>
         </div>
         <ShowOnlyOnClient>
diff --git a/src/components/Topic/Full.module.scss b/src/components/Topic/Full.module.scss
index bfa1efbb..8c6d7b49 100644
--- a/src/components/Topic/Full.module.scss
+++ b/src/components/Topic/Full.module.scss
@@ -1,6 +1,5 @@
 .topicHeader {
-  @include font-size(1.7rem);
-
+  font-weight: 500;
   padding: 2.8rem $container-padding-x 0;
   text-align: center;
 
@@ -12,10 +11,16 @@
   }
 }
 
+.topicDescription {
+  @include font-size(1.8rem);
+  line-height: 1.4;
+  margin: 1rem 0 2rem;
+}
+
 .topicActions {
   margin-top: 2.8rem;
 
-  .write {
+  .writeControl {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -23,13 +28,34 @@
     min-width: 64px;
     font-size: 17px;
     padding: 8px 16px;
-    background: var(--background-color-invert);
-    color: var(--default-color-invert);
-    border: none;
+    border: 1px solid #f7f7f7;
+    background: #f7f7f7;
+    color: var(--default-color);
     font-weight: 500;
-    border-radius: 2px;
     cursor: pointer;
     margin: 0 1.2rem 1em;
     white-space: nowrap;
   }
+
+  .followControl,
+  .writeControl {
+    border-radius: 0.8rem;
+  }
+}
+
+.topicDetails {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  justify-content: center;
+  gap: 4rem;
+  margin-top: 1.5rem;
+}
+
+.topicDetailsItem {
+  display: flex;
+}
+
+.topicDetailsIcon {
+
 }
diff --git a/src/components/Topic/Full.tsx b/src/components/Topic/Full.tsx
index 5e22aed1..ebc4f1c0 100644
--- a/src/components/Topic/Full.tsx
+++ b/src/components/Topic/Full.tsx
@@ -9,6 +9,8 @@ import { useSession } from '../../context/session'
 import { FollowingEntity } from '../../graphql/schema/core.gen'
 import { Button } from '../_shared/Button'
 
+import { Icon } from '../_shared/Icon'
+import { Subscribers } from '../_shared/Subscribers'
 import styles from './Full.module.scss'
 
 type Props = {
@@ -40,14 +42,29 @@ export const FullTopic = (props: Props) => {
   return (
     <div class={clsx(styles.topicHeader, 'col-md-16 col-lg-12 offset-md-4 offset-lg-6')}>
       <h1>#{props.topic?.title}</h1>
-      <p innerHTML={props.topic?.body} />
+      <p class={styles.topicDescription} innerHTML={props.topic?.body} />
+
+      <div class={styles.topicDetails}>
+        <Show when={props.topic?.stat}>
+          <div class={styles.topicDetailsItem}>
+            <Icon name="feed-all" class={styles.topicDetailsIcon} />
+            {t('PublicationsWithCount', {
+              count: props.topic?.stat.shouts ?? 0,
+            })}
+          </div>
+        </Show>
+
+        <Subscribers followers={props.topic?.followers} following={props.topic?.following} />
+      </div>
+
       <div class={clsx(styles.topicActions)}>
         <Button
           variant="primary"
           onClick={handleFollowClick}
           value={followed() ? t('Unfollow the topic') : t('Follow the topic')}
+          class={styles.followControl}
         />
-        <a class={styles.write} href={`/create/?topicId=${props.topic?.id}`}>
+        <a class={styles.writeControl} href={`/create/?topicId=${props.topic?.id}`}>
           {t('Write about the topic')}
         </a>
       </div>
diff --git a/src/components/_shared/Subscribers/Subscribers.module.scss b/src/components/_shared/Subscribers/Subscribers.module.scss
new file mode 100644
index 00000000..6248311c
--- /dev/null
+++ b/src/components/_shared/Subscribers/Subscribers.module.scss
@@ -0,0 +1,57 @@
+.subscribersContainer {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  margin-top: 1.5rem;
+
+  @include media-breakpoint-down(md) {
+    justify-content: center;
+  }
+}
+
+.subscribers {
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  margin: 0 2% 1rem;
+  vertical-align: top;
+  border-bottom: unset !important;
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  .subscribersItem {
+    position: relative;
+
+    &:nth-child(1) {
+      z-index: 2;
+    }
+
+    &:nth-child(2) {
+      z-index: 1;
+    }
+
+    &:not(:last-child) {
+      margin-right: -4px;
+      box-shadow: 0 0 0 1px var(--background-color);
+    }
+  }
+
+  .subscribersCounter {
+    font-weight: 500;
+    margin-left: 1rem;
+  }
+
+  &:hover {
+    background: none !important;
+
+    .subscribersCounter {
+      background: var(--background-color-invert);
+    }
+  }
+}
diff --git a/src/components/_shared/Subscribers/Subscribers.tsx b/src/components/_shared/Subscribers/Subscribers.tsx
new file mode 100644
index 00000000..e418f37f
--- /dev/null
+++ b/src/components/_shared/Subscribers/Subscribers.tsx
@@ -0,0 +1,57 @@
+import { For, Show } from 'solid-js'
+
+import { useLocalize } from '../../../context/localize'
+
+import { Author, Topic } from '../../../graphql/schema/core.gen'
+import { Userpic } from '../../Author/Userpic'
+
+import styles from './Subscribers.module.scss'
+
+type Props = {
+  followers: Author[]
+  following?: Array<Author | Topic>
+}
+
+export const Subscribers = (props: Props) => {
+  const { t } = useLocalize()
+
+  return (
+    <div class={styles.subscribersContainer}>
+      <Show when={props.followers && props.followers.length > 0}>
+        <a href="?m=followers" class={styles.subscribers}>
+          <For each={props.followers.slice(0, 3)}>
+            {(f) => <Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />}
+          </For>
+          <div class={styles.subscribersCounter}>
+            {t('SubscriberWithCount', {
+              count: props.followers.length ?? 0,
+            })}
+          </div>
+        </a>
+      </Show>
+
+      <Show when={props.following && props.following.length > 0}>
+        <a href="?m=following" class={styles.subscribers}>
+          <For each={props.following.slice(0, 3)}>
+            {(f) => {
+              if ('name' in f) {
+                return <Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />
+              }
+
+              if ('title' in f) {
+                return <Userpic size={'XS'} name={f.title} userpic={f.pic} class={styles.subscribersItem} />
+              }
+
+              return null
+            }}
+          </For>
+          <div class={styles.subscribersCounter}>
+            {t('SubscriptionWithCount', {
+              count: props?.following.length ?? 0,
+            })}
+          </div>
+        </a>
+      </Show>
+    </div>
+  )
+}
diff --git a/src/components/_shared/Subscribers/index.ts b/src/components/_shared/Subscribers/index.ts
new file mode 100644
index 00000000..cfa0eef9
--- /dev/null
+++ b/src/components/_shared/Subscribers/index.ts
@@ -0,0 +1 @@
+export { Subscribers } from './Subscribers'