diff --git a/app/javascript/flavours/glitch/features/account/components/header.jsx b/app/javascript/flavours/glitch/features/account/components/header.jsx index c2b827d9e1..913536beb8 100644 --- a/app/javascript/flavours/glitch/features/account/components/header.jsx +++ b/app/javascript/flavours/glitch/features/account/components/header.jsx @@ -318,11 +318,6 @@ class Header extends ImmutablePureComponent { badge = null; } - let role = null; - if (account.getIn(['roles', 0])) { - role = (
{account.getIn(['roles', 0, 'name'])}
); - } - return (
{!(suspended || hidden || account.get('moved')) && account.getIn(['relationship', 'requested_by']) && } @@ -339,7 +334,6 @@ class Header extends ImmutablePureComponent {
diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss index b0fe21bcf1..97bc9ae2c2 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/accounts.scss @@ -204,7 +204,7 @@ font-size: 12px; line-height: 12px; font-weight: 500; - color: $ui-secondary-color; + color: var(--user-role-accent, $ui-secondary-color); background-color: var(--user-role-background, rgba($ui-secondary-color, 0.1)); border: 1px solid var(--user-role-border, rgba($ui-secondary-color, 0.5)); diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 8983ed7ce4..52065d031a 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -536,22 +536,14 @@ &__tabs { display: flex; - align-items: flex-end; + align-items: flex-start; justify-content: space-between; padding: 7px 10px; - margin-top: -81px; - height: 130px; + margin-top: -55px; + gap: 8px; overflow: hidden; margin-inline-start: -2px; // aligns the pfp with content below - .account-role { - margin: 0 2px; - padding: 4px 0; - box-sizing: border-box; - min-width: 90px; - text-align: center; - } - &__buttons { display: flex; align-items: center;