Fixed user links style

public/icons/edit.svg

@@ -1,4 +1,5 @@
 <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 7.29824L0.000122786 10.1051L2.77778 10.1053L0 7.29824ZM7.22222 0L0.659722 6.63158L3.4375 9.4386L10 2.80702L7.22222 0Z" fill="#696969"/>
-<path d="M0 10.7368H10V12H0V10.7368Z" fill="#696969"/>
+<path fill-rule="evenodd" clip-rule="evenodd"
+      d="M0 7.29824L0.000122786 10.1051L2.77778 10.1053L0 7.29824ZM7.22222 0L0.659722 6.63158L3.4375 9.4386L10 2.80702L7.22222 0Z" fill="#000"/>
+<path d="M0 10.7368H10V12H0V10.7368Z" fill="#000"/>
 </svg>

src/components/Author/Card.module.scss

@@ -32,6 +32,9 @@
 }
 
 .authorSubscribe {
+  align-items: center;
+  display: flex;
+
   @include media-breakpoint-down(lg) {
     padding: 0 0 0 42px;
   }
@@ -107,6 +110,10 @@
       background-image: url(/icons/instagram-white.svg);
     }
   }
+
+  button {
+    margin-right: 0.5em;
+  }
 }
 
 .buttonSubscribe {
@@ -130,15 +137,26 @@
   background: #f7f7f7;
   color: #000;
   display: inline-flex;
+  transition: background-color 0.3s, color 0.3s;
 
   @include font-size(1.5rem);
 
+  &:hover {
+    background: #000;
+    color: #fff;
+
+    img {
+      filter: invert(1);
+    }
+  }
+
   .icon {
     margin-right: 0.5em;
   }
 
   img {
     height: 15px;
+    transition: filter 0.3s;
   }
 }
 
@@ -156,7 +174,6 @@
   }
 
   .authorSubscribe {
-    display: flex;
     margin-top: 2rem;
   }
 

src/components/Author/Card.tsx

@@ -19,6 +19,7 @@ interface AuthorCardProps {
   subscribed?: boolean
   author: Author
   isAuthorPage?: boolean
+  noSocialButtons?: boolean
 }
 
 export const AuthorCard = (props: AuthorCardProps) => {
@@ -84,7 +85,9 @@ export const AuthorCard = (props: AuthorCardProps) => {
                 {t('Write')}
               </button>
 
-              <For each={props.author.links}>{(link) => <a href={link} />}</For>
+              <Show when={!props.noSocialButtons}>
+                <For each={props.author.links}>{(link) => <a href={link} />}</For>
+              </Show>
             </Show>
           </div>
         </Show>

src/components/Views/AllAuthors.tsx

@@ -106,6 +106,7 @@ export const AllAuthorsView = (props: Props) => {
                             compact={false}
                             hasLink={true}
                             subscribed={subscribed(author.slug)}
+                            noSocialButtons={true}
                           />
                         )}
                       </For>