From af7b107f455b01e136db2211c357cc59a506139a Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 1 Jun 2022 15:47:47 -0300
Subject: mui button impl

---
 .../src/components/Banner.stories.tsx              |  4 +--
 .../src/components/Banner.tsx                      |  2 +-
 .../src/components/Checkbox.tsx                    |  2 +-
 .../src/components/CheckboxOutlined.tsx            |  2 +-
 .../src/components/MultiActionButton.tsx           | 40 ++++++++++++----------
 5 files changed, 26 insertions(+), 24 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/components')

diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
index f91d94d0f..c8a7a5eef 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
@@ -77,8 +77,8 @@ export const BasicExample = (): VNode => (
         ]}
         confirm={{
           label: "turn on wifi",
-          action: () => {
-            return null;
+          action: async () => {
+            return;
           },
         }}
       />
diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx b/packages/taler-wallet-webextension/src/components/Banner.tsx
index 88b36430b..c1f216f05 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.tsx
@@ -15,7 +15,7 @@ interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
   }[];
   confirm?: {
     label: string;
-    action: () => void;
+    action: () => Promise<void>;
   };
 }
 
diff --git a/packages/taler-wallet-webextension/src/components/Checkbox.tsx b/packages/taler-wallet-webextension/src/components/Checkbox.tsx
index 2e14f3367..5b782c628 100644
--- a/packages/taler-wallet-webextension/src/components/Checkbox.tsx
+++ b/packages/taler-wallet-webextension/src/components/Checkbox.tsx
@@ -18,7 +18,7 @@ import { h, VNode } from "preact";
 
 interface Props {
   enabled?: boolean;
-  onToggle?: () => void;
+  onToggle?: () => Promise<void>;
   label: VNode;
   name: string;
   description?: VNode;
diff --git a/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
index 1b38935c0..a596ba94d 100644
--- a/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
+++ b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
@@ -19,7 +19,7 @@ import { h, VNode } from "preact";
 
 interface Props {
   enabled: boolean;
-  onToggle: () => void;
+  onToggle: () => Promise<void>;
   label: VNode;
   name: string;
 }
diff --git a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
index c4ccaa696..3bc6ba400 100644
--- a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
+++ b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
@@ -1,16 +1,14 @@
+import { getUnpackedSettings } from "http2";
 import { h, VNode } from "preact";
-import arrowDown from "../svg/chevron-down.svg";
-import {
-  ButtonBoxPrimary,
-  ButtonPrimary,
-  ParagraphClickable,
-} from "./styled/index.js";
 import { useState } from "preact/hooks";
+import { Button } from "../mui/Button.js";
+import arrowDown from "../svg/chevron-down.svg";
+import { ParagraphClickable } from "./styled/index.js";
 
 export interface Props {
   label: (s: string) => VNode;
   actions: string[];
-  onClick: (s: string) => void;
+  onClick: (s: string) => Promise<void>;
 }
 
 /**
@@ -43,9 +41,9 @@ export function MultiActionButton({
 
   if (!canChange) {
     return (
-      <ButtonPrimary onClick={() => doClick(selected)}>
+      <Button variant="contained" onClick={() => doClick(selected)}>
         {label(selected)}
-      </ButtonPrimary>
+      </Button>
     );
   }
 
@@ -73,40 +71,44 @@ export function MultiActionButton({
           ))}
         </div>
       )}
-      <ButtonBoxPrimary
+      <Button
+        variant="contained"
         onClick={() => doClick(selected)}
         style={{
           borderTopRightRadius: 0,
           borderBottomRightRadius: 0,
           marginRight: 0,
-          maxWidth: 170,
+          // maxWidth: 170,
           overflowX: "hidden",
           textOverflow: "ellipsis",
         }}
       >
         {label(selected)}
-      </ButtonBoxPrimary>
+      </Button>
 
-      <ButtonPrimary
-        onClick={() => setOpened((s) => !s)}
+      <Button
+        variant="outlined"
+        onClick={async () => setOpened((s) => !s)}
         style={{
           marginLeft: 0,
           borderTopLeftRadius: 0,
           borderBottomLeftRadius: 0,
-          width: 36,
-          padding: 4,
-          height: 36,
-          fill: "white",
+          paddingLeft: 4,
+          paddingRight: 4,
+          minWidth: "unset",
         }}
       >
         <div
           style={{
             height: 24,
             width: 24,
+            marginLeft: 4,
+            marginRight: 4,
+            // fill: "white",
           }}
           dangerouslySetInnerHTML={{ __html: arrowDown }}
         />
-      </ButtonPrimary>
+      </Button>
     </div>
   );
 }
-- 
cgit v1.2.3