From 8a351e57630be44b948e1fa0f2be589c4e28ba29 Mon Sep 17 00:00:00 2001
From: djmaze <djmaze@djmaze.lan>
Date: Mon, 15 Nov 2021 12:16:02 +0100
Subject: [PATCH] Resolve #159 and more design issues

---
 dev/Styles/User/Layout.less                   | 37 +------------------
 dev/Styles/User/MessageList.less              |  1 -
 dev/Styles/_BootstrapFix.less                 |  7 +---
 .../templates/Views/User/MailMessageList.html |  4 +-
 .../templates/Views/User/PopupsCompose.html   |  2 +-
 .../templates/Views/User/PopupsContacts.html  |  6 +--
 .../Views/User/SettingsContacts.html          |  1 -
 .../templates/Views/User/SystemDropDown.html  |  2 +-
 snappymail/v/0.0.0/themes/example.css         |  1 -
 vendors/bootstrap/less/buttons.less           |  4 +-
 vendors/bootstrap/less/code.less              |  4 +-
 vendors/bootstrap/less/dropdowns.less         | 35 ++++++------------
 vendors/bootstrap/less/forms.less             | 29 +--------------
 vendors/bootstrap/less/type.less              |  6 +--
 vendors/bootstrap/less/variables.less         |  2 +-
 15 files changed, 31 insertions(+), 110 deletions(-)

diff --git a/dev/Styles/User/Layout.less b/dev/Styles/User/Layout.less
index b3c2e0575..5563a3a00 100644
--- a/dev/Styles/User/Layout.less
+++ b/dev/Styles/User/Layout.less
@@ -153,47 +153,14 @@ html.rl-side-preview-pane {
 	}
 }
 
