Settings: User queries - layout upgrade (#3827)

* draft

* deleted the out commeted code

* improved alert messages

* Update queries.phtml

* Theme base-theme/template.css

* fixed theme: Origin

* Fixed: Theme Adark

* Fixed: Theme Ansum

* Fix: Theme BlueLagoon

* Fix: Theme Dark

* Fix: Theme Flat

* Fix: Theme Mapco

* Fix: Theme Mapco (SCSS)

* Fix: Theme Origine-compact

* Fix: Theme Pafat

* Fix: Theme Screwdriver

* Fix: Theme Swage

* Lint CSS, RTL, and i18n

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

27 files changed, 144 insertions, 42 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index f95f3d637..3b8c6084b 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -459,13 +459,17 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-right: 4px;
+}
+
 .box .box-content {
+	padding-left: 30px;
 	min-height: 2.5em;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 4d101e7f9..e2e6cc7e6 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -459,13 +459,17 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-left: 4px;
+}
+
 .box .box-content {
+	padding-right: 30px;
 	min-height: 2.5em;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss
index 6bafe1564..d8167d0cd 100644
--- a/p/themes/Ansum/_components.scss
+++ b/p/themes/Ansum/_components.scss
@@ -221,10 +221,6 @@
 		// border-bottom: 1px solid #ddd;
 		border-radius: 2px 2px 0 0;
 
-		img {
-			margin-right: 0.75rem;
-		}
-
 		&:hover {
 			.configure {
 				background: url("icons/cog.svg") no-repeat 4px 4px;
@@ -269,12 +265,18 @@
 				}
 			}
 		}
