search

elk-zone / elk

A nimble Mastodon web client
https://elk.zone
MIT License
5.4k stars 555 forks source link

Verified website, github, twitter in header #155

Open patak-dev opened 1 year ago

patak-dev commented 1 year ago

@antfu thinking about how to implement this with the current UI. Maybe a primary color check icon next to the link? Or just use a primary color for the link when it is verified? If we don't want to use green, I think we may need the tick

https://mas.to/@addyosmani@indieweb.social

https://elk.zone/@addyosmani@indieweb.social

alvarosabu commented 1 year ago

@patak-dev you guys have accent colors or just a palette of orange-yellow?

patak-dev commented 1 year ago

Currently we are using: White, text-primary, text-secondary, text-secondary-light

wakest commented 1 year ago

this issue seems important and quite straight forward, maybe start with the verified links being highlighted with the theme color and we can go from there?

boehs commented 1 year ago

I don't see how to fit the tick into here

ZMYaro commented 1 year ago

I think including the tick, or some other indicator that is not just color, is necessary as an accessibility issue. Additionally, a color indicator would not be clear to people who use Elk in grayscale mode.

wakest commented 1 year ago

@ZMYaro thats a good point about the accessibility issue... In this case Green is an awful color to use then...

ZMYaro commented 1 year ago

@wakest Green is fine to use as long as it is combined with a non-color indicator (like the checkmark).

boehs commented 1 year ago

I'm interested in mocks for this

patak-dev commented 1 year ago

One possible idea is to make the meta info bigger. It is hard to add more than just color with the current design, but it would be easier if we have a bit more air. I don't know if we should go to one line per meta, but maybe that could be revisited? I think the meta info is quite important, and we are having it small and in secondary color currently.

image
ZMYaro commented 1 year ago

On possibility is something like what I mocked up for #1101, where we could have the label small and attached to the link, and then it would be less of an issue if the icon became a checkmark when verified. image image

ZMYaro commented 1 year ago

Respectfully, I do not think this issue should be closed yet. I think a more clear indicator should be used than an outline alone. I can try to take a stab at an approach sometime this weekend if I have time.

boehs commented 1 year ago

Go for it

gBasil commented 1 year ago

Maybe something like this?

image

We could also just format metadata like the default Mastodon web client does.

boehs commented 1 year ago

Seems like a good improvement! Please open a PR for this ❤️

gBasil commented 1 year ago

Seems like a good improvement! Please open a PR for this ❤️

Would it be better for this be the tint color or green no matter the theme?

boehs commented 1 year ago

@patak-dev might have stronger opinions, but I'm inclined to theme colour

gBasil commented 1 year ago

Few implementation questions:

  1. In the screenshot, I added some padding. I don't know if that's alright with you all.
  2. How is this going to be applied to the verified links that aren't placed at the bottom? Example profile: https://elk.zone/tech.lgbt/@nachoqt I'm still going to push for recreating Mastodon's style, I really think that's the best way to go. It's potentially less confusing, and the current implementation doesn't really fit. image

Anyway, it's just these styles, which I'm posting here for backup before the questions are addressed:

/* On the container div */
border-color: var(--c-primary);
background: var(--c-dark-primary-fade);
/* Magic numbers that make it look right */
padding: 1px 4px;
padding-right: 6px;

/* On the icon */
color: var(--c-primary);
image
boehs commented 1 year ago

In the screenshot, I added some padding. I don't know if that's alright with you all.

Yeah, that's great. Make sure that padding is on the other links as well (I forgot to do that in my PR)

How is this going to be applied to the verified links that aren't placed at the bottom?

Honestly, unsure :/. Maybe get feedback in the UI channel 🙏🏻

gBasil commented 1 year ago

Honestly, unsure :/. Maybe get feedback in the UI channel 🙏🏻

In the Discord guild?

boehs commented 1 year ago

In the Discord guild?

Yeah ❤️

ZMYaro commented 1 year ago

Since they are a little bit buried in the PR UI, here are some screenshots of what my current proposal looks like on a few profiles: image image image image

gBasil commented 1 year ago

Looks great! Just my two cents, I feel like verified links should be emphasized more. Also, how are non-standard metadata titles handled?

ZMYaro commented 1 year ago

I feel like verified links should be emphasized more.

My own opinion is that the checkmark + outline is sufficient, but we could try making them the accent color if the consensus is that would be better.

Also, how are non-standard metadata titles handled?

Links with non-standard names get a chip with a standard link icon (like the link to my Linktree in the first screenshot), and other fields with non-standard names display as they do right now.

ZMYaro commented 1 year ago

Here is what a verified link looks like if we make it entirely the accent color: image image

((Ignore the missing brand icons on the non-verified icons in this test.))

ZMYaro commented 1 year ago

In response to @patak-dev's feedback, here is an approach that tries to combine the checkmark with the other icon: image image

And then this is the same implementation, but with the circled checkmark icon: image image

I like both, but since the circled checkmark is more visually busy, I am inclined to go with the simpler option.

boehs commented 1 year ago

Strong support for the above from me!

wakest commented 1 year ago

ZMYaro's approach looks great