Minor layout adjustments

.common/core/widget-dock-core/index.html

@@ -56,27 +56,29 @@
 
 	<!-- Streamer.bot Connect Dialog -->
 	<div id="sb-connect-dialog" class="dialog">
+		
+		<button class="dialog-nav-button" onclick="ClosenConnectDialog()">×</button>
 
-		<hr class="divider">
+		<div style="display: flex; flex-direction: row; align-items: center; gap: 1em">
+			<img src="../../resources/streamer.bot.png" style="height: 40px;" />
+			<label class="title">Streamer.bot</label>
+		</div>
 
 		<div style="display: flex; flex-direction: row; gap: 1em">
 			<div class="field">
-				<label for="sb-address">Address *</label>
+				<label for="sb-address">Address <span style="color: var(--mandatory-field-color);">*</span></label>
 				<input type="text" id="sb-address" name="sb-address" placeholder="127.0.0.1" value="127.0.0.1">
 			</div>
 			<div class="field">
-				<label for="sb-port">Port *</label>
+				<label for="sb-port">Port <span style="color: var(--mandatory-field-color);">*</span></label>
 				<input type="text" id="sb-port" name="sb-port" placeholder="8080" value="8080">
 			</div>
 		</div>
 		<div class="field">
 			<label for="sb-password">Password</label>
-			<label class="setting-description" for="sb-password">(Optional)</label>
 			<input type="password" id="sb-password" name="sb-password">
 		</div>
 
-		<hr class="divider">
-
 		<label id="sb-error-label"></label>
 
 		<button id="sb-connect-button" onclick="Connect()">Connect</button>

.common/core/widget-dock-core/script.js

@@ -260,6 +260,11 @@ function OpenConnectDialog() {
     blurLayer.style.display = "block";
 }
 
+function ClosenConnectDialog() {
+    sbConnectDialog.style.display = "none";
+    blurLayer.style.display = "none";
+}
+
 function OpenRequiredActionsDialog() {
     sbRequiredActionsDialog.style.display = "flex";
     blurLayer.style.display = "block";

.common/core/widget-dock-core/style.css

@@ -15,7 +15,7 @@ body {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	padding: 1em;
+	padding: 0em 1em;
 	gap: 1em;
 	box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
 }
@@ -52,14 +52,10 @@ body {
 
 #blur-layer {
 	position: fixed;
-	inset: 0;
-	/* top:0; left:0; bottom:0; right:0 */
-	backdrop-filter: blur(5px);
-	/* blur the content behind */
-	-webkit-backdrop-filter: blur(5px);
-	/* Safari support */
-	z-index: 1;
-	/* behind the modal */
+	inset: 0;								/* top:0; left:0; bottom:0; right:0 */
+	backdrop-filter: blur(10px);			/* blur the content behind */
+	-webkit-backdrop-filter: blur(10px);	/* Safari support */
+	z-index: 1;								/* behind the modal */
 }
 
 
@@ -78,10 +74,10 @@ body {
 }
 
 #sb-error-label {
-	background: #a82d2e33;
+	background: var(--error-background);
 	border-radius: 0.5em;
 	padding: 1em;
-	color: #c65e5e;
+	color: var(--error-color);
 	display: none;
 }
 

.common/styles/global.css

@@ -10,6 +10,9 @@
     --button-color: #2e2e2e;
     --dialog-background: #1d1d1d;
     --callout-background: #181818;
+    --error-background: #a82d2e33;
+    --error-color: #c65e5e;
+    --mandatory-field-color: #c93f3f;
 }
 
 
@@ -32,7 +35,7 @@ body {
 
 .title {
 	font-weight: 900;
-	font-size: 1.5em;
+	font-size: 1.2em;
 	text-transform: uppercase;
 }