+
+		.configure {
+			margin-right: 4px;
+		}
 	}
 
 	.box-content {
 		// max-height: 260px;
+		padding-left: 30px;
+
 		.item {
-			padding: 0.5rem 0.75rem;
+			padding: 0.5rem 0;
 			color: $main-font-color;
 			font-size: 1rem;
 			border-bottom: 1px solid $grey-light;
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 3843b6369..2be5b797b 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -392,9 +392,6 @@ form th {
 	color: #363330;
 	border-radius: 2px 2px 0 0;
 }
-.box .box-title img {
-	margin-right: 0.75rem;
-}
 .box .box-title:hover .configure {
 	background: url("icons/cog.svg") no-repeat 4px 4px;
 	display: block;
@@ -428,8 +425,14 @@ form th {
 .box .box-title form .dropdown a.dropdown-toggle img {
 	display: none;
 }
+.box .box-title .configure {
+	margin-right: 4px;
+}
+.box .box-content {
+	padding-left: 30px;
+}
 .box .box-content .item {
-	padding: 0.5rem 0.75rem;
+	padding: 0.5rem 0;
 	color: #363330;
 	font-size: 1rem;
 	border-bottom: 1px solid #f5f0ec;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index e78a04795..ae61d4b94 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -392,9 +392,6 @@ form th {
 	color: #363330;
 	border-radius: 2px 2px 0 0;
 }
-.box .box-title img {
-	margin-left: 0.75rem;
-}
 .box .box-title:hover .configure {
 	background: url("icons/cog.svg") no-repeat 4px 4px;
 	display: block;
@@ -428,8 +425,14 @@ form th {
 .box .box-title form .dropdown a.dropdown-toggle img {
 	display: none;
 }
+.box .box-title .configure {
+	margin-left: 4px;
+}
+.box .box-content {
+	padding-right: 30px;
+}
 .box .box-content .item {
-	padding: 0.5rem 0.75rem;
+	padding: 0.5rem 0;
 	color: #363330;
 	font-size: 1rem;
 	border-bottom: 1px solid #f5f0ec;
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index ed3980eb3..b2299d440 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -537,12 +537,16 @@ a.btn {
 	font-weight: normal;
 }
 
+.box .box-title .configure {
+	margin-right: 4px;
+}
+
 .box .box-content {
+	padding-left: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index cba668219..65a50472c 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -537,12 +537,16 @@ a.btn {
 	font-weight: normal;
 }
 
+.box .box-title .configure {
+	margin-left: 4px;
+}
+
 .box .box-content {
+	padding-right: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index dda0278e5..0c0190581 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -481,6 +481,10 @@ a.btn {
 	border-radius: 5px;
 }
 
+.box .icon {
+	filter: brightness(100%);
+}
+
 .box .box-title {
 	margin: 0;
 	padding: 5px 10px;
@@ -489,12 +493,16 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-right: 4px;
+}
+
 .box .box-content {
+	padding-left: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 4de7188dd..c7fee3617 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -481,6 +481,10 @@ a.btn {
 	border-radius: 5px;
 }
 
+.box .icon {
+	filter: brightness(100%);
+}
+
 .box .box-title {
 	margin: 0;
 	padding: 5px 10px;
@@ -489,12 +493,16 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-left: 4px;
+}
+
 .box .box-content {
+	padding-right: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index b5d589ade..09599d133 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -490,12 +490,16 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-right: 4px;
+}
+
 .box .box-content {
+	padding-left: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index cfbd8ed32..381072e3f 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -490,12 +490,16 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-left: 4px;
+}
+
 .box .box-content {
+	padding-right: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss
index c82379708..bfe7a2c5a 100644
--- a/p/themes/Mapco/_components.scss
+++ b/p/themes/Mapco/_components.scss
@@ -221,8 +221,8 @@
 		// border-bottom: 1px solid #ddd;
 		border-radius: 2px 2px 0 0;
 
-		img {
-			margin-right: 0.75rem;
+		.configure {
+			margin-right: 4px;
 		}
 
 		&:hover {
@@ -274,8 +274,10 @@
 
 	.box-content {
 		// max-height: 260px;
+		padding-left: 30px;
+
 		.item {
-			padding: 0.5rem 0.75rem;
+			padding: 0.5rem 0;
 			color: $main-font-color;
 			font-size: 1rem;
 			border-bottom: 1px solid $grey-light;
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index e8dffb43d..551d431ce 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -394,8 +394,8 @@ form th {
 	color: #303136;
 	border-radius: 2px 2px 0 0;
 }
-.box .box-title img {
-	margin-right: 0.75rem;
+.box .box-title .configure {
+	margin-right: 4px;
 }
 .box .box-title:hover .configure {
 	background: url("icons/cog.svg") no-repeat 4px 4px;
@@ -430,8 +430,11 @@ form th {
 .box .box-title form .dropdown a.dropdown-toggle img {
 	display: none;
 }
+.box .box-content {
+	padding-left: 30px;
+}
 .box .box-content .item {
-	padding: 0.5rem 0.75rem;
+	padding: 0.5rem 0;
 	color: #303136;
 	font-size: 1rem;
 	border-bottom: 1px solid #eff0f2;
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 09ff43f5c..0c04ba406 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -394,8 +394,8 @@ form th {
 	color: #303136;
 	border-radius: 2px 2px 0 0;
 }
-.box .box-title img {
-	margin-left: 0.75rem;
+.box .box-title .configure {
+	margin-left: 4px;
 }
 .box .box-title:hover .configure {
 	background: url("icons/cog.svg") no-repeat 4px 4px;
@@ -430,8 +430,11 @@ form th {
 .box .box-title form .dropdown a.dropdown-toggle img {
 	display: none;
 }
+.box .box-content {
+	padding-right: 30px;
+}
 .box .box-content .item {
-	padding: 0.5rem 0.75rem;
+	padding: 0.5rem 0;
 	color: #303136;
 	font-size: 1rem;
 	border-bottom: 1px solid #eff0f2;
diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css
index 1e82870b6..a7bed815e 100644
--- a/p/themes/Origine-compact/origine-compact.css
+++ b/p/themes/Origine-compact/origine-compact.css
@@ -523,13 +523,17 @@ a.btn,
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-right: 4px;
+}
+
 .box .box-content {
+	padding-left: 30px;
 	min-height: 2.5em;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css
index f3c5263c0..64e1c3aed 100644
--- a/p/themes/Origine-compact/origine-compact.rtl.css
+++ b/p/themes/Origine-compact/origine-compact.rtl.css
@@ -523,13 +523,17 @@ a.btn,
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-left: 4px;
+}
+
 .box .box-content {
+	padding-right: 30px;
 	min-height: 2.5em;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 6eb3606bc..1021f47c6 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -508,13 +508,17 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-right: 4px;
+}
+
 .box .box-content {
+	padding-left: 30px;
 	min-height: 2.5em;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 97b304161..7649c8ed4 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -508,13 +508,17 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-left: 4px;
+}
+
 .box .box-content {
+	padding-right: 30px;
 	min-height: 2.5em;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 0deac1a33..4f5443d2d 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -481,12 +481,16 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-right: 4px;
+}
+
 .box .box-content {
+	padding-left: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index e820459d0..3c3ea2476 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -481,12 +481,16 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-left: 4px;
+}
+
 .box .box-content {
+	padding-right: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index d01e30ec0..965980014 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -535,12 +535,16 @@ a.btn {
 	font-weight: normal;
 }
 
+.box .box-title .configure {
+	margin-right: 4px;
+}
+
 .box .box-content {
+	padding-left: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index 1cbc9e604..86489b0b4 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -535,12 +535,16 @@ a.btn {
 	font-weight: normal;
 }
 
+.box .box-title .configure {
+	margin-left: 4px;
+}
+
 .box .box-content {
+	padding-right: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index b7f88bf9c..6710ae8da 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -461,11 +461,14 @@ form th {
 	color: #969696;
 	border-bottom: 1px solid #e3e3e3;
 }
+.box .box-title .configure {
+	margin-right: 4px;
+}
 .box .box-content {
+	padding-left: 30px;
 	max-height: 260px;
 }
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 5713afd06..c100cfc30 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -461,11 +461,14 @@ form th {
 	color: #969696;
 	border-bottom: 1px solid #e3e3e3;
 }
+.box .box-title .configure {
+	margin-left: 4px;
+}
 .box .box-content {
+	padding-right: 30px;
 	max-height: 260px;
 }
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index 44db6fa4d..aee9a0769 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -578,7 +578,13 @@ form {
 		border-bottom: 1px solid darken( $color_light, 10%);
 	}
 
+	.configure {
+		margin-right: 4px;
+	}
+
+
 	.box-content {
+		padding-left: 30px;
 		max-height: 260px;
 
 		.item {
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index b39830319..9fe0c3432 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -484,11 +484,12 @@ a.btn {
 }
 
 .box .box-content {
+	padding: 8px 8px 8px 16px;
 	display: block;
 	overflow: auto;
 }
 
-.box .box-content .item {
+.box .box-content .item.feed {
 	display: block;
 }
 
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index fc83ae5f2..7cb2ba75e 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -484,11 +484,12 @@ a.btn {
 }
 
 .box .box-content {
+	padding: 8px 16px 8px 8px;
 	display: block;
 	overflow: auto;
 }
 
-.box .box-content .item {
+.box .box-content .item.feed {
 	display: block;
 }