Fixed author subscribe buttons style

src/components/Author/AuthorBadge/AuthorBadge.module.scss

@@ -11,9 +11,6 @@
       margin-bottom: 0;
     }
   }
-  @include media-breakpoint-down(sm) {
-    flex-direction: column;
-  }
 
   @include media-breakpoint-up(sm) {
     margin-bottom: 2rem;
@@ -96,7 +93,7 @@
 
     &.iconed {
       padding: 6px !important;
-      min-width: 32px;
+      min-width: 4rem;
       width: unset;
 
       &:hover img {

src/components/Author/AuthorBadge/AuthorBadge.tsx

@@ -59,14 +59,14 @@ export const AuthorBadge = (props: Props) => {
   }
   const subscribeValue = createMemo(() => {
     if (props.iconButtons) {
-      return <Icon name="author-subscribe" />
+      return <Icon name="author-subscribe" class={stylesButton.icon} />
     }
     return isSubscribing() ? t('subscribing...') : t('Subscribe')
   })
 
   const unsubscribeValue = () => {
     if (props.iconButtons) {
-      return <Icon name="author-unsubscribe" />
+      return <Icon name="author-unsubscribe" class={stylesButton.icon} />
     }
 
     return (

src/components/_shared/Button/Button.module.scss

@@ -144,8 +144,6 @@
     width: 10em;
 
     .icon {
-      margin-right: 0.5em;
-
       img {
         filter: invert(1);
       }
@@ -156,7 +154,7 @@
       color: #000;
 
       .icon img {
-        filter: invert(0);
+        filter: invert(0) !important;
       }
 
       .buttonSubscribeLabel {
@@ -181,9 +179,17 @@
     background: #fff;
     color: #000;
 
+    .icon img {
+      filter: invert(0);
+    }
+
     &:hover {
       background: #000;
       color: #fff;
+
+      .icon img {
+        filter: invert(1) !important;
+      }
     }
   }
 }