style corrections

10 files changed, 225 insertions, 105 deletions

diff --git a/packages/backend/.gitignore b/packages/backend/.gitignore
index db8559a..a6ee22d 100644
--- a/packages/backend/.gitignore
+++ b/packages/backend/.gitignore
@@ -6,3 +6,4 @@
 /coverage
 /dist
 /.rollup.cache
+/.linaria-cache
diff --git a/packages/backend/src/components/Footer.tsx b/packages/backend/src/components/Footer.tsx
index f585025..5f29578 100644
--- a/packages/backend/src/components/Footer.tsx
+++ b/packages/backend/src/components/Footer.tsx
@@ -19,11 +19,14 @@
 * @author Sebastian Javier Marchano (sebasjm)
 */
 import { h, VNode } from 'preact';
+import { FooterBar } from '../styled';
 
 export function Footer(): VNode {
-  return <div class="talerbar">
-    <p>You can learn more about GNU Taler on our <a href="https://taler.net/">website</a>.<br />
-      Copyright &copy; 2014&mdash;2021 Taler Systems SA</p>
-  </div>
+  return <FooterBar>
+    <p>
+      <a href="https://taler.net/">Learn more about GNU Taler on our website.</a>
+      <p>Copyright &copy; 2014&mdash;2021 Taler Systems SA</p>
+    </p>
+  </FooterBar>
 }
 
diff --git a/packages/backend/src/css/style.css b/packages/backend/src/css/style.css
index e03b632..f24dbaa 100644
--- a/packages/backend/src/css/style.css
+++ b/packages/backend/src/css/style.css
@@ -50,7 +50,6 @@ body {
 @media (min-width: 500px) {
   .content {
     padding-bottom: 2em;
-    margin-right: 1em;
     overflow-y: auto;
   }
 }
diff --git a/packages/backend/src/index.tsx b/packages/backend/src/index.tsx
index 0babb26..275f633 100644
--- a/packages/backend/src/index.tsx
+++ b/packages/backend/src/index.tsx
@@ -25,6 +25,7 @@ import { TranslationProvider } from './context/translation';
 // import { Page as RequestPayment } from './RequestPayment';
 import "./css/pure-min.css"
 import { Route, Router } from 'preact-router';
+import { Footer } from './components/Footer';
 // import OfferTip from './pages/OfferTip';
 // import {OfferRefund} from './pages/OfferRefund';
 // import DepletedTip from './pages/DepletedTip';
@@ -43,13 +44,6 @@ export default function Application(): VNode {
   );
 }
 
