4 files changed, 113 insertions, 57 deletions
diff --git a/extension/pages/confirm-contract.html b/extension/pages/confirm-contract.html
index 9959bb489..6b09ffeb1 100644
--- a/extension/pages/confirm-contract.html
+++ b/extension/pages/confirm-contract.html
@@ -7,7 +7,8 @@
     <script src="../lib/handlebars-v4.0.5.js"></script>
     <script src="../lib/commonHelpers.js"></script>
     <script src="confirm-contract.js"></script>
-    <link rel="stylesheet" type="text/css" href="../style/wallet.css"> 
+    <link rel="stylesheet" type="text/css" href="../style/page.css">
+    <link rel="stylesheet" type="text/css" href="../style/wallet.css">
 
     <script id="contract-template" type="text/x-handlebars-template">
       Hello, this is the wallet.  The merchant "{{merchant.name}}"
@@ -29,17 +30,28 @@
     <script id="error-template" type="text/x-handlebars-template">
       Payment was not successful: {{error}}
     </script>
-
-
   </head>
+
   <body>
-    <h1>Confirm Payment</h1>
+    <header>
+      <div id="logo"></div>
+      <h1>Payment Confirmation</h1>
+    </header>
+
+    <aside class="sidebar" id="left">
+    </aside>
+
+    <section id="main">
+
+      <article id="contract">
+        <div id="render-contract"></div>
+
+        <button id="confirm-pay">Confirm Payment</button>
+      </article>
 
-    <div id="render-contract"></div>
+      <article id="status"></article>
 
-    <button id="confirm-pay">Confirm Pay!</button>
+    </section>
 
-    <div id="status"></div>
-    
   </body>
 </html>
diff --git a/extension/pages/confirm-create-reserve.html b/extension/pages/confirm-create-reserve.html
index be718da7d..5464f637c 100644
--- a/extension/pages/confirm-create-reserve.html
+++ b/extension/pages/confirm-create-reserve.html
@@ -6,19 +6,38 @@
     <script src="../lib/URI.js"></script>
     <script src="../lib/polyfill-react.js"></script>
     <script src="confirm-create-reserve.js"></script>
-    <link rel="stylesheet" type="text/css" href="../style/wallet.css"> 
+    <link rel="stylesheet" type="text/css" href="../style/wallet.css">
   </head>
+
   <body>
-    <h1>Confirm Reserve Creation</h1>
-    Hello, this is the wallet.  A bank wants to create a reserve for <span id=show-amount>(loading...)</span>.
-    Please specify the base URL of the mint you want to use.
-    <p />
-    <div class='formish'>
-      <div class='form-row'>
-        <label for='mint-url'>Mint URL</label>
-        <input class='url' id='mint-url' type="text" value="http://mint.demo.taler.net/"></input>
-      </div>
-      <button id='confirm'>Confirm Reserve</button>
-    </div>
+
+    <header>
+      <div id="logo"></div>
+      <h1>Confirm Reserve Creation</h1>
+    </header>
+
+    <aside class="sidebar" id="left">
+    </aside>
+
+    <section id="main">
+
+      <article>
+        <p>
+          A bank wants to create a reserve for <span id="show-amount">(loading...)</span>.
+        </p>
+        <p>
+          Please specify the base URL of the mint you want to use.
+        </p>
+
+        <div class="formish">
+          <div class="form-row">
+            <label for="mint-url">Mint URL</label>
+            <input class="url" id="mint-url" type="text" value="http://mint.demo.taler.net/"></input>
+          </div>
+          <button id="confirm">Confirm Reserve</button>
+        </div>
+      </article>
+
+    </section>
   </body>
 </html>
diff --git a/extension/pages/confirm-create-reserve.js b/extension/pages/confirm-create-reserve.js
index 7c3a5a572..5c35121e3 100644
--- a/extension/pages/confirm-create-reserve.js
+++ b/extension/pages/confirm-create-reserve.js
@@ -1,36 +1,43 @@
 "use strict";
-var ConfirmCreateReserve;
-(function (ConfirmCreateReserve) {
-    let url = URI(document.location.href);
-    let query = URI.parseQuery(url.query());
-    function updateAmount() {
-        let showAmount = document.getElementById("show-amount");
-        console.log("Query is " + JSON.stringify(query));
-        let s = query.amount_str;
-        if (!s) {
-            document.body.innerHTML = "Oops, something went wrong.";
-            return;
-        }
-        showAmount.textContent = s;
-    }
-    function clone(obj) {
-        // This is faster than it looks ...
-        return JSON.parse(JSON.stringify(obj));
-    }
-    document.addEventListener("DOMContentLoaded", (e) => {
-        updateAmount();
-        document.getElementById("confirm").addEventListener("click", (e) => {
-            let d = clone(query);
-            d.mint = document.getElementById('mint-url').value;
-            chrome.runtime.sendMessage({ type: 'confirm-reserve', detail: d }, (resp) => {
-                if (resp.success === true) {
-                    document.location.href = resp.backlink;
-                }
-                else {
-                    document.body.innerHTML =
-                        React.createElement("div", null, "Oops, something went wrong." + ' ' + "The bank responded with HTTP status code $", resp.status, "." + ' ' + "Here is some more info:", React.createElement("pre", null, resp.text), "`");
-                }
-            });
-        });
+
+let url = URI(document.location.href);
+let query = URI.parseQuery(url.query());
+
+function updateAmount() {
+  let showAmount = document.getElementById("show-amount");
+  console.log("Query is " + JSON.stringify(query));
+  let s = query.amount_str;
+  if (!s) {
+    document.body.innerHTML = "Oops, something went wrong.";
+    return;
+  }
+  showAmount.textContent = s;
+}
+
+function clone(obj) {
+  // This is faster than it looks ...
+  return JSON.parse(JSON.stringify(obj));
+}
+
+document.addEventListener("DOMContentLoaded", (e) => {
+  updateAmount();
+
+  document.getElementById("confirm").addEventListener("click", (e) => {
+    let d = clone(query);
+    d.mint = document.getElementById('mint-url').value;
+    chrome.runtime.sendMessage({type:'confirm-reserve', detail: d}, (resp) => {
+      if (resp.success === true) {
+        document.location.href = resp.backlink;
+      } else {
+        document.body.innerHTML =
+          `Oops, something went wrong.
+           The bank responded with HTTP status code ${resp.status}.
+           Here is some more info:
+           <pre>${resp.text}</pre>`;
+      }
     });
-})(ConfirmCreateReserve || (ConfirmCreateReserve = {}));
+
+  });
+});
+
+
diff --git a/extension/pages/reserve-success.html b/extension/pages/reserve-success.html
index 81de9cb41..05871ca1f 100644
--- a/extension/pages/reserve-success.html
+++ b/extension/pages/reserve-success.html
@@ -3,10 +3,28 @@
 <html>
   <head>
     <title>Taler Wallet: Reserve Created</title>
-    <link rel="stylesheet" type="text/css" href="../style/wallet.css"> 
+    <link rel="stylesheet" type="text/css" href="../style/wallet.css">
   </head>
   <body>
-    <h1>Success!</h1>
-    The reserve was created successfully.
+
+    <header>
+      <div id="logo"></div>
+      <h1>Reserve Creation</h1>
+    </header>
+
+    <aside class="sidebar" id="left">
+    </aside>
+
+    <section id="main">
+
+      <article>
+        <h1>Success!</h1>
+
+        <p>The reserve was created successfully.</p>
+      </article>
+
+    </section>
+  </body>
+
   </body>
 </html>