diff --git a/src/components/AuthorSubscribe/AuthorSubscribe.module.scss b/src/components/AuthorSubscribe/AuthorSubscribe.module.scss index 24a412b..e15dc80 100644 --- a/src/components/AuthorSubscribe/AuthorSubscribe.module.scss +++ b/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%; } } } diff --git a/src/components/AuthorSubscribe/AuthorSubscribe.tsx b/src/components/AuthorSubscribe/AuthorSubscribe.tsx index c6737a5..641876d 100644 --- a/src/components/AuthorSubscribe/AuthorSubscribe.tsx +++ b/src/components/AuthorSubscribe/AuthorSubscribe.tsx @@ -91,7 +91,7 @@ const AuthoreSubscribe: Component<{ >
- +
{userName(author())} diff --git a/src/components/Avatar/Avatar.module.scss b/src/components/Avatar/Avatar.module.scss index a84ff69..0503c59 100644 --- a/src/components/Avatar/Avatar.module.scss +++ b/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; diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index e1f0bb3..f551ff8 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/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,