-function Footer() {
-  return <div class="talerbar">
-    <p>You can learn more about GNU Taler on our <a href="https://taler.net/">website</a>.<br />
-      Copyright &copy; 2014&mdash;2021 Taler Systems SA</p>
-  </div>
-}
-
 function ApplicationStatusRoutes(): VNode {
   return <Fragment>
     <Router>
diff --git a/packages/backend/src/pages/DepletedTip.tsx b/packages/backend/src/pages/DepletedTip.tsx
index 8345484..756b08d 100644
--- a/packages/backend/src/pages/DepletedTip.tsx
+++ b/packages/backend/src/pages/DepletedTip.tsx
@@ -23,21 +23,22 @@ import { render as renderToString } from 'preact-render-to-string';
 import { Footer } from '../components/Footer';
 import "../css/pure-min.css";
 import "../css/style.css";
+import { Page } from '../styled';
 
 function Head(): VNode {
   return <title>Status of your tip</title>
 }
 
 export function DepletedTip(): VNode {
-  return <Fragment>
-    <section id="main" class="content">
-      <h1 style={{ textAlign: 'center' }}>Tip already collected</h1>
-      <div style={{ textAlign: 'center' }}>
+  return <Page>
+    <section>
+      <h1>Tip already collected</h1>
+      <div>
         You have already collected this tip.
       </div>
     </section>
     <Footer />
-  </Fragment>
+  </Page>
 }
 
 export function mount(): void {
diff --git a/packages/backend/src/pages/OfferRefund.tsx b/packages/backend/src/pages/OfferRefund.tsx
index 47bbb8e..14c9372 100644
--- a/packages/backend/src/pages/OfferRefund.tsx
+++ b/packages/backend/src/pages/OfferRefund.tsx
@@ -25,6 +25,7 @@ import { Footer } from '../components/Footer';
 import { QR } from '../components/QR';
 import "../css/pure-min.css";
 import "../css/style.css";
+import { Page, QRPlaceholder, WalletLink } from '../styled';
 
 /**
  * This page creates a refund offer QR code
@@ -101,27 +102,24 @@ export function OfferRefund({ refundURI, qr_code, order_status_url }: Props): VN
 
     setTimeout(check, delayMs);
   })
-  return <Fragment>
-    <section id="main" class="content">
-      <h1 style={{ textAlign: 'center' }}>Collect Taler refund</h1>
-      <div style={{ textAlign: 'center' }} class="taler-installed-hide">
-        <p>
-          Scan this QR code with your Taler mobile wallet:
-        </p>
-        <div class="qr" style={{width:'100mm'}} dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_refund_qrcode_svg }}}` }} />
-        <p>
-          <a class="pure-button pure-button-active success" href={refundURI ? refundURI : `{{ taler_refund_uri }}`}>
-            Or open your Taller wallet
-          </a>
-        </p>
-        <p>
-          <a href="https://wallet.taler.net/">Don't have a Taler wallet yet? Install it!</a>
-        </p>
-      </div>
-      <hr />
+  return <Page>
+    <section>
+      <h1>Collect Taler refund</h1>
+      <p>
+        Scan this QR code with your Taler mobile wallet:
+      </p>
+      <QRPlaceholder dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_refund_qrcode_svg }}}` }} />
+      <p>
+        <WalletLink href={refundURI ? refundURI : `{{ taler_refund_uri }}`}>
+          Or open your Taller wallet
+        </WalletLink>
+      </p>
+      <p>
+        <a href="https://wallet.taler.net/">Don't have a Taler wallet yet? Install it!</a>
+      </p>
     </section>
     <Footer />
-  </Fragment>
+  </Page>
 }
 
 export function mount(): void {
diff --git a/packages/backend/src/pages/OfferTip.tsx b/packages/backend/src/pages/OfferTip.tsx
index 186449a..ace1059 100644
--- a/packages/backend/src/pages/OfferTip.tsx
+++ b/packages/backend/src/pages/OfferTip.tsx
@@ -25,6 +25,7 @@ import { Footer } from '../components/Footer';
 import { QR } from '../components/QR';
 import "../css/pure-min.css";
 import "../css/style.css";
+import { Page, QRPlaceholder, WalletLink } from '../styled';
 import { ShowOrderDetails } from './ShowOrderDetails';
 
 
@@ -96,27 +97,24 @@ export function OfferTip({ tipURI, qr_code, tip_status_url }: Props): VNode {
 
     setTimeout(check, delayMs);
   })
-  return <Fragment>
-    <section id="main" class="content">
-      <h1 style={{ textAlign: 'center' }}>Collect Taler tip</h1>
-      <div style={{ textAlign: 'center' }} class="taler-installed-hide">
-        <p>
-          Scan this QR code with your Taler mobile wallet:
-        </p>
-        <div class="qr" style={{width:'100mm'}} dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_tip_qrcode_svg }}}` }} />
-        <p>
-          <a class="pure-button pure-button-active success" href={tipURI ? tipURI : `{{ taler_tip_uri }}`}>
-            Or open your Taller wallet
-          </a>
-        </p>
-        <p>
-          <a href="https://wallet.taler.net/">Don't have a Taler wallet yet? Install it!</a>
-        </p>
-      </div>
-      <hr />
+  return <Page>
+    <section>
+      <h1 >Collect Taler tip</h1>
+      <p>
+        Scan this QR code with your Taler mobile wallet:
+      </p>
+      <QRPlaceholder dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_tip_qrcode_svg }}}` }} />
+      <p>
+        <WalletLink href={tipURI ? tipURI : `{{ taler_tip_uri }}`}>
+          Or open your Taller wallet
+        </WalletLink>
+      </p>
+      <p>
+        <a href="https://wallet.taler.net/">Don't have a Taler wallet yet? Install it!</a>
+      </p>
     </section>
     <Footer />
-  </Fragment>
+  </Page>
 }
 
 export function mount(): void {
diff --git a/packages/backend/src/pages/RequestPayment.tsx b/packages/backend/src/pages/RequestPayment.tsx
index c43c6db..8dd22d1 100644
--- a/packages/backend/src/pages/RequestPayment.tsx
+++ b/packages/backend/src/pages/RequestPayment.tsx
@@ -25,6 +25,7 @@ import { Footer } from '../components/Footer';
 import "../css/pure-min.css";
 import "../css/style.css";
 import { QR } from '../components/QR';
+import { Page, QRPlaceholder, WalletLink } from '../styled';
 
 
 /**
@@ -128,27 +129,24 @@ export function RequestPayment({ payURI, qr_code, order_status_url }: Props): VN
     }
     setTimeout(check, 500);
   })
-  return <Fragment>
-    <section id="main" class="content">
-      <h1 style={{ textAlign: 'center' }}>Pay with Taler</h1>
-      <div style={{ textAlign: 'center' }} class="taler-installed-hide">
-        <p>
-          Scan this QR code with your mobile wallet:
-        </p>
-        <div class="qr" style={{width:'100mm'}} dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_pay_qrcode_svg }}}` }} />
-        <p>
-          <a class="pure-button pure-button-active success" href={payURI ? payURI : `{{ taler_pay_uri }}`}>
-            Or open your Taller wallet
-          </a>
-        </p>
-        <p>
-          <a href="https://wallet.taler.net/">Don't have a Taler wallet yet? Install it!</a>
-        </p>
-      </div>
-      <hr />
+  return <Page>
+    <section>
+      <h1 >Pay with Taler</h1>
+      <p>
+        Scan this QR code with your mobile wallet:
+      </p>
+      <QRPlaceholder dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_pay_qrcode_svg }}}` }} />
+      <p>
+        <WalletLink href={payURI ? payURI : `{{ taler_pay_uri }}`}>
+          Or open your Taller wallet
+        </WalletLink>
+      </p>
+      <p>
+        <a href="https://wallet.taler.net/">Don't have a Taler wallet yet? Install it!</a>
+      </p>
     </section>
     <Footer />
-  </Fragment>
+  </Page>
 
 }
 
diff --git a/packages/backend/src/pages/ShowOrderDetails.tsx b/packages/backend/src/pages/ShowOrderDetails.tsx
index 4bde798..58f2831 100644
--- a/packages/backend/src/pages/ShowOrderDetails.tsx
+++ b/packages/backend/src/pages/ShowOrderDetails.tsx
@@ -21,9 +21,11 @@
 import { format } from 'date-fns';
 import { Fragment, h, render, VNode } from 'preact';
 import { render as renderToString } from 'preact-render-to-string';
+import { Footer } from '../components/Footer';
 import "../css/pure-min.css";
 import "../css/style.css";
 import { MerchantBackend } from '../declaration';
+import { Center, Page } from '../styled';
 
 /**
  * This page creates a payment request QR code
@@ -62,40 +64,44 @@ export function ShowOrderDetails({ order_summary, refund_amount, contract_terms
   const pay_deadline = contract_terms?.pay_deadline.t_ms === 'never' || contract_terms?.pay_deadline.t_ms === undefined ? undefined :
     format(new Date(contract_terms?.pay_deadline.t_ms), 'dd/MM/yyyy HH:mm:ss')
 
-  return <Fragment>
-    <h1>Order details</h1>
-
+  return <Page>
     <div>
-      This is the default status page for your order for <b>{order_summary ? order_summary : `{{ order_summary }}`}</b>.
-    </div>
-
+      <h1>Order details</h1>
+
+      <div>
+        This is the default status page for your order for <b>{order_summary ? order_summary : `{{ order_summary }}`}</b>.
+      </div>
+
+
+      <h2>Refund status</h2>
+      <div>
+        The merchant has granted you refunds on the purchase of <b>{refund_amount ? refund_amount : `{{ refund_amount }}`}</b>.
+      </div>
+
+      <h2>Full contract details</h2>
+
+      <Center>
+        <pre>
+          <table>
+            <tr>
+              <td>amount</td><td>{contract_terms?.amount || `{{ contract_terms.amount }}`}</td>
+            </tr>
+            <tr>
+              <td>summary</td><td>{contract_terms?.summary || `{{ contract_terms.summary }}`}</td>
+            </tr>
+            <tr>
+              <td>pay deadline</td><td>{pay_deadline || `{{ contract_terms.pay_deadline.t_ms }}`}</td>
+            </tr>
+            <tr>
+              <td>merchant name</td><td>{contract_terms?.merchant?.name || `{{ contract_terms.merchant.name }}`}</td>
+            </tr>
+          </table>
+        </pre>
+      </Center>
 
-    <h2>Refund status</h2>
-    <div>
-      The merchant has granted you refunds on the purchase of <b>{refund_amount ? refund_amount : `{{ refund_amount }}`}</b>.
     </div>
-
-    <h2>Full contract details</h2>
-
-    {/* <!-- FIXME #6459: expand the contract JSON in all its glory here --> */}
-    <pre>
-      <table>
-        <tr>
-          <td style={{fontWeight: 'bold'}}>amount</td><td>{contract_terms?.amount || `{{ contract_terms.amount }}`}</td>
-        </tr>
-        <tr>
-          <td style={{fontWeight: 'bold'}}>summary</td><td>{contract_terms?.summary || `{{ contract_terms.summary }}`}</td>
-        </tr>
-        <tr>
-          <td style={{fontWeight: 'bold'}}>pay deadline</td><td>{pay_deadline || `{{ contract_terms.pay_deadline.t_ms }}`}</td>
-        </tr>
-        <tr>
-          <td style={{fontWeight: 'bold'}}>merchant name</td><td>{contract_terms?.merchant?.name || `{{ contract_terms.merchant.name }}`}</td>
-        </tr>
-      </table>
-    </pre>
-
-  </Fragment>
+    <Footer />
+  </Page>
 
 }
 
