Color/style/visibility UI improvements

[abettermap]

• Census dropdown: make results background black (same as the search box in “Home”)
• Hyperlink: standardize all instances using theme color instead of light blue. TBD, kind of based on Try new color scheme #189. The idea is that all hyperlinks are the same color throughout the app
• “Details” and “Language profile” views: improve visibility of Audio/Video links by making them more prominent than the surrounding elements, either through a different element type such as a button, positional changes, or simple style adjustments.
• “Share via Email” button: colorize to avoid misconception that the button is disabled.
• Panel “breadcrumbs”: underline links to make their purpose obvious.

Use light green everywhere but do #189 first so we know how it looks.

[abettermap]

@rperlin-ela trying a few options for the Audio/Video thing:

1 - Separate line and pronounced

2 - Same line, pronounced, same order as current

3 - Same line, pronounced, first

4 - Same line, outlined, first

5 - Grouped

Slightly more work for this since it's a new component but still easy, although not sure it helps our cause: https://material-ui.com/components/button-group/ (basically any of those on that page)

6 - Distinctions

I like option 4 above, but i think it should be distinct from the chips via subtle border (I know, getting bizzzay up there, but it feels worth it):

Keep in mind we could potentially scrap the Language name with the incoming "Up one level" btn for more space:

Takes

Mine

I like Option 6

Yours

Whatcha got?

[abettermap]

we wouldn't necessarily need the bottom dashed border, but i'd like to somehow distinguish between the stuff above and below it. We could chip it, although I don't know about you, but i'm kinda chipped out in this view!

Here's another thought to de-bizzay it: instead of "Read more" as we know it, put a button called "Info" or "Description" or "Profile" before the Video button, and axe the semi-opaque preview we have now. Or, keep the preview, but I don't know that moving the button will be as intuitive that it affects the profile below it. Or maybe it would be if it were pronounced:

Pronounced + first = certain encouragement to click, yeah?

Here's that approach w/the preview axed:

With either of those approaches I think we could axe the top dashed border:

or supa-slim:

The preview is cool and all, but I definitely don't mind the "you're on a need-to-know/click-to-show basis".

Que piensas?

[abettermap]

Sorry Ross, gonna be mixing some convos here since I smashed them all into one issue, but shifting gears to the email btn...

So, the current gray DOES actually resemble a semi-standard (if there is such a thing), but we can't use the "standard". So I just tried a bunch of randos (don't worry about the code, just give me the number):

1 - hsl(45 54% 55% / 1)

2 - hsl(32 54% 55% / 1)

3 - hsl(23 54% 58% / 1)

4 - shoot, lost it!

5 - #202020

Not quite as disable-y as current:

I'd probably go with option 3 myself. There are millions of colors, hard to just pick one at random (all the buttons had baked-in defaults, which I used), especially w/the competing surrounding elements' colors, you know?

[rperlin-ela]

Option 3 for the email button looks good to me!

…

On Mar 17, 2021, at 2:11 PM, Jason Lampel ***@***.***> wrote:  Sorry Ross, gonna be mixing some convos here since I smashed them all into one issue, but shifting gears to the email btn... So, the current gray DOES actually resemble a semi-standard (if there is such a thing), but we can't use the "standard". So I just tried a bunch of randos (don't worry about the code, just give me the number): 1 - hsl(45 54% 55% / 1) 2 - hsl(32 54% 55% / 1) 3 - hsl(23 54% 58% / 1) 4 - shoot, lost it! 5 - #202020 Not quite as disable-y as current: I'd probably go with option 3 myself. There are millions of colors, hard to just pick one at random (all the buttons had baked-in defaults, which I used), especially w/the competing surrounding elements' colors, you know? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[abettermap]

Decisive! Done. Let me know on the Audio/Video stuff, and hopefully an easy Yes/No on the B-crumbs, which I made the normal white instead of subdued, with the underlines the "secondary" text color (the off-white you see in some paragraphs). Keep or axe?

[rperlin-ela]

 Give me a few hours on the other stuff, but breadcrumbs look good!

…

On Mar 17, 2021, at 2:31 PM, Jason Lampel ***@***.***> wrote:  Decisive! Done. Let me know on the Audio/Video stuff, and hopefully an easy Yes/No on the B-crumbs, which I made the normal white instead of subdued, with the underlines the "secondary" text color (the off-white you see in some paragraphs). Keep or axe? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[rperlin-ela]

On the right track, for sure. I think I like Option 6 too, but don’t scrap language name, I think, rather be repetitive than confusing, and I don’t want to hide the Profile— I’m still thinking through exactly what I want to show there but it’s a nice slot. So I think “Read more” stands.

…

On Mar 17, 2021, at 1:26 PM, Jason Lampel ***@***.***> wrote: we wouldn't necessarily need the bottom dashed border, but i'd like to somehow distinguish between the stuff above and below it. We could chip it, although I don't know about you, but i'm kinda chipped out in this view! Here's another thought to de-bizzay it: instead of "Read more" as we know it, put a button called "Info" or "Description" or "Profile" before the Video button, and axe the semi-opaque preview we have now. Or, keep the preview, but I don't know that moving the button will be as intuitive that it affects the profile below it. Or maybe it would be if it were pronounced: <https://user-images.githubusercontent.com/4974087/111509702-9db55580-8712-11eb-8ea2-74562e1b7df0.png> Pronounced + first = certain encouragement to click, yeah? Here's that approach w/the preview axed: <https://user-images.githubusercontent.com/4974087/111510029-f684ee00-8712-11eb-8654-1273807e3a15.png> With either of those approaches I think we could axe the top dashed border: <https://user-images.githubusercontent.com/4974087/111510291-42379780-8713-11eb-8ebf-0c24dd15451f.png> or supa-slim: <https://user-images.githubusercontent.com/4974087/111510506-7612bd00-8713-11eb-9772-edaddb6e7134.png> The preview is cool and all, but I definitely don't mind the "you're on a need-to-know/click-to-show basis". Que piensas? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#190 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMNKB5EF7P7HO5XMN3LZQK3TEDQ5XANCNFSM4ZEE2XLQ>.

[abettermap]

Sounds logical to me. Any feelings on the top and bottom borders in Option 6?