Fix some dialog styling issues

- Fix black text caused by 1.32.0 upgrade.
- Fix various alignment and padding issues (a few elements with more
  space below than above).

Author: code-asher

packages/ide/src/fill/dialog.scss

@@ -19,7 +19,6 @@
 	background: #141414;
 	border: none;
 	box-sizing: border-box;
-	margin-bottom: 25px;
 	padding: 10px;
 	width: 100%;
 }
@@ -31,11 +30,11 @@
 
 .msgbox > .detail {
 	font-size: 14px;
-	margin-top: 5px;
+	margin: 5px 0;
 }
 
 .msgbox > .errors {
-	margin-bottom: 25px;
+	margin-top: 20px;
 }
 
 .msgbox > .errors {
@@ -46,6 +45,7 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
+	margin-top: 20px;
 }
 
 .msgbox > .button-wrapper > button {

packages/ide/src/fill/dialog.ts

@@ -31,30 +31,31 @@ export class Dialog {
 	private input: HTMLInputElement | undefined;
 	private errors: HTMLElement;
 	private buttons: HTMLElement[] | undefined;
+	private readonly msgBox: HTMLElement;
 
 	private actionEmitter = new Emitter<IDialogAction>();
 	public onAction = this.actionEmitter.event;
 
 	public constructor(private readonly options: IDialogOptions) {
-		const msgBox = document.createElement("div");
-		msgBox.classList.add("msgbox");
+		this.msgBox = document.createElement("div");
+		this.msgBox.classList.add("msgbox");
 
 		if (this.options.message) {
 			const messageDiv = document.createElement("div");
 			messageDiv.classList.add("msg");
 			messageDiv.innerText = this.options.message;
-			msgBox.appendChild(messageDiv);
+			this.msgBox.appendChild(messageDiv);
 		}
 
 		if (this.options.detail) {
 			const detailDiv = document.createElement("div");
 			detailDiv.classList.add("detail");
 			detailDiv.innerText = this.options.detail;
-			msgBox.appendChild(detailDiv);
+			this.msgBox.appendChild(detailDiv);
 		}
 
 		if (this.options.input) {
-			msgBox.classList.add("input");
+			this.msgBox.classList.add("input");
 			this.input = document.createElement("input");
 			this.input.classList.add("input");
 			this.input.value = this.options.input.value;
@@ -67,12 +68,11 @@ export class Dialog {
 					});
 				}
 			});
-			msgBox.appendChild(this.input);
+			this.msgBox.appendChild(this.input);
 		}
 
 		this.errors = document.createElement("div");
 		this.errors.classList.add("errors");
-		msgBox.appendChild(this.errors);
 
 		if (this.options.buttons && this.options.buttons.length > 0) {
 			this.buttons = this.options.buttons.map((buttonText, buttonIndex) => {
@@ -92,12 +92,12 @@ export class Dialog {
 			const buttonWrapper = document.createElement("div");
 			buttonWrapper.classList.add("button-wrapper");
 			this.buttons.forEach((b) => buttonWrapper.appendChild(b));
-			msgBox.appendChild(buttonWrapper);
+			this.msgBox.appendChild(buttonWrapper);
 		}
 
 		this.overlay = document.createElement("div");
 		this.overlay.className = "msgbox-overlay";
-		this.overlay.appendChild(msgBox);
+		this.overlay.appendChild(this.msgBox);
 
 		setTimeout(() => {
 			this.overlay.style.opacity = "1";
@@ -122,6 +122,7 @@ export class Dialog {
 			const errorDiv = document.createElement("error");
 			errorDiv.innerText = error;
 			this.errors.appendChild(errorDiv);
+			this.msgBox.appendChild(this.errors);
 		}
 	}
 
@@ -131,7 +132,7 @@ export class Dialog {
 	public show(): void {
 		if (!this.cachedActiveElement) {
 			this.cachedActiveElement = document.activeElement as HTMLElement;
-			document.body.appendChild(this.overlay);
+			(document.getElementById("workbench.main.container") || document.body).appendChild(this.overlay);
 			document.addEventListener("keydown", this.onKeydown);
 			if (this.input) {
 				this.input.focus();

packages/vscode/src/dialog.scss

@@ -28,17 +28,14 @@
 		font-weight: normal;
 		text-transform: uppercase;
 		white-space: nowrap;
-		padding-left: 10px;
+		padding: 5px 10px;
 	}
 
 	.nav {
 		display: flex;
 		flex-direction: row;
 		padding: 4px;
-		padding-top: 8px;
-		padding-bottom: 8px;
 		border-bottom: 1px solid var(--border);
-		min-height: 32px;
 	}
 
 	.path {
@@ -48,7 +45,7 @@
 		.path-part {
 			padding: 5px;
 			border-radius: 3px;
-			font-size: 1.2em;
+			font-size: 1.02em;
 			cursor: pointer;
 
 			&:not(:first-child) {
@@ -80,7 +77,7 @@
 
 		.dialog-entry {
 			cursor: pointer;
-			font-size: 1.2em;
+			font-size: 1.02em;
 			padding: 0px;
 			padding-left: 8px;
 			padding-right: 8px;

packages/vscode/src/dialog.ts

@@ -110,7 +110,7 @@ class Dialog {
 		this.root.style.width = "850px";
 		this.root.style.height = "600px";
 		this.background.appendChild(this.root);
-		document.body.appendChild(this.background);
+		(document.getElementById("workbench.main.container") || document.body).appendChild(this.background);
 		this.root.classList.add("dialog");
 
 		const setProperty = (vari: string, id: string): void => {