Make submit button a different colour to the toolbar

[fredhersch]

In the questionnaire with submit button on toolbar. Can we show the submit button with different styling (just border outline for example).

[varunvjha]

Can I work on this issue?

[jingtang10]

Hi Varun - thanks for your interest. Can you clone the repo locally and try to run the datacapturegallery app first. Once you've done that and you're clear what to do I can grant write access.

[varunvjha]

Sure. I'd love to do that.

[jingtang10]

@fredhersch after reviewing https://material.io/components/app-bars-top/android#using-top-app-bars I could not find any example of a button with a border in the top app bar. Do we definitely still want this?

Also, can you please share the original mock here for Varun's reference?

[fredhersch]

You are right @jingtang10 . The goal is to show the submit button in a different colour! That will be sufficient. I will update the issue.

[fredhersch]

@varunvjha let's make the submit button #eee on the dark toolbar background. Thanks

[jingtang10]

@fredhersch I cannot see an example in the spec for the top action bar that has a button with a different background color. I wonder if we should use https://material.io/components/buttons-floating-action-button#usage for the submit button?

[fredhersch]

@jingtang10 What happens if you try and set the background of the button to a different colour? Not sure the FAB is the right component .. will have to do some research!

[mberg]

I don't think we want to go with a FAB for form submission. Once we get paginated forms we'll want to make it super clear where the form ends and where you are supposed to submit! With OpenSRP we went with an approach where we put submit in the top header and also as a button on the page. Let me get Roger (lead designer on OpenSRP) added to the repo so he can weigh in.

[jingtang10]

thanks @mberg - can you or Roger post some screenshots? I think we will probably end up having the option to have the button inside or outside.

[masterishaan19]

Is this issue still open ?? Can I work on this ??

[jingtang10]

this is open but i think we need to do some product and UX work here first.

[Manikant25]

@jingtang10 Can I work on it?

[Prakhar-Agarwal-byte]

@jingtang10 I want to work on this. Please assign it to me.

[Ana2k]

@jingtang10 if this issue is still open can you please assign this issue to me? I think I can fix this issue.

[sakets3010]

this is open but i think we need to do some product and UX work here first.

@jingtang10 while you're at it, you might also wanna change the border colors (usually the secondary color in colors.xml) of outline styled text fields for dark mode. Attaching screenshots for reference (see how the edit text fields become visible when clicked upon but not other wise)

Willing to work on the above and the button implementation if you are done deciding the type of implementation you require.

[epicadk]

@sakets3010 please use the markdown <img> tag or <table> tag so that it is easier to view the images.

[sakets3010]

@sakets3010 please use the markdown <img> tag or <table> tag so that it is easier to view the images.

@epicadk thanks for pointing out,hope it looks better now.

[jingtang10]

this is open but i think we need to do some product and UX work here first.

@jingtang10 while you're at it, you might also wanna change the border colors (usually the secondary color in colors.xml) of outline styled text fields for dark mode. Attaching screenshots for reference (see how the edit text fields become visible when clicked upon but not other wise)

Willing to work on the above and the button implementation if you are done deciding the type of implementation you require.

Thanks for reporting this @sakets3010. Can you please create a separate issue with screenshots? By the way I'm not seeing this behavior on my device.

[jingtang10]

We have not had clear direction on this one. @fredhersch @rowo. Plus, the current look and feel is consistent with material guidelines. I'm going to close this. Please feel free to reopen with a mock. Thanks!

[sakets3010]

this is open but i think we need to do some product and UX work here first.

@jingtang10 while you're at it, you might also wanna change the border colors (usually the secondary color in colors.xml) of outline styled text fields for dark mode. Attaching screenshots for reference (see how the edit text fields become visible when clicked upon but not other wise)

Willing to work on the above and the button implementation if you are done deciding the type of implementation you require.

Thanks for reporting this @sakets3010. Can you please create a separate issue with screenshots? By the way I'm not seeing this behavior on my device.

@jingtang10 sure,i will mention the device name in a separate issue.