pretty

31 files changed, 992 insertions, 1276 deletions

diff --git a/packages/demobank-ui/src/components/AsyncButton.tsx b/packages/demobank-ui/src/components/AsyncButton.tsx
index 0c4305668..eec11f4a1 100644
--- a/packages/demobank-ui/src/components/AsyncButton.tsx
+++ b/packages/demobank-ui/src/components/AsyncButton.tsx
@@ -19,10 +19,10 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { ComponentChildren, h, VNode } from 'preact';
-import { useLayoutEffect, useRef } from 'preact/hooks';
+import { ComponentChildren, h, VNode } from "preact";
+import { useLayoutEffect, useRef } from "preact/hooks";
 // import { LoadingModal } from "../modal";
-import { useAsync } from '../hooks/async';
+import { useAsync } from "../hooks/async";
 // import { Translate } from "../../i18n";
 
 type Props = {
@@ -44,20 +44,16 @@ export function AsyncButton({
 
   const buttonRef = useRef<HTMLButtonElement>(null);
   useLayoutEffect(() => {
-    if (grabFocus) 
-      buttonRef.current?.focus();
-    
+    if (grabFocus) buttonRef.current?.focus();
   }, [grabFocus]);
 
   // if (isSlow) {
   //   return <LoadingModal onCancel={cancel} />;
   // }
-  if (isLoading) 
-    return <button class="button">Loading...</button>;
-  
+  if (isLoading) return <button class="button">Loading...</button>;
 
   return (
-    <span data-tooltip={rest['data-tooltip']} style={{ marginLeft: 5 }}>
+    <span data-tooltip={rest["data-tooltip"]} style={{ marginLeft: 5 }}>
       <button {...rest} ref={buttonRef} onClick={request} disabled={disabled}>
         {children}
       </button>
diff --git a/packages/demobank-ui/src/components/FileButton.tsx b/packages/demobank-ui/src/components/FileButton.tsx
index dba86ccbf..7fad7f03a 100644
--- a/packages/demobank-ui/src/components/FileButton.tsx
+++ b/packages/demobank-ui/src/components/FileButton.tsx
@@ -1,5 +1,5 @@
-import { h, VNode } from 'preact';
-import { useRef, useState } from 'preact/hooks';
+import { h, VNode } from "preact";
+import { useRef, useState } from "preact/hooks";
 
 const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024;
 
@@ -23,13 +23,12 @@ export function FileButton(props: Props): VNode {
       </button>
       <input
         ref={fileInputRef}
-        style={{ display: 'none' }}
+        style={{ display: "none" }}
         type="file"
         onChange={(e) => {
           const f: FileList | null = e.currentTarget.files;
-          if (!f || f.length != 1) 
-            return props.onChange(undefined);
-          
+          if (!f || f.length != 1) return props.onChange(undefined);
+
           console.log(f);
           if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
             setSizeError(true);
@@ -39,7 +38,7 @@ export function FileButton(props: Props): VNode {
           return f[0].arrayBuffer().then((b) => {
             const content = new Uint8Array(b).reduce(
               (data, byte) => data + String.fromCharCode(byte),
-              '',
+              "",
             );
             return props.onChange({
               content,
diff --git a/packages/demobank-ui/src/components/Notifications.tsx b/packages/demobank-ui/src/components/Notifications.tsx
index 09329442a..e34550386 100644
--- a/packages/demobank-ui/src/components/Notifications.tsx
+++ b/packages/demobank-ui/src/components/Notifications.tsx
@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { h, VNode } from 'preact';
+import { h, VNode } from "preact";
 
 export interface Notification {
   message: string;
@@ -27,7 +27,7 @@ export interface Notification {
   type: MessageType;
 }
 
-export type MessageType = 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS';
+export type MessageType = "INFO" | "WARN" | "ERROR" | "SUCCESS";
 
 interface Props {
   notifications: Notification[];
@@ -36,16 +36,16 @@ interface Props {
 
 function messageStyle(type: MessageType): string {
   switch (type) {
-  case 'INFO':
-    return 'message is-info';
-  case 'WARN':
-    return 'message is-warning';
-  case 'ERROR':
-    return 'message is-danger';
-  case 'SUCCESS':
-    return 'message is-success';
-  default:
-    return 'message';
+    case "INFO":
+      return "message is-info";
+    case "WARN":
+      return "message is-warning";
+    case "ERROR":
+      return "message is-danger";
+    case "SUCCESS":
+      return "message is-success";
+    default:
+      return "message";
   }
 }
 
diff --git a/packages/demobank-ui/src/components/QR.tsx b/packages/demobank-ui/src/components/QR.tsx
index ee5b73c69..f154ddebe 100644
--- a/packages/demobank-ui/src/components/QR.tsx
+++ b/packages/demobank-ui/src/components/QR.tsx
@@ -14,14 +14,14 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { h, VNode } from 'preact';
-import { useEffect, useRef } from 'preact/hooks';
-import qrcode from 'qrcode-generator';
+import { h, VNode } from "preact";
+import { useEffect, useRef } from "preact/hooks";
+import qrcode from "qrcode-generator";
 
 export function QR({ text }: { text: string }): VNode {
   const divRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
-    const qr = qrcode(0, 'L');
+    const qr = qrcode(0, "L");
     qr.addData(text);
     qr.make();
     if (divRef.current)
@@ -33,14 +33,14 @@ export function QR({ text }: { text: string }): VNode {
   return (
     <div
       style={{
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'left',
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "left",
       }}
     >
       <div
-        style={{ width: '50%', minWidth: 200, maxWidth: 300 }}
+        style={{ width: "50%", minWidth: 200, maxWidth: 300 }}
         ref={divRef}
       />
     </div>
diff --git a/packages/demobank-ui/src/components/fields/DateInput.tsx b/packages/demobank-ui/src/components/fields/DateInput.tsx
index 06ec4b6a7..22a83c93c 100644
--- a/packages/demobank-ui/src/components/fields/DateInput.tsx
+++ b/packages/demobank-ui/src/components/fields/DateInput.tsx
@@ -1,7 +1,7 @@
-import { format, subYears } from 'date-fns';
-import { h, VNode } from 'preact';
-import { useLayoutEffect, useRef, useState } from 'preact/hooks';
-import { DatePicker } from '../picker/DatePicker';
+import { format, subYears } from "date-fns";
+import { h, VNode } from "preact";
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
+import { DatePicker } from "../picker/DatePicker";
 
 export interface DateInputProps {
   label: string;
@@ -16,13 +16,11 @@ export interface DateInputProps {
 export function DateInput(props: DateInputProps): VNode {
   const inputRef = useRef<HTMLInputElement>(null);
   useLayoutEffect(() => {
-    if (props.grabFocus) 
-      inputRef.current?.focus();
-    
+    if (props.grabFocus) inputRef.current?.focus();
   }, [props.grabFocus]);
   const [opened, setOpened] = useState(false);
 
-  const value = props.bind[0] || '';
+  const value = props.bind[0] || "";
   const [dirty, setDirty] = useState(false);
   const showError = dirty && props.error;
 
@@ -43,12 +41,10 @@ export function DateInput(props: DateInputProps): VNode {
           <p class="control">
             <input
               type="text"
-              class={showError ? 'input is-danger' : 'input'}
+              class={showError ? "input is-danger" : "input"}
               value={value}
               onKeyPress={(e) => {
-                if (e.key === 'Enter' && props.onConfirm) 
-                  props.onConfirm()
-                
+                if (e.key === "Enter" && props.onConfirm) props.onConfirm();
               }}
               onInput={(e) => {
                 const text = e.currentTarget.value;
@@ -81,7 +77,7 @@ export function DateInput(props: DateInputProps): VNode {
         closeFunction={() => setOpened(false)}
         dateReceiver={(d) => {
           setDirty(true);
-          const v = format(d, 'yyyy-MM-dd');
+          const v = format(d, "yyyy-MM-dd");
           props.bind[1](v);
         }}
       />
diff --git a/packages/demobank-ui/src/components/fields/EmailInput.tsx b/packages/demobank-ui/src/components/fields/EmailInput.tsx
index 8b64264ed..2a22b26e8 100644
--- a/packages/demobank-ui/src/components/fields/EmailInput.tsx
+++ b/packages/demobank-ui/src/components/fields/EmailInput.tsx
@@ -1,5 +1,5 @@
-import { h, VNode } from 'preact';
-import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { h, VNode } from "preact";
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
 
 export interface TextInputProps {
   label: string;
@@ -14,9 +14,7 @@ export interface TextInputProps {
 export function EmailInput(props: TextInputProps): VNode {
   const inputRef = useRef<HTMLInputElement>(null);
   useLayoutEffect(() => {
-    if (props.grabFocus) 
-      inputRef.current?.focus();
-    
+    if (props.grabFocus) inputRef.current?.focus();
   }, [props.grabFocus]);
   const value = props.bind[0];
   const [dirty, setDirty] = useState(false);
@@ -37,18 +35,16 @@ export function EmailInput(props: TextInputProps): VNode {
           required
           placeholder={props.placeholder}
           type="email"
-          class={showError ? 'input is-danger' : 'input'}
+          class={showError ? "input is-danger" : "input"}
           onKeyPress={(e) => {
-            if (e.key === 'Enter' && props.onConfirm) 
-              props.onConfirm()
-            
+            if (e.key === "Enter" && props.onConfirm) props.onConfirm();
           }}
           onInput={(e) => {
             setDirty(true);
             props.bind[1]((e.target as HTMLInputElement).value);
           }}
           ref={inputRef}
-          style={{ display: 'block' }}
+          style={{ display: "block" }}
         />
       </div>
       {showError && <p class="help is-danger">{props.error}</p>}
diff --git a/packages/demobank-ui/src/components/fields/FileInput.tsx b/packages/demobank-ui/src/components/fields/FileInput.tsx
index 17413b907..79cd76f30 100644
--- a/packages/demobank-ui/src/components/fields/FileInput.tsx
+++ b/packages/demobank-ui/src/components/fields/FileInput.tsx
@@ -18,8 +18,8 @@
  *
  * @author Sebastian Javier Marchano (sebasjm)
  */
-import { h, VNode } from 'preact';
-import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { h, VNode } from "preact";
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
 
 const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024;
 
@@ -42,9 +42,7 @@ export interface FileInputProps {
 export function FileInput(props: FileInputProps): VNode {
   const inputRef = useRef<HTMLInputElement>(null);
   useLayoutEffect(() => {
-    if (props.grabFocus) 
-      inputRef.current?.focus();
-    
+    if (props.grabFocus) inputRef.current?.focus();
   }, [props.grabFocus]);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -56,9 +54,7 @@ export function FileInput(props: FileInputProps): VNode {
           <div class="icon is-small ">
             <i class="mdi mdi-folder" />
           </div>
-          <span>
-            {props.label}
-          </span>
+          <span>{props.label}</span>
         </a>
         {props.tooltip && (
           <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
@@ -69,15 +65,14 @@ export function FileInput(props: FileInputProps): VNode {
       <div class="control">
         <input
           ref={fileInputRef}
-          style={{ display: 'none' }}
+          style={{ display: "none" }}
           type="file"
           // name={String(name)}
           onChange={(e) => {
             const f: FileList | null = e.currentTarget.files;
-            if (!f || f.length != 1) 
-              return props.onChange(undefined);
-            
-            console.log(f)
+            if (!f || f.length != 1) return props.onChange(undefined);
+
+            console.log(f);
             if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
               setSizeError(true);
               return props.onChange(undefined);
@@ -87,10 +82,14 @@ export function FileInput(props: FileInputProps): VNode {
               const b64 = btoa(
                 new Uint8Array(b).reduce(
                   (data, byte) => data + String.fromCharCode(byte),
-                  '',
+                  "",
                 ),
               );
-              return props.onChange({content: `data:${f[0].type};base64,${b64}`, name: f[0].name, type: f[0].type});
+              return props.onChange({
+                content: `data:${f[0].type};base64,${b64}`,
+                name: f[0].name,
+                type: f[0].type,
+              });
             });
           }}
         />
diff --git a/packages/demobank-ui/src/components/fields/ImageInput.tsx b/packages/demobank-ui/src/components/fields/ImageInput.tsx
index 98457af21..c190de9a9 100644
--- a/packages/demobank-ui/src/components/fields/ImageInput.tsx
+++ b/packages/demobank-ui/src/components/fields/ImageInput.tsx
@@ -18,19 +18,17 @@
  *
  * @author Sebastian Javier Marchano (sebasjm)
  */
-import { h, VNode } from 'preact';
-import { useLayoutEffect, useRef, useState } from 'preact/hooks';
-import emptyImage from '../../assets/empty.png';
-import { TextInputProps } from './TextInput';
+import { h, VNode } from "preact";
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
+import emptyImage from "../../assets/empty.png";
+import { TextInputProps } from "./TextInput";
 
 const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024;
 
 export function ImageInput(props: TextInputProps): VNode {
   const inputRef = useRef<HTMLInputElement>(null);
   useLayoutEffect(() => {
-    if (props.grabFocus) 
-      inputRef.current?.focus();
-    
+    if (props.grabFocus) inputRef.current?.focus();
   }, [props.grabFocus]);
 
   const value = props.bind[0];
@@ -59,14 +57,13 @@ export function ImageInput(props: TextInputProps): VNode {
         />
         <input
           ref={image}
-          style={{ display: 'none' }}
+          style={{ display: "none" }}
           type="file"
           name={String(name)}
           onChange={(e) => {
             const f: FileList | null = e.currentTarget.files;
-            if (!f || f.length != 1) 
-              return onChange(emptyImage);
-            
+            if (!f || f.length != 1) return onChange(emptyImage);
+
             if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
               setSizeError(true);
               return onChange(emptyImage);
@@ -76,7 +73,7 @@ export function ImageInput(props: TextInputProps): VNode {
               const b64 = btoa(
                 new Uint8Array(b).reduce(
                   (data, byte) => data + String.fromCharCode(byte),
-                  '',
+                  "",
                 ),
               );
               return onChange(`data:${f[0].type};base64,${b64}` as any);
diff --git a/packages/demobank-ui/src/components/fields/NumberInput.tsx b/packages/demobank-ui/src/components/fields/NumberInput.tsx
index 881c61c57..1a54d24b6 100644
--- a/packages/demobank-ui/src/components/fields/NumberInput.tsx
+++ b/packages/demobank-ui/src/components/fields/NumberInput.tsx
@@ -1,5 +1,5 @@
-import { h, VNode } from 'preact';
-import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { h, VNode } from "preact";
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
 
 export interface TextInputProps {
   label: string;
@@ -14,9 +14,7 @@ export interface TextInputProps {
 export function PhoneNumberInput(props: TextInputProps): VNode {
   const inputRef = useRef<HTMLInputElement>(null);
   useLayoutEffect(() => {
-    if (props.grabFocus) 
-      inputRef.current?.focus();
-    
+    if (props.grabFocus) inputRef.current?.focus();
   }, [props.grabFocus]);
   const value = props.bind[0];
   const [dirty, setDirty] = useState(false);
@@ -36,18 +34,16 @@ export function PhoneNumberInput(props: TextInputProps): VNode {
           value={value}
           type="tel"
           placeholder={props.placeholder}
-          class={showError ? 'input is-danger' : 'input'}
+          class={showError ? "input is-danger" : "input"}
           onKeyPress={(e) => {
-            if (e.key === 'Enter' && props.onConfirm) 
-              props.onConfirm()
-            
+            if (e.key === "Enter" && props.onConfirm) props.onConfirm();
           }}
           onInput={(e) => {
             setDirty(true);
             props.bind[1]((e.target as HTMLInputElement).value);
           }}
           ref={inputRef}
-          style={{ display: 'block' }}
+          style={{ display: "block" }}
         />
       </div>
       {showError && <p class="help is-danger">{props.error}</p>}
diff --git a/packages/demobank-ui/src/components/fields/TextInput.tsx b/packages/demobank-ui/src/components/fields/TextInput.tsx
index 5cc9f32ad..cc7104cf5 100644
--- a/packages/demobank-ui/src/components/fields/TextInput.tsx
+++ b/packages/demobank-ui/src/components/fields/TextInput.tsx
@@ -1,8 +1,8 @@
-import { h, VNode } from 'preact';
-import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { h, VNode } from "preact";
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
 
 export interface TextInputProps {
-  inputType?: 'text' | 'number' | 'multiline' | 'password';
+  inputType?: "text" | "number" | "multiline" | "password";
   label: string;
   grabFocus?: boolean;
   disabled?: boolean;
@@ -16,13 +16,11 @@ export interface TextInputProps {
 const TextInputType = function ({ inputType, grabFocus, ...rest }: any): VNode {
   const inputRef = useRef<HTMLInputElement>(null);
   useLayoutEffect(() => {
-    if (grabFocus) 
-      inputRef.current?.focus();
-    
+    if (grabFocus) inputRef.current?.focus();
   }, [grabFocus]);
 
-  return inputType === 'multiline' ? (
-    <textarea {...rest} rows={5} ref={inputRef} style={{ height: 'unset' }} />
+  return inputType === "multiline" ? (
+    <textarea {...rest} rows={5} ref={inputRef} style={{ height: "unset" }} />
   ) : (
     <input {...rest} type={inputType} ref={inputRef} />
   );
@@ -49,17 +47,15 @@ export function TextInput(props: TextInputProps): VNode {
           grabFocus={props.grabFocus}
           disabled={props.disabled}
           placeholder={props.placeholder}
-          class={showError ? 'input is-danger' : 'input'}
+          class={showError ? "input is-danger" : "input"}
           onKeyPress={(e: any) => {
-            if (e.key === 'Enter' && props.onConfirm) 
-              props.onConfirm();
-            
+            if (e.key === "Enter" && props.onConfirm) props.onConfirm();
           }}
           onInput={(e: any) => {
             setDirty(true);
             props.bind[1]((e.target as HTMLInputElement).value);
           }}
-          style={{ display: 'block' }}
+          style={{ display: "block" }}
         />
       </div>
       {showError && <p class="help is-danger">{props.error}</p>}
diff --git a/packages/demobank-ui/src/components/menu/LangSelector.tsx b/packages/demobank-ui/src/components/menu/LangSelector.tsx
index 221237a5b..69d6ee64a 100644
--- a/packages/demobank-ui/src/components/menu/LangSelector.tsx
+++ b/packages/demobank-ui/src/components/menu/LangSelector.tsx
@@ -19,23 +19,23 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { h, VNode, Fragment } from 'preact';
-import { useCallback, useEffect, useState } from 'preact/hooks';
-import langIcon from '../../assets/icons/languageicon.svg';
-import { useTranslationContext } from '../../context/translation';
-import { strings as messages } from '../../i18n/strings';
+import { h, VNode, Fragment } from "preact";
+import { useCallback, useEffect, useState } from "preact/hooks";
+import langIcon from "../../assets/icons/languageicon.svg";
+import { useTranslationContext } from "../../context/translation";
+import { strings as messages } from "../../i18n/strings";
 
 type LangsNames = {
   [P in keyof typeof messages]: string;
 };
 
 const names: LangsNames = {
-  es: 'Español [es]',
-  en: 'English [en]',
-  fr: 'Français [fr]',
-  de: 'Deutsch [de]',
-  sv: 'Svenska [sv]',
-  it: 'Italiano [it]',
+  es: "Español [es]",
+  en: "English [en]",
+  fr: "Français [fr]",
+  de: "Deutsch [de]",
+  sv: "Svenska [sv]",
+  it: "Italiano [it]",
 };
 
 function getLangName(s: keyof LangsNames | string): string {
@@ -47,36 +47,38 @@ function getLangName(s: keyof LangsNames | string): string {
 export function LangSelectorLikePy(): VNode {
   const [updatingLang, setUpdatingLang] = useState(false);
   const { lang, changeLanguage } = useTranslationContext();
-  const [hidden, setHidden] = useState(true)
+  const [hidden, setHidden] = useState(true);
   useEffect(() => {
-    function bodyKeyPress(event:KeyboardEvent) {
-      if (event.code === 'Escape') 
-        setHidden(true);
-      
+    function bodyKeyPress(event: KeyboardEvent) {
+      if (event.code === "Escape") setHidden(true);
     }
-    function bodyOnClick(event:Event) {
+    function bodyOnClick(event: Event) {
       setHidden(true);
     }
-    document.body.addEventListener('click', bodyOnClick)
-    document.body.addEventListener('keydown', bodyKeyPress as any)
+    document.body.addEventListener("click", bodyOnClick);
+    document.body.addEventListener("keydown", bodyKeyPress as any);
     return () => {
-      document.body.removeEventListener('keydown', bodyKeyPress as any)
-      document.body.removeEventListener('click', bodyOnClick)
-    }
-  },[])
+      document.body.removeEventListener("keydown", bodyKeyPress as any);
+      document.body.removeEventListener("click", bodyOnClick);
+    };
+  }, []);
   return (
     <Fragment>
-      <button name="language" onClick={(ev) => {
-        setHidden(h => !h);
-        ev.stopPropagation();
-      }}>
+      <button
+        name="language"
+        onClick={(ev) => {
+          setHidden((h) => !h);
+          ev.stopPropagation();
+        }}
+      >
         {getLangName(lang)}
       </button>
-      <div id="lang" class={hidden ? 'hide' : ''}>
+      <div id="lang" class={hidden ? "hide" : ""}>
         <div style="position: relative; overflow: visible;">
           <div
             class="nav"
-            style="position: absolute; max-height: 60vh; overflow-y: scroll">
+            style="position: absolute; max-height: 60vh; overflow-y: scroll"
+          >
             {Object.keys(messages)
               .filter((l) => l !== lang)
               .map((l) => (
@@ -88,7 +90,8 @@ export function LangSelectorLikePy(): VNode {
                   onClick={() => {
                     changeLanguage(l);
                     setUpdatingLang(false);
-                  }}>
+                  }}
+                >
                   {getLangName(l)}
                 </a>
               ))}
diff --git a/packages/demobank-ui/src/components/menu/NavigationBar.tsx b/packages/demobank-ui/src/components/menu/NavigationBar.tsx
index 9e540213d..d344875eb 100644
--- a/packages/demobank-ui/src/components/menu/NavigationBar.tsx
+++ b/packages/demobank-ui/src/components/menu/NavigationBar.tsx
@@ -19,9 +19,9 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { h, VNode } from 'preact';
-import logo from '../../assets/logo.jpeg';
-import { LangSelectorLikePy as LangSelector } from './LangSelector';
+import { h, VNode } from "preact";
+import logo from "../../assets/logo.jpeg";
+import { LangSelectorLikePy as LangSelector } from "./LangSelector";
 
 interface Props {
   onMobileMenu: () => void;
diff --git a/packages/demobank-ui/src/components/menu/SideBar.tsx b/packages/demobank-ui/src/components/menu/SideBar.tsx
index 7f9981a1c..d7833df5a 100644
--- a/packages/demobank-ui/src/components/menu/SideBar.tsx
+++ b/packages/demobank-ui/src/components/menu/SideBar.tsx
@@ -19,8 +19,8 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { h, VNode } from 'preact';
-import { Translate } from '../../i18n';
+import { h, VNode } from "preact";
+import { Translate } from "../../i18n";
 
 interface Props {
   mobile?: boolean;
@@ -28,9 +28,9 @@ interface Props {
 
 export function Sidebar({ mobile }: Props): VNode {
   // const config = useConfigContext();
-  const config = { version: 'none' };
+  const config = { version: "none" };
   // FIXME: add replacement for __VERSION__ with the current version
-  const process = { env: { __VERSION__: '0.0.0' } };
+  const process = { env: { __VERSION__: "0.0.0" } };
 
   return (
     <aside class="aside is-placed-left is-expanded">
diff --git a/packages/demobank-ui/src/components/menu/index.tsx b/packages/demobank-ui/src/components/menu/index.tsx
index 07e1c5265..99d0f7646 100644
--- a/packages/demobank-ui/src/components/menu/index.tsx
+++ b/packages/demobank-ui/src/components/menu/index.tsx
@@ -14,11 +14,11 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { ComponentChildren, Fragment, h, VNode } from 'preact';
-import Match from 'preact-router/match';
-import { useEffect, useState } from 'preact/hooks';
-import { NavigationBar } from './NavigationBar';
-import { Sidebar } from './SideBar';
+import { ComponentChildren, Fragment, h, VNode } from "preact";
+import Match from "preact-router/match";
+import { useEffect, useState } from "preact/hooks";
+import { NavigationBar } from "./NavigationBar";
+import { Sidebar } from "./SideBar";
 
 interface MenuProps {
   title: string;
@@ -47,7 +47,7 @@ export function Menu({ title }: MenuProps): VNode {
         return (
           <WithTitle title={titleWithSubtitle}>
             <div
-              class={mobileOpen ? 'has-aside-mobile-expanded' : ''}
+              class={mobileOpen ? "has-aside-mobile-expanded" : ""}
               onClick={() => setMobileOpen(false)}
             >
               <NavigationBar
@@ -82,11 +82,11 @@ export function NotificationCard({
         <div class="column is-12">
           <article
             class={
-              n.type === 'ERROR'
-                ? 'message is-danger'
-                : n.type === 'WARN'
-                  ? 'message is-warning'
-                  : 'message is-info'
+              n.type === "ERROR"
+                ? "message is-danger"
+                : n.type === "WARN"
+                ? "message is-warning"
+                : "message is-info"
             }
           >
             <div class="message-header">
@@ -132,4 +132,4 @@ export interface Notification {
 }
 
 export type ValueOrFunction<T> = T | ((p: T) => T);
-export type MessageType = 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS';
+export type MessageType = "INFO" | "WARN" | "ERROR" | "SUCCESS";
diff --git a/packages/demobank-ui/src/components/picker/DatePicker.tsx b/packages/demobank-ui/src/components/picker/DatePicker.tsx
index 94dbc9458..ba53578ef 100644
--- a/packages/demobank-ui/src/components/picker/DatePicker.tsx
+++ b/packages/demobank-ui/src/components/picker/DatePicker.tsx
@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { h, Component } from 'preact';
+import { h, Component } from "preact";
 
 interface Props {
   closeFunction?: () => void;
@@ -37,36 +37,36 @@ interface State {
 const now = new Date();
 
 const monthArrShortFull = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
 ];
 
 const monthArrShort = [
-  'Jan',
-  'Feb',
-  'Mar',
-  'Apr',
-  'May',
-  'Jun',
-  'Jul',
-  'Aug',
-  'Sep',
-  'Oct',
-  'Nov',
-  'Dec',
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
 ];
 
-const dayArr = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const dayArr = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
 const yearArr: number[] = [];
 
@@ -83,10 +83,10 @@ export class DatePicker extends Component<Props, State> {
   dayClicked(e: any) {
     const element = e.target; // the actual element clicked
 
-    if (element.innerHTML === '') return false; // don't continue if <span /> empty
+    if (element.innerHTML === "") return false; // don't continue if <span /> empty
 
     // get date from clicked element (gets attached when rendered)
-    const date = new Date(element.getAttribute('data-value'));
+    const date = new Date(element.getAttribute("data-value"));
 
     // update the state
     this.setState({ currentDate: date });
@@ -131,40 +131,37 @@ export class DatePicker extends Component<Props, State> {
    * Display previous month by updating state
    */
   displayPrevMonth() {
-    if (this.state.displayedMonth <= 0) 
+    if (this.state.displayedMonth <= 0)
       this.setState({
         displayedMonth: 11,
         displayedYear: this.state.displayedYear - 1,
       });
-    else 
+    else
       this.setState({
         displayedMonth: this.state.displayedMonth - 1,
       });
-    
   }
 
   /**
    * Display next month by updating state
    */
   displayNextMonth() {
-    if (this.state.displayedMonth >= 11) 
+    if (this.state.displayedMonth >= 11)
       this.setState({
         displayedMonth: 0,
         displayedYear: this.state.displayedYear + 1,
       });
-    else 
+    else
       this.setState({
         displayedMonth: this.state.displayedMonth + 1,
       });
-    
   }
 
   /**
    * Display the selected month (gets fired when clicking on the date string)
    */
   displaySelectedMonth() {
-    if (this.state.selectYearMode) 
-      this.toggleYearSelector();
+    if (this.state.selectYearMode) this.toggleYearSelector();
     else {
       if (!this.state.currentDate) return false;
       this.setState({
@@ -194,7 +191,7 @@ export class DatePicker extends Component<Props, State> {
     this.passDateToParent(this.state.currentDate);
   }
   passDateToParent(date: Date) {
-    if (typeof this.props.dateReceiver === 'function')
+    if (typeof this.props.dateReceiver === "function")
       this.props.dateReceiver(date);
     this.closeDatePicker();
   }
@@ -229,22 +226,18 @@ export class DatePicker extends Component<Props, State> {
   }
 
   render() {
-    const {
-      currentDate,
-      displayedMonth,
-      displayedYear,
-      selectYearMode,
-    } = this.state;
+    const { currentDate, displayedMonth, displayedYear, selectYearMode } =
+      this.state;
 
     return (
       <div>
-        <div class={`datePicker ${this.props.opened && 'datePicker--opened'}`}>
+        <div class={`datePicker ${this.props.opened && "datePicker--opened"}`}>
           <div class="datePicker--titles">
             <h3
               style={{
                 color: selectYearMode
-                  ? 'rgba(255,255,255,.87)'
-                  : 'rgba(255,255,255,.57)',
+                  ? "rgba(255,255,255,.87)"
+                  : "rgba(255,255,255,.57)",
               }}
               onClick={this.toggleYearSelector}
             >
@@ -253,12 +246,12 @@ export class DatePicker extends Component<Props, State> {
             <h2
               style={{
                 color: !selectYearMode
-                  ? 'rgba(255,255,255,.87)'
-                  : 'rgba(255,255,255,.57)',
+                  ? "rgba(255,255,255,.87)"
+                  : "rgba(255,255,255,.57)",
               }}
               onClick={this.displaySelectedMonth}
             >
-              {dayArr[currentDate.getDay()]},{' '}
+              {dayArr[currentDate.getDay()]},{" "}
               {monthArrShort[currentDate.getMonth()]} {currentDate.getDate()}
             </h2>
           </div>
@@ -267,7 +260,7 @@ export class DatePicker extends Component<Props, State> {
             <nav>
               <span onClick={this.displayPrevMonth} class="icon">
                 <i
-                  style={{ transform: 'rotate(180deg)' }}
+                  style={{ transform: "rotate(180deg)" }}
                   class="mdi mdi-forward"
                 />
               </span>
@@ -284,7 +277,7 @@ export class DatePicker extends Component<Props, State> {
             {!selectYearMode && (
               <div class="datePicker--calendar">
                 <div class="datePicker--dayNames">
-                  {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, i) => (
+                  {["S", "M", "T", "W", "T", "F", "S"].map((day, i) => (
                     <span key={i}>{day}</span>
                   ))}
                 </div>
@@ -309,8 +302,8 @@ export class DatePicker extends Component<Props, State> {
                       <span
                         key={day.day}
                         class={
-                          (day.today ? 'datePicker--today ' : '') +
-                          (selected ? 'datePicker--selected' : '')
+                          (day.today ? "datePicker--today " : "") +
+                          (selected ? "datePicker--selected" : "")
                         }
                         disabled={!day.date}
                         data-value={day.date}
@@ -328,7 +321,7 @@ export class DatePicker extends Component<Props, State> {
                 {(this.props.years || yearArr).map((year) => (
                   <span
                     key={year}
-                    class={year === displayedYear ? 'selected' : ''}
+                    class={year === displayedYear ? "selected" : ""}
                     onClick={this.changeDisplayedYear}
                   >
                     {year}
@@ -343,7 +336,7 @@ export class DatePicker extends Component<Props, State> {
           class="datePicker--background"
           onClick={this.closeDatePicker}
           style={{
-            display: this.props.opened ? 'block' : 'none',
+            display: this.props.opened ? "block" : "none",
           }}
         />
       </div>
@@ -351,6 +344,4 @@ export class DatePicker extends Component<Props, State> {
   }
 }
 
-for (let i = 2010; i <= now.getFullYear() + 10; i++) 
-  yearArr.push(i);
-
+for (let i = 2010; i <= now.getFullYear() + 10; i++) yearArr.push(i);
diff --git a/packages/demobank-ui/src/components/picker/DurationPicker.stories.tsx b/packages/demobank-ui/src/components/picker/DurationPicker.stories.tsx
index 5e9930522..7f96cc15b 100644
--- a/packages/demobank-ui/src/components/picker/DurationPicker.stories.tsx
+++ b/packages/demobank-ui/src/components/picker/DurationPicker.stories.tsx
@@ -19,16 +19,16 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { h, FunctionalComponent } from 'preact';
-import { useState } from 'preact/hooks';
-import { DurationPicker as TestedComponent } from './DurationPicker';
+import { h, FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { DurationPicker as TestedComponent } from "./DurationPicker";
 
 export default {
-  title: 'Components/Picker/Duration',
+  title: "Components/Picker/Duration",
   component: TestedComponent,
   argTypes: {
-    onCreate: { action: 'onCreate' },
-    goBack: { action: 'goBack' },
+    onCreate: { action: "onCreate" },
+    goBack: { action: "goBack" },
   },
 };
 
diff --git a/packages/demobank-ui/src/components/picker/DurationPicker.tsx b/packages/demobank-ui/src/components/picker/DurationPicker.tsx
index 542ff2f01..94f2326bc 100644
--- a/packages/demobank-ui/src/components/picker/DurationPicker.tsx
+++ b/packages/demobank-ui/src/components/picker/DurationPicker.tsx
@@ -19,10 +19,10 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { h, VNode } from 'preact';
-import { useState } from 'preact/hooks';
-import { useTranslator } from '../../i18n';
-import '../../scss/DurationPicker.scss';
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { useTranslator } from "../../i18n";
+import "../../scss/DurationPicker.scss";
 
 export interface Props {
   hours?: boolean;
@@ -129,9 +129,9 @@ function InputNumber({
       }}
       style={{
         width: 50,
-        border: 'none',
-        fontSize: 'inherit',
-        background: 'inherit',
+        border: "none",
+        fontSize: "inherit",
+        background: "inherit",
       }}
     />
   );
@@ -157,7 +157,7 @@ function DurationColumn({
           <div class="rdp-cell" key={value - 2}>
             {onDecrease && (
               <button
-                style={{ width: '100%', textAlign: 'center', margin: 5 }}
+                style={{ width: "100%", textAlign: "center", margin: 5 }}
                 onClick={onDecrease}
               >
                 <span class="icon">
@@ -167,7 +167,7 @@ function DurationColumn({
             )}
           </div>
           <div class="rdp-cell" key={value - 1}>
-            {value > min ? toTwoDigitString(value - 1) : ''}
+            {value > min ? toTwoDigitString(value - 1) : ""}
           </div>
           <div class="rdp-cell rdp-center" key={value}>
             {onChange ? (
@@ -182,13 +182,13 @@ function DurationColumn({
           </div>
 
           <div class="rdp-cell" key={value + 1}>
-            {value < max ? toTwoDigitString(value + 1) : ''}
+            {value < max ? toTwoDigitString(value + 1) : ""}
           </div>
 
           <div class="rdp-cell" key={value + 2}>
             {onIncrease && (
               <button
-                style={{ width: '100%', textAlign: 'center', margin: 5 }}
+                style={{ width: "100%", textAlign: "center", margin: 5 }}
                 onClick={onIncrease}
               >
                 <span class="icon">
@@ -204,8 +204,7 @@ function DurationColumn({
 }
 
 function toTwoDigitString(n: number) {
-  if (n < 10) 
-    return `0${n}`;
-  
+  if (n < 10) return `0${n}`;
+
   return `${n}`;
 }
diff --git a/packages/demobank-ui/src/context/translation.ts b/packages/demobank-ui/src/context/translation.ts
index 1dbca56e6..a411ecb16 100644
--- a/packages/demobank-ui/src/context/translation.ts
+++ b/packages/demobank-ui/src/context/translation.ts
@@ -19,11 +19,11 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createContext, h, VNode } from 'preact';
-import { useContext, useEffect } from 'preact/hooks';
-import { useLang } from '../hooks/index.js';
-import * as jedLib from 'jed';
-import { strings } from '../i18n/strings.js';
+import { createContext, h, VNode } from "preact";
+import { useContext, useEffect } from "preact/hooks";
+import { useLang } from "../hooks/index.js";
+import * as jedLib from "jed";
+import { strings } from "../i18n/strings.js";
 
 interface Type {
   lang: string;
@@ -31,7 +31,7 @@ interface Type {
   changeLanguage: (l: string) => void;
 }
 const initial = {
-  lang: 'en',
+  lang: "en",
   handler: null,
   changeLanguage: () => {
     /**
@@ -55,15 +55,12 @@ export const TranslationProvider = ({
   children,
   forceLang,
 }: Props): VNode => {
-
   const [lang, changeLanguage] = useLang(initial);
   useEffect(() => {
-    if (forceLang)
-      changeLanguage(forceLang);
-
+    if (forceLang) changeLanguage(forceLang);
   });
-  console.log('lang store', strings);
-  const handler = new jedLib.Jed(strings[lang] || strings['en']);
+  console.log("lang store", strings);
+  const handler = new jedLib.Jed(strings[lang] || strings["en"]);
   return h(Context.Provider, {
     value: { lang, handler, changeLanguage },
     children,
diff --git a/packages/demobank-ui/src/declaration.d.ts b/packages/demobank-ui/src/declaration.d.ts
index 73bccac71..00b3d41d5 100644
--- a/packages/demobank-ui/src/declaration.d.ts
+++ b/packages/demobank-ui/src/declaration.d.ts
@@ -1,20 +1,20 @@
-declare module '*.css' {
+declare module "*.css" {
   const mapping: Record<string, string>;
   export default mapping;
 }
-declare module '*.svg' {
+declare module "*.svg" {
   const content: any;
   export default content;
 }
-declare module '*.jpeg' {
+declare module "*.jpeg" {
   const content: any;
   export default content;
 }
-declare module '*.png' {
+declare module "*.png" {
   const content: any;
   export default content;
 }
-declare module 'jed' {
+declare module "jed" {
   const x: any;
   export = x;
 }
diff --git a/packages/demobank-ui/src/hooks/async.ts b/packages/demobank-ui/src/hooks/async.ts
index be41b4e07..0fc197554 100644
--- a/packages/demobank-ui/src/hooks/async.ts
+++ b/packages/demobank-ui/src/hooks/async.ts
@@ -18,7 +18,7 @@
  *
  * @author Sebastian Javier Marchano (sebasjm)
  */
-import { useState } from 'preact/hooks';
+import { useState } from "preact/hooks";
 // import { cancelPendingRequest } from "./backend";
 
 export interface Options {
@@ -51,9 +51,9 @@ export function useAsync<T>(
     }, tooLong);
 
     try {
-      console.log('calling async', args);
+      console.log("calling async", args);
       const result = await fn(...args);
-      console.log('async back', result);
+      console.log("async back", result);
       setData(result);
     } catch (error) {
       setError(error);
diff --git a/packages/demobank-ui/src/i18n/index.tsx b/packages/demobank-ui/src/i18n/index.tsx
index 9882525a1..2489184b2 100644
--- a/packages/demobank-ui/src/i18n/index.tsx
+++ b/packages/demobank-ui/src/i18n/index.tsx
@@ -21,9 +21,9 @@
 /**
  * Imports
  */
-import { ComponentChild, ComponentChildren, h, Fragment, VNode } from 'preact';
+import { ComponentChild, ComponentChildren, h, Fragment, VNode } from "preact";
 
-import { useTranslationContext } from '../context/translation';
+import { useTranslationContext } from "../context/translation";
 
 export function useTranslator() {
   const ctx = useTranslationContext();
@@ -46,12 +46,10 @@ export function useTranslator() {
  * Convert template strings to a msgid
  */
 function toI18nString(stringSeq: ReadonlyArray<string>): string {
-  let s = '';
+  let s = "";
   for (let i = 0; i < stringSeq.length; i++) {
     s += stringSeq[i];
-    if (i < stringSeq.length - 1) 
-      s += `%${i + 1}$s`;
-    
+    if (i < stringSeq.length - 1) s += `%${i + 1}$s`;
   }
   return s;
 }
@@ -64,12 +62,11 @@ interface TranslateSwitchProps {
 function stringifyChildren(children: ComponentChildren): string {
   let n = 1;
   const ss = (children instanceof Array ? children : [children]).map((c) => {
-    if (typeof c === 'string') 
-      return c;
-    
+    if (typeof c === "string") return c;
+
     return `%${n++}$s`;
   });
-  const s = ss.join('').replace(/ +/g, ' ').trim();
+  const s = ss.join("").replace(/ +/g, " ").trim();
   return s;
 }
 
@@ -97,24 +94,20 @@ function getTranslatedChildren(
   const placeholderChildren = Array<ComponentChild>();
   for (let i = 0; i < childArray.length; i++) {
     const x = childArray[i];
-    if (x === undefined) 
-      continue;
-    else if (typeof x === 'string') 
-      continue;
-    else 
-      placeholderChildren.push(x);
-    
+    if (x === undefined) continue;
+    else if (typeof x === "string") continue;
+    else placeholderChildren.push(x);
   }
   const result = Array<ComponentChild>();
-  for (let i = 0; i < tr.length; i++) 
-    if (i % 2 == 0) 
+  for (let i = 0; i < tr.length; i++)
+    if (i % 2 == 0)
       // Text
       result.push(tr[i]);
     else {
       const childIdx = Number.parseInt(tr[i], 10) - 1;
       result.push(placeholderChildren[childIdx]);
     }
-  
+
   return result;
 }
 
@@ -154,21 +147,18 @@ export function TranslateSwitch({ children, target }: TranslateSwitchProps) {
   let singular: VNode<TranslationPluralProps> | undefined;
   let plural: VNode<TranslationPluralProps> | undefined;
   // const children = this.props.children;
-  if (children) 
+  if (children)
     (children instanceof Array ? children : [children]).forEach(
       (child: any) => {
-        if (child.type === TranslatePlural) 
-          plural = child;
-        
-        if (child.type === TranslateSingular) 
-          singular = child;
-        
+        if (child.type === TranslatePlural) plural = child;
+
+        if (child.type === TranslateSingular) singular = child;
       },
     );
-  
+
   if (!singular || !plural) {
-    console.error('translation not found');
-    return h('span', {}, ['translation not found']);
+    console.error("translation not found");
+    return h("span", {}, ["translation not found"]);
   }
   singular.props.target = target;
   plural.props.target = target;
diff --git a/packages/demobank-ui/src/i18n/strings.ts b/packages/demobank-ui/src/i18n/strings.ts
index 1a3c72f85..d9af71657 100644
--- a/packages/demobank-ui/src/i18n/strings.ts
+++ b/packages/demobank-ui/src/i18n/strings.ts
@@ -15,458 +15,207 @@
  */
 
 /*eslint quote-props: ["error", "consistent"]*/
-export const strings: {[s: string]: any} = {};
+export const strings: { [s: string]: any } = {};
 
-strings['de'] = {
-  'domain': 'messages',
-  'locale_data': {
-    'messages': {
-      'days': [
-        ''
-      ],
-      'hours': [
-        ''
-      ],
-      'minutes': [
-        ''
-      ],
-      'seconds': [
-        ''
-      ],
-      'Clear': [
-        ''
-      ],
-      'Logout': [
-        ''
-      ],
-      'Demo Bank': [
-        ''
-      ],
-      'Go back': [
-        ''
-      ],
-      'Wire transfer': [
-        ''
-      ],
-      'Transfer money to another account of this bank:': [
-        ''
-      ],
-      'Want to try the raw payto://-format?': [
-        ''
-      ],
-      'Transfer money via the Payto system:': [
-        ''
-      ],
-      'payto address': [
-        ''
-      ],
-      'Confirm': [
-        ''
-      ],
-      'Confirm Withdrawal': [
-        ''
-      ],
-      'Waiting the bank to create the operaion...': [
-        ''
-      ],
-      'This withdrawal was aborted!': [
-        ''
-      ],
-      'Withdraw to a Taler Wallet': [
-        ''
-      ],
-      'You can use this QR code to withdraw to your mobile wallet:': [
-        ''
-      ],
-      'this link': [
-        ''
-      ],
-      'Abort': [
-        ''
-      ],
-      'Start withdrawal': [
-        ''
-      ],
-      'Withdraw Money into a Taler wallet': [
-        ''
-      ],
-      'Amount to withdraw': [
-        ''
-      ],
-      'Please login!': [
-        ''
-      ],
-      'Login': [
-        ''
-      ],
-      'Register to the euFin bank!': [
-        ''
-      ],
-      'Registration form': [
-        ''
-      ],
-      'Register': [
-        ''
-      ],
-      'Date': [
-        ''
-      ],
-      'Amount': [
-        ''
-      ],
-      'Counterpart': [
-        ''
-      ],
-      'Subject': [
-        ''
-      ],
-      'Username or account label \'%1$s\' not found.  Won\'t login.': [
-        ''
-      ],
-      'Wrong credentials given.': [
-        ''
-      ],
-      'Account information could not be retrieved.': [
-        ''
-      ],
-      'Close wire transfer': [
-        ''
-      ],
-      'Close Taler withdrawal': [
-        ''
-      ],
-      'Bank account balance:': [
-        ''
-      ],
-      'Latest transactions:': [
-        ''
-      ],
-      'Transfer money manually': [
-        ''
-      ],
-      'List of public accounts was not found.': [
-        ''
-      ],
-      'List of public accounts could not be retrieved.': [
-        ''
-      ],
-      'History of public accounts': [
-        ''
-      ],
-      'Page has a problem: logged in but backend state is lost.': [
-        ''
-      ],
-      'Welcome to the euFin bank!': [
-        ''
-      ],
-      '': {
-        'domain': 'messages',
-        'plural_forms': 'nplurals=2; plural=(n != 1);',
-        'lang': 'de'
-      }
-    }
-  }
+strings["de"] = {
+  domain: "messages",
+  locale_data: {
+    messages: {
+      days: [""],
+      hours: [""],
+      minutes: [""],
+      seconds: [""],
+      Clear: [""],
+      Logout: [""],
+      "Demo Bank": [""],
+      "Go back": [""],
+      "Wire transfer": [""],
+      "Transfer money to another account of this bank:": [""],
+      "Want to try the raw payto://-format?": [""],
+      "Transfer money via the Payto system:": [""],
+      "payto address": [""],
+      Confirm: [""],
+      "Confirm Withdrawal": [""],
+      "Waiting the bank to create the operaion...": [""],
+      "This withdrawal was aborted!": [""],
+      "Withdraw to a Taler Wallet": [""],
+      "You can use this QR code to withdraw to your mobile wallet:": [""],
+      "this link": [""],
+      Abort: [""],
+      "Start withdrawal": [""],
+      "Withdraw Money into a Taler wallet": [""],
+      "Amount to withdraw": [""],
+      "Please login!": [""],
+      Login: [""],
+      "Register to the euFin bank!": [""],
+      "Registration form": [""],
+      Register: [""],
+      Date: [""],
+      Amount: [""],
+      Counterpart: [""],
+      Subject: [""],
+      "Username or account label '%1$s' not found.  Won't login.": [""],
+      "Wrong credentials given.": [""],
+      "Account information could not be retrieved.": [""],
+      "Close wire transfer": [""],
+      "Close Taler withdrawal": [""],
+      "Bank account balance:": [""],
+      "Latest transactions:": [""],
+      "Transfer money manually": [""],
+      "List of public accounts was not found.": [""],
+      "List of public accounts could not be retrieved.": [""],
+      "History of public accounts": [""],
+      "Page has a problem: logged in but backend state is lost.": [""],
+      "Welcome to the euFin bank!": [""],
+      "": {
+        domain: "messages",
+        plural_forms: "nplurals=2; plural=(n != 1);",
+        lang: "de",
+      },
+    },
+  },
 };
 
-strings['en'] = {
-  'domain': 'messages',
-  'locale_data': {
-    'messages': {
-      'days': [
-        'days'
-      ],
-      'hours': [
-        'hours'
-      ],
-      'minutes': [
-        'minutes'
-      ],
-      'seconds': [
-        'seconds'
-      ],
-      'Clear': [
-        ''
-      ],
-      'Logout': [
-        ''
-      ],
-      'Demo Bank': [
-        ''
-      ],
-      'Go back': [
-        'Go back'
-      ],
-      'Wire transfer': [
-        ''
-      ],
-      'Transfer money to another account of this bank:': [
-        ''
-      ],
-      'Want to try the raw payto://-format?': [
-        ''
-      ],
-      'Transfer money via the Payto system:': [
-        ''
-      ],
-      'payto address': [
-        ''
-      ],
-      'Confirm': [
-        ''
-      ],
-      'Confirm Withdrawal': [
-        'Confirm withdrawal'
-      ],
-      'Waiting the bank to create the operaion...': [
-        ''
-      ],
-      'This withdrawal was aborted!': [
-        ''
-      ],
-      'Withdraw to a Taler Wallet': [
-        'Charge Taler wallet'
-      ],
-      'You can use this QR code to withdraw to your mobile wallet:': [
-        ''
-      ],
-      'this link': [
-        ''
-      ],
-      'Abort': [
-        ''
-      ],
-      'Start withdrawal': [
-        'Start withdrawal'
-      ],
-      'Withdraw Money into a Taler wallet': [
-        'Charge Taler wallet'
-      ],
-      'Amount to withdraw': [
-        'Amount to withdraw'
-      ],
-      'Please login!': [
-        ''
-      ],
-      'Login': [
-        ''
-      ],
-      'Register to the euFin bank!': [
-        ''
-      ],
-      'Registration form': [
-        ''
-      ],
-      'Register': [
-        ''
-      ],
-      'Date': [
-        ''
-      ],
-      'Amount': [
-        ''
-      ],
-      'Counterpart': [
-        ''
-      ],
-      'Subject': [
-        ''
-      ],
-      'Username or account label \'%1$s\' not found.  Won\'t login.': [
-        ''
-      ],
-      'Wrong credentials given.': [
-        ''
-      ],
-      'Account information could not be retrieved.': [
-        ''
-      ],
-      'Close wire transfer': [
-        ''
-      ],
-      'Close Taler withdrawal': [
-        'Close Taler withdrawal'
-      ],
-      'Bank account balance:': [
-        ''
-      ],
-      'Latest transactions:': [
-        ''
-      ],
-      'Transfer money manually': [
-        ''
-      ],
-      'List of public accounts was not found.': [
-        ''
-      ],
-      'List of public accounts could not be retrieved.': [
-        ''
-      ],
-      'History of public accounts': [
-        ''
-      ],
-      'Page has a problem: logged in but backend state is lost.': [
-        'Page has a problem: logged in but backend state is lost.'
-      ],
-      'Welcome to the euFin bank!': [
-        'Welcome to euFin bank: Taler+IBAN now possible!'
-      ],
-      '': {
-        'domain': 'messages',
-        'plural_forms': 'nplurals=2; plural=(n != 1);',
-        'lang': 'en'
-      }
-    }
-  }
+strings["en"] = {
+  domain: "messages",
+  locale_data: {
+    messages: {
+      days: ["days"],
+      hours: ["hours"],
+      minutes: ["minutes"],
+      seconds: ["seconds"],
+      Clear: [""],
+      Logout: [""],
+      "Demo Bank": [""],
+      "Go back": ["Go back"],
+      "Wire transfer": [""],
+      "Transfer money to another account of this bank:": [""],
+      "Want to try the raw payto://-format?": [""],
+      "Transfer money via the Payto system:": [""],
+      "payto address": [""],
+      Confirm: [""],
+      "Confirm Withdrawal": ["Confirm withdrawal"],
+      "Waiting the bank to create the operaion...": [""],
+      "This withdrawal was aborted!": [""],
+      "Withdraw to a Taler Wallet": ["Charge Taler wallet"],
+      "You can use this QR code to withdraw to your mobile wallet:": [""],
+      "this link": [""],
+      Abort: [""],
+      "Start withdrawal": ["Start withdrawal"],
+      "Withdraw Money into a Taler wallet": ["Charge Taler wallet"],
+      "Amount to withdraw": ["Amount to withdraw"],
+      "Please login!": [""],
+      Login: [""],
+      "Register to the euFin bank!": [""],
+      "Registration form": [""],
+      Register: [""],
+      Date: [""],
+      Amount: [""],
+      Counterpart: [""],
+      Subject: [""],
+      "Username or account label '%1$s' not found.  Won't login.": [""],
+      "Wrong credentials given.": [""],
+      "Account information could not be retrieved.": [""],
+      "Close wire transfer": [""],
+      "Close Taler withdrawal": ["Close Taler withdrawal"],
+      "Bank account balance:": [""],
+      "Latest transactions:": [""],
+      "Transfer money manually": [""],
+      "List of public accounts was not found.": [""],
+      "List of public accounts could not be retrieved.": [""],
+      "History of public accounts": [""],
+      "Page has a problem: logged in but backend state is lost.": [
+        "Page has a problem: logged in but backend state is lost.",
+      ],
+      "Welcome to the euFin bank!": [
+        "Welcome to euFin bank: Taler+IBAN now possible!",
+      ],
+      "": {
+        domain: "messages",
+        plural_forms: "nplurals=2; plural=(n != 1);",
+        lang: "en",
+      },
+    },
+  },
 };
 
-strings['it'] = {
-  'domain': 'messages',
-  'locale_data': {
-    'messages': {
-      'days': [
-        ''
-      ],
-      'hours': [
-        ''
-      ],
-      'minutes': [
-        ''
-      ],
-      'seconds': [
-        ''
-      ],
-      'Clear': [
-        'Cancella'
-      ],
-      'Logout': [
-        ''
-      ],
-      'Demo Bank': [
-        'Banca \'demo\''
-      ],
-      'Go back': [
-        'Indietro'
-      ],
-      'Wire transfer': [
-        'Bonifico'
-      ],
-      'Transfer money to another account of this bank:': [
-        'Trasferisci fondi a un altro conto di questa banca:'
-      ],
-      'Want to try the raw payto://-format?': [
-        'Prova il trasferimento tramite il formato Payto!'
-      ],
-      'Transfer money via the Payto system:': [
-        'Effettua un bonifico tramite il sistema Payto:'
-      ],
-      'payto address': [
-        'indirizzo Payto'
-      ],
-      'Confirm': [
-        'Conferma'
-      ],
-      'Confirm Withdrawal': [
-        'Conferma il ritiro'
-      ],
-      'Waiting the bank to create the operaion...': [
-        'La banca sta creando l\'operazione...'
-      ],
-      'This withdrawal was aborted!': [
-        'Questo ritiro è stato annullato!'
-      ],
-      'Withdraw to a Taler Wallet': [
-        'Ritira contante nel portafoglio Taler'
-      ],
-      'You can use this QR code to withdraw to your mobile wallet:': [
-        'Usa questo codice QR per ritirare contante nel tuo wallet:'
-      ],
-      'this link': [
-        'questo link'
-      ],
-      'Abort': [
-        'Annulla'
-      ],
-      'Start withdrawal': [
-        'Ritira contante'
-      ],
-      'Withdraw Money into a Taler wallet': [
-        'Ritira contante nel portafoglio Taler'
-      ],
-      'Amount to withdraw': [
-        'Somma da ritirare'
-      ],
-      'Please login!': [
-        'Accedi!'
-      ],
-      'Login': [
-        'Accedi'
-      ],
-      'Register to the euFin bank!': [
-        'Apri un conto in banca euFin!'
-      ],
-      'Registration form': [
-        'Registrazione'
-      ],
-      'Register': [
-        'Registrati'
-      ],
-      'Date': [
-        ''
-      ],
-      'Amount': [
-        'Somma'
-      ],
-      'Counterpart': [
-        'Controparte'
-      ],
-      'Subject': [
-        'Causale'
-      ],
-      'Username or account label \'%1$s\' not found.  Won\'t login.': [
-        'L\'utente \'%1$s\' non esiste.  Login impossibile'
-      ],
-      'Wrong credentials given.': [
-        'Credenziali invalide.'
-      ],
-      'Account information could not be retrieved.': [
-        'Impossibile ricevere le informazioni relative al conto.'
-      ],
-      'Close wire transfer': [
-        'Chiudi il bonifico'
-      ],
-      'Close Taler withdrawal': [
-        'Chiudi il ritiro Taler'
-      ],
-      'Bank account balance:': [
-        'Bilancio:'
-      ],
-      'Latest transactions:': [
-        'Ultime transazioni:'
-      ],
-      'Transfer money manually': [
-        'Effettua un bonifico'
-      ],
-      'List of public accounts was not found.': [
-        'Lista conti pubblici non trovata.'
-      ],
-      'List of public accounts could not be retrieved.': [
-        'Lista conti pubblici non pervenuta.'
-      ],
-      'History of public accounts': [
-        'Storico dei conti pubblici'
-      ],
-      'Page has a problem: logged in but backend state is lost.': [
-        'Stato inconsistente: accesso utente effettuato ma stato con server perso.'
-      ],
-      'Welcome to the euFin bank!': [
-        'Benvenuti in banca euFin!'
-      ],
-      '': {
-        'domain': 'messages',
-        'plural_forms': 'nplurals=2; plural=(n != 1);',
-        'lang': 'it'
-      }
-    }
-  }
+strings["it"] = {
+  domain: "messages",
+  locale_data: {
+    messages: {
+      days: [""],
+      hours: [""],
+      minutes: [""],
+      seconds: [""],
+      Clear: ["Cancella"],
+      Logout: [""],
+      "Demo Bank": ["Banca 'demo'"],
+      "Go back": ["Indietro"],
+      "Wire transfer": ["Bonifico"],
+      "Transfer money to another account of this bank:": [
+        "Trasferisci fondi a un altro conto di questa banca:",
+      ],
+      "Want to try the raw payto://-format?": [
+        "Prova il trasferimento tramite il formato Payto!",
+      ],
+      "Transfer money via the Payto system:": [
+        "Effettua un bonifico tramite il sistema Payto:",
+      ],
+      "payto address": ["indirizzo Payto"],
+      Confirm: ["Conferma"],
+      "Confirm Withdrawal": ["Conferma il ritiro"],
+      "Waiting the bank to create the operaion...": [
+        "La banca sta creando l'operazione...",
+      ],
+      "This withdrawal was aborted!": ["Questo ritiro è stato annullato!"],
+      "Withdraw to a Taler Wallet": ["Ritira contante nel portafoglio Taler"],
+      "You can use this QR code to withdraw to your mobile wallet:": [
+        "Usa questo codice QR per ritirare contante nel tuo wallet:",
+      ],
+      "this link": ["questo link"],
+      Abort: ["Annulla"],
+      "Start withdrawal": ["Ritira contante"],
+      "Withdraw Money into a Taler wallet": [
+        "Ritira contante nel portafoglio Taler",
+      ],
+      "Amount to withdraw": ["Somma da ritirare"],
+      "Please login!": ["Accedi!"],
+      Login: ["Accedi"],
+      "Register to the euFin bank!": ["Apri un conto in banca euFin!"],
+      "Registration form": ["Registrazione"],
+      Register: ["Registrati"],
+      Date: [""],
+      Amount: ["Somma"],
+      Counterpart: ["Controparte"],
+      Subject: ["Causale"],
+      "Username or account label '%1$s' not found.  Won't login.": [
+        "L'utente '%1$s' non esiste.  Login impossibile",
+      ],
+      "Wrong credentials given.": ["Credenziali invalide."],
+      "Account information could not be retrieved.": [
+        "Impossibile ricevere le informazioni relative al conto.",
+      ],
+      "Close wire transfer": ["Chiudi il bonifico"],
+      "Close Taler withdrawal": ["Chiudi il ritiro Taler"],
+      "Bank account balance:": ["Bilancio:"],
+      "Latest transactions:": ["Ultime transazioni:"],
+      "Transfer money manually": ["Effettua un bonifico"],
+      "List of public accounts was not found.": [
+        "Lista conti pubblici non trovata.",
+      ],
+      "List of public accounts could not be retrieved.": [
+        "Lista conti pubblici non pervenuta.",
+      ],
+      "History of public accounts": ["Storico dei conti pubblici"],
+      "Page has a problem: logged in but backend state is lost.": [
+        "Stato inconsistente: accesso utente effettuato ma stato con server perso.",
+      ],
+      "Welcome to the euFin bank!": ["Benvenuti in banca euFin!"],
+      "": {
+        domain: "messages",
+        plural_forms: "nplurals=2; plural=(n != 1);",
+        lang: "it",
+      },
+    },
+  },
 };
-
diff --git a/packages/demobank-ui/src/index.html b/packages/demobank-ui/src/index.html
index 3df1ceb5c..a2154429b 100644
--- a/packages/demobank-ui/src/index.html
+++ b/packages/demobank-ui/src/index.html
@@ -16,14 +16,20 @@
  @author Sebastian Javier Marchano
 -->
 <!DOCTYPE html>
-<html lang="en" class="has-aside-left has-aside-mobile-transition has-navbar-fixed-top has-aside-expanded">
+<html
+  lang="en"
+  class="has-aside-left has-aside-mobile-transition has-navbar-fixed-top has-aside-expanded"
+>
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <meta name="mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
 
-    <link rel="icon" href="data:;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAAAAAAAAD///////////////////////////////////////////////////////////////////////////////////////////////////7//v38//78/P/+/fz//vz7///+/v/+/f3//vz7///+/v/+/fz//v38///////////////////////+/v3///7+/////////////////////////////////////////////////////////v3//v79///////+/v3///////r28v/ct5//06SG/9Gffv/Xqo7/7N/V/9e2nf/bsJb/6uDW/9Sskf/euKH/+/j2///////+/v3//////+3azv+/eE3/2rWd/9Kkhv/Vr5T/48i2/8J+VP/Qn3//3ryn/795Tf/WrpP/2LCW/8B6T//w4Nb///////Pn4P+/d0v/9u3n/+7d0v/EhV7//v///+HDr//fxLD/zph2/+TJt//8/Pv/woBX//Lm3f/y5dz/v3hN//bu6f/JjGn/4sW0///////Df1j/8OLZ//v6+P+/elH/+vj1//jy7f+/elL//////+zYzP/Eg13//////967p//MlHT/wn5X///////v4Nb/yY1s///////jw7H/06KG////////////z5t9/+fNvf//////x4pn//Pp4v/8+vn/w39X/8WEX///////5s/A/9CbfP//////27Oc/9y2n////////////9itlf/gu6f//////86Vdf/r2Mz//////8SCXP/Df1j//////+7d0v/KkG7//////+HBrf/VpYr////////////RnoH/5sq6///////Ii2n/8ubf//39/P/Cf1j/xohk/+bNvv//////wn5W//Tq4//58/D/wHxV//7+/f/59fH/v3xU//39/P/w4Nf/xIFb///////hw7H/yo9t/+/f1f/AeU3/+/n2/+nSxP/FhmD//////9qzm//Upon/4MSx/96+qf//////xINc/+3bz//48e3/v3hN//Pn3///////6M+//752S//gw6//06aK/8J+VP/kzLr/zZd1/8OCWv/q18r/17KZ/9Ooi//fv6r/v3dK/+vWyP///////v39///////27un/1aeK/9Opjv/m1cf/1KCC/9a0nP/n08T/0Jx8/82YdP/QnHz/16yR//jx7P///////v39///////+/f3///7+///////+//7//v7+///////+/v7//v/+/////////////////////////v7//v79///////////////////+/v/+/Pv//v39///+/v/+/Pv///7+//7+/f/+/Pv//v39//79/P/+/Pv///7+////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==" />
+    <link
+      rel="icon"
+      href="data:;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAAAAAAAAD///////////////////////////////////////////////////////////////////////////////////////////////////7//v38//78/P/+/fz//vz7///+/v/+/f3//vz7///+/v/+/fz//v38///////////////////////+/v3///7+/////////////////////////////////////////////////////////v3//v79///////+/v3///////r28v/ct5//06SG/9Gffv/Xqo7/7N/V/9e2nf/bsJb/6uDW/9Sskf/euKH/+/j2///////+/v3//////+3azv+/eE3/2rWd/9Kkhv/Vr5T/48i2/8J+VP/Qn3//3ryn/795Tf/WrpP/2LCW/8B6T//w4Nb///////Pn4P+/d0v/9u3n/+7d0v/EhV7//v///+HDr//fxLD/zph2/+TJt//8/Pv/woBX//Lm3f/y5dz/v3hN//bu6f/JjGn/4sW0///////Df1j/8OLZ//v6+P+/elH/+vj1//jy7f+/elL//////+zYzP/Eg13//////967p//MlHT/wn5X///////v4Nb/yY1s///////jw7H/06KG////////////z5t9/+fNvf//////x4pn//Pp4v/8+vn/w39X/8WEX///////5s/A/9CbfP//////27Oc/9y2n////////////9itlf/gu6f//////86Vdf/r2Mz//////8SCXP/Df1j//////+7d0v/KkG7//////+HBrf/VpYr////////////RnoH/5sq6///////Ii2n/8ubf//39/P/Cf1j/xohk/+bNvv//////wn5W//Tq4//58/D/wHxV//7+/f/59fH/v3xU//39/P/w4Nf/xIFb///////hw7H/yo9t/+/f1f/AeU3/+/n2/+nSxP/FhmD//////9qzm//Upon/4MSx/96+qf//////xINc/+3bz//48e3/v3hN//Pn3///////6M+//752S//gw6//06aK/8J+VP/kzLr/zZd1/8OCWv/q18r/17KZ/9Ooi//fv6r/v3dK/+vWyP///////v39///////27un/1aeK/9Opjv/m1cf/1KCC/9a0nP/n08T/0Jx8/82YdP/QnHz/16yR//jx7P///////v39///////+/f3///7+///////+//7//v7+///////+/v7//v/+/////////////////////////v7//v79///////////////////+/v/+/Pv//v39///+/v/+/Pv///7+//7+/f/+/Pv//v39//79/P/+/Pv///7+////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="
+    />
     <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
   </head>
 
diff --git a/packages/demobank-ui/src/manifest.json b/packages/demobank-ui/src/manifest.json
index feca12a0e..8790b10c9 100644
--- a/packages/demobank-ui/src/manifest.json
+++ b/packages/demobank-ui/src/manifest.json
@@ -18,4 +18,4 @@
       "sizes": "512x512"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/demobank-ui/src/pages/profile/index.stories.tsx b/packages/demobank-ui/src/pages/profile/index.stories.tsx
index 15fd7c7e5..7ea06ee98 100644
--- a/packages/demobank-ui/src/pages/profile/index.stories.tsx
+++ b/packages/demobank-ui/src/pages/profile/index.stories.tsx
@@ -15,24 +15,22 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
-import { h } from 'preact';
-import Profile from './index';
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
+import { h } from "preact";
+import Profile from "./index";
 
 export default {
-  title: 'Profile/View',
+  title: "Profile/View",
   component: Profile,
   argTypes: {
-    onSelect: { action: 'onSelect' },
+    onSelect: { action: "onSelect" },
   },
 };
 
 export const Empty = (a: any) => <Profile {...a} />;
 Empty.args = {
-  instances: []
-}
-
+  instances: [],
+};
diff --git a/packages/demobank-ui/src/scss/_custom-calendar.scss b/packages/demobank-ui/src/scss/_custom-calendar.scss
index e0334b62d..463cd88d3 100644
--- a/packages/demobank-ui/src/scss/_custom-calendar.scss
+++ b/packages/demobank-ui/src/scss/_custom-calendar.scss
@@ -135,9 +135,9 @@
       text-align: center;
 
       // there's probably a better way to do this, but wanted to try out CSS grid
-      grid-template-columns: calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(
-          100% / 7
-        ) calc(100% / 7) calc(100% / 7) calc(100% / 7);
+      grid-template-columns:
+        calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7)
+        calc(100% / 7) calc(100% / 7) calc(100% / 7);
 
       span {
         color: var(--secondary-text-color-dark);
@@ -151,9 +151,9 @@
       width: 100%;
       display: grid;
       text-align: center;
-      grid-template-columns: calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(
-          100% / 7
-        ) calc(100% / 7) calc(100% / 7) calc(100% / 7);
+      grid-template-columns:
+        calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7)
+        calc(100% / 7) calc(100% / 7) calc(100% / 7);
 
       span {
         color: var(--primary-text-color-dark);
diff --git a/packages/demobank-ui/src/scss/bank.scss b/packages/demobank-ui/src/scss/bank.scss
index b524cfe29..55ac21588 100644
--- a/packages/demobank-ui/src/scss/bank.scss
+++ b/packages/demobank-ui/src/scss/bank.scss
@@ -1,5 +1,5 @@
 .navcontainer:not(.default-navcontainer) {
-    margin-bottom: 0 !important;
+  margin-bottom: 0 !important;
 }
 
 .abort-button {
@@ -17,8 +17,8 @@ div.pages-list {
 
 .login-div,
 .register-div {
-    display: block;
-    text-align: center;
+  display: block;
+  text-align: center;
 }
 
 a.page-number {
@@ -42,55 +42,55 @@ input[type="number"]::-webkit-inner-spin-button {
 
 /* This CSS code styles the tab */
 .tab {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 .logout {
-    float: right;
-    border: 20px;
-    margin-right: 15px;
-    margin-top: 15px;
+  float: right;
+  border: 20px;
+  margin-right: 15px;
+  margin-top: 15px;
 }
 
 .tab button {
-    background-color: lightgray;
-    color: black;
-    float: left;
-    border: none;
-    outline: none;
-    cursor: pointer;
-    padding: 18px 19px;
-    border: 2px solid #c1c1c1;
-    transition: 0.5s;
-    font-weight: bold;
+  background-color: lightgray;
+  color: black;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 18px 19px;
+  border: 2px solid #c1c1c1;
+  transition: 0.5s;
+  font-weight: bold;
 }
 
 .tab button:hover {
-    background-color: yellow;
-    border: 2px solid #c1c1c1;
-    color: black;
+  background-color: yellow;
+  border: 2px solid #c1c1c1;
+  color: black;
 }
 
 .tab button.active {
-    background-color: orange;
-    border: 2px solid #c1c1c1;
-    color: black;
-    font-weight: bold;
+  background-color: orange;
+  border: 2px solid #c1c1c1;
+  color: black;
+  font-weight: bold;
 }
 
 .tabcontent {
-    display: none;
-    padding: 8px 16px;
-    border: 2px solid #c1c1c1;
-    width: max-content;
+  display: none;
+  padding: 8px 16px;
+  border: 2px solid #c1c1c1;
+  width: max-content;
 }
 
 .tabcontent.active {
-    display: block;
+  display: block;
 }
 
 input[type="number"] {
-    -moz-appearance: textfield;
+  -moz-appearance: textfield;
 }
 
 #transfer-fields {
@@ -115,16 +115,16 @@ input[type="number"] {
 }
 
 input {
-    background-color: inherit;
+  background-color: inherit;
 }
 
 .large-amount {
-    font-weight: bold;
-    font-size: x-large;
+  font-weight: bold;
+  font-size: x-large;
 }
 
 .currency {
-    font-style: oblique;
+  font-style: oblique;
 }
 
 /*
@@ -154,111 +154,108 @@ input {
 
 .register-form > .pure-form,
 .login-form > .pure-form {
-    background: #4a4a4a;
-    color: #ffffff;
-    display: inline-block;
-    text-align: left;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 16px 16px;
-    border-radius: 8px;
-    width: max-content;
-    .formFieldLabel {
-        margin: 2px 2px;
-    }
-    input[type="text"],
-    input[type="password"] {
-        border: none;
-        border-radius: 4px;
-        background: #6a6a6a;
-        color: #fefefe;
-        box-shadow: none;
-    }
-    input[placeholder="Password"][type="password"] {
-        margin-bottom: 8px;
-    }
-    .btn-register,
-    .btn-login {
-        float: left;
-    }
-    .btn-cancel {
-        float: right;
-    }
-    h2 {
-        margin-top: 0;
-        margin-bottom: 10px;
-    }
+  background: #4a4a4a;
+  color: #ffffff;
+  display: inline-block;
+  text-align: left;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 16px 16px;
+  border-radius: 8px;
+  width: max-content;
+  .formFieldLabel {
+    margin: 2px 2px;
+  }
+  input[type="text"],
+  input[type="password"] {
+    border: none;
+    border-radius: 4px;
+    background: #6a6a6a;
+    color: #fefefe;
+    box-shadow: none;
+  }
+  input[placeholder="Password"][type="password"] {
+    margin-bottom: 8px;
+  }
+  .btn-register,
+  .btn-login {
+    float: left;
+  }
+  .btn-cancel {
+    float: right;
+  }
+  h2 {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
 }
 
-
 .challenge-div {
-    display: block;
-    text-align: center;
+  display: block;
+  text-align: center;
 }
 
 .challenge-form > .pure-form {
-    background: #4a4a4a;
-    color: #ffffff;
-    display: inline-block;
-    text-align: left;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 16px 16px;
-    border-radius: 8px;
-    width: max-content;
-    .formFieldLabel {
-        margin: 2px 2px;
-    }
-    input[type="text"] {
-        border: none;
-        border-radius: 4px;
-        background: #6a6a6a;
-        color: #fefefe;
-        box-shadow: none;
-    }
-    .btn-confirm {
-        float: left;
-    }
-    .btn-cancel {
-        float: right;
-    }
-    h2 {
-        margin-top: 0;
-        margin-bottom: 10px;
-    }
+  background: #4a4a4a;
+  color: #ffffff;
+  display: inline-block;
+  text-align: left;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 16px 16px;
+  border-radius: 8px;
+  width: max-content;
+  .formFieldLabel {
+    margin: 2px 2px;
+  }
+  input[type="text"] {
+    border: none;
+    border-radius: 4px;
+    background: #6a6a6a;
+    color: #fefefe;
+    box-shadow: none;
+  }
+  .btn-confirm {
+    float: left;
+  }
+  .btn-cancel {
+    float: right;
+  }
+  h2 {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
 }
 
-
 .wire-transfer-form > .pure-form,
 .payto-form > .pure-form,
 .reserve-form > .pure-form {
-    background: #4a4a4a;
-    color: #ffffff;
-    display: inline-block;
-    text-align: left;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 16px 16px;
-    border-radius: 8px;
-    width: max-content;
-    .formFieldLabel {
-        margin: 2px 2px;
-    }
-    input[type="text"] {
-        border: none;
-        border-radius: 4px;
-        background: #6a6a6a;
-        color: #fefefe;
-        box-shadow: none;
-    }
+  background: #4a4a4a;
+  color: #ffffff;
+  display: inline-block;
+  text-align: left;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 16px 16px;
+  border-radius: 8px;
+  width: max-content;
+  .formFieldLabel {
+    margin: 2px 2px;
+  }
+  input[type="text"] {
+    border: none;
+    border-radius: 4px;
+    background: #6a6a6a;
+    color: #fefefe;
+    box-shadow: none;
+  }
 }
 
-
 html {
-    background: #ffffff;
-    color: #2a2a2a;
+  background: #ffffff;
+  color: #2a2a2a;
 }
 
 .hint {
-    scale: 0.7;
+  scale: 0.7;
 }
diff --git a/packages/demobank-ui/src/scss/colors-bank.scss b/packages/demobank-ui/src/scss/colors-bank.scss
index c34610948..e11bbe203 100644
--- a/packages/demobank-ui/src/scss/colors-bank.scss
+++ b/packages/demobank-ui/src/scss/colors-bank.scss
@@ -28,4 +28,4 @@ nav span:hover,
 
 nav a.navbtn.langbtn:focus {
   background-color: #df3d3d;
-}
\ No newline at end of file
+}
diff --git a/packages/demobank-ui/src/scss/fonts/nunito.css b/packages/demobank-ui/src/scss/fonts/nunito.css
index ab30db36b..8d45df9a1 100644
--- a/packages/demobank-ui/src/scss/fonts/nunito.css
+++ b/packages/demobank-ui/src/scss/fonts/nunito.css
@@ -15,8 +15,8 @@
  */
 
 @font-face {
-  font-family: 'Nunito';
+  font-family: "Nunito";
   font-style: normal;
   font-weight: 400;
-  src: url(./XRXV3I6Li01BKofINeaE.ttf) format('truetype');
+  src: url(./XRXV3I6Li01BKofINeaE.ttf) format("truetype");
 }
diff --git a/packages/demobank-ui/src/scss/libs/_all.scss b/packages/demobank-ui/src/scss/libs/_all.scss
index 08bd76cd1..d33f8acc4 100644
--- a/packages/demobank-ui/src/scss/libs/_all.scss
+++ b/packages/demobank-ui/src/scss/libs/_all.scss
@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
- /**
+/**
  *
  * @author Sebastian Javier Marchano (sebasjm)
  */
diff --git a/packages/demobank-ui/src/scss/pure.scss b/packages/demobank-ui/src/scss/pure.scss
index 83fcadce7..af98eb293 100644
--- a/packages/demobank-ui/src/scss/pure.scss
+++ b/packages/demobank-ui/src/scss/pure.scss
@@ -18,7 +18,7 @@ Copyright (c) Nicolas Gallagher and Jonathan Neal
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
- html {
+html {
   line-height: 1.15; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
@@ -62,7 +62,7 @@ h1 {
 
 hr {
   -webkit-box-sizing: content-box;
-          box-sizing: content-box; /* 1 */
+  box-sizing: content-box; /* 1 */
   height: 0; /* 1 */
   overflow: visible; /* 2 */
 }
@@ -97,7 +97,7 @@ abbr[title] {
   border-bottom: none; /* 1 */
   text-decoration: underline; /* 2 */
   -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted; /* 2 */
+  text-decoration: underline dotted; /* 2 */
 }
 
 /**
@@ -186,7 +186,8 @@ textarea {
  */
 
 button,
-input { /* 1 */
+input {
+  /* 1 */
   overflow: visible;
 }
 
@@ -196,7 +197,8 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
+  /* 1 */
   text-transform: none;
 }
 
@@ -251,7 +253,7 @@ fieldset {
 
 legend {
   -webkit-box-sizing: border-box;
-          box-sizing: border-box; /* 1 */
+  box-sizing: border-box; /* 1 */
   color: inherit; /* 2 */
   display: table; /* 1 */
   max-width: 100%; /* 1 */
@@ -283,7 +285,7 @@ textarea {
 [type="checkbox"],
 [type="radio"] {
   -webkit-box-sizing: border-box;
-          box-sizing: border-box; /* 1 */
+  box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }
 
@@ -373,7 +375,7 @@ template {
  */
 
 html {
-    font-family: sans-serif;
+  font-family: sans-serif;
 }
 
 /**
@@ -382,7 +384,7 @@ html {
 
 .hidden,
 [hidden] {
-    display: none !important;
+  display: none !important;
 }
 
 /**
@@ -390,18 +392,18 @@ html {
  * aspect ratio.
  */
 .pure-img {
-    max-width: 100%;
-    height: auto;
-    display: block;
+  max-width: 100%;
+  height: auto;
+  display: block;
 }
 
 /*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/
 
 .pure-g {
-    letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
-    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
+  letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
+  text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
 
-    /*
+  /*
     Sets the font stack to fonts known to work properly with the above letter
     and word spacings. See: https://github.com/pure-css/pure/issues/41/
 
@@ -417,27 +419,27 @@ html {
 
     * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
     */
-    font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
+  font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
 
-    /* Use flexbox when possible to avoid `letter-spacing` side-effects. */
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-        -ms-flex-flow: row wrap;
-            flex-flow: row wrap;
+  /* Use flexbox when possible to avoid `letter-spacing` side-effects. */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
 
-    /* Prevents distributing space between rows */
-    -ms-flex-line-pack: start;
-        align-content: flex-start;
+  /* Prevents distributing space between rows */
+  -ms-flex-line-pack: start;
+  align-content: flex-start;
 }
 
 /* IE10 display: -ms-flexbox (and display: flex in IE 11) does not work inside a table; fall back to block and rely on font hack */
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-	table .pure-g {
-		display: block;
-	}
+  table .pure-g {
+    display: block;
+  }
 }
 
 /* Opera as of 12 on Windows needs word-spacing.
@@ -446,23 +448,23 @@ html {
 */
 .opera-only :-o-prefocus,
 .pure-g {
-    word-spacing: -0.43em;
+  word-spacing: -0.43em;
 }
 
 .pure-u {
-    display: inline-block;
-    letter-spacing: normal;
-    word-spacing: normal;
-    vertical-align: top;
-    text-rendering: auto;
+  display: inline-block;
+  letter-spacing: normal;
+  word-spacing: normal;
+  vertical-align: top;
+  text-rendering: auto;
 }
 
 /*
 Resets the font family back to the OS/browser's default sans-serif font,
 this the same font stack that Normalize.css sets for the `body`.
 */
-.pure-g [class *= "pure-u"] {
-    font-family: sans-serif;
+.pure-g [class*="pure-u"] {
+  font-family: sans-serif;
 }
 
 .pure-u-1,
@@ -511,210 +513,223 @@ this the same font stack that Normalize.css sets for the `body`.
 .pure-u-22-24,
 .pure-u-23-24,
 .pure-u-24-24 {
-    display: inline-block;
-    letter-spacing: normal;
-    word-spacing: normal;
-    vertical-align: top;
-    text-rendering: auto;
+  display: inline-block;
+  letter-spacing: normal;
+  word-spacing: normal;
+  vertical-align: top;
+  text-rendering: auto;
 }
 
 .pure-u-1-24 {
-    width: 4.1667%;
+  width: 4.1667%;
 }
 
 .pure-u-1-12,
 .pure-u-2-24 {
-    width: 8.3333%;
+  width: 8.3333%;
 }
 
 .pure-u-1-8,
 .pure-u-3-24 {
-    width: 12.5000%;
+  width: 12.5%;
 }
 
 .pure-u-1-6,
 .pure-u-4-24 {
-    width: 16.6667%;
+  width: 16.6667%;
 }
 
 .pure-u-1-5 {
-    width: 20%;
+  width: 20%;
 }
 
 .pure-u-5-24 {
-    width: 20.8333%;
+  width: 20.8333%;
 }
 
 .pure-u-1-4,
 .pure-u-6-24 {
-    width: 25%;
+  width: 25%;
 }
 
 .pure-u-7-24 {
-    width: 29.1667%;
+  width: 29.1667%;
 }
 
 .pure-u-1-3,
 .pure-u-8-24 {
-    width: 33.3333%;
+  width: 33.3333%;
 }
 
 .pure-u-3-8,
 .pure-u-9-24 {
-    width: 37.5000%;
+  width: 37.5%;
 }
 
 .pure-u-2-5 {
-    width: 40%;
+  width: 40%;
 }
 
 .pure-u-5-12,
 .pure-u-10-24 {
-    width: 41.6667%;
+  width: 41.6667%;
 }
 
 .pure-u-11-24 {
-    width: 45.8333%;
+  width: 45.8333%;
 }
 
 .pure-u-1-2,
 .pure-u-12-24 {
-    width: 50%;
+  width: 50%;
 }
 
 .pure-u-13-24 {
-    width: 54.1667%;
+  width: 54.1667%;
 }
 
 .pure-u-7-12,
 .pure-u-14-24 {
-    width: 58.3333%;
+  width: 58.3333%;
 }
 
 .pure-u-3-5 {
-    width: 60%;
+  width: 60%;
 }
 
 .pure-u-5-8,
 .pure-u-15-24 {
-    width: 62.5000%;
+  width: 62.5%;
 }
 
 .pure-u-2-3,
 .pure-u-16-24 {
-    width: 66.6667%;
+  width: 66.6667%;
 }
 
 .pure-u-17-24 {
-    width: 70.8333%;
+  width: 70.8333%;
 }
 
 .pure-u-3-4,
 .pure-u-18-24 {
-    width: 75%;
+  width: 75%;
 }
 
 .pure-u-19-24 {
-    width: 79.1667%;
+  width: 79.1667%;
 }
 
 .pure-u-4-5 {
-    width: 80%;
+  width: 80%;
 }
 
 .pure-u-5-6,
 .pure-u-20-24 {
-    width: 83.3333%;
+  width: 83.3333%;
 }
 
 .pure-u-7-8,
 .pure-u-21-24 {
-    width: 87.5000%;
+  width: 87.5%;
 }
 
 .pure-u-11-12,
 .pure-u-22-24 {
-    width: 91.6667%;
+  width: 91.6667%;
 }
 
 .pure-u-23-24 {
-    width: 95.8333%;
+  width: 95.8333%;
 }
 
 .pure-u-1,
 .pure-u-1-1,
 .pure-u-5-5,
 .pure-u-24-24 {
-    width: 100%;
+  width: 100%;
 }
 .pure-button {
-    /* Structure */
-    display: inline-block;
-    line-height: normal;
-    white-space: nowrap;
-    vertical-align: middle;
-    text-align: center;
-    cursor: pointer;
-    -webkit-user-drag: none;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
+  /* Structure */
+  display: inline-block;
+  line-height: normal;
+  white-space: nowrap;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+  -webkit-user-drag: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 /* Firefox: Get rid of the inner focus border */
 .pure-button::-moz-focus-inner {
-    padding: 0;
-    border: 0;
+  padding: 0;
+  border: 0;
 }
 
 /* Inherit .pure-g styles */
 .pure-button-group {
-    letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
-    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
+  letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
+  text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
 }
 
 .opera-only :-o-prefocus,
 .pure-button-group {
-    word-spacing: -0.43em;
+  word-spacing: -0.43em;
 }
 
 .pure-button-group .pure-button {
-    letter-spacing: normal;
-    word-spacing: normal;
-    vertical-align: top;
-    text-rendering: auto;
+  letter-spacing: normal;
+  word-spacing: normal;
+  vertical-align: top;
+  text-rendering: auto;
 }
 
 /*csslint outline-none:false*/
 
 .pure-button {
-    font-family: inherit;
-    font-size: 100%;
-    padding: 0.5em 1em;
-    color: rgba(0, 0, 0, 0.80);
-    border: none rgba(0, 0, 0, 0);
-    background-color: #E6E6E6;
-    text-decoration: none;
-    border-radius: 2px;
+  font-family: inherit;
+  font-size: 100%;
+  padding: 0.5em 1em;
+  color: rgba(0, 0, 0, 0.8);
+  border: none rgba(0, 0, 0, 0);
+  background-color: #e6e6e6;
+  text-decoration: none;
+  border-radius: 2px;
 }
 
 .pure-button-hover,
 .pure-button:hover,
 .pure-button:focus {
-    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
-    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
+  background-image: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    from(transparent),
+    color-stop(40%, rgba(0, 0, 0, 0.05)),
+    to(rgba(0, 0, 0, 0.1))
+  );
+  background-image: linear-gradient(
+    transparent,
+    rgba(0, 0, 0, 0.05) 40%,
+    rgba(0, 0, 0, 0.1)
+  );
 }
 .pure-button:focus {
-    outline: 0;
+  outline: 0;
 }
 .pure-button-active,
 .pure-button:active {
-    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
-            box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
-    border-color: #000;
+  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset,
+    0 0 6px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset,
+    0 0 6px rgba(0, 0, 0, 0.2) inset;
+  border-color: #000;
 }
 
 .pure-button[disabled],
@@ -722,43 +737,42 @@ this the same font stack that Normalize.css sets for the `body`.
 .pure-button-disabled:hover,
 .pure-button-disabled:focus,
 .pure-button-disabled:active {
-    border: none;
-    background-image: none;
-    opacity: 0.40;
-    cursor: not-allowed;
-    -webkit-box-shadow: none;
-            box-shadow: none;
-    pointer-events: none;
+  border: none;
+  background-image: none;
+  opacity: 0.4;
+  cursor: not-allowed;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  pointer-events: none;
 }
 
 .pure-button-hidden {
-    display: none;
+  display: none;
 }
 
 .pure-button-primary,
 .pure-button-selected,
 a.pure-button-primary,
 a.pure-button-selected {
-    background-color: rgb(0, 120, 231);
-    color: #fff;
+  background-color: rgb(0, 120, 231);
+  color: #fff;
 }
 
 /* Button Groups */
 .pure-button-group .pure-button {
-    margin: 0;
-    border-radius: 0;
-    border-right: 1px solid rgba(0, 0, 0, 0.2);
-
+  margin: 0;
+  border-radius: 0;
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
 }
 
 .pure-button-group .pure-button:first-child {
-    border-top-left-radius: 2px;
-    border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
 }
 .pure-button-group .pure-button:last-child {
-    border-top-right-radius: 2px;
-    border-bottom-right-radius: 2px;
-    border-right: none;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+  border-right: none;
 }
 
 /*csslint box-model:false*/
@@ -785,15 +799,15 @@ so we can ignore the csslint warning.
 .pure-form input[type="color"],
 .pure-form select,
 .pure-form textarea {
-    padding: 0.5em 0.6em;
-    display: inline-block;
-    border: 1px solid #ccc;
-    -webkit-box-shadow: inset 0 1px 3px #ddd;
-            box-shadow: inset 0 1px 3px #ddd;
-    border-radius: 4px;
-    vertical-align: middle;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
+  padding: 0.5em 0.6em;
+  display: inline-block;
+  border: 1px solid #ccc;
+  -webkit-box-shadow: inset 0 1px 3px #ddd;
+  box-shadow: inset 0 1px 3px #ddd;
+  border-radius: 4px;
+  vertical-align: middle;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 /*
@@ -801,24 +815,22 @@ Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
 since IE8 won't execute CSS that contains a CSS3 selector.
 */
 .pure-form input:not([type]) {
-    padding: 0.5em 0.6em;
-    display: inline-block;
-    border: 1px solid #ccc;
-    -webkit-box-shadow: inset 0 1px 3px #ddd;
-            box-shadow: inset 0 1px 3px #ddd;
-    border-radius: 4px;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
+  padding: 0.5em 0.6em;
+  display: inline-block;
+  border: 1px solid #ccc;
+  -webkit-box-shadow: inset 0 1px 3px #ddd;
+  box-shadow: inset 0 1px 3px #ddd;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-
 /* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
 /* May be able to remove this tweak as color inputs become more standardized across browsers. */
 .pure-form input[type="color"] {
-    padding: 0.2em 0.5em;
+  padding: 0.2em 0.5em;
 }
 
-
 .pure-form input[type="text"]:focus,
 .pure-form input[type="password"]:focus,
 .pure-form input[type="email"]:focus,
@@ -835,8 +847,8 @@ since IE8 won't execute CSS that contains a CSS3 selector.
 .pure-form input[type="color"]:focus,
 .pure-form select:focus,
 .pure-form textarea:focus {
-    outline: 0;
-    border-color: #129FEA;
+  outline: 0;
+  border-color: #129fea;
 }
 
 /*
@@ -844,20 +856,20 @@ Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
 since IE8 won't execute CSS that contains a CSS3 selector.
 */
 .pure-form input:not([type]):focus {
-    outline: 0;
-    border-color: #129FEA;
+  outline: 0;
+  border-color: #129fea;
 }
 
 .pure-form input[type="file"]:focus,
 .pure-form input[type="radio"]:focus,
 .pure-form input[type="checkbox"]:focus {
-    outline: thin solid #129FEA;
-    outline: 1px auto #129FEA;
+  outline: thin solid #129fea;
+  outline: 1px auto #129fea;
 }
 .pure-form .pure-checkbox,
 .pure-form .pure-radio {
-    margin: 0.5em 0;
-    display: block;
+  margin: 0.5em 0;
+  display: block;
 }
 
 .pure-form input[type="text"][disabled],
@@ -876,9 +888,9 @@ since IE8 won't execute CSS that contains a CSS3 selector.
 .pure-form input[type="color"][disabled],
 .pure-form select[disabled],
 .pure-form textarea[disabled] {
-    cursor: not-allowed;
-    background-color: #eaeded;
-    color: #cad2d3;
+  cursor: not-allowed;
+  background-color: #eaeded;
+  color: #cad2d3;
 }
 
 /*
@@ -886,53 +898,53 @@ Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
 since IE8 won't execute CSS that contains a CSS3 selector.
 */
 .pure-form input:not([type])[disabled] {
-    cursor: not-allowed;
-    background-color: #eaeded;
-    color: #cad2d3;
+  cursor: not-allowed;
+  background-color: #eaeded;
+  color: #cad2d3;
 }
 .pure-form input[readonly],
 .pure-form select[readonly],
 .pure-form textarea[readonly] {
-    background-color: #eee; /* menu hover bg color */
-    color: #777; /* menu text color */
-    border-color: #ccc;
+  background-color: #eee; /* menu hover bg color */
+  color: #777; /* menu text color */
+  border-color: #ccc;
 }
 
 .pure-form input:focus:invalid,
 .pure-form textarea:focus:invalid,
 .pure-form select:focus:invalid {
-    color: #b94a48;
-    border-color: #e9322d;
+  color: #b94a48;
+  border-color: #e9322d;
 }
 .pure-form input[type="file"]:focus:invalid:focus,
 .pure-form input[type="radio"]:focus:invalid:focus,
 .pure-form input[type="checkbox"]:focus:invalid:focus {
-    outline-color: #e9322d;
+  outline-color: #e9322d;
 }
 .pure-form select {
-    /* Normalizes the height; padding is not sufficient. */
-    height: 2.25em;
-    border: 1px solid #ccc;
-    background-color: white;
+  /* Normalizes the height; padding is not sufficient. */
+  height: 2.25em;
+  border: 1px solid #ccc;
+  background-color: white;
 }
 .pure-form select[multiple] {
-    height: auto;
+  height: auto;
 }
 .pure-form label {
-    margin: 0.5em 0 0.2em;
+  margin: 0.5em 0 0.2em;
 }
 .pure-form fieldset {
-    margin: 0;
-    padding: 0.35em 0 0.75em;
-    border: 0;
+  margin: 0;
+  padding: 0.35em 0 0.75em;
+  border: 0;
 }
 .pure-form legend {
-    display: block;
-    width: 100%;
-    padding: 0.3em 0;
-    margin-bottom: 0.3em;
-    color: #333;
-    border-bottom: 1px solid #e5e5e5;
+  display: block;
+  width: 100%;
+  padding: 0.3em 0;
+  margin-bottom: 0.3em;
+  color: #333;
+  border-bottom: 1px solid #e5e5e5;
 }
 
 .pure-form-stacked input[type="text"],
@@ -953,8 +965,8 @@ since IE8 won't execute CSS that contains a CSS3 selector.
 .pure-form-stacked select,
 .pure-form-stacked label,
 .pure-form-stacked textarea {
-    display: block;
-    margin: 0.25em 0;
+  display: block;
+  margin: 0.25em 0;
 }
 
 /*
@@ -962,384 +974,384 @@ Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
 since IE8 won't execute CSS that contains a CSS3 selector.
 */
 .pure-form-stacked input:not([type]) {
-    display: block;
-    margin: 0.25em 0;
+  display: block;
+  margin: 0.25em 0;
 }
 .pure-form-aligned input,
 .pure-form-aligned textarea,
 .pure-form-aligned select,
 .pure-form-message-inline {
-    display: inline-block;
-    vertical-align: middle;
+  display: inline-block;
+  vertical-align: middle;
 }
 .pure-form-aligned textarea {
-    vertical-align: top;
+  vertical-align: top;
 }
 
 /* Aligned Forms */
 .pure-form-aligned .pure-control-group {
-    margin-bottom: 0.5em;
+  margin-bottom: 0.5em;
 }
 .pure-form-aligned .pure-control-group label {
-    text-align: right;
-    display: inline-block;
-    vertical-align: middle;
-    width: 10em;
-    margin: 0 1em 0 0;
+  text-align: right;
+  display: inline-block;
+  vertical-align: middle;
+  width: 10em;
+  margin: 0 1em 0 0;
 }
 .pure-form-aligned .pure-controls {
-    margin: 1.5em 0 0 11em;
+  margin: 1.5em 0 0 11em;
 }
 
 /* Rounded Inputs */
 .pure-form input.pure-input-rounded,
 .pure-form .pure-input-rounded {
-    border-radius: 2em;
-    padding: 0.5em 1em;
+  border-radius: 2em;
+  padding: 0.5em 1em;
 }
 
 /* Grouped Inputs */
 .pure-form .pure-group fieldset {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 .pure-form .pure-group input,
 .pure-form .pure-group textarea {
-    display: block;
-    padding: 10px;
-    margin: 0 0 -1px;
-    border-radius: 0;
-    position: relative;
-    top: -1px;
+  display: block;
+  padding: 10px;
+  margin: 0 0 -1px;
+  border-radius: 0;
+  position: relative;
+  top: -1px;
 }
 .pure-form .pure-group input:focus,
 .pure-form .pure-group textarea:focus {
-    z-index: 3;
+  z-index: 3;
 }
 .pure-form .pure-group input:first-child,
 .pure-form .pure-group textarea:first-child {
-    top: 1px;
-    border-radius: 4px 4px 0 0;
-    margin: 0;
+  top: 1px;
+  border-radius: 4px 4px 0 0;
+  margin: 0;
 }
 .pure-form .pure-group input:first-child:last-child,
 .pure-form .pure-group textarea:first-child:last-child {
-    top: 1px;
-    border-radius: 4px;
-    margin: 0;
+  top: 1px;
+  border-radius: 4px;
+  margin: 0;
 }
 .pure-form .pure-group input:last-child,
 .pure-form .pure-group textarea:last-child {
-    top: -2px;
-    border-radius: 0 0 4px 4px;
-    margin: 0;
+  top: -2px;
+  border-radius: 0 0 4px 4px;
+  margin: 0;
 }
 .pure-form .pure-group button {
-    margin: 0.35em 0;
+  margin: 0.35em 0;
 }
 
 .pure-form .pure-input-1 {
-    width: 100%;
+  width: 100%;
 }
 .pure-form .pure-input-3-4 {
-    width: 75%;
+  width: 75%;
 }
 .pure-form .pure-input-2-3 {
-    width: 66%;
+  width: 66%;
 }
 .pure-form .pure-input-1-2 {
-    width: 50%;
+  width: 50%;
 }
 .pure-form .pure-input-1-3 {
-    width: 33%;
+  width: 33%;
 }
 .pure-form .pure-input-1-4 {
-    width: 25%;
+  width: 25%;
 }
 
 /* Inline help for forms */
 .pure-form-message-inline {
-    display: inline-block;
-    padding-left: 0.3em;
-    color: #666;
-    vertical-align: middle;
-    font-size: 0.875em;
+  display: inline-block;
+  padding-left: 0.3em;
+  color: #666;
+  vertical-align: middle;
+  font-size: 0.875em;
 }
 
 /* Block help for forms */
 .pure-form-message {
+  display: block;
+  color: #666;
+  font-size: 0.875em;
+}
+
+@media only screen and (max-width: 480px) {
+  .pure-form button[type="submit"] {
+    margin: 0.7em 0 0;
+  }
+
+  .pure-form input:not([type]),
+  .pure-form input[type="text"],
+  .pure-form input[type="password"],
+  .pure-form input[type="email"],
+  .pure-form input[type="url"],
+  .pure-form input[type="date"],
+  .pure-form input[type="month"],
+  .pure-form input[type="time"],
+  .pure-form input[type="datetime"],
+  .pure-form input[type="datetime-local"],
+  .pure-form input[type="week"],
+  .pure-form input[type="number"],
+  .pure-form input[type="search"],
+  .pure-form input[type="tel"],
+  .pure-form input[type="color"],
+  .pure-form label {
+    margin-bottom: 0.3em;
     display: block;
-    color: #666;
-    font-size: 0.875em;
-}
-
-@media only screen and (max-width : 480px) {
-    .pure-form button[type="submit"] {
-        margin: 0.7em 0 0;
-    }
-
-    .pure-form input:not([type]),
-    .pure-form input[type="text"],
-    .pure-form input[type="password"],
-    .pure-form input[type="email"],
-    .pure-form input[type="url"],
-    .pure-form input[type="date"],
-    .pure-form input[type="month"],
-    .pure-form input[type="time"],
-    .pure-form input[type="datetime"],
-    .pure-form input[type="datetime-local"],
-    .pure-form input[type="week"],
-    .pure-form input[type="number"],
-    .pure-form input[type="search"],
-    .pure-form input[type="tel"],
-    .pure-form input[type="color"],
-    .pure-form label {
-        margin-bottom: 0.3em;
-        display: block;
-    }
-
-    .pure-group input:not([type]),
-    .pure-group input[type="text"],
-    .pure-group input[type="password"],
-    .pure-group input[type="email"],
-    .pure-group input[type="url"],
-    .pure-group input[type="date"],
-    .pure-group input[type="month"],
-    .pure-group input[type="time"],
-    .pure-group input[type="datetime"],
-    .pure-group input[type="datetime-local"],
-    .pure-group input[type="week"],
-    .pure-group input[type="number"],
-    .pure-group input[type="search"],
-    .pure-group input[type="tel"],
-    .pure-group input[type="color"] {
-        margin-bottom: 0;
-    }
-
-    .pure-form-aligned .pure-control-group label {
-        margin-bottom: 0.3em;
-        text-align: left;
-        display: block;
-        width: 100%;
-    }
-
-    .pure-form-aligned .pure-controls {
-        margin: 1.5em 0 0 0;
-    }
-
-    .pure-form-message-inline,
-    .pure-form-message {
-        display: block;
-        font-size: 0.75em;
-        /* Increased bottom padding to make it group with its related input element. */
-        padding: 0.2em 0 0.8em;
-    }
+  }
+
+  .pure-group input:not([type]),
+  .pure-group input[type="text"],
+  .pure-group input[type="password"],
+  .pure-group input[type="email"],
+  .pure-group input[type="url"],
+  .pure-group input[type="date"],
+  .pure-group input[type="month"],
+  .pure-group input[type="time"],
+  .pure-group input[type="datetime"],
+  .pure-group input[type="datetime-local"],
+  .pure-group input[type="week"],
+  .pure-group input[type="number"],
+  .pure-group input[type="search"],
+  .pure-group input[type="tel"],
+  .pure-group input[type="color"] {
+    margin-bottom: 0;
+  }
+
+  .pure-form-aligned .pure-control-group label {
+    margin-bottom: 0.3em;
+    text-align: left;
+    display: block;
+    width: 100%;
+  }
+
+  .pure-form-aligned .pure-controls {
+    margin: 1.5em 0 0 0;
+  }
+
+  .pure-form-message-inline,
+  .pure-form-message {
+    display: block;
+    font-size: 0.75em;
+    /* Increased bottom padding to make it group with its related input element. */
+    padding: 0.2em 0 0.8em;
+  }
 }
 
 /*csslint adjoining-classes: false, box-model:false*/
 .pure-menu {
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .pure-menu-fixed {
-    position: fixed;
-    left: 0;
-    top: 0;
-    z-index: 3;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 3;
 }
 
 .pure-menu-list,
 .pure-menu-item {
-    position: relative;
+  position: relative;
 }
 
 .pure-menu-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 .pure-menu-item {
-    padding: 0;
-    margin: 0;
-    height: 100%;
+  padding: 0;
+  margin: 0;
+  height: 100%;
 }
 
 .pure-menu-link,
 .pure-menu-heading {
-    display: block;
-    text-decoration: none;
-    white-space: nowrap;
+  display: block;
+  text-decoration: none;
+  white-space: nowrap;
 }
 
 /* HORIZONTAL MENU */
 .pure-menu-horizontal {
-    width: 100%;
-    white-space: nowrap;
+  width: 100%;
+  white-space: nowrap;
 }
 
 .pure-menu-horizontal .pure-menu-list {
-    display: inline-block;
+  display: inline-block;
 }
 
 /* Initial menus should be inline-block so that they are horizontal */
 .pure-menu-horizontal .pure-menu-item,
 .pure-menu-horizontal .pure-menu-heading,
 .pure-menu-horizontal .pure-menu-separator {
-    display: inline-block;
-    vertical-align: middle;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 /* Submenus should still be display: block; */
 .pure-menu-item .pure-menu-item {
-    display: block;
+  display: block;
 }
 
 .pure-menu-children {
-    display: none;
-    position: absolute;
-    left: 100%;
-    top: 0;
-    margin: 0;
-    padding: 0;
-    z-index: 3;
+  display: none;
+  position: absolute;
+  left: 100%;
+  top: 0;
+  margin: 0;
+  padding: 0;
+  z-index: 3;
 }
 
 .pure-menu-horizontal .pure-menu-children {
-    left: 0;
-    top: auto;
-    width: inherit;
+  left: 0;
+  top: auto;
+  width: inherit;
 }
 
 .pure-menu-allow-hover:hover > .pure-menu-children,
 .pure-menu-active > .pure-menu-children {
-    display: block;
-    position: absolute;
+  display: block;
+  position: absolute;
 }
 
 /* Vertical Menus - show the dropdown arrow */
 .pure-menu-has-children > .pure-menu-link:after {
-    padding-left: 0.5em;
-    content: "\25B8";
-    font-size: small;
+  padding-left: 0.5em;
+  content: "\25B8";
+  font-size: small;
 }
 
 /* Horizontal Menus - show the dropdown arrow */
 .pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {
-    content: "\25BE";
+  content: "\25BE";
 }
 
 /* scrollable menus */
 .pure-menu-scrollable {
-    overflow-y: scroll;
-    overflow-x: hidden;
+  overflow-y: scroll;
+  overflow-x: hidden;
 }
 
 .pure-menu-scrollable .pure-menu-list {
-    display: block;
+  display: block;
 }
 
 .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {
-    display: inline-block;
+  display: inline-block;
 }
 
 .pure-menu-horizontal.pure-menu-scrollable {
-    white-space: nowrap;
-    overflow-y: hidden;
-    overflow-x: auto;
-    /* a little extra padding for this style to allow for scrollbars */
-    padding: .5em 0;
+  white-space: nowrap;
+  overflow-y: hidden;
+  overflow-x: auto;
+  /* a little extra padding for this style to allow for scrollbars */
+  padding: 0.5em 0;
 }
 
 /* misc default styling */
 
 .pure-menu-separator,
 .pure-menu-horizontal .pure-menu-children .pure-menu-separator {
-    background-color: #ccc;
-    height: 1px;
-    margin: .3em 0;
+  background-color: #ccc;
+  height: 1px;
+  margin: 0.3em 0;
 }
 
 .pure-menu-horizontal .pure-menu-separator {
-    width: 1px;
-    height: 1.3em;
-    margin: 0 .3em ;
+  width: 1px;
+  height: 1.3em;
+  margin: 0 0.3em;
 }
 
 /* Need to reset the separator since submenu is vertical */
 .pure-menu-horizontal .pure-menu-children .pure-menu-separator {
-    display: block;
-    width: auto;
+  display: block;
+  width: auto;
 }
 
 .pure-menu-heading {
-    text-transform: uppercase;
-    color: #565d64;
+  text-transform: uppercase;
+  color: #565d64;
 }
 
 .pure-menu-link {
-    color: #777;
+  color: #777;
 }
 
 .pure-menu-children {
-    background-color: #fff;
+  background-color: #fff;
 }
 
 .pure-menu-link,
 .pure-menu-heading {
-    padding: .5em 1em;
+  padding: 0.5em 1em;
 }
 
 .pure-menu-disabled {
-    opacity: .5;
+  opacity: 0.5;
 }
 
 .pure-menu-disabled .pure-menu-link:hover {
-    background-color: transparent;
-    cursor: default;
+  background-color: transparent;
+  cursor: default;
 }
 
 .pure-menu-active > .pure-menu-link,
 .pure-menu-link:hover,
 .pure-menu-link:focus {
-    background-color: #eee;
+  background-color: #eee;
 }
 
 .pure-menu-selected > .pure-menu-link,
 .pure-menu-selected > .pure-menu-link:visited {
-    color: #000;
+  color: #000;
 }
 
 .pure-table {
-    /* Remove spacing between table cells (from Normalize.css) */
-    border-collapse: collapse;
-    border-spacing: 0;
-    empty-cells: show;
-    border: 1px solid #cbcbcb;
+  /* Remove spacing between table cells (from Normalize.css) */
+  border-collapse: collapse;
+  border-spacing: 0;
+  empty-cells: show;
+  border: 1px solid #cbcbcb;
 }
 
 .pure-table caption {
-    color: #000;
-    font: italic 85%/1 arial, sans-serif;
-    padding: 1em 0;
-    text-align: center;
+  color: #000;
+  font: italic 85%/1 arial, sans-serif;
+  padding: 1em 0;
+  text-align: center;
 }
 
 .pure-table td,
 .pure-table th {
-    border-left: 1px solid #cbcbcb;/*  inner column border */
-    border-width: 0 0 0 1px;
-    font-size: inherit;
-    margin: 0;
-    overflow: visible; /*to make ths where the title is really long work*/
-    padding: 0.5em 1em; /* cell padding */
+  border-left: 1px solid #cbcbcb; /*  inner column border */
+  border-width: 0 0 0 1px;
+  font-size: inherit;
+  margin: 0;
+  overflow: visible; /*to make ths where the title is really long work*/
+  padding: 0.5em 1em; /* cell padding */
 }
 
 .pure-table thead {
-    background-color: #e0e0e0;
-    color: #000;
-    text-align: left;
-    vertical-align: bottom;
+  background-color: #e0e0e0;
+  color: #000;
+  text-align: left;
+  vertical-align: bottom;
 }
 
 /*
@@ -1348,33 +1360,32 @@ striping:
    odd  - #f2f2f2 (light gray)
 */
 .pure-table td {
-    background-color: transparent;
+  background-color: transparent;
 }
 .pure-table-odd td {
-    background-color: #f2f2f2;
+  background-color: #f2f2f2;
 }
 
 /* nth-child selector for modern browsers */
 .pure-table-striped tr:nth-child(2n-1) td {
-    background-color: #f2f2f2;
+  background-color: #f2f2f2;
 }
 
 /* BORDERED TABLES */
 .pure-table-bordered td {
-    border-bottom: 1px solid #cbcbcb;
+  border-bottom: 1px solid #cbcbcb;
 }
 .pure-table-bordered tbody > tr:last-child > td {
-    border-bottom-width: 0;
+  border-bottom-width: 0;
 }
 
-
 /* HORIZONTAL BORDERED TABLES */
 
 .pure-table-horizontal td,
 .pure-table-horizontal th {
-    border-width: 0 0 1px 0;
-    border-bottom: 1px solid #cbcbcb;
+  border-width: 0 0 1px 0;
+  border-bottom: 1px solid #cbcbcb;
 }
 .pure-table-horizontal tbody > tr:last-child > td {
-    border-bottom-width: 0;
-}
\ No newline at end of file
+  border-bottom-width: 0;
+}