diff options
author | Sebastian <sebasjm@gmail.com> | 2022-03-24 16:02:38 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-03-24 16:02:38 -0300 |
commit | f45ef767016a425d04cce7755b27aceff292603c (patch) | |
tree | 8e6e2aa47bf282d3db08f54264f2c9db2179ba90 /packages/taler-wallet-webextension/src/components | |
parent | 2c6b83ffea8d7b898d7ccb52b2b026c2e4ba6f24 (diff) | |
download | wallet-core-f45ef767016a425d04cce7755b27aceff292603c.tar.xz |
esbuild configuration
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
6 files changed, 31 insertions, 33 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx index 4d5b22208..258bd0676 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx @@ -22,7 +22,7 @@ import { Banner } from "./Banner"; import { Fragment, h, VNode } from "preact"; import { Avatar } from "../mui/Avatar"; -import { Icon } from "./styled"; +import { Icon, SvgIcon } from "./styled"; import { Typography } from "../mui/Typography"; export default { @@ -48,7 +48,7 @@ function Wrapper({ children }: any) { ); } function SignalWifiOffIcon({ ...rest }: any): VNode { - return <Icon {...rest} />; + return <SvgIcon {...rest} />; } export const BasicExample = () => ( @@ -67,7 +67,7 @@ export const BasicExample = () => ( <Banner elements={[ { - icon: <SignalWifiOffIcon />, + icon: <SignalWifiOffIcon color="gray" />, description: ( <Typography> You have lost connection to the internet. This app is offline. diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx index 085bf0b82..d6765c13d 100644 --- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx +++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx @@ -15,7 +15,7 @@ */ import { VNode, h, ComponentChildren } from "preact"; import { useState } from "preact/hooks"; -import arrowDown from "../../static/img/chevron-down.svg"; +import arrowDown from "../svg/chevron-down.svg"; import { ErrorBox } from "./styled"; export function ErrorMessage({ @@ -36,7 +36,10 @@ export function ErrorMessage({ setShowErrorDetail((v) => !v); }} > - <img style={{ height: "1.5em" }} src={arrowDown} /> + <div + style={{ height: "1.5em" }} + dangerouslySetInnerHTML={{ __html: arrowDown }} + /> </button> )} </div> diff --git a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx index 38d6ec561..9fd8f7a03 100644 --- a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx +++ b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx @@ -16,7 +16,7 @@ import { TalerErrorDetail } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; -import arrowDown from "../../static/img/chevron-down.svg"; +import arrowDown from "../svg/chevron-down.svg"; import { useDevContext } from "../context/devContext"; import { ErrorBox } from "./styled"; @@ -45,12 +45,12 @@ export function ErrorTalerOperation({ setShowErrorDetail((v) => !v); }} > - <img + <div style={{ transform: !showErrorDetail ? undefined : "scaleY(-1)", height: 24, }} - src={arrowDown} + dangerouslySetInnerHTML={{ __html: arrowDown }} /> </button> )} diff --git a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx index 6c47dc92a..573221614 100644 --- a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx +++ b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx @@ -15,6 +15,7 @@ */ import { h } from "preact"; +import logo from "../svg/logo-2021.svg"; export function LogoHeader() { return ( @@ -25,14 +26,10 @@ export function LogoHeader() { margin: "2em", }} > - <img - style={{ - width: 150, - height: 70, - }} - src="/static/img/logo-2021.svg" - width="150" - /> + <div + style={{ width: 150, height: 70 }} + dangerouslySetInnerHTML={{ __html: logo }} + ></div> </div> ); } diff --git a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx index 1f46cf82c..866bd0379 100644 --- a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx +++ b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx @@ -1,5 +1,5 @@ import { h, VNode } from "preact"; -import arrowDown from "../../static/img/chevron-down.svg"; +import arrowDown from "../svg/chevron-down.svg"; import { ButtonBoxPrimary, ButtonPrimary, ParagraphClickable } from "./styled"; import { useState } from "preact/hooks"; @@ -91,7 +91,10 @@ export function MultiActionButton({ borderBottomLeftRadius: 0, }} > - <img style={{ height: 14 }} src={arrowDown} /> + <div + style={{ height: 14 }} + dangerouslySetInnerHTML={{ __html: arrowDown }} + /> </ButtonPrimary> </div> ); diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 608e4af7c..13e3189fb 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -778,9 +778,6 @@ export const WarningBox = styled(ErrorBox)` border-color: #ffecb5; `; -import settingsIcon from "../../../static/img/settings_black_24dp.svg"; -import wifiIcon from "../../../static/img/wifi.svg"; - export const NavigationHeaderHolder = styled.div` width: 100%; display: flex; @@ -809,27 +806,25 @@ export const NavigationHeader = styled.div` line-height: 35px; } - & > 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; +`; + +export const SvgIcon = styled.div<{ color: string }>` + & > svg { + fill: ${({ color }) => color}; } + width: 24px; + height: 24px; + margin-left: auto; + margin-right: 8px; + padding: 4px; `; export const Icon = styled.div` - mask: url(${wifiIcon}) no-repeat center; background-color: gray; width: 24px; height: 24px; |