1 files changed, 38 insertions, 28 deletions
diff --git a/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
index 5e30ee3d1..79712c2f4 100644
--- a/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
+++ b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2019 Taler Systems SA
+ (C) 2022 Taler Systems S.A.
 
  GNU Taler is free software; you can redistribute it and/or modify it under the
  terms of the GNU General Public License as published by the Free Software
@@ -14,45 +14,55 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { JSX } from "preact/jsx-runtime";
-import { Outlined, StyledCheckboxLabel } from "./styled/index";
-import { h } from 'preact';
+import { Outlined, StyledCheckboxLabel } from "./styled/index.js";
+import { h, VNode } from "preact";
 
 interface Props {
-  enabled: boolean;
-  onToggle: () => void;
-  label: string;
+  enabled?: boolean;
+  onToggle?: () => Promise<void>;
+  label: VNode;
   name: string;
 }
 
+const Tick = (): VNode => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+    focusable="false"
+    style={{ backgroundColor: "green" }}
+  >
+    <path
+      fill="none"
+      stroke="white"
+      stroke-width="3"
+      d="M1.73 12.91l6.37 6.37L22.79 4.59"
+    />
+  </svg>
+);
 
-const Tick = () => <svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  aria-hidden="true"
-  focusable="false"
-  style={{ backgroundColor: 'green' }}
->
-  <path
-    fill="none"
-    stroke="white"
-    stroke-width="3"
-    d="M1.73 12.91l6.37 6.37L22.79 4.59"
-  />
-</svg>
-
-export function CheckboxOutlined({ name, enabled, onToggle, label }: Props): JSX.Element {
+export function CheckboxOutlined({
+  name,
+  enabled,
+  onToggle,
+  label,
+}: Props): VNode {
   return (
-    <Outlined>
-      <StyledCheckboxLabel onClick={onToggle}>
+    <StyledCheckboxLabel onClick={onToggle}>
+      <Outlined>
         <span>
-          <input type="checkbox" name={name} checked={enabled} disabled={false} />
+          <input
+            type="checkbox"
+            name={name}
+            checked={enabled}
+            disabled={false}
+          />
           <div>
             <Tick />
           </div>
           <label for={name}>{label}</label>
         </span>
-      </StyledCheckboxLabel>
-    </Outlined>
+      </Outlined>
+    </StyledCheckboxLabel>
   );
 }