New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Making the chat box easier to spot #862

Closed
wants to merge 1 commit into
base: master
from

Conversation

Projects
None yet
2 participants
@Mordax
Copy link

Mordax commented Jan 31, 2019

This refers to #810, one part of a series of enhancements to the chatbox.

  • Make the existing chat box easier to spot when you're in the room
    This is probably just a matter of adding some contrast to it so that it's visible in both light and dark scenes.

I decided to follow the pink/red schema and just give it a coloured background:
demo

Let me know your thoughts if you folks like it, or there's something I missed, etc.

@gfodor

This comment has been minimized.

Copy link
Collaborator

gfodor commented Feb 1, 2019

Hey @Mordax thank you for the PR! We have a redesign in the works for the chat area of Hubs (we're going to be repositioning and increasing the priority of the chat box overall) and so we'll take into account this variant you've shown here with the action button background as we determine what style changes to make.

I super appreciate you surfacing this usability issue and I hope we'll be able to get these design changes out soon. I'll close this PR for now -- once the updates are out (likely by late Feb, but not totally sure) then please feel free to resurface further contrast issues or provide additional design suggestions/PRs.

Thanks again!

@gfodor gfodor closed this Feb 1, 2019

@gfodor

This comment has been minimized.

Copy link
Collaborator

gfodor commented Feb 1, 2019

Actually I re-opened this, let me take a quick look to see if we can make some tweaks together.

@gfodor gfodor reopened this Feb 1, 2019

@gfodor

This comment has been minimized.

Copy link
Collaborator

gfodor commented Feb 1, 2019

So here's what I'll suggest, which would get us a good step closer to some of the redesign. We'd like the chat box on the bottom to be similar to the one we show in the entry step here:

image

It should still likely be reduced in opacity when not focused, but the background should become white with black text (basically, the exact same style as the lobby chat box above) when it's focused. I think you can probably do this by either re-using the existing lobby chat box styles (.message-entry, .message-entry-input, etc) and then having the existing -in-room styles just apply slight changes to it to adjust the opacity a bit. Or for now you could just skip the opacity changes and just change the existing code to no longer use the -in-room styles at all and see how that looks.

Thanks again for looking into this, let me know if you think those style changes sound reasonable to try!

@Mordax

This comment has been minimized.

Copy link
Author

Mordax commented Feb 15, 2019

@gfodor (screwed up my branch sorry about that) - Here's the demo of the new updated code:
demo

@gfodor

This comment has been minimized.

Copy link
Collaborator

gfodor commented Feb 20, 2019

this is going out now, hope it helps! #896

@gfodor gfodor closed this Feb 20, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment