use latest linaria lib

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`