From 4c787fe49c70ceb5220ed389db0cdc3f2bbb62a2 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Tue, 30 Apr 2024 15:26:53 +0300
Subject: [PATCH 1/3] Topics list fixes

---
 src/components/Author/AuthorCard/AuthorCard.tsx |  2 +-
 .../Topic/TopicBadge/TopicBadge.module.scss     | 17 ++++++++++-------
 src/components/Topic/TopicBadge/TopicBadge.tsx  | 17 +++++++++--------
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index 65e14027..aeb64cdf 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@@ -314,7 +314,7 @@ export const AuthorCard = (props: Props) => {
                         isAuthor(subscription) ? (
                           <AuthorBadge author={subscription} />
                         ) : (
-                          <TopicBadge topic={subscription} />
+                          <TopicBadge topic={subscription} subscriptionsMode={true} />
                         )
                       }
                     </For>
diff --git a/src/components/Topic/TopicBadge/TopicBadge.module.scss b/src/components/Topic/TopicBadge/TopicBadge.module.scss
index 740d33f3..292f1b81 100644
--- a/src/components/Topic/TopicBadge/TopicBadge.module.scss
+++ b/src/components/Topic/TopicBadge/TopicBadge.module.scss
@@ -6,7 +6,6 @@
     align-items: flex-start;
     display: flex;
     flex-direction: row;
