[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] branch master updated: mui alert and not enough blan
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] branch master updated: mui alert and not enough blanance ported to material |
|
Date: |
Tue, 05 Apr 2022 17:16:23 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
The following commit(s) were added to refs/heads/master by this push:
new a30a547a mui alert and not enough blanance ported to material
a30a547a is described below
commit a30a547ac5596c787252ce23a845093c426dc2ef
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Tue Apr 5 12:16:09 2022 -0300
mui alert and not enough blanance ported to material
---
.../dev-html/static/font/import.css | 35 +++++
.../dev-html/static/font/roboto-italic-400.ttf | Bin 0 -> 130872 bytes
.../dev-html/static/font/roboto-normal-300.tff | Bin 0 -> 128256 bytes
.../dev-html/static/font/roboto-normal-400.ttf | Bin 0 -> 129584 bytes
.../dev-html/static/font/roboto-normal-500.ttf | Bin 0 -> 129768 bytes
.../dev-html/static/font/roboto-normal-700.ttf | Bin 0 -> 128676 bytes
.../dev-html/stories.html | 1 +
.../taler-wallet-webextension/serve-esbuild.mjs | 1 +
.../src/components/Banner.stories.tsx | 10 +-
.../src/components/PendingTransactions.tsx | 10 +-
.../src/mui/Alert.stories.tsx | 86 +++++++++++
.../taler-wallet-webextension/src/mui/Alert.tsx | 160 +++++++++++++++++++++
.../taler-wallet-webextension/src/mui/Button.tsx | 129 +++++++++++++----
.../taler-wallet-webextension/src/mui/Paper.tsx | 4 +
.../src/mui/Typography.tsx | 29 +++-
.../src/mui/index.stories.tsx | 3 +-
.../taler-wallet-webextension/src/mui/style.tsx | 4 +-
.../src/popup/NoBalanceHelp.tsx | 38 +++--
packages/taler-wallet-webextension/src/stories.tsx | 9 +-
.../src/svg/close_24px.svg | 4 +
.../src/svg/delete_24px.svg | 5 +-
.../src/svg/error_outline_outlined_24px.svg | 3 +
.../src/svg/info_outlined_24px.svg | 4 +
.../src/svg/report_problem_outlined_24px.svg | 4 +
.../src/svg/send_24px.svg | 5 +-
.../src/svg/success_outlined_24px.svg | 4 +
.../src/wallet/CreateManualWithdraw.tsx | 2 +-
.../static/font/import.css | 35 +++++
.../static/font/roboto-italic-400.ttf | Bin 0 -> 130872 bytes
.../static/font/roboto-normal-300.tff | Bin 0 -> 128256 bytes
.../static/font/roboto-normal-400.ttf | Bin 0 -> 129584 bytes
.../static/font/roboto-normal-500.ttf | Bin 0 -> 129768 bytes
.../static/font/roboto-normal-700.ttf | Bin 0 -> 128676 bytes
.../taler-wallet-webextension/static/popup.html | 7 +-
.../taler-wallet-webextension/static/wallet.html | 1 +
35 files changed, 524 insertions(+), 69 deletions(-)
diff --git a/packages/taler-wallet-webextension/dev-html/static/font/import.css
b/packages/taler-wallet-webextension/dev-html/static/font/import.css
new file mode 100644
index 00000000..05edddb5
--- /dev/null
+++ b/packages/taler-wallet-webextension/dev-html/static/font/import.css
@@ -0,0 +1,35 @@
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+ src: url(/static/font/roboto-italic-400.ttf) format('truetype');
+}
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ font-display: swap;
+ src: url(/static/font/roboto-normal-300.ttf) format('truetype');
+}
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url(/static/font/roboto-normal-400.ttf) format('truetype');
+}
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url(/static/font/roboto-normal-500.ttf) format('truetype');
+}
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url(/static/font/roboto-normal-700.ttf) format('truetype');
+}
diff --git
a/packages/taler-wallet-webextension/dev-html/static/font/roboto-italic-400.ttf
b/packages/taler-wallet-webextension/dev-html/static/font/roboto-italic-400.ttf
new file mode 100644
index 00000000..1e746d17
Binary files /dev/null and
b/packages/taler-wallet-webextension/dev-html/static/font/roboto-italic-400.ttf
differ
diff --git
a/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-300.tff
b/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-300.tff
new file mode 100644
index 00000000..ec821b57
Binary files /dev/null and
b/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-300.tff
differ
diff --git
a/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-400.ttf
b/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-400.ttf
new file mode 100644
index 00000000..9d4b32b4
Binary files /dev/null and
b/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-400.ttf
differ
diff --git
a/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-500.ttf
b/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-500.ttf
new file mode 100644
index 00000000..4b4e1c65
Binary files /dev/null and
b/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-500.ttf
differ
diff --git
a/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-700.ttf
b/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-700.ttf
new file mode 100644
index 00000000..58d877c5
Binary files /dev/null and
b/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-700.ttf
differ
diff --git a/packages/taler-wallet-webextension/dev-html/stories.html
b/packages/taler-wallet-webextension/dev-html/stories.html
index 1a726e18..b07c4bd1 100644
--- a/packages/taler-wallet-webextension/dev-html/stories.html
+++ b/packages/taler-wallet-webextension/dev-html/stories.html
@@ -3,6 +3,7 @@
<head>
<title>Stories</title>
<link rel="stylesheet" type="text/css" href="/dist/stories.css" />
+ <link rel="stylesheet" type="text/css" href="/static/font/import.css" />
<script src="/dist/stories.js"></script>
</head>
<body>
diff --git a/packages/taler-wallet-webextension/serve-esbuild.mjs
b/packages/taler-wallet-webextension/serve-esbuild.mjs
index 51e0fd52..68dff2c2 100755
--- a/packages/taler-wallet-webextension/serve-esbuild.mjs
+++ b/packages/taler-wallet-webextension/serve-esbuild.mjs
@@ -1,4 +1,5 @@
#!/usr/bin/env node
+/* eslint-disable no-undef */
import linaria from '@linaria/esbuild'
import esbuild from 'esbuild'
diff --git
a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
index 4d328a72..f91d94d0 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
@@ -106,9 +106,13 @@ export const PendingOperation = (): VNode => (
</Avatar>
),
description: (
- <Typography>
- <b>EUR 37.95</b> - 5 feb 2022
- </Typography>
+ <Fragment>
+ <Typography inline bold>
+ EUR 37.95
+ </Typography>
+
+ <Typography inline>- 5 feb 2022</Typography>
+ </Fragment>
),
},
]}
diff --git
a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
index 2d8a776c..f37a212f 100644
--- a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
+++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
@@ -70,16 +70,16 @@ export function PendingTransactionsView({
),
action: () => goToTransaction(t.transactionId),
description: (
- <Typography>
- <b>
+ <Fragment>
+ <Typography inline bold>
{amount.currency} {Amounts.stringifyValue(amount)}
- </b>{" "}
- -{" "}
+ </Typography>
+ -
<Time
timestamp={AbsoluteTime.fromTimestamp(t.timestamp)}
format="dd MMMM yyyy"
/>
- </Typography>
+ </Fragment>
),
};
})}
diff --git a/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx
b/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx
new file mode 100644
index 00000000..12b2a862
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx
@@ -0,0 +1,86 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { css } from "@linaria/core";
+import { ComponentChildren, Fragment, h, VNode } from "preact";
+import { Alert } from "./Alert.jsx";
+
+export default {
+ title: "mui/alert",
+ component: Alert,
+};
+
+function Wrapper({ children }: { children: ComponentChildren }): VNode {
+ return (
+ <div
+ class={css`
+ & > * {
+ margin: 2em;
+ }
+ `}
+ >
+ {children}
+ </div>
+ );
+}
+
+export const BasicExample = (): VNode => (
+ <Wrapper>
+ <Alert severity="warning">this is an warning</Alert>
+ <Alert severity="error">this is an error</Alert>
+ <Alert severity="success">this is an success</Alert>
+ <Alert severity="info">this is an info</Alert>
+ </Wrapper>
+);
+
+export const WithTitle = (): VNode => (
+ <Wrapper>
+ <Alert title="Warning" severity="warning">
+ this is an warning
+ </Alert>
+ <Alert title="Error" severity="error">
+ this is an error
+ </Alert>
+ <Alert title="Success" severity="success">
+ this is an success
+ </Alert>
+ <Alert title="Info" severity="info">
+ this is an info
+ </Alert>
+ </Wrapper>
+);
+
+export const WithAction = (): VNode => (
+ <Wrapper>
+ <Alert title="Warning" severity="warning" onClose={() => alert("closed")}>
+ this is an warning
+ </Alert>
+ <Alert title="Error" severity="error" onClose={() => alert("closed")}>
+ this is an error
+ </Alert>
+ <Alert title="Success" severity="success" onClose={() => alert("closed")}>
+ this is an success
+ </Alert>
+ <Alert title="Info" severity="info" onClose={() => alert("closed")}>
+ 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
new file mode 100644
index 00000000..7d0ce55d
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/Alert.tsx
@@ -0,0 +1,160 @@
+import { css } from "@linaria/core";
+import { ComponentChildren, h, VNode } from "preact";
+// eslint-disable-next-line import/extensions
+import CloseIcon from "../svg/close_24px.svg";
+import ErrorOutlineIcon from "../svg/error_outline_outlined_24px.svg";
+import InfoOutlinedIcon from "../svg/info_outlined_24px.svg";
+import ReportProblemOutlinedIcon from
"../svg/report_problem_outlined_24px.svg";
+import SuccessOutlinedIcon from "../svg/success_outlined_24px.svg";
+import { IconButton } from "./Button.js";
+// eslint-disable-next-line import/extensions
+import { darken, lighten } from "./colors/manipulation";
+import { Paper } from "./Paper.js";
+// eslint-disable-next-line import/extensions
+import { theme } from "./style";
+import { Typography } from "./Typography.js";
+
+const defaultIconMapping = {
+ success: SuccessOutlinedIcon,
+ warning: ReportProblemOutlinedIcon,
+ error: ErrorOutlineIcon,
+ info: InfoOutlinedIcon,
+};
+
+const baseStyle = css`
+ background-color: transparent;
+ display: flex;
+ padding: 6px 16px;
+`;
+
+const colorVariant = {
+ standard: css`
+ color: var(--color-light-06);
+ background-color: var(--color-background-light-09);
+ `,
+ outlined: css`
+ color: var(--color-light-06);
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--color-light);
+ `,
+ filled: css`
+ color: "#fff";
+ font-weight: ${theme.typography.fontWeightMedium};
+ background-color: var(--color-main);
+ `,
+};
+
+interface Props {
+ title?: string;
+ variant?: "filled" | "outlined" | "standard";
+ role?: string;
+ onClose?: () => void;
+ // icon: VNode;
+ severity?: "info" | "warning" | "success" | "error";
+ children: ComponentChildren;
+ icon?: boolean;
+}
+
+const getColor = theme.palette.mode === "light" ? darken : lighten;
+const getBackgroundColor = theme.palette.mode === "light" ? lighten : darken;
+
+function Icon({ svg }: { svg: VNode }): VNode {
+ return (
+ <div
+ class={css`
+ margin-right: 12px;
+ padding: 7px 0px;
+ display: flex;
+ font-size: 22px;
+ opacity: 0.9;
+ fill: currentColor;
+ `}
+ dangerouslySetInnerHTML={{ __html: svg as any }}
+ ></div>
+ );
+}
+
+function Action({ children }: { children: ComponentChildren }): VNode {
+ return (
+ <div
+ class={css`
+ display: flex;
+ align-items: flex-start;
+ padding: 4px 0px 0px 16px;
+ margin-left: auto;
+ margin-right: -8px;
+ `}
+ >
+ {children}
+ </div>
+ );
+}
+
+function Message({
+ title,
+ children,
+}: {
+ title?: string;
+ children: ComponentChildren;
+}): VNode {
+ return (
+ <div
+ class={css`
+ padding: 8px 0px;
+ width: 100%;
+ `}
+ >
+ {title && (
+ <Typography
+ class={css`
+ font-weight: ${theme.typography.fontWeightMedium};
+ `}
+ gutterBottom
+ >
+ {title}
+ </Typography>
+ )}
+ {children}
+ </div>
+ );
+}
+
+export function Alert({
+ variant = "standard",
+ severity = "success",
+ title,
+ children,
+ icon,
+ onClose,
+ ...rest
+}: Props): VNode {
+ return (
+ <Paper
+ class={[
+ theme.typography.body2,
+ baseStyle,
+ severity && colorVariant[variant],
+ ].join(" ")}
+ style={{
+ "--color-light-06": getColor(theme.palette[severity].light, 0.6),
+ "--color-background-light-09": getBackgroundColor(
+ theme.palette[severity].light,
+ 0.9,
+ ),
+ "--color-main": theme.palette[severity].main,
+ "--color-light": theme.palette[severity].light,
+ // ...(style as any),
+ }}
+ elevation={1}
+ >
+ {icon != false ? <Icon svg={defaultIconMapping[severity]} /> : null}
+ <Message title={title}>{children}</Message>
+ {onClose && (
+ <Action>
+ <IconButton svg={CloseIcon} onClick={onClose} />
+ </Action>
+ )}
+ </Paper>
+ );
+}
diff --git a/packages/taler-wallet-webextension/src/mui/Button.tsx
b/packages/taler-wallet-webextension/src/mui/Button.tsx
index 083bbea0..451b1d48 100644
--- a/packages/taler-wallet-webextension/src/mui/Button.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Button.tsx
@@ -1,26 +1,11 @@
-import { ComponentChildren, h, VNode } from "preact";
+import { ComponentChildren, h, VNode, JSX } from "preact";
import { css } from "@linaria/core";
// eslint-disable-next-line import/extensions
import { theme, ripple, Colors } from "./style";
// eslint-disable-next-line import/extensions
import { alpha } from "./colors/manipulation";
-interface Props {
- children?: ComponentChildren;
- disabled?: boolean;
- disableElevation?: boolean;
- disableFocusRipple?: boolean;
- endIcon?: VNode;
- fullWidth?: boolean;
- href?: string;
- size?: "small" | "medium" | "large";
- startIcon?: VNode | string;
- variant?: "contained" | "outlined" | "text";
- color?: Colors;
- onClick?: () => void;
-}
-
-const baseStyle = css`
+const buttonBaseStyle = css`
display: inline-flex;
align-items: center;
justify-content: center;
@@ -30,7 +15,7 @@ const baseStyle = css`
outline: 0;
border: 0;
margin: 0;
- /* border-radius: 0; */
+ border-radius: 0;
padding: 0;
cursor: pointer;
user-select: none;
@@ -39,6 +24,21 @@ const baseStyle = css`
color: inherit;
`;
+interface Props {
+ children?: ComponentChildren;
+ disabled?: boolean;
+ disableElevation?: boolean;
+ disableFocusRipple?: boolean;
+ endIcon?: string | VNode;
+ fullWidth?: boolean;
+ href?: string;
+ size?: "small" | "medium" | "large";
+ startIcon?: VNode | string;
+ variant?: "contained" | "outlined" | "text";
+ color?: Colors;
+ onClick?: () => void;
+}
+
const button = css`
min-width: 64px;
&:hover {
@@ -54,13 +54,13 @@ const button = css`
`;
const colorIconVariant = {
outlined: css`
- background-color: var(--color-main);
+ fill: var(--color-main);
`,
contained: css`
- background-color: var(--color-contrastText);
+ fill: var(--color-contrastText);
`,
text: css`
- background-color: var(--color-main);
+ fill: var(--color-main);
`,
};
@@ -68,6 +68,7 @@ const colorVariant = {
outlined: css`
color: var(--color-main);
border: 1px solid var(--color-main-alpha-half);
+ background-color: var(--color-contrastText);
&:hover {
border: 1px solid var(--color-main);
background-color: var(--color-main-alpha-opacity);
@@ -81,7 +82,7 @@ const colorVariant = {
background-color: var(--color-main);
box-shadow: ${theme.shadows[2]};
&:hover {
- background-color: var(--color-dark);
+ background-color: var(--color-grey-or-dark);
}
&:active {
box-shadow: ${theme.shadows[8]};
@@ -186,11 +187,16 @@ const sizeVariant = {
},
};
+const fullWidthStyle = css`
+ width: 100%;
+`;
+
export function Button({
children,
disabled,
startIcon: sip,
endIcon: eip,
+ fullWidth,
variant = "text",
size = "medium",
color = "primary",
@@ -198,8 +204,8 @@ export function Button({
}: Props): VNode {
const style = css`
user-select: none;
- width: 1em;
- height: 1em;
+ width: 24px;
+ height: 24px;
display: inline-block;
fill: currentColor;
flex-shrink: 0;
@@ -222,8 +228,9 @@ export function Button({
sizeIconVariant[variant][size],
style,
].join(" ")}
+ //FIXME: check when sip can be a vnode
+ dangerouslySetInnerHTML={{ __html: sip as string }}
style={{
- "--image": `url("${sip}")`,
"--color-main": theme.palette[color].main,
"--color-contrastText": theme.palette[color].contrastText,
}}
@@ -241,8 +248,8 @@ export function Button({
sizeIconVariant[variant][size],
style,
].join(" ")}
+ dangerouslySetInnerHTML={{ __html: eip as string }}
style={{
- "--image": `url("${eip}")`,
"--color-main": theme.palette[color].main,
"--color-contrastText": theme.palette[color].contrastText,
"--color-dark": theme.palette[color].dark,
@@ -250,17 +257,17 @@ export function Button({
/>
);
return (
- <button
+ <ButtonBase
disabled={disabled}
class={[
theme.typography.button,
theme.shape.roundBorder,
- ripple,
- baseStyle,
button,
+ fullWidth && fullWidthStyle,
colorVariant[variant],
sizeVariant[variant][size],
].join(" ")}
+ onClick={onClick}
style={{
"--color-main": theme.palette[color].main,
"--color-contrastText": theme.palette[color].contrastText,
@@ -274,11 +281,75 @@ export function Button({
theme.palette.text.primary,
theme.palette.action.hoverOpacity,
),
+ "--color-grey-or-dark": !color
+ ? theme.palette.grey.A100
+ : theme.palette[color].dark,
}}
>
{startIcon}
{children}
{endIcon}
+ </ButtonBase>
+ );
+}
+
+interface BaseProps extends JSX.HTMLAttributes<HTMLButtonElement> {
+ class: string;
+ onClick?: () => void;
+ children?: ComponentChildren;
+}
+
+function ButtonBase({
+ class: _class,
+ children,
+ onClick,
+ dangerouslySetInnerHTML,
+ ...rest
+}: BaseProps): VNode {
+ function doClick(): void {
+ if (onClick) onClick();
+ }
+ const classNames = [buttonBaseStyle, _class, ripple].join(" ");
+ if (dangerouslySetInnerHTML) {
+ return (
+ <button
+ onClick={doClick}
+ class={classNames}
+ dangerouslySetInnerHTML={dangerouslySetInnerHTML}
+ {...rest}
+ />
+ );
+ }
+ return (
+ <button onClick={doClick} class={classNames} {...rest}>
+ {children}
</button>
);
}
+
+export function IconButton({
+ svg,
+ onClick,
+}: {
+ svg: any;
+ onClick?: () => void;
+}): VNode {
+ return (
+ <ButtonBase
+ onClick={onClick}
+ class={[
+ css`
+ text-align: center;
+ flex: 0 0 auto;
+ font-size: ${theme.typography.pxToRem(24)};
+ padding: 8px;
+ border-radius: 50%;
+ overflow: visible;
+ color: "inherit";
+ fill: currentColor;
+ `,
+ ].join(" ")}
+ dangerouslySetInnerHTML={{ __html: svg }}
+ />
+ );
+}
diff --git a/packages/taler-wallet-webextension/src/mui/Paper.tsx
b/packages/taler-wallet-webextension/src/mui/Paper.tsx
index eeb4083d..7d36c32d 100644
--- a/packages/taler-wallet-webextension/src/mui/Paper.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Paper.tsx
@@ -34,11 +34,14 @@ export function Paper({
square,
variant = "elevation",
children,
+ class: _class,
+ style,
...rest
}: Props): VNode {
return (
<div
class={[
+ _class,
baseStyle,
!square && theme.shape.roundBorder,
borderVariant[variant],
@@ -49,6 +52,7 @@ export function Paper({
"#fff",
getOverlayAlpha(elevation),
)}, ${alpha("#fff", getOverlayAlpha(elevation))})`,
+ ...(style as any),
}}
{...rest}
>
diff --git a/packages/taler-wallet-webextension/src/mui/Typography.tsx
b/packages/taler-wallet-webextension/src/mui/Typography.tsx
index ecd2b8ec..1610a1c6 100644
--- a/packages/taler-wallet-webextension/src/mui/Typography.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Typography.tsx
@@ -1,5 +1,6 @@
import { css } from "@linaria/core";
import { ComponentChildren, h, VNode } from "preact";
+import { useTranslationContext } from "../context/translation.js";
// eslint-disable-next-line import/extensions
import { theme } from "./style";
@@ -22,10 +23,13 @@ type VariantEnum =
interface Props {
align?: "center" | "inherit" | "justify" | "left" | "right";
gutterBottom?: boolean;
+ bold?: boolean;
+ inline?: boolean;
noWrap?: boolean;
paragraph?: boolean;
variant?: VariantEnum;
- children?: ComponentChildren;
+ children: string[] | string;
+ class?: string;
}
const defaultVariantMapping = {
@@ -57,6 +61,9 @@ const gutterBottomStyle = css`
const paragraphStyle = css`
margin-bottom: 16px;
`;
+const boldStyle = css`
+ font-weight: bold;
+`;
export function Typography({
align,
@@ -64,9 +71,16 @@ export function Typography({
noWrap = false,
paragraph = false,
variant = "body1",
+ bold,
+ inline,
children,
+ class: _class,
}: Props): VNode {
- const cmp = paragraph
+ const { i18n } = useTranslationContext();
+
+ const Component = inline
+ ? "span"
+ : paragraph === true
? "p"
: defaultVariantMapping[variant as "h1"] || "span";
@@ -76,20 +90,21 @@ export function Typography({
: {
textAlign: align,
};
+
return h(
- cmp,
+ Component,
{
class: [
+ _class,
root,
noWrap && noWrapStyle,
gutterBottom && gutterBottomStyle,
paragraph && paragraphStyle,
+ bold && boldStyle,
theme.typography[variant as "button"], //FIXME: implement the rest of
the typography and remove the casting
].join(" "),
- style: {
- ...alignStyle,
- },
+ style: alignStyle,
},
- children,
+ <i18n.Translate>{children}</i18n.Translate>,
);
}
diff --git a/packages/taler-wallet-webextension/src/mui/index.stories.tsx
b/packages/taler-wallet-webextension/src/mui/index.stories.tsx
index 302114ed..41b3a7bd 100644
--- a/packages/taler-wallet-webextension/src/mui/index.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/index.stories.tsx
@@ -23,5 +23,6 @@ import * as a1 from "./Button.stories.js";
import * as a3 from "./Grid.stories.js";
import * as a4 from "./Paper.stories.js";
import * as a5 from "./TextField.stories.js";
+import * as a6 from "./Alert.stories.js";
-export default [a1, a3, a4, a5];
+export default [a1, a3, a4, a5, a6];
diff --git a/packages/taler-wallet-webextension/src/mui/style.tsx
b/packages/taler-wallet-webextension/src/mui/style.tsx
index 5be97879..652a71d4 100644
--- a/packages/taler-wallet-webextension/src/mui/style.tsx
+++ b/packages/taler-wallet-webextension/src/mui/style.tsx
@@ -48,11 +48,11 @@ export const ripple = css`
transition: background 0.5s;
&:hover {
- background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%)
+ background: #eeeeee radial-gradient(circle, transparent 1%, #eeeeee 1%)
center/15000%;
}
&:active {
- background-color: #6eb9f7;
+ background-color: currentColor;
background-size: 100%;
transition: background 0s;
}
diff --git a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
index 3ec7b314..ddce93cd 100644
--- a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
+++ b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
@@ -1,24 +1,32 @@
-import { h, VNode } from "preact";
-import { ButtonBoxWarning, WarningBox } from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation.js";
+import { css } from "@linaria/core";
+import { Fragment, h, VNode } from "preact";
+import { Alert } from "../mui/Alert.js";
+import { Button } from "../mui/Button.js";
+import { Paper } from "../mui/Paper.js";
+import { Typography } from "../mui/Typography.js";
export function NoBalanceHelp({
goToWalletManualWithdraw,
}: {
goToWalletManualWithdraw: () => void;
}): VNode {
- const { i18n } = useTranslationContext();
return (
- <WarningBox>
- <p>
- <b>
- <i18n.Translate>You have no balance.</i18n.Translate>
- </b>{" "}
- <i18n.Translate>Withdraw some funds into your wallet.</i18n.Translate>
- </p>
- <ButtonBoxWarning onClick={() => goToWalletManualWithdraw()}>
- <i18n.Translate>Withdraw</i18n.Translate>
- </ButtonBoxWarning>
- </WarningBox>
+ <Paper
+ class={css`
+ margin: 1em;
+ `}
+ >
+ <Alert title="You have no balance." severity="warning">
+ <Typography>Withdraw some funds into your wallet.</Typography>
+ <Button
+ fullWidth
+ color="warning"
+ variant="outlined"
+ onClick={goToWalletManualWithdraw}
+ >
+ <Typography>Withdraw</Typography>
+ </Button>
+ </Alert>
+ </Paper>
);
}
diff --git a/packages/taler-wallet-webextension/src/stories.tsx
b/packages/taler-wallet-webextension/src/stories.tsx
index 3dcaa7fb..b7e9b418 100644
--- a/packages/taler-wallet-webextension/src/stories.tsx
+++ b/packages/taler-wallet-webextension/src/stories.tsx
@@ -286,12 +286,19 @@ function Application(): VNode {
initialSelection,
);
- function updateSelectedFromHashChange({ newURL, oldURL }: any): void {
+ function updateSelectedFromHashChange(): void {
const selected = getSelectionFromLocationHash();
updateSelected(selected);
}
useEffect(() => {
window.addEventListener("hashchange", updateSelectedFromHashChange);
+ if (location.hash) {
+ const hash = location.hash.substring(1);
+ const found = document.getElementById(hash);
+ if (found) {
+ found.scrollIntoView();
+ }
+ }
return () => {
window.removeEventListener("hashchange", updateSelectedFromHashChange);
};
diff --git a/packages/taler-wallet-webextension/src/svg/close_24px.svg
b/packages/taler-wallet-webextension/src/svg/close_24px.svg
new file mode 100644
index 00000000..8b7eb6e8
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/close_24px.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"; height="24" viewBox="0 0 24 24"
width="24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12
13.41 17.59 19 19 17.59 13.41 12z" />
+</svg>
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/src/svg/delete_24px.svg
b/packages/taler-wallet-webextension/src/svg/delete_24px.svg
index 0d0b74d1..ead7caa9 100644
--- a/packages/taler-wallet-webextension/src/svg/delete_24px.svg
+++ b/packages/taler-wallet-webextension/src/svg/delete_24px.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 24 24"><path d="M0
0h24v24H0z" fill="none"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9
2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1
1H5v2h14V4z" />
+</svg>
\ No newline at end of file
diff --git
a/packages/taler-wallet-webextension/src/svg/error_outline_outlined_24px.svg
b/packages/taler-wallet-webextension/src/svg/error_outline_outlined_24px.svg
new file mode 100644
index 00000000..4a0daa1e
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/error_outline_outlined_24px.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"; height="24" viewBox="0 0 24 24"
width="24">
+ <path d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10
9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42
0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
+</svg>
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/src/svg/info_outlined_24px.svg
b/packages/taler-wallet-webextension/src/svg/info_outlined_24px.svg
new file mode 100644
index 00000000..80dad95c
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/info_outlined_24px.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"; height="24" viewBox="0 0 24 24"
width="24">
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10
10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59
8-8 8z" />
+</svg>
\ No newline at end of file
diff --git
a/packages/taler-wallet-webextension/src/svg/report_problem_outlined_24px.svg
b/packages/taler-wallet-webextension/src/svg/report_problem_outlined_24px.svg
new file mode 100644
index 00000000..ed32f6f2
--- /dev/null
+++
b/packages/taler-wallet-webextension/src/svg/report_problem_outlined_24px.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"; height="24" viewBox="0 0 24 24"
width="24">
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1
14h-2v2h2v-2zm0-6h-2v4h2v-4z" />
+</svg>
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/src/svg/send_24px.svg
b/packages/taler-wallet-webextension/src/svg/send_24px.svg
index 95fe7a4c..6e41d1c9 100644
--- a/packages/taler-wallet-webextension/src/svg/send_24px.svg
+++ b/packages/taler-wallet-webextension/src/svg/send_24px.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 24 24"><path d="M0
0h24v24H0z" fill="none"/><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+</svg>
\ No newline at end of file
diff --git
a/packages/taler-wallet-webextension/src/svg/success_outlined_24px.svg
b/packages/taler-wallet-webextension/src/svg/success_outlined_24px.svg
new file mode 100644
index 00000000..c6130b49
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/success_outlined_24px.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"; height="24" viewBox="0 0 24 24"
width="24">
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4
13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10
0 0,0 12,22A10,10 0 0, 0
22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z" />
+</svg>
\ No newline at end of file
diff --git
a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
index 9d7a692a..215aa437 100644
--- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
@@ -166,7 +166,7 @@ export function CreateManualWithdraw({
);
if (state.noExchangeFound) {
- if (initialCurrency !== undefined) {
+ if (initialCurrency) {
return (
<section>
<SubTitle>
diff --git a/packages/taler-wallet-webextension/static/font/import.css
b/packages/taler-wallet-webextension/static/font/import.css
new file mode 100644
index 00000000..05edddb5
--- /dev/null
+++ b/packages/taler-wallet-webextension/static/font/import.css
@@ -0,0 +1,35 @@
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+ src: url(/static/font/roboto-italic-400.ttf) format('truetype');
+}
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ font-display: swap;
+ src: url(/static/font/roboto-normal-300.ttf) format('truetype');
+}
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url(/static/font/roboto-normal-400.ttf) format('truetype');
+}
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url(/static/font/roboto-normal-500.ttf) format('truetype');
+}
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url(/static/font/roboto-normal-700.ttf) format('truetype');
+}
diff --git
a/packages/taler-wallet-webextension/static/font/roboto-italic-400.ttf
b/packages/taler-wallet-webextension/static/font/roboto-italic-400.ttf
new file mode 100644
index 00000000..1e746d17
Binary files /dev/null and
b/packages/taler-wallet-webextension/static/font/roboto-italic-400.ttf differ
diff --git
a/packages/taler-wallet-webextension/static/font/roboto-normal-300.tff
b/packages/taler-wallet-webextension/static/font/roboto-normal-300.tff
new file mode 100644
index 00000000..ec821b57
Binary files /dev/null and
b/packages/taler-wallet-webextension/static/font/roboto-normal-300.tff differ
diff --git
a/packages/taler-wallet-webextension/static/font/roboto-normal-400.ttf
b/packages/taler-wallet-webextension/static/font/roboto-normal-400.ttf
new file mode 100644
index 00000000..9d4b32b4
Binary files /dev/null and
b/packages/taler-wallet-webextension/static/font/roboto-normal-400.ttf differ
diff --git
a/packages/taler-wallet-webextension/static/font/roboto-normal-500.ttf
b/packages/taler-wallet-webextension/static/font/roboto-normal-500.ttf
new file mode 100644
index 00000000..4b4e1c65
Binary files /dev/null and
b/packages/taler-wallet-webextension/static/font/roboto-normal-500.ttf differ
diff --git
a/packages/taler-wallet-webextension/static/font/roboto-normal-700.ttf
b/packages/taler-wallet-webextension/static/font/roboto-normal-700.ttf
new file mode 100644
index 00000000..58d877c5
Binary files /dev/null and
b/packages/taler-wallet-webextension/static/font/roboto-normal-700.ttf differ
diff --git a/packages/taler-wallet-webextension/static/popup.html
b/packages/taler-wallet-webextension/static/popup.html
index e3c0b158..aca71cbf 100644
--- a/packages/taler-wallet-webextension/static/popup.html
+++ b/packages/taler-wallet-webextension/static/popup.html
@@ -9,8 +9,8 @@
body {
margin: 0;
}
- </style>
- <style>
+ </style>
+ <style>
html {
}
h1 {
@@ -27,8 +27,9 @@
background-color: #f8faf7;
font-family: Arial, Helvetica, sans-serif;
}
- </style>
+ </style>
<link rel="stylesheet" type="text/css" href="/dist/popupEntryPoint.css" />
+ <link rel="stylesheet" type="text/css" href="/static/font/import.css" />
<link rel="icon" href="/static/img/icon.png" />
<script src="/dist/popupEntryPoint.js"></script>
</head>
diff --git a/packages/taler-wallet-webextension/static/wallet.html
b/packages/taler-wallet-webextension/static/wallet.html
index 2c9c74b7..3246ac8f 100644
--- a/packages/taler-wallet-webextension/static/wallet.html
+++ b/packages/taler-wallet-webextension/static/wallet.html
@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="/dist/walletEntryPoint.css" />
+ <link rel="stylesheet" type="text/css" href="/static/font/import.css" />
<link rel="icon" href="/static/img/icon.png" />
<script src="/dist/walletEntryPoint.js"></script>
<style>
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [taler-wallet-core] branch master updated: mui alert and not enough blanance ported to material,
gnunet <=