From f45ef767016a425d04cce7755b27aceff292603c Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 24 Mar 2022 16:02:38 -0300 Subject: esbuild configuration --- .../src/components/Banner.stories.tsx | 6 +++--- .../src/components/ErrorMessage.tsx | 7 ++++-- .../src/components/ErrorTalerOperation.tsx | 6 +++--- .../src/components/LogoHeader.tsx | 13 +++++------ .../src/components/MultiActionButton.tsx | 7 ++++-- .../src/components/styled/index.tsx | 25 +++++++++------------- 6 files changed, 31 insertions(+), 33 deletions(-) (limited to 'packages/taler-wallet-webextension/src/components') 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 ; + return ; } export const BasicExample = () => ( @@ -67,7 +67,7 @@ export const BasicExample = () => ( , + icon: , description: ( 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); }} > - +
)}
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); }} > - )} 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", }} > - +
); } 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, }} > - +
); 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; -- cgit v1.2.3