diff options
14 files changed, 347 insertions, 73 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx index 136302166..665b0de6f 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx @@ -20,7 +20,10 @@ */ import { Banner } from "./Banner"; -import { Fragment, h } from "preact"; +import { Fragment, h, VNode } from "preact"; +import { Avatar } from "../mui/Avatar"; +import { Icon } from "./styled"; +import { Typography } from "../mui/Typography"; export default { title: "mui/banner", @@ -44,11 +47,72 @@ function Wrapper({ children }: any) { </div> ); } +function SignalWifiOffIcon({ ...rest }: any): VNode { + return <Icon {...rest} />; +} export const BasicExample = () => ( <Fragment> <Wrapper> - <Banner /> + <p> + Example taken from: + <a + target="_blank" + rel="noreferrer" + href="https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df" + > + https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df + </a> + </p> + <Banner + elements={[ + { + icon: <SignalWifiOffIcon />, + description: ( + <Typography> + You have lost connection to the internet. This app is offline. + </Typography> + ), + }, + ]} + confirm={{ + label: "turn on wifi", + action: () => { + return null; + }, + }} + /> + </Wrapper> + </Fragment> +); + +export const PendingOperation = () => ( + <Fragment> + <Wrapper> + <Banner + title="PENDING TRANSACTIONS" + style={{ backgroundColor: "lightblue", padding: 8 }} + elements={[ + { + icon: ( + <Avatar + style={{ + border: "solid blue 1px", + color: "blue", + boxSizing: "border-box", + }} + > + P + </Avatar> + ), + description: ( + <Typography> + <b>EUR 37.95</b> - 5 feb 2022 + </Typography> + ), + }, + ]} + /> </Wrapper> </Fragment> ); diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx b/packages/taler-wallet-webextension/src/components/Banner.tsx index f6af81184..09dfac816 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.tsx @@ -1,64 +1,57 @@ -import { h, Fragment, VNode } from "preact"; +import { h, Fragment, VNode, JSX } from "preact"; import { Divider } from "../mui/Divider"; import { Button } from "../mui/Button"; import { Typography } from "../mui/Typography"; import { Avatar } from "../mui/Avatar"; import { Grid } from "../mui/Grid"; import { Paper } from "../mui/Paper"; -import { Icon } from "./styled"; -import settingsIcon from "../../static/img/settings_black_24dp.svg"; -// & > a > div.settings-icon { -// mask: url(${settingsIcon}) no-repeat center; -// background-color: white; -// width: 24px; -// height: 24px; -// margin-left: auto; -// margin-right: 8px; -// padding: 4px; -// } -// & > a.active { -// background-color: #f8faf7; -// color: #0042b2; -// font-weight: bold; -// } -// & > a.active > div.settings-icon { -// background-color: #0042b2; -// } -function SignalWifiOffIcon({ ...rest }: any): VNode { - return <Icon {...rest} />; +interface Props extends JSX.HTMLAttributes<HTMLDivElement> { + title?: string; + elements: { + icon?: VNode; + description: VNode; + }[]; + confirm?: { + label: string; + action: () => void; + }; } -export function Banner({}: {}) { +export function Banner({ title, elements, confirm, ...rest }: Props) { return ( <Fragment> - <Paper elevation={3} /*className={classes.paper}*/> - <Grid - container - // wrap="nowrap" - // spacing={10} - alignItems="center" - columns={3} - > - <Grid item xs={1}> - <Avatar> - <SignalWifiOffIcon style={{ backgroundColor: "red" }} /> - </Avatar> - </Grid> - <Grid item xs={1}> - <Typography> - You have lost connection to the internet. This app is offline. - </Typography> + <Paper elevation={0} {...rest}> + {title && ( + <Grid container> + <Grid item> + <Typography>{title}</Typography> + </Grid> </Grid> + )} + <Grid container wrap="nowrap" spacing={1} alignItems="center"> + {elements.map((e, i) => ( + <Fragment key={i}> + {e.icon && ( + <Grid item> + <Avatar>{e.icon}</Avatar> + </Grid> + )} + <Grid item>{e.description}</Grid> + </Fragment> + ))} </Grid> - <Grid container justifyContent="flex-end" spacing={8} columns={3}> - <Grid item xs={1}> - <Button color="primary">Turn on wifi</Button> + {confirm && ( + <Grid container justifyContent="flex-end" spacing={8}> + <Grid item> + <Button color="primary" onClick={confirm.action}> + {confirm.label} + </Button> + </Grid> </Grid> - </Grid> + )} </Paper> <Divider /> - {/* <CssBaseline /> */} </Fragment> ); } diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx new file mode 100644 index 000000000..99f43a62b --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx @@ -0,0 +1,46 @@ +import { Amounts, Transaction } from "@gnu-taler/taler-util"; +import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core"; +import { Fragment, h, VNode } from "preact"; +import { Avatar } from "../mui/Avatar"; +import { Typography } from "../mui/Typography"; +import Banner from "./Banner"; +import { Time } from "./Time"; + +interface Props { + transactions: Transaction[]; +} + +export function PendingTransactions({ transactions }: Props) { + return ( + <Banner + title="PENDING OPERATIONS" + style={{ backgroundColor: "lightblue", padding: 8 }} + elements={transactions.map((t) => { + const amount = Amounts.parseOrThrow(t.amountEffective); + return { + icon: ( + <Avatar + style={{ + border: "solid blue 1px", + color: "blue", + boxSizing: "border-box", + }} + > + {t.type.substring(0, 1)} + </Avatar> + ), + description: ( + <Typography> + <b> + {amount.currency} {Amounts.stringifyValue(amount)} + </b>{" "} + - <Time timestamp={t.timestamp} format="dd MMMM yyyy" /> + </Typography> + ), + }; + })} + /> + ); +} + +export default PendingTransactions; diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 80bfaa549..92f149ea3 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -778,6 +778,7 @@ export const WarningBox = styled(ErrorBox)` `; import settingsIcon from "../../../static/img/settings_black_24dp.svg"; +import wifiIcon from "../../../static/img/wifi.svg"; export const NavigationHeaderHolder = styled.div` width: 100%; @@ -827,7 +828,7 @@ export const NavigationHeader = styled.div` `; export const Icon = styled.div` - mask: url(${settingsIcon}) no-repeat center; + mask: url(${wifiIcon}) no-repeat center; background-color: gray; width: 24px; height: 24px; diff --git a/packages/taler-wallet-webextension/src/mui/Avatar.tsx b/packages/taler-wallet-webextension/src/mui/Avatar.tsx index d5bd9d421..091964a63 100644 --- a/packages/taler-wallet-webextension/src/mui/Avatar.tsx +++ b/packages/taler-wallet-webextension/src/mui/Avatar.tsx @@ -1,5 +1,5 @@ import { css } from "@linaria/core"; -import { h, Fragment, VNode, ComponentChildren } from "preact"; +import { h, JSX, VNode, ComponentChildren } from "preact"; import { theme } from "./style"; const root = css` @@ -33,7 +33,7 @@ const avatarImageStyle = css` text-indent: 10000; `; -interface Props { +interface Props extends JSX.HTMLAttributes<HTMLDivElement> { variant?: "circular" | "rounded" | "square"; children?: ComponentChildren; } diff --git a/packages/taler-wallet-webextension/src/mui/Button.tsx b/packages/taler-wallet-webextension/src/mui/Button.tsx index f3272a57b..b185504e4 100644 --- a/packages/taler-wallet-webextension/src/mui/Button.tsx +++ b/packages/taler-wallet-webextension/src/mui/Button.tsx @@ -15,6 +15,7 @@ interface Props { startIcon?: VNode; variant?: "contained" | "outlined" | "text"; color?: "primary" | "secondary" | "success" | "error" | "info" | "warning"; + onClick: () => void; } const baseStyle = css` @@ -139,6 +140,7 @@ export function Button({ variant = "text", size = "medium", color = "primary", + onClick, }: Props): VNode { const style = css` user-select: none; diff --git a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx index 3c9361326..7db608d27 100644 --- a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx @@ -178,6 +178,26 @@ export const Responsive12Spacing = () => ( </Fragment> ); +export const ResponsiveAuthWidth = () => ( + <Fragment> + <Wrapper> + <Grid container columns={12}> + <Grid item> + <Item>item 1</Item> + </Grid> + <Grid item xs={1}> + <Item>item 2 short</Item> + </Grid> + <Grid item> + <Item>item 3 with long text </Item> + </Grid> + <Grid item xs={"true"}> + <Item>item 4</Item> + </Grid> + </Grid> + </Wrapper> + </Fragment> +); export const Example = () => ( <Wrapper> <p>Item row space is responsive: xs=6 sm=4 md=1</p> diff --git a/packages/taler-wallet-webextension/src/mui/Grid.tsx b/packages/taler-wallet-webextension/src/mui/Grid.tsx index ccabed060..345305fe1 100644 --- a/packages/taler-wallet-webextension/src/mui/Grid.tsx +++ b/packages/taler-wallet-webextension/src/mui/Grid.tsx @@ -90,6 +90,20 @@ const columnGapVariant = css` padding-left: var(--space-col-md); } } + ${theme.breakpoints.up("lg")} { + width: calc(100% + var(--space-col-lg)); + margin-left: calc(-1 * var(--space-col-lg)); + & > div { + padding-left: var(--space-col-lg); + } + } + ${theme.breakpoints.up("xl")} { + width: calc(100% + var(--space-col-xl)); + margin-left: calc(-1 * var(--space-col-xl)); + & > div { + padding-left: var(--space-col-xl); + } + } `; const rowGapVariant = css` ${theme.breakpoints.up("xs")} { @@ -110,31 +124,77 @@ const rowGapVariant = css` padding-top: var(--space-row-md); } } + ${theme.breakpoints.up("lg")} { + margin-top: calc(-1 * var(--space-row-lg)); + & > div { + padding-top: var(--space-row-lg); + } + } + ${theme.breakpoints.up("xl")} { + margin-top: calc(-1 * var(--space-row-xl)); + & > div { + padding-top: var(--space-row-xl); + } + } `; -const sizeVariant = css` +const sizeVariantXS = css` ${theme.breakpoints.up("xs")} { flex-basis: var(--relation-col-vs-xs); flex-grow: 0; max-width: var(--relation-col-vs-xs); } +`; +const sizeVariantSM = css` ${theme.breakpoints.up("sm")} { flex-basis: var(--relation-col-vs-sm); flex-grow: 0; max-width: var(--relation-col-vs-sm); } +`; +const sizeVariantMD = css` ${theme.breakpoints.up("md")} { flex-basis: var(--relation-col-vs-md); flex-grow: 0; max-width: var(--relation-col-vs-md); } `; +const sizeVariantLG = css` + ${theme.breakpoints.up("lg")} { + flex-basis: var(--relation-col-vs-lg); + flex-grow: 0; + max-width: var(--relation-col-vs-lg); + } +`; +const sizeVariantXL = css` + ${theme.breakpoints.up("xl")} { + flex-basis: var(--relation-col-vs-xl); + flex-grow: 0; + max-width: var(--relation-col-vs-xl); + } +`; + +const sizeVariantExpand = css` + flex-basis: 0; + flex-grow: 1; + max-width: 100%; +`; + +const sizeVariantAuto = css` + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; + max-width: none; + width: auto; +`; -const GridContext = createContext<ResponsiveSize>(toResponsive(12)); +const GridContext = createContext<Partial<ResponsiveSize>>(toResponsive(12)); -function toResponsive(v: number | Partial<ResponsiveSize>): ResponsiveSize { +function toResponsive( + v: number | Partial<ResponsiveSize>, +): Partial<ResponsiveSize> { const p = typeof v === "number" ? { xs: v } : v; - const xs = p.xs || 12; + const xs = p.xs; const sm = p.sm || xs; const md = p.md || sm; const lg = p.lg || md; @@ -174,6 +234,7 @@ export function Grid({ const columnSpacing = csp ? toResponsive(csp) : toResponsive(spacing); const ssize = toResponsive({ xs, md, lg, xl, sm } as any); + console.log(ssize); if (container) { console.log(rowSpacing); @@ -197,23 +258,51 @@ export function Grid({ const relationStyles = !item ? {} : { + "--relation-col-vs-xs": relation(columns, ssize, "xs"), "--relation-col-vs-sm": relation(columns, ssize, "sm"), + "--relation-col-vs-md": relation(columns, ssize, "md"), "--relation-col-vs-lg": relation(columns, ssize, "lg"), - "--relation-col-vs-xs": relation(columns, ssize, "xs"), "--relation-col-vs-xl": relation(columns, ssize, "xl"), - "--relation-col-vs-md": relation(columns, ssize, "md"), }; return ( <GridContext.Provider value={columns}> <div - id={container ? "container" : "item"} class={[ root, container && containerStyle, item && itemStyle, zeroMinWidth && zeroMinWidthStyle, - sizeVariant, + xs && + (xs === "auto" + ? sizeVariantAuto + : xs === "true" + ? sizeVariantExpand + : sizeVariantXS), + sm && + (sm === "auto" + ? sizeVariantAuto + : sm === "true" + ? sizeVariantExpand + : sizeVariantSM), + md && + (md === "auto" + ? sizeVariantAuto + : md === "true" + ? sizeVariantExpand + : sizeVariantMD), + lg && + (lg === "auto" + ? sizeVariantAuto + : lg === "true" + ? sizeVariantExpand + : sizeVariantLG), + xl && + (xl === "auto" + ? sizeVariantAuto + : xl === "true" + ? sizeVariantExpand + : sizeVariantXL), container && columnGapVariant, container && rowGapVariant, ].join(" ")} @@ -222,6 +311,7 @@ export function Grid({ ...spacingStyles, justifyContent, alignItems, + flexWrap: wrap, }} > {children} @@ -230,8 +320,8 @@ export function Grid({ ); } function relation( - cols: ResponsiveSize, - values: ResponsiveSize, + cols: Partial<ResponsiveSize>, + values: Partial<ResponsiveSize>, size: ResponsiveKeys, ) { const colsNum = typeof cols === "number" ? cols : cols[size] || 12; diff --git a/packages/taler-wallet-webextension/src/mui/Paper.tsx b/packages/taler-wallet-webextension/src/mui/Paper.tsx index 00eeda324..6209aa7a0 100644 --- a/packages/taler-wallet-webextension/src/mui/Paper.tsx +++ b/packages/taler-wallet-webextension/src/mui/Paper.tsx @@ -1,5 +1,5 @@ import { css } from "@linaria/core"; -import { h, Fragment, VNode, ComponentChildren } from "preact"; +import { h, JSX, VNode, ComponentChildren } from "preact"; import { alpha } from "./colors/manipulation"; import { theme } from "./style"; @@ -20,17 +20,20 @@ const baseStyle = css` } `; +interface Props extends JSX.HTMLAttributes<HTMLDivElement> { + elevation?: number; + square?: boolean; + variant?: "elevation" | "outlined"; + children?: ComponentChildren; +} + export function Paper({ elevation = 1, square, variant = "elevation", children, -}: { - elevation?: number; - square?: boolean; - variant?: "elevation" | "outlined"; - children?: ComponentChildren; -}): VNode { + ...rest +}: Props): VNode { return ( <div class={[ @@ -45,6 +48,7 @@ export function Paper({ getOverlayAlpha(elevation), )}, ${alpha("#fff", getOverlayAlpha(elevation))})`, }} + {...rest} > {children} </div> diff --git a/packages/taler-wallet-webextension/src/mui/Typography.tsx b/packages/taler-wallet-webextension/src/mui/Typography.tsx index 830f1005a..7ff4a694c 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 { h, Fragment, VNode, ComponentChildren } from "preact"; +import { theme } from "./style"; type VariantEnum = | "body1" @@ -74,6 +75,7 @@ export function Typography({ : { textAlign: align, }; + console.log("typograph", cmp, variant); return h( cmp, { @@ -82,6 +84,7 @@ export function Typography({ noWrap && noWrapStyle, gutterBottom && gutterBottomStyle, paragraph && paragraphStyle, + theme.typography[variant as "button"], //FIXME: implement the rest of the typography and remove the casting ].join(" "), style: { ...alignStyle, diff --git a/packages/taler-wallet-webextension/src/mui/style.tsx b/packages/taler-wallet-webextension/src/mui/style.tsx index e2af05c49..5f9cd2244 100644 --- a/packages/taler-wallet-webextension/src/mui/style.tsx +++ b/packages/taler-wallet-webextension/src/mui/style.tsx @@ -24,7 +24,7 @@ export function pxToRem(size: number): string { export interface Spacing { (): string; - (value: number): string; + (value?: number): string; (topBottom: number, rightLeft: number): string; (top: number, rightLeft: number, bottom: number): string; (top: number, right: number, bottom: number, left: number): string; @@ -184,11 +184,14 @@ function createTheme() { spacing: spacingInput, }); - const spacing = (...argsInput: ReadonlyArray<number | string>): string => { + const spacing = ( + ...argsInput: ReadonlyArray<number | string | undefined> + ): string => { const args = argsInput.length === 0 ? [1] : argsInput; return args .map((argument) => { + if (argument === undefined) return ""; const output = transform(argument); return typeof output === "number" ? `${output}px` : output; }) @@ -348,6 +351,7 @@ function createTheme() { // ...other // } = typography; const variants = { + // (fontWeight, size, lineHeight, letterSpacing, casing) => // h1: buildVariant(fontWeightLight, 96, 1.167, -1.5), // h2: buildVariant(fontWeightLight, 60, 1.2, -0.5), // h3: buildVariant(fontWeightRegular, 48, 1.167, 0), @@ -356,7 +360,21 @@ function createTheme() { // h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15), // subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15), // subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1), + body1: css` + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + font-weight: ${fontWeightRegular}; + font-size: ${pxToRem(16)}; + line-height: 1.5; + letter-spacing: ${round(0.15 / 16)}em; + `, // body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15), + body2: css` + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + font-weight: ${fontWeightRegular}; + font-size: ${pxToRem(14)}; + line-height: 1.43; + letter-spacing: ${round(0.15 / 14)}em; + `, // body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15), button: css` font-family: "Roboto", "Helvetica", "Arial", sans-serif; @@ -366,6 +384,7 @@ function createTheme() { letter-spacing: ${round(0.4 / 14)}em; text-transform: uppercase; `, + /* just of caseAllCaps */ // button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps), // caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4), // overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps), diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx index d7bfdf545..199ff10df 100644 --- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx @@ -14,7 +14,13 @@ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { Amounts, Balance, i18n } from "@gnu-taler/taler-util"; +import { + Amounts, + Balance, + i18n, + NotificationType, + Transaction, +} from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { BalanceTable } from "../components/BalanceTable"; @@ -22,6 +28,7 @@ import { JustInDevMode } from "../components/JustInDevMode"; import { Loading } from "../components/Loading"; import { LoadingError } from "../components/LoadingError"; import { MultiActionButton } from "../components/MultiActionButton"; +import PendingTransactions from "../components/PendingTransactions"; import { ButtonBoxPrimary, ButtonPrimary } from "../components/styled"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; import { AddNewActionView } from "../wallet/AddNewActionView"; @@ -39,8 +46,19 @@ export function BalancePage({ goToWalletHistory, }: Props): VNode { const [addingAction, setAddingAction] = useState(false); - const state = useAsyncAsHook(wxApi.getBalance); - const balances = !state || state.hasError ? [] : state.response.balances; + const state = useAsyncAsHook( + async () => ({ + balance: await wxApi.getBalance(), + pending: await wxApi.getTransactions(), + }), + [NotificationType.WithdrawGroupFinished], + ); + const balances = + !state || state.hasError ? [] : state.response.balance.balances; + const pending = + !state || state.hasError + ? [] + : state.response.pending.transactions.filter((t) => t.pending); if (!state) { return <Loading />; @@ -62,6 +80,7 @@ export function BalancePage({ return ( <BalanceView balances={balances} + pending={pending} goToWalletManualWithdraw={goToWalletManualWithdraw} goToWalletDeposit={goToWalletDeposit} goToWalletHistory={goToWalletHistory} @@ -71,6 +90,7 @@ export function BalancePage({ } export interface BalanceViewProps { balances: Balance[]; + pending: Transaction[]; goToWalletManualWithdraw: () => void; goToAddAction: () => void; goToWalletDeposit: (currency: string) => void; @@ -79,6 +99,7 @@ export interface BalanceViewProps { export function BalanceView({ balances, + pending, goToWalletManualWithdraw, goToWalletDeposit, goToWalletHistory, @@ -96,6 +117,9 @@ export function BalanceView({ return ( <Fragment> + {pending.length > 0 ? ( + <PendingTransactions transactions={pending} /> + ) : undefined} <section> <BalanceTable balances={balances} diff --git a/packages/taler-wallet-webextension/static/img/settings_black_24dp.svg b/packages/taler-wallet-webextension/static/img/settings_black_24dp.svg index f53024e88..adcd50405 100644 --- a/packages/taler-wallet-webextension/static/img/settings_black_24dp.svg +++ b/packages/taler-wallet-webextension/static/img/settings_black_24dp.svg @@ -1 +1,6 @@ -<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><path d="M0,0h24v24H0V0z" fill="none"/><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></g></svg>
\ No newline at end of file +<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> + <g> + <path d="M0,0h24v24H0V0z" fill="none" /> + <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" /> + </g> +</svg>
\ No newline at end of file diff --git a/packages/taler-wallet-webextension/static/img/wifi.svg b/packages/taler-wallet-webextension/static/img/wifi.svg new file mode 100644 index 000000000..ad712435d --- /dev/null +++ b/packages/taler-wallet-webextension/static/img/wifi.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"> + <path d="M23.64 7c-.45-.34-4.93-4-11.64-4-1.5 0-2.89.19-4.15.48L18.18 13.8 23.64 7zm-6.6 8.22L3.27 1.44 2 2.72l2.05 2.06C1.91 5.76.59 6.82.36 7l11.63 14.49.01.01.01-.01 3.9-4.86 3.32 3.32 1.27-1.27-3.46-3.46z"></path> +</svg>
\ No newline at end of file |
