diff --git a/packages/taler-wallet-webextension/src/mui/Typography.tsx b/packages/taler-wallet-webextension/src/mui/Typography.tsx
index ecd2b8ec3..1610a1c66 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,
+
{children},
);
}
diff --git a/packages/taler-wallet-webextension/src/mui/index.stories.tsx b/packages/taler-wallet-webextension/src/mui/index.stories.tsx
index 302114ed5..41b3a7bd9 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 5be978794..652a71d46 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 3ec7b314c..ddce93cd8 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 (
-
-
-
- You have no balance.
- {" "}
- Withdraw some funds into your wallet.
-
- goToWalletManualWithdraw()}>
- Withdraw
-
-
+
+
+ Withdraw some funds into your wallet.
+
+
+
);
}
diff --git a/packages/taler-wallet-webextension/src/stories.tsx b/packages/taler-wallet-webextension/src/stories.tsx
index 3dcaa7fb9..b7e9b4184 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 000000000..8b7eb6e84
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/close_24px.svg
@@ -0,0 +1,4 @@
+
\ 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 0d0b74d16..ead7caa9f 100644
--- a/packages/taler-wallet-webextension/src/svg/delete_24px.svg
+++ b/packages/taler-wallet-webextension/src/svg/delete_24px.svg
@@ -1 +1,4 @@
-
\ No newline at end of file
+
\ 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 000000000..4a0daa1e9
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/error_outline_outlined_24px.svg
@@ -0,0 +1,3 @@
+
\ 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 000000000..80dad95cc
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/info_outlined_24px.svg
@@ -0,0 +1,4 @@
+
\ 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 000000000..ed32f6f28
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/report_problem_outlined_24px.svg
@@ -0,0 +1,4 @@
+
\ 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 95fe7a4c6..6e41d1c9e 100644
--- a/packages/taler-wallet-webextension/src/svg/send_24px.svg
+++ b/packages/taler-wallet-webextension/src/svg/send_24px.svg
@@ -1 +1,4 @@
-
\ No newline at end of file
+
\ 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 000000000..c6130b495
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/success_outlined_24px.svg
@@ -0,0 +1,4 @@
+
\ 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 9d7a692a2..215aa4378 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 (
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 000000000..05edddb51
--- /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 000000000..1e746d17f
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 000000000..ec821b577
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 000000000..9d4b32b47
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 000000000..4b4e1c656
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 000000000..58d877c58
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 e3c0b1589..aca71cbf8 100644
--- a/packages/taler-wallet-webextension/static/popup.html
+++ b/packages/taler-wallet-webextension/static/popup.html
@@ -9,8 +9,8 @@
body {
margin: 0;
}
-
-
+
+
+
diff --git a/packages/taler-wallet-webextension/static/wallet.html b/packages/taler-wallet-webextension/static/wallet.html
index 2c9c74b7f..3246ac8f8 100644
--- a/packages/taler-wallet-webextension/static/wallet.html
+++ b/packages/taler-wallet-webextension/static/wallet.html
@@ -3,6 +3,7 @@
+