Small design tweaks

[seadowg]

Closes #7103
Closes #6713

This also makes general improvements to the spacing in the hierarchy (answers are not indented any more) and converts the form end UI to Compose.

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

I'll leave comments inline on anything that needs highlighted.

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?

Should just make the changes described in the issues and only those parts of the app are affected.

Before submitting this PR, please make sure you have:

• added or modified tests for any new or changed behavior
• run ./gradlew connectedAndroidTest (or ./gradlew testLab) and confirmed all checks still pass
• added a comment above any new strings describing it for translators
• added any new strings with date formatting to DateFormatsTest
• 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

[seadowg]

@alyblenkin let me know what you think of the form end view. I wasn't sure which theme color to use from looking at figma, so I've used "error container" and "on error container" for now - that can be updated if it doesn't work for you.

[alyblenkin]

I think it's going in the right direction! However, the error colour makes it look like something is wrong. Can we try the colour I have in figma? I'm using one of the material theme state colourrs - Opacity 0.12 #6E2F2C.

[seadowg]

I'm using one of the material theme state colourrs - Opacity 0.12 #6E2F2C.

Are you referring to these?

[alyblenkin]

@seadowg yes, does that work?

[seadowg]

As far as I can see, that system is for highlighting element control states like disabled, hovered etc. Happy to use that color, but I think we want to define it as something else so it fits into the Material color roles. Maybe one of the "add-on" colors? My assumption is that the intention here is to highlight the box in the "can't edit" cases and let it be less obtrusive in others, so we could also use primary and surface colors for that.

[grzesiek2010]

#7153 (comment)

[WKobus]

On the end page box with information about edit and "Save as draft" button have gray color but on figma box with information about edit is on light blue background and "Save as draft" button has blue color as on previous collect version, are those expected changes?

On the left is old end page and on the right new one

[seadowg]

@WKobus good spots! I think these are OK: the icon being an "on surface" instead of primary is good because it means that it doesn't present itself as the most important thing on the screen. Same goes for "Save as draft". Let me know if you disagree @alyblenkin and I'll create an issue.

[alyblenkin]

Agreed, we made some changes to have stronger contrast between the primary and secondary colours.

[dbemke]

Tested with Success!

Verified on devices with Android 10

Verified cases:

• Too little space between the question and the answer in the hierarchy view #7103, Improve end of form messaging for editing #6713 works as expected
• the hierarchy view: question labels, answers, repeats, groups
• styling and markdown in the hierarchy view
• the end page with all auto send options (set in Collect and in forms)
• the end page and different Access control settings
• the end page in editing finalized
• the end page: light/dark mode, landscape/portrait view, RTL, long names of forms

[WKobus]

tested with success

Verified on phone and tablet with android 16