diff options
author | Sebastian <sebasjm@gmail.com> | 2021-06-21 10:07:56 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-06-21 10:08:35 -0300 |
commit | 0d86f84dc004c9d22d5df83182a58199d3349071 (patch) | |
tree | d5cec9606533454ad5fc06ca400cad3e8dc470cf /packages/taler-wallet-webextension/src/popup | |
parent | c7f0e483232a01c1165c8146285b915f766dba78 (diff) | |
download | wallet-core-0d86f84dc004c9d22d5df83182a58199d3349071.tar.xz |
fix some pixel and css classes and sync storybook
Diffstat (limited to 'packages/taler-wallet-webextension/src/popup')
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> |