fix some pixel and css classes and sync storybook

6 files changed, 18 insertions, 38 deletions

diff --git a/packages/taler-wallet-webextension/src/popup/Balance.tsx b/packages/taler-wallet-webextension/src/popup/Balance.tsx
index 77d2c4201..ae0eb07ff 100644
--- a/packages/taler-wallet-webextension/src/popup/Balance.tsx
+++ b/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 />
     );
diff --git a/packages/taler-wallet-webextension/src/popup/History.stories.tsx b/packages/taler-wallet-webextension/src/popup/History.stories.tsx
index a82863b43..8eef7dc31 100644
--- a/packages/taler-wallet-webextension/src/popup/History.stories.tsx
+++ b/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 = {
diff --git a/packages/taler-wallet-webextension/src/popup/History.tsx b/packages/taler-wallet-webextension/src/popup/History.tsx
index f055f6cb0..e76e656c1 100644
--- a/packages/taler-wallet-webextension/src/popup/History.tsx
+++ b/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} />
     ))}
diff --git a/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx
index 38a348387..48f945783 100644
--- a/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx
+++ b/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',
diff --git a/packages/taler-wallet-webextension/src/popup/Transaction.tsx b/packages/taler-wallet-webextension/src/popup/Transaction.tsx
index 2db4cc1af..6a6876c02 100644
--- a/packages/taler-wallet-webextension/src/popup/Transaction.tsx
+++ b/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%' }} >
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 2em)', overflow: 'auto' }}>
+      <div style={{ display: 'flex', flexDirection: 'column' }} >
+        <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%' }} >
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 2em)', overflow: 'auto' }}>
+      <div style={{ display: 'flex', flexDirection: 'column' }} >
+        <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%' }} >
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 2em)', overflow: 'auto' }}>
+      <div style={{ display: 'flex', flexDirection: 'column' }} >
+        <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%' }} >
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 2em)', overflow: 'auto' }}>
+      <div style={{ display: 'flex', flexDirection: 'column' }} >
+        <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%' }} >
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 2em)', overflow: 'auto' }}>
+      <div style={{ display: 'flex', flexDirection: 'column' }} >
+        <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%' }} >
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 2em)', overflow: 'auto' }}>
+      <div style={{ display: 'flex', flexDirection: 'column' }} >
+        <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>
diff --git a/packages/taler-wallet-webextension/src/popup/popup.tsx b/packages/taler-wallet-webextension/src/popup/popup.tsx
index 95b87fad0..3692a0537 100644
--- a/packages/taler-wallet-webextension/src/popup/popup.tsx
+++ 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>