[DialogBox] : Improve display for remove folder from workspace

[Anasshahidd21]

What it does

Fixes: #7443

Improves the display of remove from workspace dialog, adds codicon root-folder and gives some margin between different items in
the dialogBox for better visual impact.

Also updated the text, and added tooltips on both the folders and the textContent which now displays the path to the root and the note respectively.

Signed-off-by: Anas Shahid [email protected]

How to test

1. Open Theia
2. Open a workspace
3. Add more folder(s) to the workspace
4. Remove the folder(s) from workspace

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

[vince-fugnitto]

The changes look much nicer than before 👍
I like that we are using the new root-folder codicon icon, and the alignment looks much better.

[vince-fugnitto]

[minor] the styling of css classes can be improved for consistency and readability:

Suggested change

	.theia-DialogNode{
	line-height: var(--theia-content-line-height);
	margin-top: calc(var(--theia-ui-padding)*1.5);
	margin-left: calc(var(--theia-ui-padding)*2.5);
	}
	.theia-DialogNode {
	line-height: var(--theia-content-line-height);
	margin-top: calc(var(--theia-ui-padding)*1.5);
	margin-left: calc(var(--theia-ui-padding)*2.5);
	}

[Anasshahidd21]

thank you for your review @vince-fugnitto. I have updated the code with this change in mind.

[akosyakov]

I like the usage of codeicons, more than dots 👍 Hope other know what a dot for the folder means.

[vince-fugnitto]

@lmcbout would you like to try it out as well?

[lmcbout]

I will test this PR shortly

[lmcbout]

Works fine, looks fine
Question: In the issue description : " adds ellipses before the root-name", I could not see this in action . Do I need to do something to get it ?

[Anasshahidd21]

Works fine, looks fine
Question: In the issue description : " adds ellipses before the root-name", I could not see this in action . Do I need to do something to get it ?

Thankoyou for approving @lmcbout, it was a mistake from my side, I have updated the description of the PR, previously I were to add ellipses to it, but since we have codicons It was best to add a codicon to it.