ui/ux: styling input validation

[vladarama]

What it does

This PR fixes #12243 by providing visual feedback for input validation that is consistent with the input validation in the search-in-workspace and the preferences views. It adds this input validation for the SingleTextInputDialog to create better feedback for the user.

How to test

1. Try causing an error when renaming a file
2. Try causing an error when creating a file from the workspace using New File
3. Try causing an error when creating a new folder from the workspace using New Folder
4. Try causing an error when editing key bindings using File -> Preferences -> Keyboard Shortcuts
5. The error styling should be consistent with the one in Preferences and search-in-workspace

Preferences Error Validation:

Easy errors to test include: creating a file/folder with no name or a duplicate name, renaming a file to the same name, creating empty key bindings ...

Review checklist

• As an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• As a reviewer, I agree to behave in accordance with the review guidelines

[msujew]

I think we should align with vscode regarding the styling of the validation marker:

We need to adjust this:

.theia-settings-container .theia-input[type="number"]:focus {
  outline-width: 1px;
}
.dialogContent .error:not(:empty),
.theia-settings-container .pref-content-container .pref-input .pref-input-container .pref-error-notification {
  border-width: 1px;
}

[vladarama]

Thanks for the feedback Mark, aligning the styling with VS Code makes it look a lot cleaner.

[msujew]

Looks good to me 👍

[kittaakos]

Hello, please mention such a breaking modification in the changelog next time. Thanks for the great work!