Fixed author link style in dark blocks

src/components/Author/AhtorLink/AhtorLink.module.scss

@@ -49,3 +49,16 @@
     }
   }
 }
+
+.authorLinkFloorImportant {
+  .link {
+    &:hover {
+      background: #fff !important;
+
+      .name {
+        background: none;
+        color: #000;
+      }
+    }
+  }
+}

src/components/Author/AhtorLink/AuthorLink.tsx

@@ -9,11 +9,16 @@ type Props = {
   author: Author
   size?: 'XS' | 'M' | 'L'
   class?: string
+  isFloorImportant?: boolean
 }
 
 export const AuthorLink = (props: Props) => {
   return (
-    <div class={clsx(styles.AuthorLink, props.class, styles[props.size ?? 'M'])}>
+    <div
+      class={clsx(styles.AuthorLink, props.class, styles[props.size ?? 'M'], {
+        [styles.authorLinkFloorImportant]: props.isFloorImportant,
+      })}
+    >
       <a class={styles.link} href={`/author/${props.author.slug}`}>
         <Userpic size={props.size ?? 'M'} name={props.author.name} userpic={props.author.userpic} />
         <div class={styles.name}>{props.author.name}</div>

src/components/Feed/ArticleCard/ArticleCard.tsx

@@ -210,7 +210,13 @@ export const ArticleCard = (props: ArticleCardProps) => {
               <div class={styles.shoutAuthor}>
                 <For each={props.article.authors}>
                   {(author) => {
-                    return <AuthorLink size={'XS'} author={author} />
+                    return (
+                      <AuthorLink
+                        size={'XS'}
+                        author={author}
+                        isFloorImportant={props.settings.isFloorImportant || props.settings?.isWithCover}
+                      />
+                    )
                   }}
                 </For>
               </div>