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 = (<div key='role' className={`account-role user-role-${account.getIn(['roles', 0, 'id'])}`}>{account.getIn(['roles', 0, 'name'])}</div>); - } - return ( <div className={classNames('account__header', { inactive: !!account.get('moved') })} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> {!(suspended || hidden || account.get('moved')) && account.getIn(['relationship', 'requested_by']) && <FollowRequestNoteContainer account={account} />} @@ -339,7 +334,6 @@ class Header extends ImmutablePureComponent { <div className='account__header__tabs'> <a className='avatar' href={account.get('avatar')} rel='noopener noreferrer' target='_blank' onClick={this.handleAvatarClick}> <Avatar account={suspended || hidden ? undefined : account} size={90} /> - {role} </a> <div className='account__header__tabs__buttons'> 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;