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>
+          </option>
         ))}
-    </ul>
+      </select>
+    </React.Fragment>
   );
 }

src/index.tsx

@@ -1309,7 +1309,6 @@ export class App extends React.Component<any, AppState> {
             document.documentElement.style.cursor = hitElement ? "move" : "";
           }}
         />
-        <div className="langBox">
         <LanguageList
           onClick={lng => {
             i18n.changeLanguage(lng);
@@ -1318,7 +1317,6 @@ export class App extends React.Component<any, AppState> {
           currentLanguage={parseDetectedLang(i18n.language)}
         />
       </div>
-      </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;
+  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;
   }
-  li.current > a,
-  li.current > a:visited {
-    color: black;
-    text-decoration: underline;
+
+  &:hover {
+    background-color: #ced4da;
+  }
+
+  &:active {
+    background-color: #ced4da;
   }
 }