Improve dialog UI consistency and readability across multiple dialogs

[Galal-20]

Purpose / Description

This PR improves dialog UI consistency and readability across multiple dialogs, specifically Set due date and Change note type.

Fixes

Fixes: Improve some dialogs (mostly string changes) #20508

Approach

Set due date dialog:
• Added text labels to tab icons to improve clarity and usability.
• Replaced the “Help” text with a question mark icon in the top-right corner to align with other dialogs.
Change note type dialog:
• Updated tab text and icon colors to match the styling used in the “Set due date” dialog for consistency.
• Improved cloze note type colors to ensure better readability, especially in dark mode.

How Has This Been Tested?

Tested on Android emulator and physical device.
Verified behavior in both light and dark themes.
Checked:
• Tab selection states (selected/unselected colors)
• Visibility and readability of cloze note types
• Icon and text alignment in tabs

Checklist

• Descriptive commit message with short title.
• Code is commented in tricky areas.
• Self-reviewed changes.
• UI changes screenshots captured (dialogs, buttons, labels).
• Tested with Accessibility Scanner to ensure text readability.

[github-actions]

Important

Maintainers: This PR contains Strings changes

1. Sync Translations before merging this PR and wait for the action to complete
2. Review and merge the auto-generated PR in order to sync all user-submitted translations
3. Sync Translations again and merge the PR so the huge automated string changes caused by merging this PR are by themselves and easy to review

[ZornHadNoChoice]

The text and icons should either be on the same line or on two lines in both the set due date and change note type dialogs. I prefer the 2 line look in the set due date dialog screenshot.

---

The cloze color is certainly an improvement, but I still feel it's a little bit difficult to read.

In comparison, the light theme is too bright and the black theme is readable but not different enough from white:

---

Btw...

I noticed that the dropdown menu's width depends on the height of the dialog (and thus the number of fields):

You don't have to do it, and if it isn't easily fixable, then leave it.

[Galal-20]

Hi @ZornHadNoChoice, I've addressed the requested changes.
Would appreciate another look when you have time.
Thanks.

[Galal-20]

Thanks for the feedback
I've updated the screenshots to reflect the latest changes.
Please let me know if anything else needs adjustment.
I'm trying to do my best.

[david-allison]

Looks great!

Having the text underneath the icon for the 'manage note types' dialog makes the screen appear like there are 2 columns all the way down.

There needs to be a more prominent 'divider' between the tab views and the content if we're using vertical labels (I personally prefer horizontal labels here)

---

Add maybe 8dp more end padding after Basic (and optional reversed), the indicator for selection looks a little too close to the text

[david-allison]

All looks solid!

The text and icons should either be on the same line or on two lines in both the set due date and change note type dialogs. I prefer the 2 line look in the set due date dialog screenshot.

-- Zorn

I'd use the vertical icons in 'Set Due Date', and continue with the horizontal icon with text in 'fields'

@ZornHadNoChoice @Haz3-jolt what do you think here? I don't like how the screen looks like two columns throughout if the text is vertically stacked

[ZornHadNoChoice]

I also don't like the column feel. I guess a slight inconsistency doesn't hurt.

If we're going to nitpick: the text in the current column has a slightly bigger font than the text in the new column.

Also, is there any reason the "pen" icon was used for fields? See https://fonts.google.com/icons?icon.query=field

[david-allison]

Also, is there any reason the "pen" icon was used for fields? See https://fonts.google.com/icons?icon.query=field

I don't think 'text fields' is a good icon.

Do you like Text Fields Alt?

[ZornHadNoChoice]

It isn't perfect, but at least it's not just the edit icon. What do you think about the Wysiwyg icon?

[Haz3-jolt]

I prefer the icon to the side instead of on top, it looks off.

[ZornHadNoChoice]

For horizontal icons, wouldn't it be better if they were on the left?

[Haz3-jolt]

Oh nice suggestion, I agree

[david-allison]

You're right, I think icon before would look better

[david-allison]

The tab headings seem incorrect (change note type should not be vertical). The styling of the text also seems inconsistent

AnkiDroid Version = 2.24.0alpha11-debug (f67aa821e7e37abaf92d5247e875783102b363d4)  
Backend Version = 0.1.63-anki25.09.2 (25.09.2 3890e12c9e48c028c3f12aa58cb64bd9f8895e30)  
Android Version = 13 (SDK 33)  
ProductFlavor = full  
Device Info = Google | google | emu64a | sdk_gphone64_arm64 | sdk_gphone64_arm64 | ranchu  
WebView Info = [com.google.android.webview | 541412334]: Mozilla/5.0 (Linux; Android 13; sdk_gphone64_arm64 Build/TE1A.240213.009; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/109.0.5414.123 Mobile Safari/537.36  
ACRA UUID = 3fe2f7ab-71d7-4e71-aa22-e7c451a95beb  
FSRS = 5.1.0 (Enabled: false)  
Crash Reports Enabled = false

[Galal-20]

Thanks for the feedback @david-allison.

I’ve updated the tab layout to avoid the vertical appearance and ensured that text and icons are displayed consistently. I also aligned the styling with the existing dialogs to keep the UI uniform across the app.

Please let me know if this looks correct now.