-    margin-bottom: 1.6rem;
   }
 
   .basicInfo {
@@ -19,26 +18,29 @@
 
   .info {
     @include font-size(1.4rem);
-
     border: none;
-    display: flex;
-    flex-direction: column;
+    //display: flex;
+    //flex-direction: column;
 
     &:hover {
       background: unset;
+      color: inherit;
+
+      .title {
+        background: var(--background-color-invert);
+        color: var(--default-color-invert);
+      }
     }
 
     .title {
       @include font-size(2.2rem);
-
       font-weight: bold;
-      margin-bottom: 0.8rem;
     }
 
     .description {
       @include font-size(1.6rem);
-
       line-height: 1.4;
+      margin: 0.8rem 0;
       -webkit-line-clamp: 3;
     }
   }
@@ -47,6 +49,7 @@
     display: flex;
     flex-direction: row;
     gap: 1rem;
+    margin-bottom: -1rem;
   }
 
   .subscribeButton {
diff --git a/src/components/Topic/TopicBadge/TopicBadge.tsx b/src/components/Topic/TopicBadge/TopicBadge.tsx
index 1fbcfd63..66a6a62f 100644
--- a/src/components/Topic/TopicBadge/TopicBadge.tsx
+++ b/src/components/Topic/TopicBadge/TopicBadge.tsx
@@ -15,6 +15,7 @@ type Props = {
   topic: Topic
   minimizeSubscribeButton?: boolean
   showStat?: boolean
+  subscriptionsMode?: boolean
 }
 
 export const TopicBadge = (props: Props) => {
@@ -52,16 +53,16 @@ export const TopicBadge = (props: Props) => {
         <div class={styles.basicInfo}>
           <a href={`/topic/${props.topic.slug}`} class={styles.info}>
             <span class={styles.title}>{title()}</span>
-            <Show
-              when={props.topic.body}
-              fallback={
-                <div class={styles.description}>
-                  {t('PublicationsWithCount', { count: props.topic?.stat?.shouts ?? 0 })}
-                </div>
-              }
-            >
+
+            <Show when={props.topic.body}>
               <div innerHTML={props.topic.body} class={clsx('text-truncate', styles.description)} />
             </Show>
+
+            <Show when={props.subscriptionsMode && !props.topic.body}>
+              <div class={styles.description}>
+                {t('PublicationsWithCount', { count: props.topic?.stat?.shouts ?? 0 })}
+              </div>
+            </Show>
           </a>
         </div>
         <div class={styles.actions}>

From e1484e0aa97dd636d975a717c9c256c5885e65db Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Tue, 30 Apr 2024 16:56:39 +0300
Subject: [PATCH 2/3] Revert styles for user descriptions

---
 .../Topic/TopicBadge/TopicBadge.module.scss   | 71 +++++++++++++++++++
 .../Topic/TopicBadge/TopicBadge.tsx           | 42 ++++++++---
 2 files changed, 102 insertions(+), 11 deletions(-)

diff --git a/src/components/Topic/TopicBadge/TopicBadge.module.scss b/src/components/Topic/TopicBadge/TopicBadge.module.scss
index 292f1b81..271d1e20 100644
--- a/src/components/Topic/TopicBadge/TopicBadge.module.scss
+++ b/src/components/Topic/TopicBadge/TopicBadge.module.scss
@@ -16,6 +16,33 @@
     gap: 1rem;
   }
 
+  .picture {
+    display: block;
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    border-radius: 8px;
+    background-color: var(--black-50);
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5LjUgMTQuMjVDMTkuOTE0MSAxNC4yNSAyMC4yNSAxNC41ODU5IDIwLjI1IDE1QzIwLjI1IDE1LjQxNDEgMTkuOTE0MSAxNS43NSAxOS41IDE1Ljc1SDE1Ljc1VjE5LjVDMTUuNzUgMTkuOTE0MSAxNS40MTQxIDIwLjI1IDE1IDIwLjI1QzE0LjU4NTkgMjAuMjUgMTQuMjUgMTkuOTE0MSAxNC4yNSAxOS41VjE1Ljc1SDkuNzVWMTkuNUM5Ljc1IDE5LjkxNDEgOS40MTQwNiAyMC4yNSA5IDIwLjI1QzguNTg1OTQgMjAuMjUgOC4yNSAxOS45MTQxIDguMjUgMTkuNVYxNS43NUg0LjVDNC4wODU5NCAxNS43NSAzLjc1IDE1LjQxNDEgMy43NSAxNUMzLjc1IDE0LjU4NTkgNC4wODU5NCAxNC4yNSA0LjUgMTQuMjVIOC4yNVY5Ljc1SDQuNUM0LjA4NTk0IDkuNzUgMy43NSA5LjQxNDA2IDMuNzUgOUMzLjc1IDguNTg1OTQgNC4wODU5NCA4LjI1IDQuNSA4LjI1SDguMjVWNC41QzguMjUgNC4wODU5NCA4LjU4NTk0IDMuNzUgOSAzLjc1QzkuNDE0MDYgMy43NSA5Ljc1IDQuMDg1OTQgOS43NSA0LjVWOC4yNUgxNC4yNVY0LjVDMTQuMjUgNC4wODU5NCAxNC41ODU5IDMuNzUgMTUgMy43NUMxNS40MTQxIDMuNzUgMTUuNzUgNC4wODU5NCAxNS43NSA0LjVWOC4yNUgxOS41QzE5LjkxNDEgOC4yNSAyMC4yNSA4LjU4NTk0IDIwLjI1IDlDMjAuMjUgOS40MTQwNiAxOS45MTQxIDkuNzUgMTkuNSA5Ljc1SDE1Ljc1VjE0LjI1SDE5LjVaTTkuNzUgMTQuMjVIMTQuMjVWOS43NUg5Ljc1VjE0LjI1WiIgZmlsbD0iIzlGQTFBNyIvPgo8L3N2Zz4K');
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    border: none;
+
+    &.smallSize {
+      width: 32px;
+      height: 32px;
+      min-width: 32px;
+    }
+
+    &:hover {
+      background-color: var(--black-50);
+    }
+
+    &.withImage {
+      background-size: cover;
+    }
+  }
+
   .info {
     @include font-size(1.4rem);
     border: none;
@@ -59,6 +86,50 @@
   }
 }
 
+.TopicBadgeSubscriptionsMode {
+  margin-bottom: 2rem;
+
+  .content {
+    margin-bottom: 0.8rem;
+  }
+
+  .info {
+    &:hover {
+      .title {
+        background-color: var(--blue-500);
+        color: var(--white-500);
+      }
+    }
+
+    .title {
+      @include font-size(1.4rem);
+      font-weight: 500;
+      line-height: 1em;
+      color: var(--blue-500);
+      text-transform: uppercase;
+    }
+
+    .description {
+      color: var(--black-400);
+      @include font-size(1.4rem);
+      font-weight: 500;
+      margin: 0;
+    }
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+  }
+
+  .subscribeButton {
+    border-radius: 0.8rem !important;
+    margin-right: 0 !important;
+    width: 9em;
+  }
+}
+
 .stats {
   @include font-size(1.5rem);
 
diff --git a/src/components/Topic/TopicBadge/TopicBadge.tsx b/src/components/Topic/TopicBadge/TopicBadge.tsx
index 66a6a62f..ed3f4902 100644
--- a/src/components/Topic/TopicBadge/TopicBadge.tsx
+++ b/src/components/Topic/TopicBadge/TopicBadge.tsx
@@ -48,9 +48,24 @@ export const TopicBadge = (props: Props) => {
     lang() === 'en' ? capitalize(props.topic.slug.replaceAll('-', ' ')) : props.topic.title
 
   return (
-    <div class={styles.TopicBadge}>
+    <div class={clsx(styles.TopicBadge, { [styles.TopicBadgeSubscriptionsMode]: props.subscriptionsMode })}>
       <div class={styles.content}>
         <div class={styles.basicInfo}>
+          <Show when={props.subscriptionsMode}>
+            <a
+              href={`/topic/${props.topic.slug}`}
+              class={clsx(styles.picture, {
+                [styles.withImage]: props.topic.pic,
+                [styles.smallSize]: isMobileView(),
+              })}
+              style={
+                props.topic.pic && {
+                  'background-image': `url('${getImageUrl(props.topic.pic, { width: 40, height: 40 })}')`,
+                }
+              }
+            />
+          </Show>
+
           <a href={`/topic/${props.topic.slug}`} class={styles.info}>
             <span class={styles.title}>{title()}</span>
 
@@ -75,18 +90,23 @@ export const TopicBadge = (props: Props) => {
           />
         </div>
       </div>
-      <div class={styles.stats}>
-        <span class={styles.statsItem}>{t('shoutsWithCount', { count: props.topic?.stat?.shouts })}</span>
-        <span class={styles.statsItem}>{t('authorsWithCount', { count: props.topic?.stat?.authors })}</span>
-        <span class={styles.statsItem}>
-          {t('FollowersWithCount', { count: props.topic?.stat?.followers })}
-        </span>
-        <Show when={props.topic?.stat?.comments}>
+
+      <Show when={!props.subscriptionsMode}>
+        <div class={styles.stats}>
+          <span class={styles.statsItem}>{t('shoutsWithCount', { count: props.topic?.stat?.shouts })}</span>
           <span class={styles.statsItem}>
-            {t('CommentsWithCount', { count: props.topic?.stat?.comments ?? 0 })}
+            {t('authorsWithCount', { count: props.topic?.stat?.authors })}
           </span>
-        </Show>
-      </div>
+          <span class={styles.statsItem}>
+            {t('FollowersWithCount', { count: props.topic?.stat?.followers })}
+          </span>
+          <Show when={props.topic?.stat?.comments}>
+            <span class={styles.statsItem}>
+              {t('CommentsWithCount', { count: props.topic?.stat?.comments ?? 0 })}
+            </span>
+          </Show>
+        </div>
+      </Show>
     </div>
   )
 }

From 12ca2b9a97bba4d3defeb4d33eaee2abea9ef68d Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Tue, 30 Apr 2024 18:14:10 +0300
Subject: [PATCH 3/3] Fixed author badge in the following modal

---
 src/components/Author/AuthorBadge/AuthorBadge.tsx |  3 ++-
 src/components/Author/AuthorCard/AuthorCard.tsx   |  2 +-
 .../Topic/TopicBadge/TopicBadge.module.scss       |  4 ++--
 src/components/Topic/TopicBadge/TopicBadge.tsx    | 15 ++++++++-------
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/Author/AuthorBadge/AuthorBadge.tsx b/src/components/Author/AuthorBadge/AuthorBadge.tsx
index bc7c3bbd..75687bfc 100644
--- a/src/components/Author/AuthorBadge/AuthorBadge.tsx
+++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx
@@ -27,6 +27,7 @@ type Props = {
   inviteView?: boolean
   onInvite?: (id: number) => void
   selected?: boolean
+  subscriptionsMode?: boolean
 }
 export const AuthorBadge = (props: Props) => {
   const { mediaMatches } = useMediaQuery()
@@ -114,7 +115,7 @@ export const AuthorBadge = (props: Props) => {
                 <div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio} />
               </Match>
             </Switch>
-            <Show when={props.author?.stat}>
+            <Show when={props.author?.stat && !props.subscriptionsMode}>
               <div class={styles.bio}>
                 <Show when={props.author?.stat.shouts > 0}>
                   <div>{t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}</div>
diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index aeb64cdf..1423e3f7 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@@ -312,7 +312,7 @@ export const AuthorCard = (props: Props) => {
                     <For each={authorSubs()}>
                       {(subscription) =>
                         isAuthor(subscription) ? (
-                          <AuthorBadge author={subscription} />
+                          <AuthorBadge author={subscription} subscriptionsMode={true} />
                         ) : (
                           <TopicBadge topic={subscription} subscriptionsMode={true} />
                         )
diff --git a/src/components/Topic/TopicBadge/TopicBadge.module.scss b/src/components/Topic/TopicBadge/TopicBadge.module.scss
index 271d1e20..b830a7c8 100644
--- a/src/components/Topic/TopicBadge/TopicBadge.module.scss
+++ b/src/components/Topic/TopicBadge/TopicBadge.module.scss
@@ -68,7 +68,7 @@
       @include font-size(1.6rem);
       line-height: 1.4;
       margin: 0.8rem 0;
-      -webkit-line-clamp: 3;
+      -webkit-line-clamp: 2;
     }
   }
 
@@ -111,7 +111,7 @@
 
     .description {
       color: var(--black-400);
-      @include font-size(1.4rem);
+      @include font-size(1.2rem);
       font-weight: 500;
       margin: 0;
     }
diff --git a/src/components/Topic/TopicBadge/TopicBadge.tsx b/src/components/Topic/TopicBadge/TopicBadge.tsx
index ed3f4902..4eaee460 100644
--- a/src/components/Topic/TopicBadge/TopicBadge.tsx
+++ b/src/components/Topic/TopicBadge/TopicBadge.tsx
@@ -69,15 +69,16 @@ export const TopicBadge = (props: Props) => {
           <a href={`/topic/${props.topic.slug}`} class={styles.info}>
             <span class={styles.title}>{title()}</span>
 
-            <Show when={props.topic.body}>
+            <Show
+              when={props.topic.body}
+              fallback={
+                <div class={styles.description}>
+                  {t('PublicationsWithCount', { count: props.topic?.stat?.shouts ?? 0 })}
+                </div>
+              }
+            >
               <div innerHTML={props.topic.body} class={clsx('text-truncate', styles.description)} />
             </Show>
-
-            <Show when={props.subscriptionsMode && !props.topic.body}>
-              <div class={styles.description}>
-                {t('PublicationsWithCount', { count: props.topic?.stat?.shouts ?? 0 })}
-              </div>
-            </Show>
           </a>
         </div>
         <div class={styles.actions}>