Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Compose-box border is subtle in dark mode #1207

Open
gnprice opened this issue Dec 26, 2024 · 3 comments · May be fixed by #1233
Open

Compose-box border is subtle in dark mode #1207

gnprice opened this issue Dec 26, 2024 · 3 comments · May be fixed by #1233
Labels
a-compose Compose box, autocomplete, attaching files/images a-design Visual and UX design beta feedback Things beta users have specifically asked for help wanted
Milestone
M5: Launch

Comments

@gnprice
Copy link
Member

gnprice commented Dec 26, 2024

We got this feedback on the current design of the compose box, in dark mode:

I'm using the latest version and I notice that the box design is not highlighted compared to the text you read and it's difficult to understand where you have to start typing the text, you need a higher contrast or change the design […]

Indeed the compose box has a similar background to the message list, and the boundary is a bit hard to see.

Implementation

We'll use this updated design from @terpimost:

if we change "border-bar" in dark mode from 50% black to 10% white I think we have a better contrast of the panel: […]
Also in dark mode we could turn on a shadow […]

Details are in Figma. See also screenshots in the chat thread.
@gnprice gnprice added help wanted a-compose Compose box, autocomplete, attaching files/images a-design Visual and UX design beta feedback Things beta users have specifically asked for labels Dec 26, 2024
@gnprice gnprice added this to the M5: Launch milestone Dec 26, 2024
@lakshya1goel
Copy link

lakshya1goel commented Dec 28, 2024 •
edited
Loading

Hello, I want to work on this issue. I have implemented it as well.

Before After
WhatsApp Image 2024-12-29 at 2 28 00 PM WhatsApp Image 2024-12-29 at 2 28 01 PM

lakshya1goel added a commit to lakshya1goel/zulip-flutter that referenced this issue Dec 29, 2024
@lakshya1goel
compose: Compose-box border is subtle in dark mode
8f80b77 
Updated the top border and added shadow effect to the top of
the compose box to ensure it is subtle in dark mode.

For reference, see the Figma design:
https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=5908-64038&t=alSmAmdRXFDwT4IT-1

Fixes: zulip#1207
@lakshya1goel lakshya1goel linked a pull request Dec 29, 2024 that will close this issue
Open
@vats004
Copy link

vats004 commented Jan 3, 2025

@zulipbot claim

@yashrajpu
Copy link

Please give me this assignment, it will only take about two minutes to complete. Thank you!

lakshya1goel added a commit to lakshya1goel/zulip-flutter that referenced this issue Jan 4, 2025
@lakshya1goel
compose: Compose-box border is subtle in dark mode
6f68abc 
Updated the top border and added shadow effect to the top of
the compose box to ensure it is subtle in dark mode.

For reference, see the Figma design:
https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=5908-64038&t=alSmAmdRXFDwT4IT-1

Fixes: zulip#1207
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a-compose Compose box, autocomplete, attaching files/images a-design Visual and UX design beta feedback Things beta users have specifically asked for help wanted
Projects
Flutter app
Status: No status
Milestone
M5: Launch
Development

Successfully merging a pull request may close this issue.

compose: Compose-box border is subtle in dark mode lakshya1goel/zulip-flutter
4 participants
@gnprice @lakshya1goel @yashrajpu @vats004