diff --git a/packages/backend/src/styled/index.tsx b/packages/backend/src/styled/index.tsx
new file mode 100644
index 0000000..2323d0d
--- /dev/null
+++ b/packages/backend/src/styled/index.tsx
@@ -0,0 +1,122 @@
+import { styled } from '@linaria/react'
+
+export const QRPlaceholder = styled.div`
+  margin: auto;
+  text-align: center;
+  width: 340px; 
+`
+
+export const FooterBar = styled.footer`
+  text-align: center;
+  background-color: #033;
+  color: white;
+  padding: 1em;
+  overflow: auto;
+
+  & > p > a:link,
+  & > p > a:visited,
+  & > p > a:hover,
+  & > p > a:active {
+    color: white;
+  }
+`
+
+export const Page = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 100vh;
+  text-align: center;
+
+  a:link,
+  a:visited,
+  a:hover,
+  a:active {
+    color: black;
+  }
+  & > section > p {
+    margin-top: 30px;
+    margin-bottom: 30px;
+  }
+  & > header {
+    flex-direction: column;
+    justify-content: space-between;
+    display: flex;
+  }
+
+  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;    
+  }
+`
+export const Center = styled.div`
+  display: flex;
+  justify-content: center;
+`
+
+export const WalletLink = styled.a<{ upperCased?: boolean }>`
+  display: inline-block;
+  zoom: 1;
+  line-height: normal;
+  white-space: nowrap;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  text-transform: ${({ upperCased }) => upperCased ? 'uppercase' : 'none'};
+
+  font-family: inherit;
+  font-size: 100%;
+  padding: 0.5em 1em;
+  color: #444; /* rgba not supported (IE 8) */
+  color: rgba(0, 0, 0, 0.8); /* rgba supported */
+  border: 1px solid #999; /*IE 6/7/8*/
+  border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/
+  background-color: '#e6e6e6';
+  text-decoration: none;
+  border-radius: 2px;
+
+  :focus {
+    outline: 0;
+  }
+
+  &:disabled {
+    border: none;
+    background-image: none;
+    /* csslint ignore:start */
+    filter: alpha(opacity=40);
+    /* csslint ignore:end */
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  :hover {
+    filter: alpha(opacity=90);
+    background-image: linear-gradient(
+      transparent,
+      rgba(0, 0, 0, 0.05) 40%,
+      rgba(0, 0, 0, 0.1)
+    );
+  }
+
+  background-color: #e6e6e6;
+  border-radius: 4px;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  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;
+`;
+