fix some pixel and css classes and sync storybook

packages/taler-wallet-webextension/.storybook/preview.js

@@ -16,9 +16,6 @@
 
 import { setupI18n } from "@gnu-taler/taler-util"
 import { strings } from '../src/i18n/strings.ts'
-import '../static/style/pure.css'
-import '../static/style/popup.css'
-import '../static/style/wallet.css'
 
 const mockConfig = {
   backendURL: 'http://demo.taler.net',
@@ -52,5 +49,27 @@ export const decorators = [
     setupI18n(globals.locale, strings);
     return <Story />
   },
+  (Story, { kind }) => {
+    if (kind.startsWith('popup')) {
+      return <div class="popup-container">
+        <link key="1" rel="stylesheet" type="text/css" href="/style/pure.css" />
+        <link key="2" rel="stylesheet" type="text/css" href="/style/popup.css" />
+        <div style={{ padding: 8, width: 'calc(400px - 16px - 2px)', height: 'calc(320px - 34px - 16px - 2px)', border: 'black solid 1px' }}>
+          <Story />
+        </div>
+      </div>
+    }
+    if (kind.startsWith('wallet')) {
+      return <div class="wallet-container">
+        <link key="1" rel="stylesheet" type="text/css" href="/style/pure.css" />
+        <link key="2" rel="stylesheet" type="text/css" href="/style/wallet.css" />
+        <Story />
+      </div>
+    }
+    return <div>
+      <h1>this story is not under wallet or popup, check title property</h1>
+      <Story />
+    </div>
+  }
   //   (Story) => <ConfigContextProvider value={mockConfig}> <Story /> </ConfigContextProvider>
 ];

packages/taler-wallet-webextension/src/i18n/index.ts

@@ -1,24 +0,0 @@
-/*
- This file is part of TALER
- (C) 2016 GNUnet e.V.
-
- 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.
-
- 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
- TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
- */
-
-/**
- * Translation helpers for React components and template literals.
- */
-
-/**
- * Imports.
- */
-export { strings } from "./strings.js";

packages/taler-wallet-webextension/src/popup/Balance.tsx

