gnunet-svn
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[taler-wallet-core] branch master updated (c7f0e483 -> d42a7456)


From: gnunet
Subject: [taler-wallet-core] branch master updated (c7f0e483 -> d42a7456)
Date: Mon, 21 Jun 2021 15:08:43 +0200

This is an automated email from the git hooks/post-receive script.

sebasjm pushed a change to branch master
in repository wallet-core.

    from c7f0e483 fix height in storybook
     new 0d86f84d fix some pixel and css classes and sync storybook
     new d42a7456 fix #6042

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 .../src/crypto/workers/cryptoImplementation.ts     | 26 ++++++++++--
 .../.storybook/preview.js                          | 25 ++++++++++--
 packages/taler-wallet-webextension/manifest.json   |  2 +-
 .../taler-wallet-webextension/src/i18n/index.ts    | 24 -----------
 .../src/popup/Balance.tsx                          |  4 +-
 .../src/popup/History.stories.tsx                  | 10 -----
 .../src/popup/History.tsx                          |  2 +-
 .../src/popup/Transaction.stories.tsx              | 12 +-----
 .../src/popup/Transaction.tsx                      | 24 +++++------
 .../taler-wallet-webextension/src/popup/popup.tsx  |  4 +-
 .../src/popupEntryPoint.tsx                        |  6 +--
 .../taler-wallet-webextension/src/renderHtml.tsx   | 12 +++---
 .../taler-wallet-webextension/src/wallet/Pay.tsx   |  2 +-
 .../src/wallet/Withdraw.tsx                        |  2 +-
 .../src/wallet/reset-required.tsx                  |  2 +-
 .../src/walletEntryPoint.tsx                       | 10 ++---
 .../taler-wallet-webextension/static/popup.html    |  3 +-
 .../static/style/popup.css                         | 46 ++++++++++++++++++++--
 .../static/style/pure.css                          |  2 +-
 .../static/style/wallet.css                        | 25 ++++++------
 .../taler-wallet-webextension/static/wallet.html   |  3 +-
 21 files changed, 139 insertions(+), 107 deletions(-)
 delete mode 100644 packages/taler-wallet-webextension/src/i18n/index.ts

diff --git 
a/packages/taler-wallet-core/src/crypto/workers/cryptoImplementation.ts 
b/packages/taler-wallet-core/src/crypto/workers/cryptoImplementation.ts
index 9cffef03..f799fd6e 100644
--- a/packages/taler-wallet-core/src/crypto/workers/cryptoImplementation.ts
+++ b/packages/taler-wallet-core/src/crypto/workers/cryptoImplementation.ts
@@ -76,6 +76,7 @@ import {
   DeriveTipRequest,
   SignTrackTransactionRequest,
 } from "../cryptoTypes.js";
+import bigint from "big-integer";
 
 const logger = new Logger("cryptoImplementation.ts");
 
