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/MultiActionButton.tsx           | 40 ++++++++++++----------
 1 file changed, 21 insertions(+), 19 deletions(-)

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

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