@@ -143,7 +143,7 @@ export class BalancePage extends Component<any, any> {
     const wallet = this.balance;
     if (this.gotError) {
       return (
-        <div className="balance">
+        <div class="balance">
           <p>{i18n.str`Error: could not retrieve balance information.`}</p>
           <p>
             Click <PageLink pageName="welcome.html">here</PageLink> for help and
@@ -165,7 +165,7 @@ export class BalancePage extends Component<any, any> {
       );
     });
     return listing.length > 0 ? (
-      <div className="balance">{listing}</div>
+      <div class="balance">{listing}</div>
     ) : (
       <EmptyBalanceView />
     );

packages/taler-wallet-webextension/src/popup/History.stories.tsx

@@ -32,16 +32,6 @@ import { HistoryView as TestedComponent } from './History';
 export default {
   title: 'popup/transaction/list',
   component: TestedComponent,
-  decorators: [
-    (Story: any) => <div>
-      <link key="1" rel="stylesheet" type="text/css" href="/style/pure.css" />
-      <link key="2" rel="stylesheet" type="text/css" href="/style/popup.css" />
-      <link key="3" rel="stylesheet" type="text/css" href="/style/wallet.css" />
-      <div style={{ margin: "1em", width: 400, display: 'flex', padding: '0.5em', height: 'calc(320px - 34px)', border: 'black solid 1px' }}>
-        <Story />
-      </div>
-    </div>
-  ],
 };
 
 const commonTransaction = {

packages/taler-wallet-webextension/src/popup/History.tsx

@@ -42,7 +42,7 @@ export function HistoryPage(props: any): JSX.Element {
 }
 
 export function HistoryView({ list }: { list: Transaction[] }) {
-  return <div style={{ height: 'calc(320px - 34px - 2em)', overflow: 'auto', width: '100%' }}>
+  return <div style={{ height: 'calc(320px - 34px - 16px)', overflow: 'auto' }}>
     {list.map((tx, i) => (
       <TransactionItem key={i} tx={tx} />
     ))}

packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx

@@ -32,16 +32,6 @@ import { TransactionView as TestedComponent } from './Transaction';
 export default {
   title: 'popup/transaction/details',
   component: TestedComponent,
-  decorators: [
-    (Story: any) => <div>
-      <link key="1" rel="stylesheet" type="text/css" href="/style/pure.css" />
-      <link key="2" rel="stylesheet" type="text/css" href="/style/popup.css" />
-      <link key="3" rel="stylesheet" type="text/css" href="/style/wallet.css" />
-      <div style={{ margin: "1em", width: 400, display: 'flex', padding: '0.5em', height: 'calc(320px - 34px)', border: 'black solid 1px' }}>
-        <Story />
-      </div>
-    </div>
-  ],
 };
 
 const commonTransaction = {
@@ -76,7 +66,7 @@ const exampleData = {
       },
       orderId: '2021.167-03NPY6MCYMVGT',
       products: [],
-      summary: 'the summary',
+      summary: "Essay: Why the Devil's Advocate Doesn't Help Reach the Truth",
       fulfillmentMessage: '',
     },
     proposalId: '1EMJJH8EP1NX3XF7733NCYS2DBEJW4Q2KA5KEB37MCQJQ8Q5HMC0',

packages/taler-wallet-webextension/src/popup/Transaction.tsx

@@ -82,8 +82,8 @@ export function TransactionView({ transaction, onDelete, onBack }: WalletTransac
       Amounts.parseOrThrow(transaction.amountEffective),
     ).amount
     return (
-      <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }} >
+      <div style={{ display: 'flex', flexDirection: 'column' }} >
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 2em)', overflow: 'auto' }}>
+        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 16px)', overflow: 'auto' }}>
           <span style="flat: left; font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
           <span style="float: right; font-size:small; color:gray">
             From <b>{transaction.exchangeBaseUrl}</b>
@@ -107,8 +107,8 @@ export function TransactionView({ transaction, onDelete, onBack }: WalletTransac
     ).amount
 
     return (
-      <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }} >
+      <div style={{ display: 'flex', flexDirection: 'column' }} >
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 2em)', overflow: 'auto' }}>
+        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 16px)', overflow: 'auto' }}>
           <span style="flat: left; font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
           <span style="float: right; font-size:small; color:gray">
             To <b>{transaction.info.merchant.name}</b>
@@ -145,8 +145,8 @@ export function TransactionView({ transaction, onDelete, onBack }: WalletTransac
       Amounts.parseOrThrow(transaction.amountEffective),
     ).amount
     return (
-      <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }} >
+      <div style={{ display: 'flex', flexDirection: 'column' }} >
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 2em)', overflow: 'auto' }}>
+        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 16px)', overflow: 'auto' }}>
           <span style="flat: left; font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
           <span style="float: right; font-size:small; color:gray">
             To <b>{transaction.targetPaytoUri}</b>
@@ -165,8 +165,8 @@ export function TransactionView({ transaction, onDelete, onBack }: WalletTransac
       Amounts.parseOrThrow(transaction.amountEffective),
     ).amount
     return (
-      <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }} >
+      <div style={{ display: 'flex', flexDirection: 'column' }} >
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 2em)', overflow: 'auto' }}>
+        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 16px)', overflow: 'auto' }}>
           <span style="flat: left; font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
           <span style="float: right; font-size:small; color:gray">
             From <b>{transaction.exchangeBaseUrl}</b>
@@ -185,8 +185,8 @@ export function TransactionView({ transaction, onDelete, onBack }: WalletTransac
       Amounts.parseOrThrow(transaction.amountEffective),
     ).amount
     return (
-      <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }} >
+      <div style={{ display: 'flex', flexDirection: 'column' }} >
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 2em)', overflow: 'auto' }}>
+        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 16px)', overflow: 'auto' }}>
           <span style="flat: left; font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
           <span style="float: right; font-size:small; color:gray">
             From <b>{transaction.merchantBaseUrl}</b>
