diff options
author | Sebastian <sebasjm@gmail.com> | 2022-06-01 15:47:47 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-06-01 15:47:47 -0300 |
commit | af7b107f455b01e136db2211c357cc59a506139a (patch) | |
tree | d1a4596fba17b9db06d50a76f7ecfa403449faca /packages/taler-wallet-webextension/src/components | |
parent | 2aade8e7aed485577576f91e61474f69b4366060 (diff) | |
download | wallet-core-af7b107f455b01e136db2211c357cc59a506139a.tar.xz |
mui button impl
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
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> ); } |