Services sync dialogue UI: allow user to show and hide sync details

[maprehensive]

When a sync is occurring the dialogue box can show a lot of rapidly changing sync details text. This can be uninformative and districting.

Allow users to hide the sync details text by adding a Show / Hide button to the dialogue box .

Note that color and layout updates are detailed in #331

[OlaitanAdesina]

Hello, I would like to work on this issue.

[wbrunette]

@OlaitanAdesina I have assigned the issue to you

[BlueSkiez-dev]

Hi, I would like to work on this issue

[Cveman1]

Is this issue open to simultaneous people? If yes, I'd also like to work on it to improve it's UX @maprehensive

[ghost]

Hello @maprehensive @wbrunette I would love to work on the UI for this issue for my outreachy contribution. Thanks

[G-ann]

Hello, I would love to work on this, if it's still open @maprehensive

[maprehensive]

@wbrunette – can I open this issue to Outreachy applicants? Will probably need guidance on the technical implementation.

[caxrii]

I would like to work on this?

[maprehensive]

@BlueSkiez-dev @Cveman1 @AkorOG @G-ann Yes, please go ahead and work on this. This is a technical piece, and will require some input from @wbrunette

[caxrii]

@maprehensive @wbrunette what are the technical input required for this.

[wbrunette]

You will need to check out the Services code and find the appropriate place to update colors. https://developer.android.com/

[salmasabo]

I would like to work on this issue

[BlueSkiez-dev]

@salmasabo you can go ahead

[JessicaItepu]

..

[Cveman1]

Hi @maprehensive. Trust you're doing good.

I have adjusted the UI of the Services dialogue UI to allow users to show and hide sync details, in a more modern, cleaner and clutter-free design.

Here it is;

Although I believe I have fixed the issue of the 'rapidly changing sync details text' in my earlier contribution to #331. This new iteration aims to design a modern dialogue UI with less clutter. Users can hide and show sync details with a simple text link button, and an 'expand' arrow for visual cues to the user. I'm still in line with the ODK-X Design Guidelines.

View the prototype here;

https://user-images.githubusercontent.com/80982139/200209010-bb72ae63-f782-4dbd-a25a-a164a99d3568.mp4

Experience the prototype here, while I figure out how to put this up on Android Studio.

[Cveman1]

This #331 also solves the same problem. @Redeem-Grimm-Satoshi

[Redeem-Grimm-Satoshi]

Yes @Cveman1 It does.

[maprehensive]

PR https://github.com/odk-x/services/pull/256 raised, needs updating

[maprehensive]

I've reviewed this on the outreach-2023 branch and it looks good. Works as designed.

@Cveman1 will you review this as well?