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 15895c9759..6b3783bd79 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
@@ -66,18 +66,6 @@ import { MemorialNote } from './memorial_note';
import { MovedNote } from './moved_note';
const messages = defineMessages({
- unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
- follow: { id: 'account.follow', defaultMessage: 'Follow' },
- followBack: { id: 'account.follow_back', defaultMessage: 'Follow back' },
- mutual: { id: 'account.mutual', defaultMessage: 'Mutual' },
- cancel_follow_request: {
- id: 'account.cancel_follow_request',
- defaultMessage: 'Withdraw follow request',
- },
- requested: {
- id: 'account.requested',
- defaultMessage: 'Awaiting approval. Click to cancel follow request',
- },
unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
linkVerifiedOn: {
@@ -639,38 +627,65 @@ export const AccountHeader: React.FC<{
const info: React.ReactNode[] = [];
- if (me !== account.id && relationship?.followed_by) {
- info.push(
-
-
- ,
- );
- } else if (me !== account.id && relationship?.blocking) {
- info.push(
-
-
- ,
- );
- }
+ if (me !== account.id && relationship) {
+ if (
+ relationship.followed_by &&
+ (relationship.following || relationship.requested)
+ ) {
+ info.push(
+
+
+ ,
+ );
+ } else if (relationship.followed_by) {
+ info.push(
+
+
+ ,
+ );
+ } else if (relationship.requested_by) {
+ info.push(
+
+
+ ,
+ );
+ }
- if (me !== account.id && relationship?.muting) {
- info.push(
-
-
- ,
- );
- } else if (me !== account.id && relationship?.domain_blocking) {
- info.push(
-
-
- ,
- );
+ if (relationship.blocking) {
+ info.push(
+
+
+ ,
+ );
+ }
+
+ if (relationship.muting) {
+ info.push(
+
+
+ ,
+ );
+ }
+
+ if (relationship.domain_blocking) {
+ info.push(
+
+
+ ,
+ );
+ }
}
if (relationship?.requested || relationship?.following) {
diff --git a/app/javascript/flavours/glitch/locales/en.json b/app/javascript/flavours/glitch/locales/en.json
index 320db1853c..88a817d431 100644
--- a/app/javascript/flavours/glitch/locales/en.json
+++ b/app/javascript/flavours/glitch/locales/en.json
@@ -3,7 +3,6 @@
"account.disclaimer_full": "Information below may reflect the user's profile incompletely.",
"account.featured_tags.title": "{name}'s featured hashtags",
"account.follows": "Follows",
- "account.follows_you": "Follows you",
"account.suspended_disclaimer_full": "This user has been suspended by a moderator.",
"account.view_full_profile": "View full profile",
"boost_modal.missing_description": "This toot contains some media without description",
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index a1c12ae5e2..a144b8af00 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -5007,23 +5007,6 @@ a.status-card {
}
}
-.relationship-tag {
- color: $white;
- margin-bottom: 4px;
- display: block;
- background-color: rgba($black, 0.45);
- font-size: 11px;
- text-transform: uppercase;
- font-weight: 700;
- padding: 2px 6px;
- border-radius: 4px;
- opacity: 0.7;
-
- &:hover {
- opacity: 1;
- }
-}
-
.setting-toggle {
display: flex;
align-items: center;
@@ -7065,7 +7048,8 @@ img.modal-warning {
gap: 2px;
}
-.media-gallery__alt__label {
+.media-gallery__alt__label,
+.relationship-tag {
display: block;
text-align: center;
color: $white;
@@ -7086,6 +7070,11 @@ img.modal-warning {
}
}
+.relationship-tag {
+ text-transform: uppercase;
+ cursor: default;
+}
+
.media-gallery__alt__popover {
background: rgba($black, 0.65);
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
@@ -8194,8 +8183,11 @@ noscript {
&__info {
position: absolute;
- top: 10px;
- inset-inline-start: 10px;
+ top: 20px;
+ inset-inline-end: 20px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 2px;
}
&__image {