fix: missing error styles need css layers - Githubissues

tapis-project / authenticator

BSD 3-Clause "New" or "Revised" License

1 stars 3 forks source link

fix: missing error styles need css layers #47

Closed wesleyboar closed 10 months ago

wesleyboar commented 10 months ago

Overview

Style error messages by loading Core-Styles s-form--portal.
Load styles in layers[^1] so s-form--portal can be in highest layer.
Remove two classes causing wrong styles (#46).

Related

includes #46

Changes

changed load of core-styles and bootstrap to be done in layers
added load of core-styles s-form--portal.css
removed form-control class

Testing

Any forms that show errors (e.g. https://dev.develop.tapis.io/v3/oauth2/device) should not style those errors.

UI

Device

before	after

What changed?

errors are now styled
input field is now not wider than form content should be
input field style now does not have Bootstrap styles

In Situ Testing

| step 1 | step 2 | step 3 | | - | - | - | | device - 1 remove form-control class

device - 1 remove form-control class

|

device - 2 move bootstrap to foudnation layer

|

device - 3 move core-styles to base and project layers

|

MFA

before	after

What changed?

input field is now not wider than form content should be
input field style now does not have Bootstrap styles

In Situ Testing

| step 1 | step 2 | step 3 | | - | - | - | | mfa - 1 remove form-control class

mfa - 1 remove form-control class

|

mfa - 2 move bootstrap to foudnation layer

|

mfa - 3 move core-styles to base and project layers

|

Notes

TACC uses[^1] CSS layers which are widely supported. They are used by https://github.com/TACC/tup-ui and newer https://github.com/TACC/Core-CMS-Custom. They will be used by https://github.com/TACC/Core-Portal.

[^1]: TACC CSS Layers