[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] 01/02: fix some pixel and css classes and sync story
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] 01/02: fix some pixel and css classes and sync storybook |
|
Date: |
Mon, 21 Jun 2021 15:08:44 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
commit 0d86f84dc004c9d22d5df83182a58199d3349071
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Mon Jun 21 10:07:56 2021 -0300
fix some pixel and css classes and sync storybook
---
.../.storybook/preview.js | 25 ++++++++++--
.../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 +-
19 files changed, 116 insertions(+), 102 deletions(-)
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/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.