From 98b5989b44297000892d2533a54a8810271cfb42 Mon Sep 17 00:00:00 2001
From: djmaze <djmaze@djmaze.lan>
Date: Mon, 8 Nov 2021 00:18:40 +0100
Subject: [PATCH] Improved admin layout

---
 dev/Styles/Admin/Domain.less                  |  8 ----
 dev/Styles/Admin/Layout.less                  | 48 +++++++------------
 .../templates/Views/Admin/PopupsDomain.html   |  2 +-
 .../Views/Admin/PopupsDomainAlias.html        |  4 +-
 .../v/0.0.0/themes/SquaresDark/styles.css     |  1 -
 5 files changed, 19 insertions(+), 44 deletions(-)

diff --git a/dev/Styles/Admin/Domain.less b/dev/Styles/Admin/Domain.less
index ada1b177f..268e90d67 100644
--- a/dev/Styles/Admin/Domain.less
+++ b/dev/Styles/Admin/Domain.less
@@ -1,9 +1,5 @@
 #V-PopupsDomainAlias {
 	max-width: 330px;
-
-	.error-desc {
-		color: red;
-	}
 }
 
 #V-PopupsDomain {
@@ -24,10 +20,6 @@
 		}
 	}
 
-	.error-desc {
-		color: red;
-	}
-
 	.testing-done {
 		color: green !important;
 	}
diff --git a/dev/Styles/Admin/Layout.less b/dev/Styles/Admin/Layout.less
index 7a1684074..997fd7644 100644
--- a/dev/Styles/Admin/Layout.less
+++ b/dev/Styles/Admin/Layout.less
@@ -1,22 +1,18 @@
+
 .UserBackground body {
 	background-size: contain;
 	background-repeat: no-repeat;
 	background-position: center;
 }
 
-#rl-left, #rl-right {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	padding: 0;
-	margin: 0;
-	border: 0;
-	z-index: 0;
+#rl-content {
+	display:flex;
+	height: 100%;
 }
 
 #rl-left {
+	flex-grow: 0;
+	flex-shrink: 0;
 	overflow: auto;
 	padding-top: 50px + @rlLowMargin + 10px;
 	width: @rlLeftWidth;
@@ -45,14 +41,14 @@
 }
 
 #rl-right {
+	flex-grow: 1;
 	z-index: 1;
-	left: @rlLeftWidth;
 }
 
 #V-AdminPane {
 	height: 100%;
 
-	.b-toolbar {
+	> .b-toolbar {
 		position: absolute;
 		top: 0;
 		right: 0;
@@ -76,18 +72,15 @@
 }
 
 #rl-settings-subscreen {
+	background-color: #fff;
+	border: 1px solid @rlMainDarkColor;
+	border-radius: @rlMainBorderRadius;
+	box-shadow: @rlMainShadow;
+	box-sizing: border-box;
+	height: calc(100% - 50px - @rlLowMargin - @rlLowMargin);
 	margin: (50px + @rlLowMargin) @rlLowMargin @rlLowMargin 0;
 	overflow-y: auto;
 	padding: 20px;
-
-	box-sizing: border-box;
-	height: calc(100% - 50px - @rlLowMargin - @rlLowMargin);
-
-	background-color: #fff;
-	border: 1px solid @rlMainDarkColor;
-
-	box-shadow: @rlMainShadow;
-	border-radius: @rlMainBorderRadius;
 }
 
 /* desktop */
@@ -102,10 +95,6 @@
 	#rl-left {
 		width: @rlLeftWidth + 20;
 	}
-
-	#rl-right {
-		left: @rlLeftWidth + 20;
-	}
 }
 
 /* mobile and tablet */
@@ -114,16 +103,13 @@
 		padding: 10px;
 	}
 
-	html:not(.rl-left-panel-disabled) #rl-right {
-		right: 5-@rlLeftWidth;
+	#rl-right {
+		min-width: calc(100% - @rlLowMargin);
 	}
 
 	html.rl-left-panel-disabled {
 		#rl-left {
-			width: 0 !important;
-		}
-		#rl-right {
-			left: 5px !important;
+			width: 0;
 		}
 	}
 }
diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html
index 6d4c6347e..f299c4a84 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html
@@ -12,7 +12,7 @@
 				<br />
 				<input type="text" class="span4" autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
 					data-bind="textInput: name" />
-				<div class="error-desc" data-bind="visible: '' !== savingError(), text: savingError"></div>
+				<div class="alert-error" data-bind="visible: '' !== savingError(), text: savingError"></div>
 			</div>
 			<div class="span5 domain-desc" data-bind="visible: '' !== domainDesc(), html: domainDesc"></div>
 		</div>
diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomainAlias.html b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomainAlias.html
index 2bd7f6934..a3d6d23ab 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomainAlias.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomainAlias.html
@@ -13,9 +13,7 @@
 					size: 4
 				}
 			}"></div>
-			<div data-bind="visible: '' !== savingError()">
-				<span class="error-desc" data-bind="text: savingError"></span>
-			</div>
+			<div class="alert-error" data-bind="visible: '' !== savingError(), text: savingError"></div>
 		</div>
 	</div>
 	<div class="control-group">
diff --git a/snappymail/v/0.0.0/themes/SquaresDark/styles.css b/snappymail/v/0.0.0/themes/SquaresDark/styles.css
index 482b6fad4..b05797d15 100644
--- a/snappymail/v/0.0.0/themes/SquaresDark/styles.css
+++ b/snappymail/v/0.0.0/themes/SquaresDark/styles.css
@@ -141,7 +141,6 @@ dialog header, dialog footer,
 
 .tabs [id^="tab"]:checked + label {
 	background: linear-gradient(#555 0%, #000 100%);
-	color: #000;
 }
 
 input, textarea, .select, select, .emailaddresses {