@@ -205,8 +205,8 @@ export function TransactionView({ transaction, onDelete, onBack }: WalletTransac
       Amounts.parseOrThrow(transaction.amountEffective),
     ).amount
     return (
-      <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }} >
+      <div style={{ display: 'flex', flexDirection: 'column' }} >
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 2em)', overflow: 'auto' }}>
+        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 16px)', overflow: 'auto' }}>
           <span style="flat: left; font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
           <span style="float: right; font-size:small; color:gray">
             From <b>{transaction.info.merchant.name}</b>

packages/taler-wallet-webextension/src/popup/popup.tsx

@@ -49,7 +49,7 @@ function Tab(props: TabProps): JSX.Element {
     cssClass = "active";
   }
   return (
-    <a href={props.target} className={cssClass}>
+    <a href={props.target} class={cssClass}>
       {props.children}
     </a>
   );
@@ -57,7 +57,7 @@ function Tab(props: TabProps): JSX.Element {
 
 export function WalletNavBar({ current }: { current?: string }) {
   return (
-    <div className="nav" id="header">
+    <div class="nav" id="header">
       <Tab target="/balance" current={current}>{i18n.str`Balance`}</Tab>
       <Tab target="/history" current={current}>{i18n.str`History`}</Tab>
       <Tab target="/settings" current={current}>{i18n.str`Settings`}</Tab>

packages/taler-wallet-webextension/src/popupEntryPoint.tsx

@@ -34,7 +34,7 @@ import { BalancePage } from "./popup/Balance";
 import Match from "preact-router/match";
 import Router, { route, Route } from "preact-router";
 import { useTalerActionURL } from "./hooks/useTalerActionURL";
-// import { Application } from "./Application";
+import { createHashHistory } from "history";
 
 function main(): void {
   try {
@@ -88,8 +88,8 @@ function Application() {
   return (
     <div>
       <Match>{({ path }: any) => <WalletNavBar current={path} />}</Match >
-      <div style={{ padding: "1em", width: 'calc(400px - 2em)', height: 'calc(320px - 34px - 2em)' }}>
+      <div style={{ padding: 8, width: 'calc(400px - 16px)', height: 'calc(320px - 34px - 16px)' }}>
-        <Router>
+        <Router history={createHashHistory()}>
           <Route path={Pages.balance} component={BalancePage} />
           <Route path={Pages.settings} component={SettingsPage} />
           <Route path={Pages.debug} component={DebugPage} />

packages/taler-wallet-webextension/src/renderHtml.tsx

@@ -69,7 +69,7 @@ export function abbrev(s: string, n = 5): JSX.Element {
     sAbbrev = s.slice(0, n) + "..";
   }
   return (
-    <span className="abbrev" title={s}>
+    <span class="abbrev" title={s}>
       {sAbbrev}
     </span>
   );
@@ -108,7 +108,7 @@ export class Collapsible extends Component<
     if (this.state.collapsed) {
       return (
         <h2>
-          <a className="opener opener-collapsed" href="#" onClick={doOpen}>
+          <a class="opener opener-collapsed" href="#" onClick={doOpen}>
             {" "}
             {this.props.title}
           </a>
@@ -118,7 +118,7 @@ export class Collapsible extends Component<
     return (
       <div>
         <h2>
-          <a className="opener opener-open" href="#" onClick={doClose}>
+          <a class="opener opener-open" href="#" onClick={doClose}>
             {" "}
             {this.props.title}
           </a>
@@ -147,14 +147,14 @@ export interface LoadingButtonProps extends JSX.HTMLAttributes<HTMLButtonElement
 export function ProgressButton({isLoading, ...rest}: LoadingButtonProps): JSX.Element {
   return (
     <button
-      className="pure-button pure-button-primary"
+      class="pure-button pure-button-primary"
       type="button"
       {...rest}
     >
       {isLoading ? (
         <span>
           <object
-            className="svg-icon svg-baseline"
+            class="svg-icon svg-baseline"
             data="/img/spinner-bars.svg"
           />
         </span>
@@ -170,7 +170,7 @@ export function PageLink(
   const url = chrome.extension.getURL(`/static/wallet.html#/${props.pageName}`);
   return (
     <a
-      className="actionLink"
+      class="actionLink"
       href={url}
       target="_blank"
       rel="noopener noreferrer"

packages/taler-wallet-webextension/src/wallet/Pay.tsx

@@ -201,7 +201,7 @@ export function PayPage({ talerPayUri }: Props): JSX.Element {
         <div>
           <p>Payment failed: {payErrMsg}</p>
           <button
-            className="pure-button button-success"
+            class="pure-button button-success"
             onClick={() => doPayment()}
           >
             {i18n.str`Retry`}

packages/taler-wallet-webextension/src/wallet/Withdraw.tsx

@@ -81,7 +81,7 @@ export function View({ talerWithdrawUri, details, cancelled, selectedExchange, a
 
       <div>
         <button
-          className="pure-button button-success"
+          class="pure-button button-success"
           disabled={!selectedExchange}
           onClick={() => accept()}
         >

packages/taler-wallet-webextension/src/wallet/reset-required.tsx

@@ -71,7 +71,7 @@ class ResetNotification extends Component<any, State> {
           </label>
           <br />
           <button
-            className="pure-button"
+            class="pure-button"
             disabled={!this.state.checked}
             onClick={() => wxApi.resetDb()}
           >

packages/taler-wallet-webextension/src/walletEntryPoint.tsx

@@ -74,7 +74,7 @@ function Application() {
   return <Router history={createHashHistory()} >
 
     <Route path={Pages.welcome} component={() => {
-      return <section id="main">
+      return <section class="main">
         <div style="border-bottom: 3px dashed #aa3939; margin-bottom: 2em;">
           <h1 style="font-family: monospace; font-size: 250%;">
             <span style="color: #aa3939;">❰</span>Taler Wallet<span style="color: #aa3939;">❱</span>
@@ -88,7 +88,7 @@ function Application() {
     }} />
 
     <Route path={Pages.pay} component={() => {
-      return <section id="main">
+      return <section class="main">
         <h1>GNU Taler Wallet</h1>
         <article class="fade">
           <PayPage talerPayUri={queryParams.talerPayUri} />
@@ -97,7 +97,7 @@ function Application() {
     }} />
 
     <Route path={Pages.refund} component={() => {
-      return <section id="main">
+      return <section class="main">
         <h1>GNU Taler Wallet</h1>
         <article class="fade">
           <RefundPage talerRefundUri={queryParams.talerRefundUri} />
@@ -106,7 +106,7 @@ function Application() {
     }} />
 
     <Route path={Pages.tips} component={() => {
-      return <section id="main">
+      return <section class="main">
         <h1>GNU Taler Wallet</h1>
         <div>
           <TipPage talerTipUri={queryParams.talerTipUri} />
@@ -114,7 +114,7 @@ function Application() {
       </section>
     }} />
     <Route path={Pages.withdraw} component={() => {
-      return <section id="main">
+      return <section class="main">
         <div style="border-bottom: 3px dashed #aa3939; margin-bottom: 2em;">
           <h1 style="font-family: monospace; font-size: 250%;">
             <span style="color: #aa3939;">❰</span>Taler Wallet<span style="color: #aa3939;">❱</span>

packages/taler-wallet-webextension/static/popup.html

@@ -3,13 +3,12 @@
   <head>
     <meta charset="utf-8" />
     <link rel="stylesheet" type="text/css" href="/static/style/pure.css" />
-    <link rel="stylesheet" type="text/css" href="/static/style/wallet.css" />
     <link rel="stylesheet" type="text/css" href="/static/style/popup.css" />
     <link rel="icon" href="/static/img/icon.png" />
     <script src="/dist/popupEntryPoint.js"></script>
   </head>
 
   <body>
-    <div id="container" style="margin: 0; padding: 0;"></div>
+    <taler-popup id="container" class="popup-container"></taler-popup>
   </body>
 </html>

packages/taler-wallet-webextension/static/style/popup.css

@@ -7,13 +7,25 @@
 body {
   /* min-height: 20em; */
   /* width: 30em; */
-  margin: 0;
-  padding: 0;
   /* max-height: 800px; */
+  margin: 0;
+  font-size: 100%;
+  padding: 0;
   overflow: hidden;
   background-color: #f8faf7;
   font-family: Arial, Helvetica, sans-serif;
 }
+/* taler-popup {
+  min-height: 20em;
+  width: 30em;
+  height: 20rem;
+  margin: 0;
+  font-size: 100%;
+  padding: 0;
+  overflow: hidden;
+  background-color: #f8faf7;
+  font-family: Arial, Helvetica, sans-serif;
+} */
 
 .nav {
   background-color: #033;
@@ -286,6 +298,32 @@ table.detailsTable.pending {
   background: white;
 }
 
-button.danger {
+.button-success,
-  background-color: 'red';
+.button-destructive,
+.button-warning,
+.button-secondary {
+  color: white;
+  border-radius: 4px;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+
+.button-success {
+  background: rgb(28, 184, 65);
+}
+
+.button-destructive {
+  background: rgb(202, 60, 60);
+}
+
+.button-warning {
+  background: rgb(223, 117, 20);
+}
+
+.button-secondary {
+  background: rgb(66, 184, 221);
+}
+
+button {
+  font-size: 120%;
+  padding: 0.5em;
 }

packages/taler-wallet-webextension/static/style/pure.css

@@ -830,7 +830,7 @@ this the same font stack that Normalize.css sets for the `body`.
 .pure-button:active {
   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\9;
+  border-color: #000;
 }
 
 .pure-button[disabled],

packages/taler-wallet-webextension/static/style/wallet.css

@@ -4,7 +4,12 @@ body {
   margin-top: 2em;
 }
 
-#main {
+.wallet-container {
+  margin: 0px;
+  padding: 0px;
+}
+
+section.main {
   border: solid 5px black;
   border-radius: 10px;
   margin-left: auto;
@@ -37,14 +42,14 @@ aside {
   float: left;
 }
 
-section#main {
+section.main {
   margin: auto;
   padding: 20px;
   height: 100%;
   max-width: 50%;
 }
 
-section#main h1:first-child {
+section.main h1:first-child {
   margin-top: 0;
 }
 
@@ -83,9 +88,6 @@ input.url {
   width: 25em;
 }
 
-.formish {
-}
-
 .json-key {
   color: brown;
 }
@@ -96,10 +98,6 @@ input.url {
   color: olive;
 }
 
-button {
-  font-size: 120%;
-  padding: 0.5em;
-}
 
 button.confirm-pay {
   float: right;
@@ -288,3 +286,8 @@ object.svg-icon.svg-baseline {
   width: 0;
   height: 0;
 }
+
+button.pure-button {
+  font-size: 120%;
+  padding: 0.5em;
+}

packages/taler-wallet-webextension/static/wallet.html

@@ -4,12 +4,11 @@
     <meta charset="utf-8" />
     <link rel="stylesheet" type="text/css" href="/static/style/pure.css" />
     <link rel="stylesheet" type="text/css" href="/static/style/wallet.css" />
-    <link rel="stylesheet" type="text/css" href="/static/style/popup.css" />
     <link rel="icon" href="/static/img/icon.png" />
     <script src="/dist/walletEntryPoint.js"></script>
   </head>
 
   <body>
-    <div id="container" style="margin: 0; padding: 0;"></div>
+    <div id="container" class="wallet-container"></div>
   </body>
 </html>