There's another proposal that could work, and would handle longer role names better:

My main concern with it though is that it'd eat even more screen space, which is already an issue with the recent redesign of profile fields.

Any idea why codeclimate is stuck?

Any idea why codeclimate is stuck?

No idea, looks like it's just a fluke, and thankfully not on the test or linter results themselves.

Hello. I've just wanted to add that it worked like a charm.
Tested on my instance. Thanks for fixing.

Examples:
https://tkz.one/@tahurcete
https://tkz.one/@trankten
https://tkz.one/@arvidax
https://tkz.one/@solisto89

Not visible through Mastodon Android / iOS yet but works in Mobile Web perfectly too.

Thank you.

On that last one the purple is a bit hard to read, so I would suggest for this PR to use the default text color and have the role color only be applied to the outline and low-opacity background.

Before	After

On that last one the purple is a bit hard to read, so I would suggest for this PR to use the default text color and have the role color only be applied to the outline and low-opacity background.
Before After

That issue was already present with the old way this information was displayed. Nonetheless, changed the CSS to not use the provided color for text. Maybe there are better options though.

On that last one the purple is a bit hard to read, so I would suggest for this PR to use the default text color and have the role color only be applied to the outline and low-opacity background.
Before After

That issue was already present with the old way this information was displayed. Nonetheless, changed the CSS to not use the provided color for text. Maybe there are better options though.

Actually it's really a matter of whoever creates the roles to choose correct colors as they have to fit for both dark and light themes.

However, imho keeping the same color for the text and the border makes the badge look more unique and epic for the user who has it. Please reconsider keeping the way it was originally. It would be much appreciated.

Actually it's really a matter of whoever creates the roles to choose correct colors as they have to fit for both dark and light themes.

That may not be entirely true, as the admin setting the roles would have to account for any theme (e.g. something that looks fine with the dark theme may not work fine with the light theme, or the other way around)

Maybe there are better options though.

Discord has the role color as a circle instead of a background/border.

Actually it's really a matter of whoever creates the roles to choose correct colors as they have to fit for both dark and light themes.

There's not just dark and light themes. There's also custom themes that could be any color. Text and background colors should only have to worry about contrast with themselves, and the role color shouldn't have to be considered because that would mean considering every single color.

There's not just dark and light themes. There's also custom themes that could be any color.

That being said, available custom themes are decided by the admins as well, not end-users (unless we enter user CSS territory in which case the users can also override the badges)

I tested it out on glitch and the badges are not visible for some reason, im sure im doing something wrong.

I tested it out on glitch and the badges are not visible for some reason, im sure im doing something wrong.

glitch-soc ships with two front-ends, the “vanilla” flavour and the “glitch” flavour; if you applied the changes as-is, they'd only affect the “vanilla” flavour. You need to port the changes to files under app/javascript/mastodon to app/javascript/flavours/glitch too.

I tested it out on glitch and the badges are not visible for some reason, im sure im doing something wrong.

glitch-soc ships with two front-ends, the “vanilla” flavour and the “glitch” flavour; if you applied the changes as-is, they'd only affect the “vanilla” flavour. You need to port the changes to files under app/javascript/mastodon to app/javascript/flavours/glitch too.

Thank you so much ^_^

This is fantastic - and much needed for some of my users i'd like to validate or offer supporter roles too. What would be the effort to add PRs to the mastodon mobile apps to show these badges?

Working great here!

I prefer the second design.

Which one would this be? This one? #21393 (comment)

My main concern about it is that it would make profiles take even more vertical space, which is already a complaint we get with 4.0 profiles.

Without taking a stand in the layout alignment-wise, as a CSS/UI guy I'd say the slight border-radius supports the Mastodon brand best, I'd keep it, that's my 2 cents on the matter.

Any chance we could get something like this in for a 4.0.3 release? I have some high profile accounts that I've verified over phone and i'd love to have a "Verified" role that shows up on profile page (and have the mobile apps expose this eventually)

Any chance we could get something like this in for a 4.0.3 release? I have some high profile accounts that I've verified over phone and i'd love to have a "Verified" role that shows up on profile page (and have the mobile apps expose this eventually)

You can push on your own like some of us did but keep in mind it's a beta stage and not final. In any case, please don't rush the developers :) It will be available when it's finally done. I'd suggest to keep this topic clean from non developer talk as any update usually notifies everyone in the thread.

Have a nice day.

Any work needed on this to get traction back on? Been some fantastic discussions above, but can't find exactly the cause for it getting stuck (other than of course Christmas and New Year 👍 )

Deployed this locally yesterday, it looks and functions great! Might I suggest an addition to display_name.js to show badges everywhere aswell?

Three different placement options I could think of. I have the middle option deployed locally @ https://transfur.social for a live example.

EDIT: Mainly a duplicative implementation but code-wise looks like this:

@@ -62,8 +62,13 @@
         acct = `${acct}@${localDomain}`;
       }

+      let role = null;
+      if (account.get('role')) {
+        role = (<div key='role' className={`account-role user-role-${account.getIn(['role', 'id'])}`}>{account.getIn(['role', 'name'])}</div>);
+      }
+
       displayName = <bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>;
-      suffix      = <span className='display-name__account'>@{acct}</span>;
+      suffix      = <span className='display-name__account'>@{acct}{role ? ` · ` : ""}{role}</span>;
     } else {
       displayName = <bdi><strong className='display-name__html'><Skeleton width='10ch' /></strong></bdi>;
       suffix = <span className='display-name__account'><Skeleton width='7ch' /></span>;```

This pull request has merge conflicts that must be resolved before it can be merged.

This pull request has merge conflicts that must be resolved before it can be merged.

Sad to see this still not available in 4.1 😢

This pull request has merge conflicts that must be resolved before it can be merged.

Any chance we could get custom emoji included in roles before the API and UI are stabilized? Servers using roles for supporter badges, manual verification, etc. will want those. Servers using roles for fun will definitely want those.

I prefer the second design.

Is this really the only comment blocking the merge to fix this 7-month old regression?