add language selector

3 files changed, 84 insertions, 13 deletions

diff --git a/packages/taler-wallet-webextension/src/components/SelectList.tsx b/packages/taler-wallet-webextension/src/components/SelectList.tsx
index 2c4a106ee..74b221777 100644
--- a/packages/taler-wallet-webextension/src/components/SelectList.tsx
+++ b/packages/taler-wallet-webextension/src/components/SelectList.tsx
@@ -14,9 +14,8 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { VNode } from "preact";
-import { useRef, useState } from "preact/hooks";
 import { JSX } from "preact/jsx-runtime";
+import { NiceSelect } from "./styled/index";
 
 interface Props {
   value: string;
@@ -27,14 +26,41 @@ interface Props {
   }
   name: string;
   description?: string;
+  canBeNull?: boolean;
 }
 
-export function SelectList({ name, value, list, onChange, label, description }: Props): JSX.Element {
-  return <select name={name} id="slct">
-    <option selected disabled>Choose an option</option>
-    {Object.keys(list)
-      .filter((l) => l !== value)
-      .map(key => <option value={key} key={key}>{list[key]}</option> )
-    }
-  </select>
+export function SelectList({ name, value, list, canBeNull, onChange, label, description }: Props): JSX.Element {
+  console.log("==>", name, value)
+  return <div>
+    <label
+      htmlFor={`text-${name}`}
+      style={{ marginLeft: "0.5em", fontWeight: "bold" }}
+    > {label}</label>
+    <NiceSelect>
+      <select name={name} onChange={(e) => {
+        console.log(e.currentTarget.value, value)
+        onChange(e.currentTarget.value)
+      }}>
+        <option selected>
+          {list[value]}
+        </option>
+        {Object.keys(list)
+          .filter((l) => l !== value)
+          .map(key => <option value={key} key={key}>{list[key]}</option>)
+        }
+      </select>
+    </NiceSelect>
+    {description && <span
+      style={{
+        color: "#383838",
+        fontSize: "smaller",
+        display: "block",
+        marginLeft: "2em",
+      }}
+    >
+      {description}
+    </span>}
+
+  </div>
+
 }
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 7cc6d427a..cf7f3e06a 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -263,4 +263,49 @@ export const PopupNavigation = styled.div`
     font-weight: bold;
 
   }
+`;
+
+export const NiceSelect = styled.div`
+
+  & > select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    appearance: none;
+    outline: 0;
+    box-shadow: none;
+    background-image: none;
+    background-color: white;
+
+    flex: 1;
+    padding: 0.5em 1em;
+    cursor: pointer;
+  }
+
+  position: relative;
+  display: flex;
+  width: 10em;
+  overflow: hidden;
+  border-radius: .25em;
+
+  &::after {
+    content: '\u25BC';
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0.5em 1em;
+    cursor: pointer;
+    pointer-events: none;
+    -webkit-transition: .25s all ease;
+    -o-transition: .25s all ease;
+    transition: .25s all ease;
+  }
+
+  &:hover::after {
+    /* color: #f39c12; */
+  }
+
+  &::-ms-expand {
+    display: none;
+  }
 `
diff --git a/packages/taler-wallet-webextension/src/popup/Settings.tsx b/packages/taler-wallet-webextension/src/popup/Settings.tsx
index 7f7b5e005..18afcd100 100644
--- a/packages/taler-wallet-webextension/src/popup/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Settings.tsx
@@ -70,14 +70,14 @@ export function SettingsView({ lang, changeLang, deviceName, setDeviceName, perm
     <div>
       <section style={{ height: 'calc(320px - 34px - 16px)', overflow: 'auto' }}>
         <h2><i18n.Translate>Wallet</i18n.Translate></h2>
-        {/* <SelectList
+        <SelectList
           value={lang}
           onChange={changeLang}
           name="lang"
           list={names}
-          label={i18n.str`Lang`}
+          label={i18n.str`Language`}
           description="(Choose your preferred lang)"
-        /> */}
+        />
         <EditableText
           value={deviceName}
           onChange={setDeviceName}