diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui')
4 files changed, 56 insertions, 21 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx b/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx index 12b2a8625..a2c8576c7 100644 --- a/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx @@ -68,18 +68,22 @@ export const WithTitle = (): VNode => ( </Wrapper> ); +const showSomething = async function (): Promise<void> { + alert("closed"); +}; + export const WithAction = (): VNode => ( <Wrapper> - <Alert title="Warning" severity="warning" onClose={() => alert("closed")}> + <Alert title="Warning" severity="warning" onClose={showSomething}> this is an warning </Alert> - <Alert title="Error" severity="error" onClose={() => alert("closed")}> + <Alert title="Error" severity="error" onClose={showSomething}> this is an error </Alert> - <Alert title="Success" severity="success" onClose={() => alert("closed")}> + <Alert title="Success" severity="success" onClose={showSomething}> this is an success </Alert> - <Alert title="Info" severity="info" onClose={() => alert("closed")}> + <Alert title="Info" severity="info" onClose={showSomething}> this is an info </Alert> </Wrapper> diff --git a/packages/taler-wallet-webextension/src/mui/Alert.tsx b/packages/taler-wallet-webextension/src/mui/Alert.tsx index 7d0ce55d0..b2ea1f5d7 100644 --- a/packages/taler-wallet-webextension/src/mui/Alert.tsx +++ b/packages/taler-wallet-webextension/src/mui/Alert.tsx @@ -49,7 +49,7 @@ interface Props { title?: string; variant?: "filled" | "outlined" | "standard"; role?: string; - onClose?: () => void; + onClose?: () => Promise<void>; // icon: VNode; severity?: "info" | "warning" | "success" | "error"; children: ComponentChildren; diff --git a/packages/taler-wallet-webextension/src/mui/Button.tsx b/packages/taler-wallet-webextension/src/mui/Button.tsx index 451b1d48d..3f8702f88 100644 --- a/packages/taler-wallet-webextension/src/mui/Button.tsx +++ b/packages/taler-wallet-webextension/src/mui/Button.tsx @@ -1,7 +1,7 @@ import { ComponentChildren, h, VNode, JSX } from "preact"; import { css } from "@linaria/core"; // eslint-disable-next-line import/extensions -import { theme, ripple, Colors } from "./style"; +import { theme, ripple, Colors, rippleOutlined } from "./style"; // eslint-disable-next-line import/extensions import { alpha } from "./colors/manipulation"; @@ -31,12 +31,13 @@ interface Props { disableFocusRipple?: boolean; endIcon?: string | VNode; fullWidth?: boolean; + style?: h.JSX.CSSProperties; href?: string; size?: "small" | "medium" | "large"; startIcon?: VNode | string; variant?: "contained" | "outlined" | "text"; color?: Colors; - onClick?: () => void; + onClick?: () => Promise<void>; } const button = css` @@ -199,6 +200,7 @@ export function Button({ fullWidth, variant = "text", size = "medium", + style: parentStyle, color = "primary", onClick, }: Props): VNode { @@ -267,12 +269,15 @@ export function Button({ colorVariant[variant], sizeVariant[variant][size], ].join(" ")} + containedRipple={variant === "contained"} onClick={onClick} style={{ + ...parentStyle, "--color-main": theme.palette[color].main, "--color-contrastText": theme.palette[color].contrastText, "--color-main-alpha-half": alpha(theme.palette[color].main, 0.5), "--color-dark": theme.palette[color].dark, + "--color-light": theme.palette[color].light, "--color-main-alpha-opacity": alpha( theme.palette[color].main, theme.palette.action.hoverOpacity, @@ -295,13 +300,15 @@ export function Button({ interface BaseProps extends JSX.HTMLAttributes<HTMLButtonElement> { class: string; - onClick?: () => void; + onClick?: () => Promise<void>; + containedRipple?: boolean; children?: ComponentChildren; } function ButtonBase({ class: _class, children, + containedRipple, onClick, dangerouslySetInnerHTML, ...rest @@ -309,7 +316,11 @@ function ButtonBase({ function doClick(): void { if (onClick) onClick(); } - const classNames = [buttonBaseStyle, _class, ripple].join(" "); + const classNames = [ + buttonBaseStyle, + _class, + containedRipple ? ripple : rippleOutlined, + ].join(" "); if (dangerouslySetInnerHTML) { return ( <button @@ -332,7 +343,7 @@ export function IconButton({ onClick, }: { svg: any; - onClick?: () => void; + onClick?: () => Promise<void>; }): VNode { return ( <ButtonBase diff --git a/packages/taler-wallet-webextension/src/mui/style.tsx b/packages/taler-wallet-webextension/src/mui/style.tsx index 3ad1ab14e..49904f7f3 100644 --- a/packages/taler-wallet-webextension/src/mui/style.tsx +++ b/packages/taler-wallet-webextension/src/mui/style.tsx @@ -46,13 +46,33 @@ export const theme = createTheme(); export const ripple = css` background-position: center; - transition: background 0.5s; - &:hover { - background: #eeeeee radial-gradient(circle, transparent 1%, #eeeeee 1%) + transition: background 0.2s; + + &:hover:enabled { + background: var(--color-main) + radial-gradient(circle, transparent 1%, var(--color-dark) 1%) + center/15000%; + } + &:active:enabled { + background-color: var(--color-main); + background-size: 100%; + transition: background 0s; + } +`; + +export const rippleOutlined = css` + background-position: center; + + transition: background 0.2s; + + &:hover:enabled { + background: var(--color-contrastText) + radial-gradient(circle, transparent 1%, var(--color-light) 1%) center/15000%; } - &:active { - background-color: currentColor; + + &:active:enabled { + background-color: var(--color-contrastText); background-size: 100%; transition: background 0s; } @@ -680,15 +700,15 @@ function createTheme() { function getDefaultSecondary(mode = "light") { if (mode === "dark") { return { - main: purple[200], - light: purple[50], - dark: purple[400], + main: grey[200], + light: grey[50], + dark: grey[400], }; } return { - main: purple[500], - light: purple[300], - dark: purple[700], + main: grey[300], + light: grey[100], + dark: grey[600], }; } |