1 files changed, 31 insertions, 19 deletions

diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 7a3c27c73..89678c74a 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`
@@ -35,7 +35,6 @@ export const WalletAction = styled.div`
   align-items: center;
 
   margin: auto;
-  height: 100%;
 
   & h1:first-child {
     margin-top: 0;
@@ -100,7 +99,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;
@@ -159,7 +158,7 @@ export const Middle = styled.div`
   height: 100%;
 `;
 
-export const PopupBox = styled.div<{ noPadding?: boolean; devMode?: boolean }>`
+export const PopupBox = styled.div<{ noPadding?: boolean }>`
   height: 290px;
   width: 500px;
   overflow-y: visible;
@@ -168,7 +167,7 @@ export const PopupBox = styled.div<{ noPadding?: boolean; devMode?: 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 +410,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 +461,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%;
@@ -535,11 +536,11 @@ export const LinkDestructive = styled(Link)`
 `;
 
 export const LinkPrimary = styled(Link)`
-  color: rgb(66, 184, 221);
+  color: black;
 `;
 
-export const ButtonPrimary = styled(ButtonVariant)<{ small?: boolean }>`
-  font-size: ${({ small }) => (small ? "small" : "inherit")};
+export const ButtonPrimary = styled(ButtonVariant) <{ small?: boolean }>`
+  font-size: ${({ small }: any) => (small ? "small" : "inherit")};
   background-color: #0042b2;
   border-color: #0042b2;
 `;
@@ -717,13 +718,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 +736,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 +762,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;
 `;
@@ -797,6 +798,17 @@ export const ErrorBox = styled.div`
   }
 `;
 
+export const RedBanner = styled.div`
+  width: 80%;
+  padding: 4px;
+  text-align: center;
+  background: red;
+  border: 1px solid #df3a3a;
+  border-radius: 4px;
+  font-weight: bold;
+  margin: 4px;
+`;
+
 export const InfoBox = styled(ErrorBox)`
   color: black;
   background-color: #d1e7dd;
@@ -859,8 +871,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 +880,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`
@@ -959,7 +971,7 @@ export const TermsSection = styled.a`
   }
 `;
 
-export const TermsOfService = styled.div`
+export const TermsOfServiceStyle = styled.div`
   display: flex;
   flex-direction: column;
   text-align: left;