Redesign every input field component to meet Material Design Guidelines

[Cveman1]

The text fields used to enter texts into the ODK-X Apps needs to be redesigned to be consistent across all the tools.

Why this needs to be improved:

1. To meet consideration for Material Design Guidelines.

[Cveman1]

Hi @Redeem-Grimm-Satoshi and @maprehensive

Here's an updated text field for consistency in all of ODK-X Tools. It meets the guidelines in the Material Design System.

I'll also be adding it to the ODK-X Guidelines.

Use Case

Design Considerations

• The height of the text field is 56px and the width fills the container or screen to which it belongs.
• The placeholder is 16px font for all input states.
• The padding is 16px on all sides.
• The border outline for both the default and filled state is 1px, and 2px for the focused and error states.
• The border colour for the default state is #666666 which is grey-300 on the ODK-X Design Guidelines.
• The border colour for the focused state is #5594d7 which is blue-300-main
• The border colour for the filled state is #1d1d1d which is grey-500
• The border colour for the error state is #db6262 which is red-300-main

[Cveman1]

The label text is 14px in size

[Cveman1]

@Redeem-Grimm-Satoshi

I just updated this on the ODK-X Guidelines. Click here to view

[Redeem-Grimm-Satoshi]

@Cveman1 Did you follow material design for this input field? or It's just your own custom style tailored out of the box ?

[Cveman1]

We are following the material design guidelines @Redeem-Grimm-Satoshi here: https://m3.material.io/components/text-fields/overview

What do you mean out of the box?

[Redeem-Grimm-Satoshi]

@Cveman1 Do you see how the text field here looks like? when focused see how the text label appears.

Out of the box in that context meant; Your own style

[Cveman1]

I'm using our own colours for the borders, odk-x blue

It isn't out of the box. Guidelines are not rules

[Redeem-Grimm-Satoshi]

Yeah but I'm not talking about the colors. My primary focus is where the label text is positioned.

We'll clarify this during the call.

[Cveman1]

As I said, they are guidelines. To keep things simple, I chose to use adjacent labels for all text fields. I figured this would also aid easy development.

Check this: https://m3.material.io/components/text-fields/guidelines#a2c6b301-66b1-412f-991a-bf9b7ad0a012

Example:

[Redeem-Grimm-Satoshi]

okay, this explanation from the beginning would have been a lot better.

[Redeem-Grimm-Satoshi]

I'll just move on now to implement it, my doubts are clear now 👍

[Cveman1]

Awesome man. Good job man!