Minor style fixes

src/components/Article/AudioHeader/AudioHeader.module.scss

@@ -5,19 +5,6 @@
   .albumInfo {
     margin-right: 224px;
 
-    .topic {
-      .link {
-        @include font-size(1.6rem);
-
-        color: var(--blue-link);
-        border: none;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-
     & > h1 {
       margin: 16px 0 0;
     }

src/components/Article/AudioHeader/AudioHeader.tsx

@@ -7,6 +7,7 @@ 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 = {
   title: string
@@ -29,11 +30,7 @@ export const AudioHeader = (props: Props) => {
       </div>
       <div class={styles.albumInfo}>
         <Show when={props.topic}>
-          <div class={styles.topic}>
-            <a href={getPagePath(router, 'topic', { slug: props.topic.slug })} class={styles.link}>
-              {props.topic.title}
-            </a>
-          </div>
+          <CardTopic title={props.topic.title} slug={props.topic.slug} />
         </Show>
         <h1>{props.title}</h1>
         <Show when={props.artistData}>

src/components/Author/AuthorCard/AuthorCard.module.scss

@@ -90,19 +90,22 @@
 
 .authorName {
   border: none !important;
-  display: block;
   font-size: 1.6rem;
   font-weight: 500;
   margin-bottom: 0.8rem;
 
-  .listWrapper &:before {
-    content: '';
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: 2;
+  .listWrapper & {
+    display: block;
+
+    &:before {
+      content: '';
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: 2;
+    }
   }
 }
 
@@ -470,21 +473,6 @@
   }
 }
 
-.buttonWriteAuthorPage {
-  background: #f6f6f6 !important;
-  border-radius: 0.8rem;
-
-  &:hover {
-    background: #e9e9ee !important;
-    border-color: #e9e9ee;
-  }
-
-  &:active {
-    background: #ccc !important;
-    border-color: #ccc;
-  }
-}
-
 .authorPage {
   align-items: center;
 

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -353,9 +353,8 @@ export const AuthorCard = (props: Props) => {
 
                   <Show when={!props.hideWriteButton}>
                     <button
-                      class={styles.button}
+                      class={clsx(styles.button, styles.buttonSubscribe)}
                       classList={{
-                        [styles.buttonWriteAuthorPage]: !props.isAuthorsList,
                         'button--subscribe': !props.isAuthorsList,
                         'button--subscribe-topic': props.isAuthorsList,
                         [styles.buttonWrite]: props.liteButtons && props.isAuthorsList

src/components/Nav/Header/Header.module.scss

@@ -250,7 +250,7 @@
 }
 
 .mainNavigationItemActive {
-  background: var(--link-hover-background);
+  background: var(--link-hover-background) !important;
   color: var(--link-hover-color) !important;
 }
 

src/components/Topic/Card.module.scss

@@ -60,7 +60,7 @@
   margin-bottom: 1.2rem;
   margin-top: 0.5rem !important;
 
-  a {
+  a:link {
     border: none;
   }
 }

src/components/_shared/PageLayout.module.scss

@@ -1,4 +1,4 @@
-.withPadding {
+main.withPadding {
   padding-top: 58px;
 }
 

src/components/_shared/Popup/Popup.module.scss

@@ -73,7 +73,8 @@
     padding-top: 1em;
   }
 
-  a {
+  a:link,
+  :global(.link) {
     border: none;
     white-space: nowrap;
 
@@ -100,7 +101,9 @@
 
   .shareControl {
     text-align: left;
-    transition: color 0.3s, background-color 0.3s;
+    transition:
+      color 0.3s,
+      background-color 0.3s;
     white-space: nowrap;
 
     &:hover {

src/styles/app.scss

@@ -645,7 +645,7 @@ figure {
       cursor: default;
 
       &:hover {
-        color: #fff;
+        background: #fff;
       }
     }
   }