Improved styling the project settings dialog

[grzesiek2010]

Closes #5732

Why is this the best possible solution? Were any other approaches considered?

This is what we have discussed in the issue and in this pr.

How does this change affect users? Describe intentional changes to behavior and behavior that could have accidentally been affected by code changes. In other words, what are the regression risks?

Testing that the project's dialog works as expected will be enough since nothing else has been touched in this pr.
I've only moved the x button to the right side and changed the font size of the title.

Do we need any specific form for testing your changes? If so, please attach one.

No.

Does this change require updates to documentation? If so, please file an issue here and include the link below.

No.

Before submitting this PR, please make sure you have:

• added or modified tests for any new or changed behavior
• run ./gradlew checkAll and confirmed all checks still pass OR confirm CircleCI build passes and run ./gradlew connectedDebugAndroidTest locally.
• added a comment above any new strings describing it for translators
• verified that any code or assets from external sources are properly credited in comments and/or in the about file.
• verified that any new UI elements use theme colors. UI Components Style guidelines

[grzesiek2010]

@alyblenkin please take a look at this pr and let me know if you think we need to add something else.
There is one problem I can see... Because of placing the ABout button below Add project there is less space for the list of projects that in landscape mode does not look good. If we want to keep it we need to figure out what to do with that list. Maybe in landscape mode, they should be next to each other like now?

[alyblenkin]

@alyblenkin please take a look at this pr and let me know if you think we need to add something else. There is one problem I can see... Because of placing the ABout button below Add project there is less space for the list of projects that in landscape mode does not look good. If we want to keep it we need to figure out what to do with that list. Maybe in landscape mode, they should be next to each other like now?

You're right, it's not ideal in landscape! I had an idea to try to save space with the settings button over the weekend...I'm going to mock it up and share it with you.

[alyblenkin]

@grzesiek2010 - thanks for restarting the build! It's working now :)

Capturing a few notes from our conversation here:

• We want to make minimal changes to the UI as part of this work. So we are not going to address the settings button taking up too much space. We can come back to that later if we want to make more significant changes to the design, which I do think we should consider at one point!
• The bottom two buttons should be consistent and remain side-by-side in both views so it doesn't cause issues in landscape mode
• Reducing the padding a little at the top will help make it better in landscape mode. I also noticed we use a different font size for the title of this dialog. Could we make it the same as the others?

[grzesiek2010]

also noticed we use a different font size for the title of this dialog. Could we make it the same as the others?

If we used the same font size it would be like this:

Do you like it? It looks big...

[alyblenkin]

I think it's much better than our small title because it creates an information hierarchy. It's also not taking up much more room because it's aligned with the cancel button. @lognaturel let me know if you disagree

[dbemke]

Just to double check. In the CircleCI apk it's still possible to click a main menu button and project icon at the same time.The PR #5759 is not included in the apk?

[grzesiek2010]

Just to double check. In the CircleCI apk it's still possible to click a main menu button and project icon at the same time.The PR #5759 is not included in the apk?

Now it should be included.

[dbemke]

In Kinyarwanda language the "Project" is long and with a font size just a bit bigger in the device, the "Project" overlaps with X. This is Android 10 RedmiT.
.

[grzesiek2010]

In Kinyarwanda language the "Project" is long and with a font size just a bit bigger in the device, the "Project" overlaps with X. This is Android 10 RedmiT.

@alyblenkin what do you think? That's the result of increasing the font size but also maybe the translation is not perfect in that case.

[srujner]

On smaller devices like the one with Android 5.1 you don't even have to increase the font in the settings for the same results

[srujner]

And on the Pixel 6a on Android 13, with maximum size of font the project setting dialog for the Kinyarwanda language looks like that:

[alyblenkin]

@grzesiek2010 oh no...that certainly isn't working! I did not try using Kinyarwanda when testing it – this is good to know. We will likely need to bring the font back to the size before. Typically, this is fine because the X is on its own line, but we need to save space here.

I'm assuming the buttons at the bottom are always cut off in Kinyarwanda because we didn't change anything?

[dbemke]

I'm assuming the buttons at the bottom are always cut off in Kinyarwanda because we didn't change anything?

Yes. In all languages project names with a bigger font size are cut off and "Add project" e.g in Italian looks similar but it existed before and I think there's already an issue with it.

[grzesiek2010]

Ok I've decreased the font size to what we had before.

[grzesiek2010]

After testing we can merge this pr but in the future, we should maybe consider using a full-screen dialog in this case. @alyblenkin what do you think? Using a normal dialog it's not possible to accommodate everything and make everything look good with different translations.

[alyblenkin]

I completely agree! We were trying to avoid big changes with some of these design tweaks, but this work uncovered many issues with translations and how difficult it is to fit the content into the dialog in general. I'll add it to my list of UX/UI changes to discuss in our next release planning.

[srujner]

Tested with Success!

Verified on device with Android 12, 13

Verified cases:

• Works toward changes in Styling the project settings dialog #5732;
• Project Settings dialog;
• Different Languages;
• Different font size;
• Rotate the screen;
• Light and Dark mode.

[dbemke]

Tested with Success!

Verified on device with Android 8.1, 10