diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx index 8300dfb371..ba5001b716 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx @@ -21,7 +21,6 @@ import { useAppSelector, useAppDispatch } from '@/flavours/glitch/store'; import { AccountName } from './account_name'; import { AccountSubscriptionForm } from './account_subscription_form'; -import { AccountBadges } from './badges'; import { AccountButtons } from './buttons'; import { FamiliarFollowers } from './familiar_followers'; import { AccountHeaderFields } from './fields'; @@ -163,8 +162,6 @@ export const AccountHeader: React.FC<{ /> - - {!isMe && !suspendedOrHidden && ( diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/account_name.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/account_name.tsx index b80892881b..26815560d2 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/account_name.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/account_name.tsx @@ -21,6 +21,7 @@ import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react'; import HelpIcon from '@/material-icons/400-24px/help.svg?react'; import DomainIcon from '@/material-icons/400-24px/language.svg?react'; +import { AccountBadges } from './badges'; import classes from './styles.module.scss'; const messages = defineMessages({ @@ -77,6 +78,8 @@ export const AccountName: FC<{ accountId: string }> = ({ accountId }) => { domain={domain} isSelf={account.id === me} /> + + ); }; diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/account_subscription_form.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/account_subscription_form.tsx index aaea6d710a..d5dd05e417 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/account_subscription_form.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/account_subscription_form.tsx @@ -3,6 +3,7 @@ import { useState, useCallback, useId } from 'react'; import { FormattedMessage, useIntl, defineMessages } from 'react-intl'; import type { IntlShape } from 'react-intl'; +import classNames from 'classnames'; import { Link } from 'react-router-dom'; import { AxiosError } from 'axios'; @@ -127,7 +128,9 @@ export const AccountSubscriptionForm: React.FC<{ accountId: string }> = ({ if (submitted) { return ( -
+

= ({ accountId }) => { const account = useAccount(accountId); const localDomain = useAppSelector( @@ -101,7 +103,7 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => { return null; } - return
{badges}
; + return
{badges}
; }; function isAdminBadge(role: AccountRole) { diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/styles.module.scss b/app/javascript/flavours/glitch/features/account_timeline/components/styles.module.scss index e8399cf44a..9c13026b97 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/styles.module.scss +++ b/app/javascript/flavours/glitch/features/account_timeline/components/styles.module.scss @@ -28,14 +28,12 @@ } .name { - display: flex; - gap: 2px; - align-items: baseline; - > h1 { + display: inline; font-size: 22px; line-height: normal; white-space: initial; + margin-inline-end: 4px; } } @@ -43,6 +41,10 @@ color: var(--color-text-secondary); } +.badges { + margin-top: 8px; +} + .handleHelpButton { display: flex; gap: 2px; @@ -191,6 +193,10 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; font-size: 15px; } +.familiarFollowers { + margin-top: 16px; +} + .note { margin-bottom: 16px; } @@ -406,6 +412,15 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; margin: 16px 0; } +.bannerBaseCentered { + min-height: 146px; + align-items: center; + + .bannerTextAndActions { + text-align: center; + } +} + .bannerTextAndActions { display: flex; flex-direction: column; @@ -426,16 +441,6 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; } } -.bannerBaseCentered { - composes: bannerBase; - min-height: 146px; - align-items: center; - - .bannerTextAndActions { - text-align: center; - } -} - .bannerInputButton { display: flex; gap: 8px;