Fixed subscriptions style

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

@@ -1,15 +1,26 @@
 .AuthorBadge {
+  align-items: flex-start;
   display: flex;
   flex-flow: row nowrap;
-  align-items: flex-start;
+  margin-bottom: 2rem;
-  margin-bottom: 1rem;
+
+  @include media-breakpoint-down(sm) {
+    flex-wrap: wrap;
+    margin-bottom: 3rem;
+  }
 
   .info {
     @include font-size(1.4rem);
-
-    display: flex;
-    flex-direction: column;
     border: none;
+    display: flex;
+    flex: 0 calc(100% - 5.2rem);
+    flex-direction: column;
+    line-height: 1.3;
+    margin-bottom: 1rem;
+
+    @include media-breakpoint-up(sm) {
+      flex: 1 100%;
+    }
 
     &:hover {
       background: unset;
@@ -26,7 +37,24 @@
   }
 
   .actions {
-    margin-left: auto;
+    flex: 0 20%;
-    padding-left: 1rem;
+    margin-left: 5.2rem;
+
+    @include media-breakpoint-up(sm) {
+      margin-left: 2rem;
+    }
+
+    @include media-breakpoint-up(md) {
+      flex: 1;
+      margin-left: auto;
+      padding-left: 1rem;
+      text-align: right;
+    }
+  }
+
+  .subscribeButton {
+    border-radius: 0.8rem !important;
+    margin-right: 0 !important;
+    width: 9em;
   }
 }

src/components/Author/AuthorBadge/AuthorBadge.tsx

@@ -44,7 +44,13 @@ export const AuthorBadge = (props: Props) => {
 
   return (
     <div class={clsx(styles.AuthorBadge)}>
-      <Userpic hasLink={true} isMedium={true} name={props.author.name} userpic={props.author.userpic} />
+      <Userpic
+        hasLink={true}
+        isMedium={true}
+        name={props.author.name}
+        userpic={props.author.userpic}
+        slug={props.author.slug}
+      />
       <a href={`/author/${props.author.slug}`} class={styles.info}>
         <div class={styles.name}>{props.author.name}</div>
         <Switch
@@ -84,14 +90,16 @@ export const AuthorBadge = (props: Props) => {
                   size="S"
                   value={isSubscribing() ? t('...subscribing') : t('Subscribe')}
                   onClick={() => handleSubscribe(true)}
+                  class={styles.subscribeButton}
                 />
               }
             >
               <Button
-                variant="secondary"
+                variant="bordered"
                 size="S"
                 value={t('You are subscribed')}
                 onClick={() => handleSubscribe(false)}
+                class={styles.subscribeButton}
               />
             </Show>
           </Show>

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

@@ -52,6 +52,10 @@
 
   @include media-breakpoint-between(md, lg) {
     flex-wrap: wrap;
+
+    .listWrapper & {
+      flex-wrap: nowrap;
+    }
   }
 
   &.authorDetailsShrinked {
@@ -69,6 +73,10 @@
 
   @include media-breakpoint-between(md, lg) {
     flex: 1 0 100%;
+
+    .listWrapper & {
+      flex: 1;
+    }
   }
 
   @include media-breakpoint-up(md) {
@@ -669,11 +677,6 @@
 
 .listWrapper {
   max-height: 70vh;
-  //padding-right: 2rem;
-
-  :global(.row) {
-    margin-right: 0;
-  }
 }
 
 .switcherCounter {

src/components/Nav/Modal/Modal.module.scss

@@ -73,6 +73,7 @@
 }
 
 .modalInner {
+  height: 100%;
   overflow: auto;
   padding: 5.4rem 2.4rem 2.4rem;
   position: relative;

src/components/Topic/Card.tsx

@@ -78,7 +78,7 @@ export const TopicCard = (props: TopicProps) => {
         <div
           classList={{
             [clsx('col-sm-18 col-md-24 col-lg-14 col-xl-15', styles.topicDetails)]: props.isNarrow,
-            [clsx('col-12 col-xs-17 col-md-18', styles.topicDetails)]: props.compact,
+            [clsx('col-24 col-sm-17 col-md-18', styles.topicDetails)]: props.compact,
             [clsx('col-sm-17 col-md-18', styles.topicDetails)]:
               !props.subscribeButtonBottom && !props.isNarrow && !props.compact
           }}
@@ -122,7 +122,7 @@ export const TopicCard = (props: TopicProps) => {
           class={styles.controlContainer}
           classList={{
             'col-sm-6 col-md-24 col-lg-10 col-xl-9': props.isNarrow,
-            'col-12 col-xs-7 col-md-6': props.compact,
+            'col-24 col-sm-7 col-md-6': props.compact,
             'col-sm-7 col-md-6': !props.subscribeButtonBottom && !props.isNarrow && !props.compact
           }}
         >

src/components/Topic/TopicBadge/TopicBadge.module.scss

@@ -2,8 +2,12 @@
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  gap: 1rem;
+  margin-bottom: 2rem;
-  margin-bottom: 1rem;
+
+  @include media-breakpoint-down(sm) {
+    flex-wrap: wrap;
+    margin-bottom: 3rem;
+  }
 
   .picture {
     display: block;
@@ -16,6 +20,7 @@
     background-position: 50% 50%;
     background-repeat: no-repeat;
     border: none;
+    margin-right: 1.2rem;
 
     &:hover {
       background-color: var(--black-50);
@@ -27,10 +32,16 @@
   }
 
   .info {
-    display: flex;
-    flex-direction: column;
     border: none;
+    display: flex;
+    flex: 0 calc(100% - 5.2rem);
+    flex-direction: column;
     @include font-size(1.4rem);
+    margin-bottom: 1rem;
+
+    @include media-breakpoint-up(sm) {
+      flex: 1 100%;
+    }
 
     &:hover {
       background: unset;
@@ -48,7 +59,24 @@
   }
 
   .actions {
-    margin-left: auto;
+    flex: 0 20%;
-    padding-left: 1rem;
+    margin-left: 5.2rem;
+
+    @include media-breakpoint-up(sm) {
+      margin-left: 2rem;
+    }
+
+    @include media-breakpoint-up(md) {
+      flex: 1;
+      margin-left: auto;
+      padding-left: 1rem;
+      text-align: right;
+    }
+  }
+
+  .subscribeButton {
+    border-radius: 0.8rem !important;
+    margin-right: 0 !important;
+    width: 9em;
   }
 }

src/components/Topic/TopicBadge/TopicBadge.tsx

@@ -83,14 +83,16 @@ export const TopicBadge = (props: Props) => {
                   size="S"
                   value={isSubscribing() ? t('...subscribing') : t('Subscribe')}
                   onClick={() => subscribe(true)}
+                  class={styles.subscribeButton}
                 />
               }
             >
               <Button
                 onClick={() => subscribe(false)}
-                variant="secondary"
+                variant="bordered"
                 size="S"
                 value={t('You are subscribed')}
+                class={styles.subscribeButton}
               />
             </Show>
           </Show>

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

@@ -118,6 +118,6 @@
     height: 32px;
     min-width: 53px;
     font-size: 15px;
-    padding: 8px 16px;
+    padding: 1rem 1.2rem;
   }
 }