Update featured author layout

src/components/AuthorSubscribe/AuthorSubscribe.module.scss

@@ -1,7 +1,7 @@
 .authorSubscribeCard {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 16px;
   border-radius: 8px;
   background: var(--background-header-input);
   width: 300px;
@@ -14,6 +14,7 @@
     .userData {
       display: flex;
       flex-direction: column;
+      justify-content: center;
       gap: 4px;
       overflow: hidden;
 
@@ -49,9 +50,9 @@
 
   .actions {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
     align-items: center;
-    gap: 6px;
+    gap: 8px;
 
     >button {
       color: var(--text-primary);
@@ -60,6 +61,7 @@
       font-weight: 600;
       line-height: 16px;
       padding-inline: 16px;
+      width: 100%;
     }
   }
 }

src/components/AuthorSubscribe/AuthorSubscribe.tsx

@@ -91,7 +91,7 @@ const AuthoreSubscribe: Component<{
       >
         <div class={styles.authorSubscribeCard}>
           <div class={styles.userInfo}>
-            <Avatar user={author()} />
+            <Avatar user={author()} size="ml" />
             <div class={styles.userData}>
               <div class={styles.userName}>
                 {userName(author())}

src/components/Avatar/Avatar.module.scss

@@ -164,6 +164,21 @@
   }
 }
 
+.mlAvatar {
+  @include avatar;
+  width: 60px;
+  height: 60px;
+
+  .missingBack {
+    width: 60px;
+    height: 60px;
+  }
+
+  .iconBackground {
+    @include iconBackground;
+  }
+}
+
 .largeAvatar {
   @include avatar;
   width: 72px;
@@ -290,6 +305,13 @@
   font-size: 16px;
 }
 
+.mlMissing {
+  @include missing;
+  width: 60px;
+  height: 60px;
+  font-size: 16px;
+}
+
 .largeMissing {
   @include missing;
   width: 68px;

src/components/Avatar/Avatar.tsx

@@ -11,7 +11,7 @@ import styles from './Avatar.module.scss';
 
 const Avatar: Component<{
   src?: string | undefined,
-  size?: "micro" | "xxs" | "xss" | "xs" | "vvs" | "vs" | "sm" | "md" | "lg" | "xl" | "xxl",
+  size?: "micro" | "xxs" | "xss" | "xs" | "vvs" | "vs" | "sm" | "md" | "ml" | "lg" | "xl" | "xxl",
   user?: PrimalUser,
   highlightBorder?: boolean,
   id?: string,
@@ -34,6 +34,7 @@ const Avatar: Component<{
     vs: styles.vsAvatar,
     sm: styles.smallAvatar,
     md: styles.midAvatar,
+    ml: styles.mlAvatar,
     lg: styles.largeAvatar,
     xl: styles.extraLargeAvatar,
     xxl: styles.xxlAvatar,
@@ -48,6 +49,7 @@ const Avatar: Component<{
     vs: styles.vsMissing,
     sm: styles.smallMissing,
     md: styles.midMissing,
+    ml: styles.mlMissing,
     lg: styles.largeMissing,
     xl: styles.extraLargeMissing,
     xxl: styles.xxlMissing,