From e3aad386e08d07a04d47a49bc1d432ca079d5e8e Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Fri, 18 Sep 2020 10:45:25 +0200
Subject: [PATCH] Fix dropdown button styling in mail compose toolbar

---
 mail/templates/mobile/app.css    | 11 +++++++----
 mail/templates/pixelegg/app.css  | 11 +++++++----
 mail/templates/pixelegg/app.less | 11 +++++++----
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/mail/templates/mobile/app.css b/mail/templates/mobile/app.css
index 1c833aca02..acd2939e7c 100644
--- a/mail/templates/mobile/app.css
+++ b/mail/templates/mobile/app.css
@@ -1436,10 +1436,12 @@ div.ui-toolbar-menulist {
   border: 1px solid rgba(0, 0, 0, 0.15);
 }
 .et2_toolbar_actionlist .et2_toolbar-dropdown {
-  margin: -4px 5px 2px 1px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
+  padding: 3px !important;
+  background: #fafafa !important;
+  background-color: #fafafa !important;
 }
 .et2_toolbar_actionlist .et2_toolbar-dropdown .et2_dropdown {
   -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
@@ -1454,13 +1456,14 @@ div.ui-toolbar-menulist {
   -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
   -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
-  background: #E6E6E6 !important;
-  background-color: #E6E6E6 !important;
+  background: #fafafa !important;
+  background-color: #fafafa !important;
+  min-height: auto;
 }
 .et2_toolbar_actionlist .et2_toolbar-dropdown .et2_dropdown button img {
   width: 16px;
   height: 16px;
-  top: 3px;
+  vertical-align: text-bottom;
 }
 .et2_toolbar_actionlist .et2_toolbar-dropdown .et2_button_icon {
   height: 12px;
diff --git a/mail/templates/pixelegg/app.css b/mail/templates/pixelegg/app.css
index f2124ec4db..6392c1bf48 100755
--- a/mail/templates/pixelegg/app.css
+++ b/mail/templates/pixelegg/app.css
@@ -1424,10 +1424,12 @@ div.ui-toolbar-menulist {
   border: 1px solid rgba(0, 0, 0, 0.15);
 }
 .et2_toolbar_actionlist .et2_toolbar-dropdown {
-  margin: -4px 5px 2px 1px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
+  padding: 3px !important;
+  background: #fafafa !important;
+  background-color: #fafafa !important;
 }
 .et2_toolbar_actionlist .et2_toolbar-dropdown .et2_dropdown {
   -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
@@ -1442,13 +1444,14 @@ div.ui-toolbar-menulist {
   -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
   -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
-  background: #E6E6E6 !important;
-  background-color: #E6E6E6 !important;
+  background: #fafafa !important;
+  background-color: #fafafa !important;
+  min-height: auto;
 }
 .et2_toolbar_actionlist .et2_toolbar-dropdown .et2_dropdown button img {
   width: 16px;
   height: 16px;
-  top: 3px;
+  vertical-align: text-bottom;
 }
 .et2_toolbar_actionlist .et2_toolbar-dropdown .et2_button_icon {
   height: 12px;
diff --git a/mail/templates/pixelegg/app.less b/mail/templates/pixelegg/app.less
index 513a7676c6..d8b9807bd1 100755
--- a/mail/templates/pixelegg/app.less
+++ b/mail/templates/pixelegg/app.less
@@ -529,8 +529,10 @@ div.ui-toolbar-menulist {
 .et2_toolbar_actionlist {
 	// zusammengesetzte Buttons
 	.et2_toolbar-dropdown {
-		margin: -4px 5px 2px 1px;
 		.rounded(3px);
+		padding: 3px !important;
+		background: #fafafa !important;
+		background-color: #fafafa !important;
 		.et2_dropdown {
 			.box_shadow_none;
 			border: none !important;
@@ -540,12 +542,13 @@ div.ui-toolbar-menulist {
 				margin: 0px;
 				padding-top: -3px !important;
 				.box_shadow_none;
-				background: @gray_10 !important;
-				background-color: @gray_10 !important;
+				background: #fafafa !important;
+				background-color: #fafafa !important;
 				img {
 					.dimension_width_height_s;
-					top: 3px;
+					vertical-align: text-bottom;
 				}
+				min-height: auto;
 			}
 		}
 		.et2_button_icon