-.dropdown-menu {
-	max-height: 60vh;
-	max-width: 90vw;
-	overflow: auto;
-
-	a {
-		text-decoration: none;
-		cursor: pointer;
-		color: var(--dropdown-menu-color, #333);
-		background-color: var(--dropdown-menu-bg-color, #fff);
-	}
-
-	li.selected > a {
-		background-color: var(--dropdown-menu-selected-bg-color, #eee);
-	}
-
-	li:not(.disabled) > a:focus,
-	li:not(.disabled) > a:hover {
-		background-color: var(--dropdown-menu-hover-bg-color, #444);
-		background-image: none;
-		color: var(--dropdown-menu-hover-color, #eee);
-	}
-
-	li.disabled > a {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
-}
-
 .dropdown-menu * + .dividerbar {
 	margin-top: 9px;
 	padding-top: 9px;
 	border-top: 1px solid #e5e5e5;
 }
 
-.dropdown.colored-toggle.show .btn.dropdown-toggle {
-	color: #BD362F;
-
-	.caret {
-		border-top-color: #BD362F;
-	}
+.dropdown.show {
+	box-shadow: 0 0 1px var(--main-color, @dropdownLinkColor);
 }
 
 .btn.btn-transparent {
diff --git a/dev/Styles/User/MessageList.less b/dev/Styles/User/MessageList.less
index 0460f6d90..05f918987 100644
--- a/dev/Styles/User/MessageList.less
+++ b/dev/Styles/User/MessageList.less
@@ -89,7 +89,6 @@ html.rl-no-preview-pane {
 	}
 
 	.inputSearch {
-	    display: inline-block;
 		max-width: 300px;
 		width: 100%;
 	}
diff --git a/dev/Styles/_BootstrapFix.less b/dev/Styles/_BootstrapFix.less
index 805f721f4..5bb1ad0be 100644
--- a/dev/Styles/_BootstrapFix.less
+++ b/dev/Styles/_BootstrapFix.less
@@ -9,17 +9,12 @@ label.inline, span.inline {
 	padding: 0;
 	margin-bottom: @baseLineHeight;
 	font-size: @baseFontSize * 1.5;
-	line-height: @baseLineHeight * 2;
+	line-height: @baseLineHeight * 1.5;
 	color: @grayDark;
 	border: 0;
 	border-bottom: 1px solid @dropdownDividerTop;
 }
 
-.legend + .control-group {
-	margin-top: @baseLineHeight;
-	-webkit-margin-top-collapse: separate;
-}
-
 .btn-small.btn-small-small {
 	font-size: 11px;
 	line-height: 11px;
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
index aa7d2f12f..24dbef856 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
@@ -9,7 +9,7 @@
 		<i class="icon-spinner not-animated"></i>
 	</a>
 	<!-- ko if: !newMoveToFolder -->
-	<div class="btn-group dropdown colored-toggle hide-mobile" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
+	<div class="btn-group dropdown hide-mobile" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
 		<a id="move-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle buttonMove" data-bind="command: moveCommand" data-i18n="[title]GLOBAL/MOVE_TO">
 			<i class="icon-copy visible-on-ctrl-btn"></i>
 			<i class="fontastic hidden-on-ctrl-btn">📁</i>
@@ -43,7 +43,7 @@
 		<a class="btn button-delete fontastic"
 			data-bind="command: deleteCommand" data-i18n="[title]GLOBAL/DELETE">🗑</a>
 	</div>
-	<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
+	<div class="btn-group dropdown" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
 		<a id="more-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-i18n="[title]GLOBAL/MORE">☰</a>
 		<ul class="dropdown-menu" role="menu" aria-labelledby="more-list-dropdown-id">
 			<li role="presentation" data-bind="click: listUnsetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html
index d1592f8e3..305264fda 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html
@@ -39,7 +39,7 @@
 						<a class="btn" data-i18n="GLOBAL/BCC"
 							data-bind="visible: !showBcc(), click: function () { showBcc(true); }"></a>
 						<a class="btn fontastic" data-bind="visible: allowContacts, command: contactsCommand" data-i18n="[title]GLOBAL/CONTACTS">📇</a>
-						<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true" style="display:inline;vertical-align:top">
+						<div class="btn-group dropdown" data-bind="registerBootstrapDropdown: true" style="display:inline;vertical-align:top">
 							<a class="btn dropdown-toggle fontastic">☰</a>
 							<ul class="dropdown-menu right-edge" role="menu">
 								<li data-bind="click: function () { showBcc(!showBcc()); }">
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html
index bd45747a3..ee88f4d2d 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html
@@ -13,7 +13,7 @@
 
 		<a class="btn button-delete fontastic" data-bind="command: deleteCommand">🗑</a>
 
-		<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true, visible: !contacts.importing() && !contacts.syncing()">
+		<div class="btn-group dropdown" data-bind="registerBootstrapDropdown: true, visible: !contacts.importing() && !contacts.syncing()">
 			<a id="contacts-more-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1">☰</a>
 			<ul class="dropdown-menu right-edge" role="menu" aria-labelledby="contacts-more-dropdown-id">
 				<li role="presentation">
@@ -83,7 +83,7 @@
 				<span data-i18n="CONTACTS/BUTTON_UPDATE_CONTACT" data-bind="visible: '' !== viewID()"></span>
 			</button>
 		</div>
-		<div class="btn-group dropdown colored-toggle button-add-prop" data-bind="visible: !emptySelection(), registerBootstrapDropdown: true">
+		<div class="btn-group dropdown button-add-prop" data-bind="visible: !emptySelection(), registerBootstrapDropdown: true">
 			<a id="button-add-prop-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle">
 				<span data-i18n="CONTACTS/ADD_MENU_LABEL"></span>
 				<span class="caret"></span>
@@ -113,7 +113,7 @@
 						<span data-i18n="CONTACTS/ADD_MENU_NICKNAME"></span>
 					</a>
 				</li>
-<!-
+<!--
 				<li role="presentation">
 					<a href="#" tabindex="-1" data-bind="click: addNewAddress">
 						<span data-i18n="CONTACTS/ADD_MENU_ADDRESS"></span>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SettingsContacts.html b/snappymail/v/0.0.0/app/templates/Views/User/SettingsContacts.html
index 6e7298095..9afb8ec10 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsContacts.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsContacts.html
@@ -10,7 +10,6 @@
 		}"></div>
 	</div>
 </div>
-<br />
 <div class="form-horizontal" data-bind="visible: allowContactsSync">
 	<div class="legend" data-i18n="SETTINGS_CONTACTS/LEGEND_CONTACTS_SYNC"></div>
 	<div class="control-group">
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SystemDropDown.html b/snappymail/v/0.0.0/app/templates/Views/User/SystemDropDown.html
index 38a8f928a..9a6930ae7 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/SystemDropDown.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SystemDropDown.html
@@ -5,7 +5,7 @@
 		<i class="stopIcon fontastic">⏸</i>
 	</div>
 	<div class="accountPlace hide-mobile" data-bind="text: emailTitle()"></div>
-	<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: accountMenuDropdownTrigger">
+	<div class="btn-group dropdown" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: accountMenuDropdownTrigger">
 		<a id="top-system-dropdown-id" href="#" tabindex="-1" class="btn single btn-block dropdown-toggle">
 			<i class="fontastic" data-bind="css: {'icon-spinner': accountsLoading()}">👤</i>
 <!--
diff --git a/snappymail/v/0.0.0/themes/example.css b/snappymail/v/0.0.0/themes/example.css
index a95d073fe..07fbfef49 100644
--- a/snappymail/v/0.0.0/themes/example.css
+++ b/snappymail/v/0.0.0/themes/example.css
@@ -28,7 +28,6 @@
 	--dropdown-menu-hover-bg-color: #444;
 	--dropdown-menu-hover-color: #eee;
 	--dropdown-menu-disabled-color: #999;
-	--dropdown-menu-selected-bg-color: #eee;
 
 // FOLDERS
 	--folders-color: #333;
diff --git a/vendors/bootstrap/less/buttons.less b/vendors/bootstrap/less/buttons.less
index 56bb8de24..a21925baa 100644
--- a/vendors/bootstrap/less/buttons.less
+++ b/vendors/bootstrap/less/buttons.less
@@ -69,8 +69,8 @@
 // Small
 .btn-small {
   padding: 3px 9px;
-  font-size: @baseFontSize - 2px;
-  line-height: @baseLineHeight - 2px;
+  font-size: (@baseFontSize * 0.85);
+  line-height: (@baseLineHeight * 0.85);
 }
 
 // Block button
diff --git a/vendors/bootstrap/less/code.less b/vendors/bootstrap/less/code.less
index b73eb837b..57c418e0b 100644
--- a/vendors/bootstrap/less/code.less
+++ b/vendors/bootstrap/less/code.less
@@ -26,8 +26,8 @@ code {
 // Blocks of code
 pre {
   display: block;
-  padding: (@baseLineHeight - 1) / 2;
-  margin: 0 0 @baseLineHeight / 2;
+  padding: (@baseLineHeight / 2);
+  margin: 0 0 (@baseLineHeight / 2);
   font-size: @baseFontSize - 1; // 14px to 13px
   line-height: @baseLineHeight;
   white-space: pre-wrap;
diff --git a/vendors/bootstrap/less/dropdowns.less b/vendors/bootstrap/less/dropdowns.less
index d74ca8f2f..2e5bfd99a 100644
--- a/vendors/bootstrap/less/dropdowns.less
+++ b/vendors/bootstrap/less/dropdowns.less
@@ -28,6 +28,9 @@
 // The dropdown menu (ul)
 // ----------------------
 .dropdown-menu {
+  max-height: 60vh;
+  max-width: 90vw;
+  overflow: auto;
   position: absolute;
   top: 100%;
   left: 0;
@@ -51,32 +54,22 @@
 
   // Links within the dropdown menu
   a {
+    background-color: var(--dropdown-menu-bg-color, #fff);
+    color: var(--main-color, @dropdownLinkColor);
     display: block;
     padding: 3px 10px;
-    clear: both;
-    font-weight: normal;
-    line-height: @baseLineHeight;
-    color: @dropdownLinkColor;
+    text-decoration: none;
     white-space: nowrap;
   }
 }
 
 // Hover state
 // -----------
-.dropdown-menu li > a:hover,
-.dropdown-menu li > a:focus {
+.dropdown-menu li:not(.disabled) > a:hover,
+.dropdown-menu li:not(.disabled) > a:focus {
+  background-color: var(--dropdown-menu-hover-bg-color, #444);
+  color: var(--dropdown-menu-hover-color, #eee);
   text-decoration: none;
-  color: @dropdownLinkColorHover;
-  background-color: @dropdownLinkBackgroundHover;
-}
-
-// Active state
-// ------------
-.dropdown-menu .active > a,
-.dropdown-menu .active > a:hover {
-  color: @dropdownLinkColorHover;
-  text-decoration: none;
-  background-color: @dropdownLinkBackgroundActive;
 }
 
 // Disabled state
@@ -85,10 +78,6 @@
 .dropdown-menu .disabled > a,
 .dropdown-menu .disabled > a:hover {
   color: @grayLight;
-}
-// Nuke hover effects
-.dropdown-menu .disabled > a:hover {
-  text-decoration: none;
-  background-color: transparent;
-  cursor: default;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
diff --git a/vendors/bootstrap/less/forms.less b/vendors/bootstrap/less/forms.less
index a84b05e6e..14319d15e 100644
--- a/vendors/bootstrap/less/forms.less
+++ b/vendors/bootstrap/less/forms.less
@@ -11,26 +11,6 @@ form {
   margin: 0 0 @baseLineHeight;
 }
 
-fieldset {
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-// Groups of fields with labels on top (legends)
-legend {
-  cursor: pointer;
-  display: block;
-  width: 100%;
-  padding: 0;
-  margin-bottom: @baseLineHeight;
-  font-size: @baseFontSize * 1.5;
-  line-height: @baseLineHeight * 2;
-  color: @grayDark;
-  border: 0;
-  border-bottom: 1px solid #e5e5e5;
-}
-
 // Identify controls by their labels
 label {
   display: block;
@@ -64,7 +44,6 @@ textarea,
 input {
   box-sizing: border-box;
   display: inline-block;
-  height: @baseLineHeight + 10;
   padding: 4px 6px;
   color: @gray;
   border-radius: @inputBorderRadius;
@@ -242,13 +221,7 @@ input[type="checkbox"][readonly] {
 
 // Margin to space out fieldsets
 .control-group {
-  margin-bottom: @baseLineHeight / 2;
-}
-
-// Legend collapses margin, so next element is responsible for spacing
-legend + .control-group {
-  margin-top: @baseLineHeight;
-  -webkit-margin-top-collapse: separate;
+  margin-bottom: (@baseLineHeight / 2);
 }
 
 // Horizontal-specific styles
diff --git a/vendors/bootstrap/less/type.less b/vendors/bootstrap/less/type.less
index 83f23d61d..a5c60b986 100644
--- a/vendors/bootstrap/less/type.less
+++ b/vendors/bootstrap/less/type.less
@@ -7,7 +7,7 @@
 // -------------------------
 
 p {
-  margin: 0 0 @baseLineHeight / 2;
+  margin: 0 0 (@baseLineHeight / 2);
 }
 
 
@@ -53,7 +53,7 @@ h6 { font-size: 12px; line-height: 20px; }
 // Unordered and Ordered lists
 ul, ol {
   padding: 0;
-  margin: 0 0 @baseLineHeight / 2 25px;
+  margin: 0 0 (@baseLineHeight / 2) 25px;
 }
 ul ul,
 ul ol,
@@ -91,7 +91,7 @@ blockquote {
   border-left: 5px solid @grayLighter;
   p {
     margin-bottom: 0;
-    line-height: @baseLineHeight * 1.25;
+    line-height: (@baseLineHeight * 1.25);
   }
 }
 
diff --git a/vendors/bootstrap/less/variables.less b/vendors/bootstrap/less/variables.less
index af6d98500..2b690aa4b 100644
--- a/vendors/bootstrap/less/variables.less
+++ b/vendors/bootstrap/less/variables.less
@@ -31,7 +31,7 @@
 // Typography
 // -------------------------
 @baseFontSize:          14px;
-@baseLineHeight:        20px;
+@baseLineHeight:        1.43em;
 
 // Tables
 // -------------------------