From 202fac8295627d0c0cc20a2c32b29075c9ab1901 Mon Sep 17 00:00:00 2001
From: djmaze <djmaze@djmaze.lan>
Date: Fri, 27 Aug 2021 09:59:13 +0200
Subject: [PATCH] Some small UI design improvements

---
 dev/Styles/Ui.less                            |  15 +-
 .../templates/Views/Admin/PopupsDomain.html   | 136 +++++++++---------
 .../Views/Admin/PopupsDomainAlias.html        |   2 +-
 .../templates/Views/Admin/PopupsPlugin.html   |   2 +-
 .../Views/User/PopupsFolderClear.html         |   2 +-
 .../v/0.0.0/themes/SquaresDark/styles.less    |   4 +
 6 files changed, 85 insertions(+), 76 deletions(-)

diff --git a/dev/Styles/Ui.less b/dev/Styles/Ui.less
index 64d8f11cc..1adea447f 100644
--- a/dev/Styles/Ui.less
+++ b/dev/Styles/Ui.less
@@ -91,21 +91,24 @@ textarea + .settings-save-trigger {
 
 // Actual tabs
 .tabs label {
-	grid-row-start: 1;
-	color: #555;
-	margin: 0 2px -1px 0;
-	line-height: @baseLineHeight;
 	border: 1px solid transparent;
 	border-radius: 4px 4px 0 0;
+	cursor: pointer;
+	grid-row-start: 1;
+	line-height: @baseLineHeight;
+	opacity: 0.6;
+	margin: 0 2px -1px 0;
 	padding: 5px;
+	text-align: center;
 	&:hover {
-		border-color: @grayLighter @grayLighter #ddd;
+		border-color: @grayLighter;
+		opacity: 0.8;
 	}
 }
 .tabs [id^="tab"]:checked + label {
-	color: @gray;
 	background-color: @white;
 	border-color: #ddd #ddd transparent #ddd;
+	opacity: 1;
 	z-index: 1;
 }
 
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 cfa6c0653..a2f2b9ce6 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
@@ -26,38 +26,38 @@
 					data-bind="css: { 'testing-done': testingDone, 'testing-error': testingImapError }, tooltipErrorTip: testingImapErrorDesc"
 					data-i18n="POPUPS_DOMAIN/LABEL_IMAP"></label>
 				<div class="tab-content" role="tabpanel" aria-hidden="false">
-						<div class="row">
-							<div class="span3">
-								<span data-i18n="POPUPS_DOMAIN/LABEL_SERVER"></span>
-								<br />
-								<input type="text" class="span3" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-									data-bind="textInput: imapServer, hasfocus: imapServerFocus" />
-							</div>
-							<div class="span2">
-								<span data-i18n="POPUPS_DOMAIN/LABEL_PORT"></span>
-								<br />
-								<input type="number" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-									style="width:6em" data-bind="textInput: imapPort" />
-							</div>
+					<div class="row">
+						<div class="span3">
+							<span data-i18n="POPUPS_DOMAIN/LABEL_SERVER"></span>
+							<br />
+							<input type="text" class="span3" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+								data-bind="textInput: imapServer, hasfocus: imapServerFocus" />
 						</div>
-						<span data-i18n="POPUPS_DOMAIN/LABEL_SECURE"></span>
-						<br />
-						<select data-bind="value: imapSecure">
-							<option value="0" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_NONE"></option>
-							<option value="1" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_SSL"></option>
-							<option value="2" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_STARTTLS"></option>
-						</select>
-						<br /><br />
-						<div data-bind="component: {
-							name: 'Checkbox',
-							params: {
-								label: 'POPUPS_DOMAIN/LABEL_USE_SHORT_LOGIN',
-								value: imapShortLogin,
-								inline: true
-							}
-						}"></div>
-						&nbsp;&nbsp;
-						<span style="color: #aaa">(user@domain.com → user)</span>
+						<div class="span2">
+							<span data-i18n="POPUPS_DOMAIN/LABEL_PORT"></span>
+							<br />
+							<input type="number" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+								style="width:6em" data-bind="textInput: imapPort" />
+						</div>
+					</div>
+					<span data-i18n="POPUPS_DOMAIN/LABEL_SECURE"></span>
+					<br />
+					<select data-bind="value: imapSecure">
+						<option value="0" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_NONE"></option>
+						<option value="1" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_SSL"></option>
+						<option value="2" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_STARTTLS"></option>
+					</select>
+					<br /><br />
+					<div data-bind="component: {
+						name: 'Checkbox',
+						params: {
+							label: 'POPUPS_DOMAIN/LABEL_USE_SHORT_LOGIN',
+							value: imapShortLogin,
+							inline: true
+						}
+					}"></div>
+					&nbsp;&nbsp;
+					<span style="color: #aaa">(user@domain.com → user)</span>
 				</div>
 
 				<input type="radio" name="helptabs" id="tab-help2" />
@@ -135,40 +135,40 @@
 					<span data-i18n="POPUPS_DOMAIN/LABEL_SIEVE"></span>
 				</label>
 				<div class="tab-content" role="tabpanel" aria-hidden="true">
+					<div class="row">
+						<div class="span5">
+							<div data-bind="component: {
+								name: 'Checkbox',
+								params: {
+									label: 'POPUPS_DOMAIN/LABEL_ALLOW_SIEVE_SCRIPTS',
+									value: useSieve
+								}
+							}"></div>
+						</div>
+					</div>
+					<div data-bind="visible: useSieve">
 						<div class="row">