@@ -102,7 +103,15 @@ function amountToBuffer(amount: AmountJson): Uint8Array {
   const dvbuf = new DataView(buffer);
   const u8buf = new Uint8Array(buffer);
   const curr = stringToBytes(amount.currency);
-  dvbuf.setBigUint64(0, BigInt(amount.value));
+  if (typeof dvbuf.setBigUint64 !== "undefined") {
+    dvbuf.setBigUint64(0, BigInt(amount.value));
+  } else {
+    const arr = bigint(amount.value).toArray(2 ** 8).value
+    let offset = 8 - arr.length
+    for (let i = 0; i < arr.length; i++) {
+      dvbuf.setUint8(offset++, arr[i]);
+    }
+  }
   dvbuf.setUint32(8, amount.fraction);
   u8buf.set(curr, 8 + 4);
 
@@ -113,15 +122,24 @@ function timestampRoundedToBuffer(ts: Timestamp): 
Uint8Array {
   const b = new ArrayBuffer(8);
   const v = new DataView(b);
   const tsRounded = timestampTruncateToSecond(ts);
-  const s = BigInt(tsRounded.t_ms) * BigInt(1000);
-  v.setBigUint64(0, s);
+  if (typeof v.setBigUint64 !== "undefined") {
+    const s = BigInt(tsRounded.t_ms) * BigInt(1000);
+    v.setBigUint64(0, s);
+  } else {
+    const s = (tsRounded.t_ms === "never" ? bigint.zero : 
bigint(tsRounded.t_ms).times(1000));
+    const arr = s.toArray(2 ** 8).value
+    let offset = 8 - arr.length
+    for (let i = 0; i < arr.length; i++) {
+      v.setUint8(offset++, arr[i]);
+    }
+  }
   return new Uint8Array(b);
 }
 
 class SignaturePurposeBuilder {
   private chunks: Uint8Array[] = [];
 
-  constructor(private purposeNum: number) {}
+  constructor(private purposeNum: number) { }
 
   put(bytes: Uint8Array): SignaturePurposeBuilder {
     this.chunks.push(Uint8Array.from(bytes));
diff --git a/packages/taler-wallet-webextension/.storybook/preview.js 
b/packages/taler-wallet-webextension/.storybook/preview.js
index 6a7c8e86..1c07ba40 100644
--- a/packages/taler-wallet-webextension/.storybook/preview.js
+++ b/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>
 ];
diff --git a/packages/taler-wallet-webextension/manifest.json 
b/packages/taler-wallet-webextension/manifest.json
index 3ab5625a..e864fe08 100644
--- a/packages/taler-wallet-webextension/manifest.json
+++ b/packages/taler-wallet-webextension/manifest.json
@@ -13,7 +13,7 @@
   "applications": {
     "gecko": {
       "id": "wallet@taler.net",
-      "strict_min_version": "68.0"
+      "strict_min_version": "57.0"
     }
   },
 
diff --git a/packages/taler-wallet-webextension/src/i18n/index.ts 
b/packages/taler-wallet-webextension/src/i18n/index.ts
deleted file mode 100644
index 8db366a3..00000000
--- a/packages/taler-wallet-webextension/src/i18n/index.ts
+++ /dev/null
@@ -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";
diff --git a/packages/taler-wallet-webextension/src/popup/Balance.tsx 
b/packages/taler-wallet-webextension/src/popup/Balance.tsx
index 77d2c420..ae0eb07f 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 a82863b4..8eef7dc3 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 f055f6cb..e76e656c 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 38a34838..48f94578 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 2db4cc1a..6a6876c0 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 95b87fad..3692a053 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>
diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx 
b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
index 05c5cca9..1c569519 100644
--- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
+++ b/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)' }}>
-        <Router>
+      <div style={{ padding: 8, width: 'calc(400px - 16px)', height: 
'calc(320px - 34px - 16px)' }}>
+        <Router history={createHashHistory()}>
           <Route path={Pages.balance} component={BalancePage} />
           <Route path={Pages.settings} component={SettingsPage} />
           <Route path={Pages.debug} component={DebugPage} />
diff --git a/packages/taler-wallet-webextension/src/renderHtml.tsx 
b/packages/taler-wallet-webextension/src/renderHtml.tsx
index 353a4eb8..1101b80d 100644
--- a/packages/taler-wallet-webextension/src/renderHtml.tsx
+++ b/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"
diff --git a/packages/taler-wallet-webextension/src/wallet/Pay.tsx 
b/packages/taler-wallet-webextension/src/wallet/Pay.tsx
index 23b4e6c1..bd06656c 100644
--- a/packages/taler-wallet-webextension/src/wallet/Pay.tsx
+++ b/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`}
diff --git a/packages/taler-wallet-webextension/src/wallet/Withdraw.tsx 
b/packages/taler-wallet-webextension/src/wallet/Withdraw.tsx
index 5dc12407..4cb8ebfa 100644
--- a/packages/taler-wallet-webextension/src/wallet/Withdraw.tsx
+++ b/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()}
         >
diff --git a/packages/taler-wallet-webextension/src/wallet/reset-required.tsx 
b/packages/taler-wallet-webextension/src/wallet/reset-required.tsx
index 0be7c09c..87751561 100644
--- a/packages/taler-wallet-webextension/src/wallet/reset-required.tsx
+++ b/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()}
           >
diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx 
b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
index cb97ffbe..004fcc71 100644
--- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
+++ b/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>
diff --git a/packages/taler-wallet-webextension/static/popup.html 
b/packages/taler-wallet-webextension/static/popup.html
index b670faac..9f6520a1 100644
--- a/packages/taler-wallet-webextension/static/popup.html
+++ b/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>
diff --git a/packages/taler-wallet-webextension/static/style/popup.css 
b/packages/taler-wallet-webextension/static/style/popup.css
index 50440047..d0fd5d28 100644
--- a/packages/taler-wallet-webextension/static/style/popup.css
+++ b/packages/taler-wallet-webextension/static/style/popup.css
@@ -7,13 +7,25 @@
 body {
   /* min-height: 20em; */
   /* width: 30em; */
+  /* max-height: 800px; */
   margin: 0;
+  font-size: 100%;
   padding: 0;
-  /* max-height: 800px; */
   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 {
-  background-color: 'red';
-}
\ No newline at end of file
+.button-success,
+.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;
+}
diff --git a/packages/taler-wallet-webextension/static/style/pure.css 
b/packages/taler-wallet-webextension/static/style/pure.css
index 88a4bb7d..c82fbaee 100644
--- a/packages/taler-wallet-webextension/static/style/pure.css
+++ b/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],
diff --git a/packages/taler-wallet-webextension/static/style/wallet.css 
b/packages/taler-wallet-webextension/static/style/wallet.css
index 7c06f238..32a96dbc 100644
--- a/packages/taler-wallet-webextension/static/style/wallet.css
+++ b/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;
@@ -287,4 +285,9 @@ object.svg-icon.svg-baseline {
   opacity: 0;
   width: 0;
   height: 0;
-}
\ No newline at end of file
+}
+
+button.pure-button {
+  font-size: 120%;
+  padding: 0.5em;
+}
diff --git a/packages/taler-wallet-webextension/static/wallet.html 
b/packages/taler-wallet-webextension/static/wallet.html
index c66913c4..2b500b56 100644
--- a/packages/taler-wallet-webextension/static/wallet.html
+++ b/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>

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.



reply via email to

[Prev in Thread] Current Thread [Next in Thread]