Change:
Related: ! A better user experience for blocking/deferring subsequent modal dialogs needs to be implemented.

Discussion:
border-radius: 6px; } <del> .monaco-dialog-box .dialog-message-row .dialog-message-container { padding-left: 0px; } </del> .monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-text { font-size: 25px; <del> width: max-content; } .monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-body .dialog-message { display: flex; padding: 20px; min-height: auto; color: var(--vscode-descriptionForeground); border-radius: 6px; overflow: hidden; margin-bottom: 12px; background: var(--vscode-welcomePage-tileHoverBackground); align-items: center; } .monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-body>.dialog-message { grid-area: title; align-self: flex-end; } .monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-body .dialog-message hr { border-color: var(--vscode-descriptionForeground); margin-bottom: 12px; border-width: thin; </del> <ins> min-width: max-content; </ins> } <del> .monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-body .dialog-message .icon-widget { </del> <ins> #monaco-dialog-message-body > div > p > .codicon[class*='codicon-']::before{ </ins> padding-right: 8px; max-width: 30px; max-height: 30px;

font-size: 25px; } <del> .monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-body .dialog-message .description-container { </del> <ins> #monaco-dialog-message-body > .message-body > p { display: flex; font-size: 16px; background: var(--vscode-welcomePage-tileHoverBackground); border-radius: 6px; padding: 20px; min-height: auto; word-wrap: break-word; overflow-wrap:break-word; } #monaco-dialog-message-body > .link > p { font-size: 16px; } .monaco-dialog-box > .dialog-buttons-row > .dialog-buttons > .monaco-button{ </ins> font-size: 16px; }

*--------------------------------------------------------------------------------------------*/ import 'vs/css!./media/welcomeDialog'; <del> import { IInstantiationService, createDecorator } from 'vs/platform/instantiation/common/instantiation'; import { ThemeIcon } from 'vs/base/common/themables'; </del> <ins> import { createDecorator } from 'vs/platform/instantiation/common/instantiation'; </ins> import { InstantiationType, registerSingleton } from 'vs/platform/instantiation/common/extensions'; <del> import { ILayoutService } from 'vs/platform/layout/browser/layoutService'; import { DisposableStore } from 'vs/base/common/lifecycle'; import { Dialog } from 'vs/base/browser/ui/dialog/dialog'; import { defaultButtonStyles, defaultCheckboxStyles, defaultDialogStyles, defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; import { $ } from 'vs/base/browser/dom'; import { renderLabelWithIcons } from 'vs/base/browser/ui/iconLabel/iconLabels'; import { ILinkDescriptor, Link } from 'vs/platform/opener/browser/link'; </del> <ins> import { ILinkDescriptor } from 'vs/platform/opener/browser/link'; import { IDialogService } from 'vs/platform/dialogs/common/dialogs'; import { MarkdownString } from 'vs/base/common/htmlContent'; </ins> interface IWelcomeDialogItem { readonly title: string;

export class WelcomeDialogService implements IWelcomeDialogService { declare readonly _serviceBrand: undefined; <del> private dialog: Dialog | undefined; private disposableStore: DisposableStore = new DisposableStore(); </del> constructor( <del> @ILayoutService private readonly layoutService: ILayoutService, @IInstantiationService private readonly instantiationService: IInstantiationService) { } private static iconWidgetFor(icon: string) { const themeIcon = ThemeIcon.fromId(icon); if (themeIcon) { const widget = $(ThemeIcon.asCSSSelector(themeIcon)); widget.classList.add('icon-widget'); return widget; } return ''; </del> <ins> @IDialogService private readonly dialogService: IDialogService) { </ins> } async show(welcomeDialogItem: IWelcomeDialogItem): Promise<void> { <del> this.disposableStore.clear(); const renderBody = (parent: HTMLElement) => { parent.classList.add(...('dialog-items')); parent.appendChild(document.createElement('hr')); </del> <ins> const renderBody = (icon: string, message: string): MarkdownString => { const mds = new MarkdownString(undefined, { supportThemeIcons: true, supportHtml: true }); mds.appendMarkdown(`<a>$(${icon})</a>`); mds.appendMarkdown(message); return mds; }; </ins> <del> for (const message of welcomeDialogItem.messages) { const descriptorComponent = $('.dialog-message', {}, WelcomeDialogService.iconWidgetFor(message.icon), $('.description-container', {}, $('.description.description.max-lines-3', { 'x-description-for': 'description' }, ...renderLabelWithIcons(message.message)))); parent.appendChild(descriptorComponent); } </del> <ins> const hr = new MarkdownString(undefined, { supportThemeIcons: true, supportHtml: true }); hr.appendMarkdown('<hr>'); </ins> <del> const actionsContainer = $('div.dialog-action-container'); parent.appendChild(actionsContainer); if (welcomeDialogItem.action) { this.disposableStore.add(this.instantiationService.createInstance(Link, actionsContainer, welcomeDialogItem.action, {})); } }; </del> <ins> const link = new MarkdownString(undefined, { supportThemeIcons: true, supportHtml: true }); if (welcomeDialogItem.action) { link.appendLink(welcomeDialogItem.action.href, welcomeDialogItem.action.label as string); } </ins> <del> this.dialog = new Dialog( this.layoutService.container, welcomeDialogItem.title, [welcomeDialogItem.buttonText], { detail: '', type: 'none', renderBody: renderBody, </del> <ins> await this.dialogService.prompt({ type: 'none', message: welcomeDialogItem.title, cancelButton: welcomeDialogItem.buttonText, custom: { </ins> disableCloseAction: true, <del> buttonStyles: defaultButtonStyles, checkboxStyles: defaultCheckboxStyles, inputBoxStyles: defaultInputBoxStyles, dialogStyles: defaultDialogStyles }); </del> <ins> markdownDetails: [ { markdown: hr, classes: ['hr'] }, ...welcomeDialogItem.messages.map(value => { return { markdown: renderBody(value.icon, value.message), classes: ['message-body'] }; }), { markdown: link, classes: ['link'] } ] } }); </ins> <del> this.disposableStore.add(this.dialog); await this.dialog.show(); </del> welcomeDialogItem.onClose?.(); <del> this.disposableStore.dispose(); </del> } }