-							<div class="span5">
-								<div data-bind="component: {
-									name: 'Checkbox',
-									params: {
-										label: 'POPUPS_DOMAIN/LABEL_ALLOW_SIEVE_SCRIPTS',
-										value: useSieve
-									}
-								}"></div>
+							<div class="span3">
+								<span data-i18n="POPUPS_DOMAIN/LABEL_SERVER"></span>
+								<br />
+								<input type="text" class="span3" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+									data-bind="textInput: sieveServer, hasfocus: sieveServerFocus" />
+							</div>
+							<div class="span1">
+								<span data-i18n="POPUPS_DOMAIN/LABEL_PORT"></span>
+								<br />
+								<input type="number" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+									style="width:6em" data-bind="textInput: sievePort" />
 							</div>
 						</div>
-						<div data-bind="visible: useSieve">
-							<div class="row">
-								<div class="span3">
-									<span data-i18n="POPUPS_DOMAIN/LABEL_SERVER"></span>
-									<br />
-									<input type="text" class="span3" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-										data-bind="textInput: sieveServer, hasfocus: sieveServerFocus" />
-								</div>
-								<div class="span1">
-									<span data-i18n="POPUPS_DOMAIN/LABEL_PORT"></span>
-									<br />
-									<input type="number" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-										style="width:6em" data-bind="textInput: sievePort" />
-								</div>
-							</div>
-							<span data-i18n="POPUPS_DOMAIN/LABEL_SECURE"></span>
-							<br />
-							<select data-bind="value: sieveSecure">
-								<option value="0" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_NONE"></option>
-								<option value="1" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_SSL"></option>
-								<option value="2" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_STARTTLS"></option>
-							</select>
-						</div>
+						<span data-i18n="POPUPS_DOMAIN/LABEL_SECURE"></span>
+						<br />
+						<select data-bind="value: sieveSecure">
+							<option value="0" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_NONE"></option>
+							<option value="1" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_SSL"></option>
+							<option value="2" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_STARTTLS"></option>
+						</select>
+					</div>
 				</div>
 
 				<input type="radio" name="helptabs" id="tab-help4" />
@@ -194,11 +194,13 @@
 			<i class="fontastic">✖</i>
 			<span data-i18n="POPUPS_DOMAIN/BUTTON_CLOSE"></span>
 		</a>
-		<a class="btn buttonClear" data-bind="command: createOrAddCommand">
-			<i class="fontastic" data-bind="text: edit() ? '✔' : '✚', visible: !saving()"></i>
-			<i class="icon-spinner" data-bind="visible: saving"></i>
-			<span data-bind="visible: !edit()" data-i18n="POPUPS_DOMAIN/BUTTON_ADD"></span>
-			<span data-bind="visible: edit()" data-i18n="POPUPS_DOMAIN/BUTTON_UPDATE"></span>
+		<a class="btn" data-bind="command: createOrAddCommand, visible: edit()">
+			<i class="fontastic" data-bind="css: {'icon-spinner': saving()}">✔</i>
+			<span data-i18n="POPUPS_DOMAIN/BUTTON_UPDATE"></span>
+		</a>
+		<a class="btn" data-bind="command: createOrAddCommand, visible: !edit()">
+			<i class="fontastic" data-bind="css: {'icon-spinner': saving()}">✚</i>
+			<span data-i18n="POPUPS_DOMAIN/BUTTON_ADD"></span>
 		</a>
 	</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 2c6a16e3d..8a87e7acb 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
@@ -40,7 +40,7 @@
 			<i class="fontastic">✖</i>
 			<span data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_CLOSE"></span>
 		</a>
-		<a class="btn buttonClear" data-bind="command: createCommand">
+		<a class="btn" data-bind="command: createCommand">
 			<i class="fontastic" data-bind="visible: !saving()">✚</i>
 			<i class="icon-spinner" data-bind="visible: saving"></i>
 			<span data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_ADD"></span>
diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsPlugin.html b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsPlugin.html
index 5139914df..b66efd843 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsPlugin.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsPlugin.html
@@ -25,7 +25,7 @@
 			<i class="fontastic">✖</i>
 			<span data-i18n="POPUPS_PLUGIN/BUTTON_CLOSE"></span>
 		</a>
-		<a class="btn buttonClear" data-bind="command: saveCommand, visible: hasConfiguration">
+		<a class="btn" data-bind="command: saveCommand, visible: hasConfiguration">
 			<i class="fontastic">✔</i>
 			<span data-i18n="POPUPS_PLUGIN/BUTTON_SAVE"></span>
 		</a>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsFolderClear.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsFolderClear.html
index 2f11a224d..8a9cd0802 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsFolderClear.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsFolderClear.html
@@ -19,7 +19,7 @@
 		</div>
 	</div>
 	<div class="modal-footer">
-		<a class="btn btn-danger buttonClear" data-bind="command: clearCommand">
+		<a class="btn btn-danger" data-bind="command: clearCommand">
 			<i class="fontastic" data-bind="css: {'icon-spinner white': clearingProcess()}">🔥</i>
 			<span data-i18n="GLOBAL/CLEAR"></span>
 		</a>
diff --git a/snappymail/v/0.0.0/themes/SquaresDark/styles.less b/snappymail/v/0.0.0/themes/SquaresDark/styles.less
index 3c5cca0c2..872728b25 100644
--- a/snappymail/v/0.0.0/themes/SquaresDark/styles.less
+++ b/snappymail/v/0.0.0/themes/SquaresDark/styles.less
@@ -143,3 +143,7 @@
 .b-folders li a.focused {
 	background-color: #111;
 }
+
+.tabs [id^="tab"]:checked + label {
+	color: #000;
+}