Usercard Redesign Experiment

I use dark mode pretty much everywhere and I agree that the bright colors are a bit distracting/overwhelming. In my opinion, they even add a bit of stress and urgency which is not the intent for sure. Would there be a way to tone down the user card colors so they still look gorgeous but are not so bright?

Personally I think this experiment has been great and I hope it leads to improvements to core discourse.

8 Likes

I use dark mode in part because I’m sensitive to really bright screens (especially at night) so it does indeed defeat the purpose of dark mode.

2 Likes

perhaps they should make it so that the usercards have a dark tint while in dark mode so that it is not really that bright and annoying overall

6 Likes

This is how @seanblue’s card would look like with a brightness filter on it:

Original
image

0.8 Brightness:
image

0.6 Brightness:
image

0.4 Brightness:
image

10 Likes

Thanks to @Canapin suggestion above, I have made a slight adjustment here on meta for when the color-scheme is a dark version. The background should be a littler darker. Can you check to see if this is better?

7 Likes

Yeah, imo that’s much better. I personally like the current thing with the background, but not a lot of people do, so at some point I’ll probably make a component which does the prominent color thing.

5 Likes

This is on the timeline, just waiting for it to be integrated :+1:

5 Likes

Um, I think maybe something went wrong on mobile? I looks just as bright as before (or similar) and also it’s no longer blurred.

I don’t know what you went with, but I think something around the 0.6 brightness example would probably be good.

3 Likes

Thats my fault, I didnt include the -webkit prefix in that PR, but it should now be fixed.

6 Likes

The new version does look much better.

5 Likes

update fixed on my forum too. thanks @jordan-vidrine. i really like that experimental user card TC, but it shouldn’t be experimental anymore :slight_smile:

8 Likes

I agree. Its too good to be tucked away as ‘experimental’.

6 Likes

Hello :wave:

I noticed an issue with location. It seems after the first open usercard it keeps the location url on all other usercard. Thanks :slightly_smiling_face:

3 Likes

Wow! Great catch! I will look into this.

6 Likes

Hi there, I ran across a bit of an issue where the usercard appears partially off-screen. It seems to only happen when the browser is maximized and using a higher zoom and/or higher dpi setting.

It’s more noticeable with Sam’s Simple Theme, but it starts to happen with the “Default” theme too depending on the zoom level and how many frequent posters appear:

I tried your settings, but It doesn’t seem I’m able to reproduce.

Just to be sure – are you zooming in after you open a user card modal, or does the user card always appear as your screenshot every time you click on an avatar?

1 Like

Hi @Arkshine , I first zoom in, and then click on the avatar.

So it might be an even deeper issue, I also use a text scaling factor at the operating system level of 1.1 (or else text is too tiny on the high DPI screen). Firefox doesn’t respect that OS setting, but I believe that Chromium does. So maybe try it with Firefox to level the playing field, at like 130% and a fully maximized window.

Hi how can I disable cakeday from displaying on the card?

4 Likes

In core there is no way to hide this from appearing. The way to do this with this component though, would be to add some custom CSS to a separate component and target:

.d-user-card__cakeday {
    display: none;
}
2 Likes

Hi, thanks I already did hide it via css in the same. Was wondering if it had an option to disable it, given my users got the wrong impression of what it was for. But thanks for the component, much appreciated.

1 Like