From 8aff206538199b328c242f914f2938d9d6bcf712 Mon Sep 17 00:00:00 2001
From: Asher <ash@coder.com>
Date: Mon, 11 Mar 2019 11:29:24 -0500
Subject: [PATCH] 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).
---
 packages/ide/src/fill/dialog.scss |  6 +++---
 packages/ide/src/fill/dialog.ts   | 21 +++++++++++----------
 packages/vscode/src/dialog.scss   |  9 +++------
 packages/vscode/src/dialog.ts     |  2 +-
 4 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/packages/ide/src/fill/dialog.scss b/packages/ide/src/fill/dialog.scss
index 7f54c583a..ca5dc53b5 100644
--- a/packages/ide/src/fill/dialog.scss
+++ b/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 {
diff --git a/packages/ide/src/fill/dialog.ts b/packages/ide/src/fill/dialog.ts
index 1f6dd7e7b..afec23665 100644
--- a/packages/ide/src/fill/dialog.ts
+++ b/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();
diff --git a/packages/vscode/src/dialog.scss b/packages/vscode/src/dialog.scss
index 46238d9b1..356270128 100644
--- a/packages/vscode/src/dialog.scss
+++ b/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;
diff --git a/packages/vscode/src/dialog.ts b/packages/vscode/src/dialog.ts
index 1f7f51643..e7788e122 100644
--- a/packages/vscode/src/dialog.ts
+++ b/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 => {