browser: Modal Dialog fixed display issues

[Archie27376]

What it does

fixes #8090
Changes made:

• The close button to read Cancel instead to be similar to vscode
• Color of Cancel button switched to the accent color of the modal dialog
• Eliminated the hard-coded Theia title to display the application's name instead

How to test

• Download the necessary plugin and place in /plugins
• Start the browser through command line yarn browser start
• F1 to access the command palette and type Dialog: Open Modal

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]

Hi @Archie27376, thank you for taking care of this issue!

I think the original issue is a bit outdated, since the styling of the close button seems already correct, see the following comparison with vscode (Browser):

Theia, current:

Instead, I'm a bit more worried about the missing detail line detail content (see vscode image) and the size and color of the info icon.

Do you mind reverting the current changes to the dialog.css and addressing the detail line and icon issue?

For the icon colors, you can take inspiration from another style sheet:

theia/packages/markers/src/browser/style/index.css

Lines 50 to 68 in 3c13794

	.theia-marker-container .error {
	color: var(--theia-editorError-foreground);
	opacity: 1;
	}
	.theia-marker-container .warning {
	color: var(--theia-editorWarning-foreground);
	opacity: 1;
	}
	.theia-marker-container .information {
	color: var(--theia-editorInfo-foreground);
	opacity: 1;
	}
	.theia-marker-container .hint {
	color: var(--theia-successBackground);
	opacity: 1;
	}

[msujew]

Thanks, that looks way better already. I have one remark left regarding the detail html node.

[msujew]

Almost done, just two small adjustments:

1. Please set the margin of the p node inside of the .detail class to have this value (to decrease the amount of vertical white space under the detail node): calc(var(--theia-ui-padding) * 2) 0px 0px 0px;
2. Move the Changes from the dialog.css files to the modal-notification.css and change the .icon .fa rule to .icon .codicon. That should remove the need for all the .codicon rules that you added in the dialog.css file. (but please increase the font-size, 120% seems too small)

[msujew]

Thanks, looks great!