prettier

1 files changed, 105 insertions, 114 deletions

diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 65c1f49e9..8b36dbd31 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -14,18 +14,17 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-
 // need to import linaria types, otherwise compiler will complain
-import type * as Linaria from '@linaria/core';
+import type * as Linaria from "@linaria/core";
 
-import { styled } from '@linaria/react';
+import { styled } from "@linaria/react";
 
 export const PaymentStatus = styled.div<{ color: string }>`
   padding: 5px;
   border-radius: 5px;
   color: white;
-  background-color: ${p => p.color};
-`
+  background-color: ${(p) => p.color};
+`;
 
 export const WalletAction = styled.div`
   display: flex;
@@ -36,9 +35,9 @@ export const WalletAction = styled.div`
 
   margin: auto;
   height: 100%;
-  
+
   & h1:first-child {
-    margin-top: 0; 
+    margin-top: 0;
   }
   section {
     margin-bottom: 2em;
@@ -47,7 +46,7 @@ export const WalletAction = styled.div`
       margin-left: 8px;
     }
   }
-`
+`;
 export const WalletActionOld = styled.section`
   border: solid 5px black;
   border-radius: 10px;
@@ -59,17 +58,17 @@ export const WalletActionOld = styled.section`
 
   margin: auto;
   height: 100%;
-  
+
   & h1:first-child {
-    margin-top: 0; 
+    margin-top: 0;
   }
-`
+`;
 
 export const DateSeparator = styled.div`
   color: gray;
-  margin: .2em;
+  margin: 0.2em;
   margin-top: 1em;
-`
+`;
 export const WalletBox = styled.div<{ noPadding?: boolean }>`
   display: flex;
   flex-direction: column;
@@ -79,10 +78,10 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>`
     width: 400px;
   }
   & > section {
-    padding-left: ${({ noPadding }) => noPadding ? '0px' : '8px'};
-    padding-right: ${({ noPadding }) => noPadding ? '0px' : '8px'};
+    padding-left: ${({ noPadding }) => (noPadding ? "0px" : "8px")};
+    padding-right: ${({ noPadding }) => (noPadding ? "0px" : "8px")};
     // this margin will send the section up when used with a header
-    margin-bottom: auto; 
+    margin-bottom: auto;
     overflow: auto;
 
     table td {
@@ -128,13 +127,13 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>`
       margin-left: 8px;
     }
   }
-`
+`;
 export const Middle = styled.div`
-    justify-content: space-around;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-`
+  justify-content: space-around;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
 
 export const PopupBox = styled.div<{ noPadding?: boolean }>`
   height: 290px;
@@ -144,9 +143,9 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>`
   justify-content: space-between;
 
   & > section {
-    padding: ${({ noPadding }) => noPadding ? '0px' : '8px'};
+    padding: ${({ noPadding }) => (noPadding ? "0px" : "8px")};
     // this margin will send the section up when used with a header
-    margin-bottom: auto; 
+    margin-bottom: auto;
     overflow-y: auto;
 
     table td {
@@ -201,8 +200,7 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>`
       margin-left: 8px;
     }
   }
-
-`
+`;
 
 export const Button = styled.button<{ upperCased?: boolean }>`
   display: inline-block;
@@ -214,7 +212,7 @@ 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 }) => (upperCased ? "uppercase" : "none")};
 
   font-family: inherit;
   font-size: 100%;
@@ -223,7 +221,7 @@ export const Button = styled.button<{ upperCased?: boolean }>`
   color: rgba(0, 0, 0, 0.8); /* rgba supported */
   border: 1px solid #999; /*IE 6/7/8*/
   border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/
-  background-color: '#e6e6e6';
+  background-color: "#e6e6e6";
   text-decoration: none;
   border-radius: 2px;
 
@@ -263,7 +261,7 @@ 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 }) => (upperCased ? "uppercase" : "none")};
 
   font-family: inherit;
   font-size: 100%;
@@ -304,9 +302,9 @@ export const FontIcon = styled.div`
   text-align: center;
   font-weight: bold;
   /* vertical-align: text-top; */
-`
+`;
 export const ButtonBox = styled(Button)`
-  padding: .5em;
+  padding: 0.5em;
   width: fit-content;
   height: 2em;
 
@@ -322,89 +320,87 @@ export const ButtonBox = styled(Button)`
   border-radius: 4px;
   border-color: black;
   color: black;
-`
-
+`;
 
 const ButtonVariant = styled(Button)`
   color: white;
   border-radius: 4px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-`
+`;
 
 export const ButtonPrimary = styled(ButtonVariant)`
   background-color: rgb(66, 184, 221);
-`
+`;
 export const ButtonBoxPrimary = styled(ButtonBox)`
   color: rgb(66, 184, 221);
   border-color: rgb(66, 184, 221);
-`
+`;
 
 export const ButtonSuccess = styled(ButtonVariant)`
   background-color: #388e3c;
-`
+`;
 export const LinkSuccess = styled(Link)`
   color: #388e3c;
-`
+`;
 export const ButtonBoxSuccess = styled(ButtonBox)`
   color: #388e3c;
   border-color: #388e3c;
