diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
9 files changed, 24 insertions, 22 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx index 60b100478..ee2dbfc69 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx @@ -24,7 +24,7 @@ import { Avatar } from "../mui/Avatar.js"; import { Typography } from "../mui/Typography.js"; import { Banner } from "./Banner.js"; import { SvgIcon } from "./styled/index.js"; -import wifiIcon from "../svg/wifi.svg"; +import wifiIcon from "../svg/wifi.inline.svg"; export default { title: "banner", component: Banner, diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx index 11f526865..0a53d33ba 100644 --- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx +++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx @@ -16,7 +16,7 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; -import arrowDown from "../svg/chevron-down.svg"; +import arrowDown from "../svg/chevron-down.inline.svg"; import { ErrorBox } from "./styled/index.js"; export function ErrorMessage({ diff --git a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx index 2979c28e5..3298840e2 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, TranslatedString } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; -import arrowDown from "../svg/chevron-down.svg"; +import arrowDown from "../svg/chevron-down.inline.svg"; import { ErrorBox } from "./styled/index.js"; import { EnabledBySettings } from "./EnabledBySettings.js"; diff --git a/packages/taler-wallet-webextension/src/components/Loading.tsx b/packages/taler-wallet-webextension/src/components/Loading.tsx index 28bef9320..b0209f855 100644 --- a/packages/taler-wallet-webextension/src/components/Loading.tsx +++ b/packages/taler-wallet-webextension/src/components/Loading.tsx @@ -17,7 +17,7 @@ import { css } from "@linaria/core"; import { Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import ProgressIcon from "../svg/progress.svg"; +import ProgressIcon from "../svg/progress.inline.svg"; import { CenteredText } from "./styled/index.js"; const fadeIn = css` diff --git a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx index 7b9701336..2330b1b95 100644 --- a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx +++ b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx @@ -15,7 +15,7 @@ */ import { h, VNode } from "preact"; -import logo from "../svg/logo-2021.svg"; +import logo from "../svg/logo-2021.inline.svg"; export function LogoHeader(): VNode { return ( diff --git a/packages/taler-wallet-webextension/src/components/Modal.tsx b/packages/taler-wallet-webextension/src/components/Modal.tsx index 3fea063d3..11fa72181 100644 --- a/packages/taler-wallet-webextension/src/components/Modal.tsx +++ b/packages/taler-wallet-webextension/src/components/Modal.tsx @@ -17,7 +17,7 @@ import { styled } from "@linaria/react"; import { ComponentChildren, h, VNode } from "preact"; import { ButtonHandler } from "../mui/handlers.js"; -import closeIcon from "../svg/close_24px.svg"; +import closeIcon from "../svg/close_24px.inline.svg"; import { Link, LinkPrimary, LinkWarning } from "./styled/index.js"; interface Props { diff --git a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx index d6a730a4f..7d3cf3f57 100644 --- a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx +++ b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx @@ -17,7 +17,7 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Button } from "../mui/Button.js"; -import arrowDown from "../svg/chevron-down.svg"; +import arrowDown from "../svg/chevron-down.inline.svg"; import { ParagraphClickable } from "./styled/index.js"; export interface Props { diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx index d4eab21ee..b95bbf3b7 100644 --- a/packages/taler-wallet-webextension/src/components/Part.tsx +++ b/packages/taler-wallet-webextension/src/components/Part.tsx @@ -96,7 +96,7 @@ const CollasibleBox = styled.div` } } `; -import arrowDown from "../svg/chevron-down.svg"; +import arrowDown from "../svg/chevron-down.inline.svg"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; export function PartCollapsible({ text, title, big, showSign }: Props): VNode { diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index e36502333..92b8d2667 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -16,7 +16,7 @@ // need to import linaria types, otherwise compiler will complain // eslint-disable-next-line @typescript-eslint/no-unused-vars -import type * as Linaria from "@linaria/core"; +// import type * as Linaria from "@linaria/core"; import { styled } from "@linaria/react"; @@ -24,7 +24,7 @@ export const PaymentStatus = styled.div<{ color: string }>` padding: 5px; border-radius: 5px; color: white; - background-color: ${(p) => p.color}; + background-color: ${(p: any) => p.color}; `; export const WalletAction = styled.div` @@ -100,7 +100,7 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>` width: 800px; } & > section { - padding: ${({ noPadding }) => (noPadding ? "0px" : "8px")}; + padding: ${({ noPadding }: any) => (noPadding ? "0px" : "8px")}; margin-bottom: auto; overflow: auto; @@ -168,7 +168,7 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>` justify-content: space-between; & > section { - padding: ${({ noPadding }) => (noPadding ? "0px" : "8px")}; + padding: ${({ noPadding }: any) => (noPadding ? "0px" : "8px")}; // this margin will send the section up when used with a header margin-bottom: auto; overflow-y: auto; @@ -411,7 +411,8 @@ export const Button = styled.button<{ upperCased?: boolean }>` cursor: pointer; user-select: none; box-sizing: border-box; - text-transform: ${({ upperCased }) => (upperCased ? "uppercase" : "none")}; + text-transform: ${({ upperCased }: any) => + upperCased ? "uppercase" : "none"}; font-family: inherit; font-size: 100%; @@ -461,7 +462,8 @@ export const Link = styled.a<{ upperCased?: boolean }>` cursor: pointer; user-select: none; box-sizing: border-box; - text-transform: ${({ upperCased }) => (upperCased ? "uppercase" : "none")}; + text-transform: ${({ upperCased }: any) => + upperCased ? "uppercase" : "none"}; font-family: inherit; font-size: 100%; @@ -539,7 +541,7 @@ export const LinkPrimary = styled(Link)` `; export const ButtonPrimary = styled(ButtonVariant)<{ small?: boolean }>` - font-size: ${({ small }) => (small ? "small" : "inherit")}; + font-size: ${({ small }: any) => (small ? "small" : "inherit")}; background-color: #0042b2; border-color: #0042b2; `; @@ -717,13 +719,13 @@ export const Input = styled.div<{ invalid?: boolean }>` & label { display: block; padding: 5px; - color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; + color: ${({ invalid }: any) => (!invalid ? "inherit" : "red")}; } & input { display: block; padding: 5px; width: calc(100% - 4px - 10px); - border-color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; + border-color: ${({ invalid }: any) => (!invalid ? "inherit" : "red")}; } `; @@ -735,7 +737,7 @@ export const InputWithLabel = styled.div<{ invalid?: boolean }>` font-weight: bold; margin-left: 0.5em; padding: 5px; - color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; + color: ${({ invalid }: any) => (!invalid ? "inherit" : "red")}; } & div { @@ -761,7 +763,7 @@ export const InputWithLabel = styled.div<{ invalid?: boolean }>` /* border-color: lightgray; */ border-bottom-right-radius: 0.25em; border-top-right-radius: 0.25em; - border-color: ${({ invalid }) => (!invalid ? "lightgray" : "red")}; + border-color: ${({ invalid }: any) => (!invalid ? "lightgray" : "red")}; } margin-bottom: 16px; `; @@ -859,8 +861,8 @@ interface SvgIconProps { } export const SvgIcon = styled.div<SvgIconProps>` & > svg { - fill: ${({ color }) => color}; - transform: ${({ transform }) => (transform ? transform : "")}; + fill: ${({ color }: any) => color}; + transform: ${({ transform }: any) => (transform ? transform : "")}; } /* width: 24px; height: 24px; */ @@ -868,7 +870,7 @@ export const SvgIcon = styled.div<SvgIconProps>` margin-right: 8px; display: inline; padding: 4px; - cursor: ${({ onClick }) => (onClick ? "pointer" : "inherit")}; + cursor: ${({ onClick }: any) => (onClick ? "pointer" : "inherit")}; `; export const Icon = styled.div` |