esbuild configuration

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;