-`
+`;
 
 export const ButtonWarning = styled(ButtonVariant)`
   background-color: rgb(223, 117, 20);
-`
+`;
 export const LinkWarning = styled(Link)`
   color: rgb(223, 117, 20);
-`
+`;
 export const ButtonBoxWarning = styled(ButtonBox)`
   color: rgb(223, 117, 20);
   border-color: rgb(223, 117, 20);
-`
+`;
 
 export const ButtonDestructive = styled(ButtonVariant)`
   background-color: rgb(202, 60, 60);
-`
+`;
 export const ButtonBoxDestructive = styled(ButtonBox)`
   color: rgb(202, 60, 60);
   border-color: rgb(202, 60, 60);
-`
-
+`;
 
 export const BoldLight = styled.div`
-color: gray;
-font-weight: bold;
-`
+  color: gray;
+  font-weight: bold;
+`;
 export const Centered = styled.div`
   text-align: center;
   & > :not(:first-child) {
     margin-top: 15px;
   }
-`
+`;
 export const Row = styled.div`
   display: flex;
   margin: 0.5em 0;
   justify-content: space-between;
   padding: 0.5em;
-`
+`;
 
 export const Row2 = styled.div`
   display: flex;
   /* margin: 0.5em 0; */
   justify-content: space-between;
   padding: 0.5em;
-`
+`;
 
 export const Column = styled.div`
   display: flex;
   flex-direction: column;
   margin: 0em 1em;
   justify-content: space-between;
-`
+`;
 
 export const RowBorderGray = styled(Row)`
   border: 1px solid gray;
   /* border-radius: 0.5em; */
-`
+`;
 
 export const RowLightBorderGray = styled(Row2)`
   border: 1px solid lightgray;
@@ -414,7 +410,7 @@ export const RowLightBorderGray = styled(Row2)`
     border: 1px solid lightgray;
     background-color: red;
   }
-`
+`;
 
 export const HistoryRow = styled.a`
   text-decoration: none;
@@ -423,7 +419,7 @@ export const HistoryRow = styled.a`
   display: flex;
   justify-content: space-between;
   padding: 0.5em;
-  
+
   border: 1px solid lightgray;
   border-top: 0px;
 
@@ -439,7 +435,7 @@ export const HistoryRow = styled.a`
     margin-left: auto;
     align-self: center;
   }
-`
+`;
 
 export const ListOfProducts = styled.div`
   & > div > a > img {
@@ -453,62 +449,62 @@ export const ListOfProducts = styled.div`
     margin-right: auto;
     margin-left: 1em;
   }
-`
+`;
 
 export const LightText = styled.div`
   color: gray;
-`
+`;
 
 export const WarningText = styled.div`
   color: rgb(223, 117, 20);
-`
+`;
 
 export const SmallText = styled.div`
-  font-size: small; 
-`
+  font-size: small;
+`;
 export const LargeText = styled.div`
-  font-size: large; 
-`
+  font-size: large;
+`;
 
 export const ExtraLargeText = styled.div`
-  font-size: x-large; 
-`
+  font-size: x-large;
+`;
 
 export const SmallLightText = styled(SmallText)`
   color: gray;
-`
+`;
 
 export const CenteredText = styled.div`
   white-space: nowrap;
   text-align: center;
-`
+`;
 
 export const CenteredBoldText = styled(CenteredText)`
   white-space: nowrap;
   text-align: center;
   font-weight: bold;
   color: ${((props: any): any => String(props.color) as any) as any};
