Fix color picker size

[ArnyminerZ]

The PR should be in Draft state during development. As soon as it's finished, it should be marked as Ready for review and a reviewer should be chosen.

See also: Writing A Great Pull Request Description

Purpose

Fix color picker size so it matches the text field.

Before:

After:

Note that the guidelines have been added to demonstrate the result, they don't appear on the app obviously.

Short description

• Forced size to have aspect ratio 1, and fill max height.
• Added 8dp of padding to the top, so it matches the field's border and not the label's text above.

Checklist

• The PR has a proper title, description and label.
• I have self-reviewed the PR.
• I have added documentation to complex functions and functions that can be used by other modules.
• I have added reasonable tests or consciously decided to not add tests.

Closes #806

[sunkup]

Looks good 👍

[rfc2822]

Looks good; please also add a border (like the text fields). Especially when the color is similar to the background, users may not know that they can tap here to open the color picker.

[rfc2822]

I now have used OutlinedButton to have the same border as for the text fields.

Unfortunately I can't set the size "correctly" because the text field has some reserved space for the label which is now included.

It will stay now like this for the release.