mui button impl

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],
     };
   }