Fix: Mapco theme cleaning (#4491)

* translated the comments FR -> EN

* delete useless extra styles for login header (template.css)

* <select> in the same height like <input>

* simplefy the search bar button

* improve the config menu button

* improve the layout of the login/register prompt

* navigation bar: border radius

* navigation bar: btn hover improved to darker grey, when not within .stick

* header height improved

* delete unused code ul.nav

* delete outcommented code

* translate comments FR -> EN

* improve login form layout

* icons: do not use it as background-image

* mapco.css

* fixes the nuts

* more nuts

* improve mobile login form

* delete unused view-normal.svg

* compress the svg icons

1 files changed, 20 insertions, 84 deletions

diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss
index fc956dfc3..c3698659b 100644
--- a/p/themes/Mapco/_components.scss
+++ b/p/themes/Mapco/_components.scss
@@ -7,7 +7,7 @@
 /*=== COMPONENTS */
 /*===============*/
 /*=== Forms */
-// parti dans _forms.scss
+// see _forms.scss
 
 /*=== Horizontal-list */
 .horizontal-list {
@@ -41,7 +41,6 @@
 	}
 
 	.dropdown-header {
-		// padding: 0 5px 5px;
 		margin: 1rem 0.5rem 1rem 1rem;
 		font-weight: bold;
 		text-align: left;
@@ -66,6 +65,10 @@
 			background: variables.$main-first;
 			color: variables.$white;
 
+			.icon {
+				filter: brightness(3);
+			}
+
 			a, button, label {
 				text-decoration: none;
 				color: variables.$white;
@@ -91,7 +94,6 @@
 	.separator {
 		margin: 0.75rem 0;
 		border-bottom: 1px solid variables.$grey-light;
-		// display: none;
 	}
 
 }
@@ -122,7 +124,6 @@
 /*=== Alerts */
 .alert {
 	margin: 1rem 0;
-	// width: 100%;
 	padding: 1rem;
 	background: variables.$grey-lighter;
 	color: variables.$grey-dark;
@@ -144,7 +145,7 @@
 .alert-warn {
 	background: variables.$warning-light;
 	color: variables.$warning-text;
-	border: 1px solid string.unquote(variables.$warning-text + '33'); // on ajoute l’opacité à la fin
+	border: 1px solid string.unquote(variables.$warning-text + '33'); // add opacity at the end
 }
 
 .alert-success {
@@ -178,7 +179,6 @@
 /*=== Boxes */
 .box {
 	background: variables.$white;
-	// border: 1px solid #ddd;
 	border: none;
 	border-radius: 3px;
 
@@ -189,31 +189,24 @@
 		padding: 5px 10px;
 		background: variables.$grey-light;
 		color: variables.$main-font-color;
-		// border-bottom: 1px solid #ddd;
 		border-radius: 2px 2px 0 0;
 
 		.configure {
-			margin-right: 4px;
+			padding: 5px;
 		}
 
 		&:hover {
 			.configure {
-				background: url("icons/cog.svg") no-repeat 4px 4px;
-				display: block;
-				float: left;
-				width: 1.75rem;
-				height: 1.75rem;
-				border-radius: 2px;
-				margin-right: 0.5rem;
-
 				.icon {
-					display: none;
-					border-radius: 3px;
 					vertical-align: middle;
 				}
 
 				&:hover {
-					background: url("icons/cog-white.svg") no-repeat 4px 4px variables.$main-first;
+					background-color: variables.$main-first;
+
+					.icon {
+						filter: brightness(3);
+					}
 				}
 			}
 		}
@@ -229,7 +222,6 @@
 
 				a.dropdown-toggle {
 					padding: 0;
-					// float: right;
 					border-radius: 0;
 					background-image: url(icons/more.svg);
 					background-repeat: no-repeat;
@@ -244,41 +236,30 @@
 	}
 
 	.box-content {
-		// max-height: 260px;
 		padding-left: 30px;
 
 		.item {
-			padding: 0.5rem 0;
+			padding: 0.25rem 0;
 			color: variables.$main-font-color;
 			font-size: 1rem;
 			border-bottom: 1px solid variables.$grey-light;
 			line-height: 1.7em;
 
-			img {
-				margin-right: 0.75rem;
-			}
-
 			.configure {
-				background: url("icons/cog.svg") no-repeat 4px 4px;
-				display: block;
-				float: left;
-				width: 1.75rem;
-				height: 1.75rem;
-				border-radius: 2px;
-				margin-right: 0.5rem;
+				padding: 5px;
 
 				.icon {
-					display: none;
-					border-radius: 3px;
 					vertical-align: middle;
 				}
 
 				&:hover {
-					// background: $main-first;
-					background: url("icons/cog-white.svg") no-repeat 4px 4px variables.$main-first;
+					background-color: variables.$main-first;
+
+					.icon {
+						filter: brightness(3);
+					}
 				}
 			}
-
 		}
 
 		.item:last-child {
@@ -301,7 +282,7 @@
 		color: #fff;
 
 		.bigTick {
-			background: url(icons/tick-white.svg) center no-repeat;
+			filter: brightness(5);
 		}
 	}
 
@@ -315,48 +296,3 @@
 		white-space: nowrap;
 	}
 }
-
-// page de login
-.formLogin {
-	background: variables.$sid-bg;
-
-	.header {
-		.configure {
-			padding-right: 1rem;
-
-			img {
-				margin-right: 0.5rem;
-			}
-
-			a.signin {
-				color: variables.$white;
-			}
-		}
-	}
-
-	h1 {
-		color: variables.$white;
-	}
-
-	form#crypto-form {
-		div {
-			margin-bottom: 1rem;
-
-			label {
-				color: variables.$grey-medium;
-				font-size: 1rem;
-
-
-			}
-
-			input {
-				background: variables.$main-first-darker;
-
-				&:focus {
-					background: variables.$grey-lighter;
-					color: variables.$main-font-color;
-				}
-			}
-		}
-	}
-}