Enhance language selection (#538)

* Enhance language selection

* remove top/left margin to limit unusable canvas area

Co-authored-by: David Luzar <luzar.david@gmail.com>

src/components/LanguageList.tsx

@@ -10,23 +10,18 @@ export function LanguageList<T>({
   currentLanguage: string;
 }) {
   return (
-    <ul>
-      {languages.map((language, idx) => (
-        <li
-          key={idx}
-          className={currentLanguage === language.lng ? "current" : ""}
-        >
-          <a
-            href="/"
-            onClick={e => {
-              onClick(language.lng);
-              e.preventDefault();
-            }}
-          >
+    <React.Fragment>
+      <select
+        className="language-select"
+        onChange={({ target }) => onClick(target.value)}
+        value={currentLanguage}
+      >
+        {languages.map(language => (
+          <option key={language.lng} value={language.lng}>
             {language.label}
-          </a>
-        </li>
-      ))}
-    </ul>
+          </option>
+        ))}
+      </select>
+    </React.Fragment>
   );
 }

src/index.tsx

@@ -1309,15 +1309,13 @@ export class App extends React.Component<any, AppState> {
             document.documentElement.style.cursor = hitElement ? "move" : "";
           }}
         />
-        <div className="langBox">
-          <LanguageList
-            onClick={lng => {
-              i18n.changeLanguage(lng);
-            }}
-            languages={languages}
-            currentLanguage={parseDetectedLang(i18n.language)}
-          />
-        </div>
+        <LanguageList
+          onClick={lng => {
+            i18n.changeLanguage(lng);
+          }}
+          languages={languages}
+          currentLanguage={parseDetectedLang(i18n.language)}
+        />
       </div>
     );
   }

src/styles.scss

@@ -184,29 +184,35 @@ button {
   }
 }
 
-.langBox {
+.language-select {
   position: absolute;
   right: 0;
   bottom: 0;
+  min-width: 5.5rem;
+  height: 2rem;
+  margin-bottom: 0.5em;
   margin-right: 0.5em;
-  ul {
-    margin: 0;
-    padding: 0;
-  }
-  ul > li {
-    list-style: none;
-    display: inline-block;
-    padding: 4px;
-  }
-  li > a,
-  li > a:visited {
-    text-decoration: none;
-    color: gray;
-    font-size: 0.8em;
-  }
-  li.current > a,
-  li.current > a:visited {
-    color: black;
-    text-decoration: underline;
+  padding: 0.5em;
+  background-color: #e9ecef;
+  border-radius: var(--space-factor);
+  border: none;
+  font-size: 0.8em;
+  outline: none;
+  appearance: none;
+  background-image: url("https://free-use.s3-us-west-2.amazonaws.com/up-sort.svg");
+  background-repeat: no-repeat;
+  background-position: right 0.7em top 50%, 0 0;
+  background-size: 0.65em auto, 100%;
+
+  &:focus {
+    box-shadow: 0 0 0 2px #a5d8ff;
+  }
+
+  &:hover {
+    background-color: #ced4da;
+  }
+
+  &:active {
+    background-color: #ced4da;
   }
 }