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;