From a32646b5cbf18d65bc5d1252141059f20c0c973d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Sat, 12 Feb 2022 23:49:33 +0100
Subject: [PATCH] menu: rework select box UX #177

---
 layouts/partials/menu.html | 10 +---------
 static/css/theme.css       | 32 +++++++++++---------------------
 2 files changed, 12 insertions(+), 30 deletions(-)

diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index c2f58a77e3..4cb820855c 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -64,7 +64,7 @@
           <ul>
             {{- if $showlangswitch }}
             <li>
-              <a class="padding">
+              <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <div class="select-style">
                   <select id="select-language" onchange="location = baseUri + this.value;">
@@ -83,14 +83,6 @@
                       {{- end }}
                     {{- end }}
                   </select>
-                  <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-                    width="255px" height="255px" viewBox="0 0 255 255" style="enable-background:new 0 0 255 255;" xml:space="preserve">
-                    <g>
-                      <g id="arrow-drop-down">
-                        <polygon points="0,63.75 127.5,191.25 255,63.75" />
-                      </g>
-                    </g>
-                  </svg>
                 </div>
               </a>
             </li>
diff --git a/static/css/theme.css b/static/css/theme.css
index b3b0618cf8..15b2b242b5 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1388,37 +1388,27 @@ h6 a {
     margin-top: 1rem;
 }
 
+.select-container {
+    height: 1.5rem;
+}
+
 .select-style {
     border: 0;
     border-radius: 0px;
-    display: inline-flex;
+    height: 1.5rem;
+    margin-left: 1.5rem;
+    position: relative;
     overflow: hidden;
-    width: 150px;
-}
-
-.select-style svg {
-    fill: #ccc;
-    height: 14px;
-    margin: auto;
-    pointer-events: none;
-    width: 14px;
-}
-
-.select-style svg:hover {
-  fill: #e6e6e6;
+    top: -1.5rem;
 }
 
 .select-style select {
     -webkit-appearance: none;
     border: none;
     box-shadow: none;
-    background: transparent;
+    background-color: transparent;
     background-image: none;
-    margin: auto;
-    margin-left: 0px;
-    margin-right: -20px;
-    padding: 0;
-    width: 130%;
+    width: 100%;
 }
 
 .select-style select:focus {
@@ -1426,7 +1416,7 @@ h6 a {
 }
 
 .select-style :hover {
-    cursor:  pointer;
+    cursor: pointer;
 }
 
 @media only all and (max-width: 47.938em) {