Changed Main Dialog to match aesthetics and close button location as Original ComfyUI Interface (#2349)

* Started changing UI to match the rest of ComfyUI

Completed Main Container

* - Added layout formatting to components of the Manager dialog box
- Pulled name from select and put it into a label (eg "DB: Channel" now has a label of DB and a dropdown with channel, etc)
- Fixed incorrect z-index

* Removed this.close() I added before finding z-index issue.

* Matched buttons and drop downs to match style of ComfyUI interface while keeping the colours the same as OG ComfyUI Manager

* - Took gui building out and put into its own .js
- Applied theme to Nodes Manager
- Made theme respect user theme colors

* - Themed model manager and snapshot manager
- fixed incorrect id in gui builder

* Fix syntax error in color property

---------

Co-authored-by: Dr.Lt.Data <128333288+ltdrdata@users.noreply.github.com>

js/custom-nodes-manager.css

@@ -1,8 +1,9 @@
 .cn-manager {
 	--grid-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 	z-index: 1099;
-	width: 80%;
-	height: 80%;
+	width: 80vw;
+	height: 75vh;
+	min-height: 30em;
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
@@ -10,6 +11,7 @@
 	font-family: arial, sans-serif;
 	text-underline-offset: 3px;
 	outline: none;
+	margin: calc(var(--spacing)*2);
 }
 
 .cn-manager .cn-flex-auto {
@@ -17,17 +19,21 @@
 }
 
 .cn-manager button {
+	width: auto;
+	position: relative;
+	overflow: hidden;
 	font-size: 16px;
 	color: var(--input-text);
 	background-color: var(--comfy-input-bg);
-	border-radius: 8px;
 	border-color: var(--border-color);
-	border-style: solid;
 	margin: 0;
-	padding: 4px 8px;
 	min-width: 100px;
 }
 
+.cn-manager button:hover {
+	filter: brightness(125%);
+}
+
 .cn-manager button:disabled,
 .cn-manager input:disabled,
 .cn-manager select:disabled {
@@ -40,8 +46,13 @@
 
 .cn-manager .cn-manager-restart {
 	display: none;
-	background-color: #500000;
-	color: white;
+	background-color: #500000 !important;
+	border-color: #88181b !important;
+	color: white !important;
+}
+
+.cn-manager .cn-manager-restart:hover {
+	background-color: #88181b !important;
 }
 
 .cn-manager .cn-manager-stop {
@@ -79,7 +90,6 @@
 	flex-wrap: wrap;
 	gap: 5px;
 	align-items: center;
-	padding: 0 5px;
 }
 
 .cn-manager-header label {
@@ -91,16 +101,32 @@
 .cn-manager-filter {
 	height: 28px;
 	line-height: 28px;
+
+	cursor: pointer;
+	padding: 0.5em 0.5em;
+	border: 1px solid var(--border-color);
+	border-radius: 6px;
+	background: var(--comfy-input-bg);
+}
+
+.cn-manager-filter:hover {
+	filter: brightness(125%);
 }
 
 .cn-manager-keywords {
 	height: 28px;
 	line-height: 28px;
 	padding: 0 5px 0 26px;
+	background: var(--comfy-input-bg);
 	background-size: 16px;
 	background-position: 5px center;
 	background-repeat: no-repeat;
 	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20pointer-events%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23888%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m21%2021-4.486-4.494M19%2010.5a8.5%208.5%200%201%201-17%200%208.5%208.5%200%200%201%2017%200%22%2F%3E%3C%2Fsvg%3E");
+
+	border: 1px solid var(--border-color);
+	border-radius: 6px;
+
+	outline-color: transparent;
 }
 
 .cn-manager-status {
@@ -588,6 +614,10 @@
 	height: 100%;
 }
 
+.cn-install-buttons button {
+	padding: 4px 8px;
+}
+
 .cn-selected-buttons {
 	display: flex;
 	gap: 5px;