summaryrefslogtreecommitdiff
path: root/packages/taler-wallet-webextension/src/components
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2022-06-01 15:47:47 -0300
committerSebastian <sebasjm@gmail.com>2022-06-01 15:47:47 -0300
commitaf7b107f455b01e136db2211c357cc59a506139a (patch)
treed1a4596fba17b9db06d50a76f7ecfa403449faca /packages/taler-wallet-webextension/src/components
parent2aade8e7aed485577576f91e61474f69b4366060 (diff)
downloadwallet-core-af7b107f455b01e136db2211c357cc59a506139a.tar.gz
wallet-core-af7b107f455b01e136db2211c357cc59a506139a.tar.bz2
wallet-core-af7b107f455b01e136db2211c357cc59a506139a.zip
mui button impl
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
-rw-r--r--packages/taler-wallet-webextension/src/components/Banner.stories.tsx4
-rw-r--r--packages/taler-wallet-webextension/src/components/Banner.tsx2
-rw-r--r--packages/taler-wallet-webextension/src/components/Checkbox.tsx2
-rw-r--r--packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx2
-rw-r--r--packages/taler-wallet-webextension/src/components/MultiActionButton.tsx40
5 files changed, 26 insertions, 24 deletions
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>
);
}