1 files changed, 75 insertions, 19 deletions

diff --git a/packages/backend/src/styled/index.tsx b/packages/backend/src/styled/index.tsx
index 2323d0d..55803b9 100644
--- a/packages/backend/src/styled/index.tsx
+++ b/packages/backend/src/styled/index.tsx
@@ -1,3 +1,23 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
 import { styled } from '@linaria/react'
 
 export const QRPlaceholder = styled.div`
@@ -26,37 +46,38 @@ export const Page = styled.div`
   flex-direction: column;
   justify-content: space-between;
   min-height: 100vh;
-  text-align: center;
-
+  align-items: center;
+  
   a:link,
   a:visited,
   a:hover,
   a:active {
     color: black;
   }
-  & > section > p {
-    margin-top: 30px;
-    margin-bottom: 30px;
+  
+  section {
+    text-align: center;
+    width: 600px;
+    /* margin: auto; */
+    /* margin-top: 0px; */
+    margin-bottom: auto;
+    /* overflow: auto; */
+  }
+  section:not(:first-of-type) {
+    margin-top: 2em;
   }
   & > header {
-    flex-direction: column;
-    justify-content: space-between;
     display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    text-align: center;
   }
-
-  table > tr > td {
-    text-align: left;
-  }
-  table > tr > td:first-child {
-    text-align: right;
-    font-weight: bold;
-    padding-right: 20px;
-  }
-
   & > footer {
-    flex-direction: row;
-    justify-content: center;
     display: flex;    
+    flex-direction: row;
+    justify-content: space-around;
+    width: 100%;
+    margin-bottom: 0px;
   }
 `
 export const Center = styled.div`
@@ -120,3 +141,38 @@ export const WalletLink = styled.a<{ upperCased?: boolean }>`
   border-color: #000;
 `;
 
+export const InfoBox = styled.div`
+  border-radius: 0.25em;
+  flex-direction: column;
+  /* margin: 0.5em; */
+  padding: 1em;
+  /* width: 100%; */
+  border:solid 1px #b8daff;
+  background-color:#cce5ff;
+  color:#004085;
+`
+
+export const TableExpanded = styled.dl`
+  text-align: left;
+  dt {
+    font-weight: bold;
+    margin-top: 1em;
+  }
+  dd {
+    margin-inline-start: 0px;
+  }
+`
+
+export const TableSimple = styled.dl`
+  text-align: left;
+  dt {
+    font-weight: bold;
+    display: inline-block;
+    width:30%;
+  }
+  dd {
+    margin-inline-start: 0px;
+    display: inline-block;
+    width:70%;
+  }
+`
\ No newline at end of file