Tweak dark theme

[Gaurav-Kushwaha-1225]

About Changes

This PR updates the color variables in DesignVariables and MessageListTheme for a slightly higher contrast in dark theme according to the values in the figma file.

Fixes: #973

Screenshots

Before	After

[alya]

Please clean up your commit history and post again to request a review. See here for guidelines.

[Gaurav-Kushwaha-1225]

Please clean up your commit history and post again to request a review. See here for guidelines.

I’ve cleaned up the commit history by removing unnecessary merge commits into the TweakDarkTheme branch and combining related changes into a single commit for clarity.

This is my first time using rebase -i. During the process, I used pick, squash, and drop commands for various commits. I initially thought there would be separate commit messages for each, but later realized they were combined into one during the rebase.
Although, it asked to enter three commit messages after rebasing, Idk why it happened. Could you please explain why all commit messages were merged into one?
I’d like to understand this better for future contributions.

Apologies for any confusion.

Please review the updated PR.

[gnprice]

The #git help channel on chat.zulip.org is a good place to ask questions about using Git.

[Gaurav-Kushwaha-1225]

Please clean up your commit history and post again to request a review. See here for guidelines.

Hi @alya, please review the updated PR.

[alya]

Thanks! I'll let other folks take a look at this one.

[PIG208]

Hi! Please read through the commit style guide (also previously linked by Alya) linked in our README and fix the commit message: https://github.com/zulip/zulip-flutter?tab=readme-ov-file#submitting-a-pull-request

[PIG208]

Thanks for the PR! I noted the differences between this revision and the Figma design after going through lib/widgets/message_list.dart and some part of lib/widgets/compose_box.dart for colors used in the widgets.

Some of the comments are just about different colors being used, and others request the addition/removal of variables. It should be fine to include color adjustments all in a single commit, but for adding/removing variables, let's try to have separate commits for the ones added, so it is easier to see which variables they replace. Consider using the NFC tag if a commit is a pure refactor.

I think there are also changes to the autocomplete window, but that should be addressed in #995,

[Gaurav-Kushwaha-1225]

Hi @PIG208,
I have updated the commits as per your request.

• Made separate commits as required
• Removed colorMessageHeaderIconInteractive, senderName & recipientHeaderText
• Added labelTime in MessageListTheme

Have a review of these changes and tell if anything else is required regarding this issue.

[PIG208]

Thanks for the update! The changes mostly look good to me, except for the first commit that adjusts a bunch of colors. It turned out that "[nfc]" is not applicable for the commits, and that's fine. They are useful to mark commits that are meant to incur no behavioral changes, so the reviewer can focus on the non-nfc commits.

The final commit of the PR needs a line to fix the issue:

...(other stuff)...

Fixes: #973

[PIG208]

Could you identify where this color (dmRecipientHeaderBg) comes from? I looked at https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3702-28206&p=f&t=dBCq6jmgNML8Joly-0 but couldn't find it.

[Gaurav-Kushwaha-1225]

• This dmRecipientHeaderBg is the light-colored top bar in below screen.
• Though, it is represented using bg-top-bar in the figma design file with value HSLColor.fromAHSL(1, 0, 0, 0.14).toColor().

[PIG208]

Do you have a link the the design? Selecting the frame and then copying the URL should do. For new colors or adjustments the Figma link should also be included in the commit messages.

[Gaurav-Kushwaha-1225]

Sure,
https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=xbe6lt56wtywbnXX-0

• This is design link for dmRecipientHeaderBg.
• As I have mentioned above, it is represented using bg-top-bar in the figma design file with value HSLColor.fromAHSL(1, 0, 0, 0.14).toColor().

[PIG208]

Thanks for the link!

As I have mentioned above, it is represented using bg-top-bar in the figma design file with value HSLColor.fromAHSL(1, 0, 0, 0.14).toColor().

It looks like the Figma design doesn't have the recipient header (it has the app/top bar, though). If we are using bg-top-bar for the recipient headers. It might be a good idea to just use that same variable and remove dmRecipientHeaderBg.

However, given that the Figma design doesn't actually show bg-top-bar being used for that specific message list item, I think we should be fine holding off from updating dmRecipientHeaderBg, unless such a change is necessary for it to not look odd. Asking for clarification on this in #mobile-design should help.

[Gaurav-Kushwaha-1225]

• Raised a query in the #mobile-design channel.

• Reverted changes in dmRecipientHeaderBg. If there comes any further decisions on this issue on the chat, the PR will be updated accordingly.

[Gaurav-Kushwaha-1225]

Thanks @PIG208 for the review.
I will look after the requested changes above and update this PR soon.

[PIG208]

Thanks for the update! Left some more comments.

[PIG208]

 theme: Replace dateSeparatorText and messageTimestamp with `labelTime`

Removed `dateSeparatorText` & `messageTimestamp` from
`MessageListTheme` and introduced `labelTime` in place of it
as per the design guidelines.
discussion: https://github.com/zulip/zulip-flutter/pull/1213#discussion_r1908359783

Fixes: #973

Because the commit message repeats the summary and the actual diff, we can remove most of it:

 theme: Replace dateSeparatorText and messageTimestamp with `labelTime`

discussion: https://github.com/zulip/zulip-flutter/pull/1213#discussion_r1908359783

Fixes: #973

We should remove the "Fixes" line because this is not that final commit that resolves the issue.

Let's also add a link to the Figma design.

[PIG208]

theme: Replace colorMessageHeaderIconInteractive with title

Removed `colorMessageHeaderIconInteractive` from
`DesignVariables` and used `title` in place of it
as per the design guidelines.
discussion: https://github.com/zulip/zulip-flutter/pull/1213#discussion_r1908343739

We can remove most of the commit message as it repeats the title and the diff, similar to other commits.

Let's also add a link to the Figma design.

[PIG208]

theme: Replace senderName & recipientHeaderText with title

Removed `senderName` & `recipientHeaderText` from
`MessageListTheme` and used `title` from `DesignVariables`
as per the design guidelines.
discussion: https://github.com/zulip/zulip-flutter/pull/1213#discussion_r1908349307

Fixes: #973

Because the commit message repeats the title and the actual diff, we can remove most of it.

theme: Replace senderName & recipientHeaderText with title

discussion: https://github.com/zulip/zulip-flutter/pull/1213#discussion_r1908349307

Fixes: #973

Similarly, we should link to the Figma design.

[PIG208]

Hmm. This doesn't seem right.

[PIG208]

Ah, I missed this earlier. Here, streamMessageBgDefault does not match the color in the Figma design. The variable corresponding to this appears to be bg-message-regular. We should rename this variable and update the color.

[PIG208]

I probably have missed this one too, or maybe it was added — dateSeparator doesn't exist as a variable in Figma, instead the color of the separators is just DesignVariables.foreground. Let's remove this variable and update the references.