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
Assignees
@lakshya1goel
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-a: Server 10

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
This was referenced Jan 9, 2025
Open
Open
@gnprice gnprice modified the milestones: M5: Launch, M5-a: Server 10 Jan 14, 2025
lakshya1goel added a commit to lakshya1goel/zulip-flutter that referenced this issue Jan 16, 2025
@lakshya1goel
compose: Compose-box border is subtle in dark mode
5ce06f6 
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 added a commit to lakshya1goel/zulip-flutter that referenced this issue Jan 17, 2025
@lakshya1goel
compose: Compose-box border is subtle in dark mode
295b968 
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 added a commit to lakshya1goel/zulip-flutter that referenced this issue Jan 17, 2025
@lakshya1goel
compose: Compose-box border is subtle in dark mode
c6bb562 
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 added a commit to lakshya1goel/zulip-flutter that referenced this issue Jan 17, 2025
@lakshya1goel
compose: Compose-box border is subtle in dark mode
260457a 
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 added a commit to lakshya1goel/zulip-flutter that referenced this issue Jan 18, 2025
@lakshya1goel
compose: Compose-box border is subtle in dark mode
0764a86 
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

@lakshya1goel lakshya1goel

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-a: Server 10
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