Login form design improvement

[hurradieweltgehtunter]

Steps to reproduce

1. Loadup login screen

Actual behaviour

Design and, thus, readability could be improved.

• Use bright fill for input fields to enhance contrast to dark bg
• Use dark text color for input fields to enhance contrast to bright input bg
• Remove white border hover effect on button (we don't use any hover effect on buttons) to stay in CI
• Use default primary background (gradient) for login button to stay in CI

  background: linear-gradient(to right, #2c588e, #4e85c8);
  background-size: 103%;
  background-position: -1px;

• Remove space above button: there is a <br> above the button which extends the space unnecessarily. AFAIK it serves no purpose.
• Widen button to form/input fields width (100% or 300px)
• Use default border radius (5px) for input fields and button

Updated oCIS login screen

OC10

Have a look at the OC10 login screen:

When we updated it some time ago we considered best practices for login screens. I'd suggest to use this result instead of reinvent the wheel.

Environment general

https://ocis.ocis-wopi.latest.owncloud.works

[kulmann]

Note: this needs to be implemented in https://github.com/owncloud/ocis as the code of the idp service (including the frontend) lives there. Still fine to track it here.

[kulmann]

I'd prefer a gray-ish text color for the (muted) placeholder text in the form fields, like it is in oc10 as well. What do you think?

[hurradieweltgehtunter]

Maybe this leads too far but using a label and a placeholder to show the same information is a duplicate without additional purpose. If a label is present a good best practice might be to use the placeholder to show an example value like 'john@example.com'

[JammingBen]

Okay for now as stated here: https://github.com/owncloud/ocis/pull/4500#issuecomment-1235575435