-`
+`;
 
 export const Input = styled.div<{ invalid?: boolean }>`
   & label {
     display: block;
     padding: 5px;
-    color: ${({ invalid }) => !invalid ? 'inherit' : 'red'}
+    color: ${({ invalid }) => (!invalid ? "inherit" : "red")};
   }
   & input {
     display: block;
     padding: 5px;
     width: calc(100% - 4px - 10px);
-    border-color: ${({ invalid }) => !invalid ? 'inherit' : 'red'}
+    border-color: ${({ invalid }) => (!invalid ? "inherit" : "red")};
   }
-`
+`;
 
 export const InputWithLabel = styled.div<{ invalid?: boolean }>`
   & label {
     display: block;
     padding: 5px;
-    color: ${({ invalid }) => !invalid ? 'inherit' : 'red'}
+    color: ${({ invalid }) => (!invalid ? "inherit" : "red")};
   }
   & > div {
     position: relative;
@@ -516,20 +512,20 @@ export const InputWithLabel = styled.div<{ invalid?: boolean }>`
     top: 0px;
     bottom: 0px;
 
-    &  > div {
+    & > div {
       position: absolute;
       background-color: lightgray;
       padding: 5px;
       margin: 2px;
     }
 
-    &  > input {
+    & > input {
       flex: 1;
-      padding: 5px; 
-      border-color: ${({ invalid }) => !invalid ? 'inherit' : 'red'}
+      padding: 5px;
+      border-color: ${({ invalid }) => (!invalid ? "inherit" : "red")};
     }
   }
-`
+`;
 
 export const ErrorBox = styled.div`
   border: 2px solid #f5c6cb;
@@ -555,22 +551,22 @@ export const ErrorBox = styled.div`
       width: 28px;
     }
   }
-`
+`;
 
 export const SuccessBox = styled(ErrorBox)`
   color: #0f5132;
   background-color: #d1e7dd;
   border-color: #badbcc;
-`
+`;
 
 export const WarningBox = styled(ErrorBox)`
   color: #664d03;
   background-color: #fff3cd;
   border-color: #ffecb5;
-`
+`;
 
 export const PopupNavigation = styled.div<{ devMode?: boolean }>`
-  background-color:#0042b2;
+  background-color: #0042b2;
   height: 35px;
   justify-content: space-around;
   display: flex;
@@ -582,7 +578,7 @@ export const PopupNavigation = styled.div<{ devMode?: boolean }>`
   & > div > a {
     color: #f8faf7;
     display: inline-block;
-    width: calc(400px / ${({ devMode }) => !devMode ? 4 : 5});
+    width: calc(400px / ${({ devMode }) => (!devMode ? 4 : 5)});
     text-align: center;
     text-decoration: none;
     vertical-align: middle;
@@ -597,7 +593,6 @@ export const PopupNavigation = styled.div<{ devMode?: boolean }>`
 `;
 
 export const NiceSelect = styled.div`
-
   & > select {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -617,19 +612,19 @@ export const NiceSelect = styled.div`
   display: flex;
   /* width: 10em; */
   overflow: hidden;
-  border-radius: .25em;
+  border-radius: 0.25em;
 
   &::after {
-    content: '\u25BC';
+    content: "\u25BC";
     position: absolute;
     top: 0;
     right: 0;
     padding: 0.5em 1em;
     cursor: pointer;
     pointer-events: none;
-    -webkit-transition: .25s all ease;
-    -o-transition: .25s all ease;
-    transition: .25s all ease;
+    -webkit-transition: 0.25s all ease;
+    -o-transition: 0.25s all ease;
+    transition: 0.25s all ease;
   }
 
   &:hover::after {
@@ -639,7 +634,7 @@ export const NiceSelect = styled.div`
   &::-ms-expand {
     display: none;
   }
-`
+`;
 
 export const Outlined = styled.div`
   border: 2px solid #388e3c;
@@ -647,13 +642,12 @@ export const Outlined = styled.div`
   width: fit-content;
   border-radius: 2px;
   color: #388e3c;
-`
+`;
 
 /* { width: "1.5em", height: "1.5em", verticalAlign: "middle" } */
 export const CheckboxSuccess = styled.input`
   vertical-align: center;
-
-`
+`;
 
 export const TermsSection = styled.a`
   border: 1px solid black;
@@ -664,13 +658,13 @@ export const TermsSection = styled.a`
   text-decoration: none;
   color: inherit;
   flex-direction: column;
-  
+
   display: flex;
   &[data-open="true"] {
-    display: flex; 
+    display: flex;
   }
   &[data-open="false"] > *:not(:first-child) {
-    display: none; 
+    display: none;
   }
 
   header {
@@ -681,11 +675,11 @@ export const TermsSection = styled.a`
     height: auto;
   }
 
-  &[data-open="true"] header:after  {
-    content: '\\2227';
+  &[data-open="true"] header:after {
+    content: "\\2227";
   }
-  &[data-open="false"] header:after  {
-    content: '\\2228';
+  &[data-open="false"] header:after {
+    content: "\\2228";
   }
 `;
 
@@ -712,13 +706,13 @@ export const TermsOfService = styled.div`
     padding: 1em;
     margin-top: 2px;
     margin-bottom: 2px;
-    
+
     display: flex;
     &[data-open="true"] {
-      display: flex; 
+      display: flex;
     }
     &[data-open="false"] > *:not(:first-child) {
-      display: none; 
+      display: none;
     }
 
     header {
@@ -729,22 +723,20 @@ export const TermsOfService = styled.div`
       height: auto;
     }
 
-    &[data-open="true"] > header:after  {
-      content: '\\2227';
+    &[data-open="true"] > header:after {
+      content: "\\2227";
     }
-    &[data-open="false"] > header:after  {
-      content: '\\2228';
+    &[data-open="false"] > header:after {
+      content: "\\2228";
     }
   }
-
-`
+`;
 export const StyledCheckboxLabel = styled.div`
   color: green;
   text-transform: uppercase;
   /* font-weight: bold; */
   text-align: center;
   span {
-
     input {
       display: none;
       opacity: 0;
@@ -758,7 +750,7 @@ export const StyledCheckboxLabel = styled.div`
       margin-right: 1em;
       border-radius: 2px;
       border: 2px solid currentColor;
-  
+
       svg {
         transition: transform 0.1s ease-in 25ms;
         transform: scale(0);
@@ -776,12 +768,11 @@ export const StyledCheckboxLabel = styled.div`
   }
   input:disabled + div {
     color: #959495;
-  };
+  }
   input:disabled + div + label {
     color: #959495;
-  };
+  }
   input:focus + div + label {
     box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em currentColor;
   }
-
-`
\ No newline at end of file
+`;