diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
13 files changed, 467 insertions, 333 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Checkbox.tsx b/packages/taler-wallet-webextension/src/components/Checkbox.tsx index 2d7b98087..276ac9ff0 100644 --- a/packages/taler-wallet-webextension/src/components/Checkbox.tsx +++ b/packages/taler-wallet-webextension/src/components/Checkbox.tsx @@ -24,7 +24,13 @@ interface Props { name: string; description?: string; } -export function Checkbox({ name, enabled, onToggle, label, description }: Props): JSX.Element { +export function Checkbox({ + name, + enabled, + onToggle, + label, + description, +}: Props): JSX.Element { return ( <div> <input @@ -32,23 +38,26 @@ export function Checkbox({ name, enabled, onToggle, label, description }: Props) onClick={onToggle} type="checkbox" id={`checkbox-${name}`} - style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} /> + style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} + /> <label htmlFor={`checkbox-${name}`} style={{ marginLeft: "0.5em", fontWeight: "bold" }} > {label} </label> - {description && <span - style={{ - color: "#383838", - fontSize: "smaller", - display: "block", - marginLeft: "2em", - }} - > - {description} - </span>} + {description && ( + <span + style={{ + color: "#383838", + fontSize: "smaller", + display: "block", + marginLeft: "2em", + }} + > + {description} + </span> + )} </div> ); } diff --git a/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx index 5e30ee3d1..2fc8316f5 100644 --- a/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx +++ b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx @@ -16,7 +16,7 @@ import { JSX } from "preact/jsx-runtime"; import { Outlined, StyledCheckboxLabel } from "./styled/index"; -import { h } from 'preact'; +import { h } from "preact"; interface Props { enabled: boolean; @@ -25,28 +25,39 @@ interface Props { name: string; } +const Tick = () => ( + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + aria-hidden="true" + focusable="false" + style={{ backgroundColor: "green" }} + > + <path + fill="none" + stroke="white" + stroke-width="3" + d="M1.73 12.91l6.37 6.37L22.79 4.59" + /> + </svg> +); -const Tick = () => <svg - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 24 24" - aria-hidden="true" - focusable="false" - style={{ backgroundColor: 'green' }} -> - <path - fill="none" - stroke="white" - stroke-width="3" - d="M1.73 12.91l6.37 6.37L22.79 4.59" - /> -</svg> - -export function CheckboxOutlined({ name, enabled, onToggle, label }: Props): JSX.Element { +export function CheckboxOutlined({ + name, + enabled, + onToggle, + label, +}: Props): JSX.Element { return ( <Outlined> <StyledCheckboxLabel onClick={onToggle}> <span> - <input type="checkbox" name={name} checked={enabled} disabled={false} /> + <input + type="checkbox" + name={name} + checked={enabled} + disabled={false} + /> <div> <Tick /> </div> diff --git a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx index f0c682ccb..952df15ae 100644 --- a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx +++ b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx @@ -14,9 +14,15 @@ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ - import { JSX, h } from "preact"; +import { JSX, h } from "preact"; -export function DebugCheckbox({ enabled, onToggle }: { enabled: boolean; onToggle: () => void; }): JSX.Element { +export function DebugCheckbox({ + enabled, + onToggle, +}: { + enabled: boolean; + onToggle: () => void; +}): JSX.Element { return ( <div> <input @@ -24,7 +30,8 @@ export function DebugCheckbox({ enabled, onToggle }: { enabled: boolean; onToggl onClick={onToggle} type="checkbox" id="checkbox-perm" - style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} /> + style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} + /> <label htmlFor="checkbox-perm" style={{ marginLeft: "0.5em", fontWeight: "bold" }} diff --git a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx index b48deb847..0f8afd525 100644 --- a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx +++ b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx @@ -21,11 +21,13 @@ import { PageLink } from "../renderHtml"; interface Props { timedOut: boolean; - diagnostics: WalletDiagnostics | undefined + diagnostics: WalletDiagnostics | undefined; } -export function Diagnostics({timedOut, diagnostics}: Props): JSX.Element | null { - +export function Diagnostics({ + timedOut, + diagnostics, +}: Props): JSX.Element | null { if (timedOut) { return <p>Diagnostics timed out. Could not talk to the wallet backend.</p>; } @@ -60,8 +62,8 @@ export function Diagnostics({timedOut, diagnostics}: Props): JSX.Element | null <p> Your wallet database is outdated. Currently automatic migration is not supported. Please go{" "} - <PageLink pageName="/reset-required">here</PageLink> to reset - the wallet database. + <PageLink pageName="/reset-required">here</PageLink> to reset the + wallet database. </p> ) : null} </div> diff --git a/packages/taler-wallet-webextension/src/components/EditableText.tsx b/packages/taler-wallet-webextension/src/components/EditableText.tsx index 6f3388bf9..8b3e6d375 100644 --- a/packages/taler-wallet-webextension/src/components/EditableText.tsx +++ b/packages/taler-wallet-webextension/src/components/EditableText.tsx @@ -25,25 +25,37 @@ interface Props { name: string; description?: string; } -export function EditableText({ name, value, onChange, label, description }: Props): JSX.Element { - const [editing, setEditing] = useState(false) - const ref = useRef<HTMLInputElement>(null) +export function EditableText({ + name, + value, + onChange, + label, + description, +}: Props): JSX.Element { + const [editing, setEditing] = useState(false); + const ref = useRef<HTMLInputElement>(null); let InputText; if (!editing) { - InputText = () => <div style={{ display: 'flex', justifyContent: 'space-between' }}> - <p>{value}</p> - <button onClick={() => setEditing(true)}>edit</button> - </div> + InputText = () => ( + <div style={{ display: "flex", justifyContent: "space-between" }}> + <p>{value}</p> + <button onClick={() => setEditing(true)}>edit</button> + </div> + ); } else { - InputText = () => <div style={{ display: 'flex', justifyContent: 'space-between' }}> - <input - value={value} - ref={ref} - type="text" - id={`text-${name}`} - /> - <button onClick={() => { if (ref.current) onChange(ref.current.value).then(r => setEditing(false)) }}>confirm</button> - </div> + InputText = () => ( + <div style={{ display: "flex", justifyContent: "space-between" }}> + <input value={value} ref={ref} type="text" id={`text-${name}`} /> + <button + onClick={() => { + if (ref.current) + onChange(ref.current.value).then((r) => setEditing(false)); + }} + > + confirm + </button> + </div> + ); } return ( <div> @@ -54,16 +66,18 @@ export function EditableText({ name, value, onChange, label, description }: Prop {label} </label> <InputText /> - {description && <span - style={{ - color: "#383838", - fontSize: "smaller", - display: "block", - marginLeft: "2em", - }} - > - {description} - </span>} + {description && ( + <span + style={{ + color: "#383838", + fontSize: "smaller", + display: "block", + marginLeft: "2em", + }} + > + {description} + </span> + )} </div> ); } diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx index cfcef16d5..c6b64fb6a 100644 --- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx +++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx @@ -13,22 +13,35 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ - import { VNode, h } from "preact"; +import { VNode, h } from "preact"; import { useState } from "preact/hooks"; -import arrowDown from '../../static/img/chevron-down.svg'; +import arrowDown from "../../static/img/chevron-down.svg"; import { ErrorBox } from "./styled"; -export function ErrorMessage({ title, description }: { title?: string|VNode; description?: string; }) { +export function ErrorMessage({ + title, + description, +}: { + title?: string | VNode; + description?: string; +}) { const [showErrorDetail, setShowErrorDetail] = useState(false); - if (!title) - return null; - return <ErrorBox style={{paddingTop: 0, paddingBottom: 0}}> - <div> - <p>{title}</p> - { description && <button onClick={() => { setShowErrorDetail(v => !v); }}> - <img style={{ height: '1.5em' }} src={arrowDown} /> - </button> } - </div> - {showErrorDetail && <p>{description}</p>} - </ErrorBox>; + if (!title) return null; + return ( + <ErrorBox style={{ paddingTop: 0, paddingBottom: 0 }}> + <div> + <p>{title}</p> + {description && ( + <button + onClick={() => { + setShowErrorDetail((v) => !v); + }} + > + <img style={{ height: "1.5em" }} src={arrowDown} /> + </button> + )} + </div> + {showErrorDetail && <p>{description}</p>} + </ErrorBox> + ); } diff --git a/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx b/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx index cfa20280f..6d2731cd8 100644 --- a/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx +++ b/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx @@ -13,66 +13,80 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ - import { Fragment, VNode } from "preact" -import { useState } from "preact/hooks" -import { JSXInternal } from "preact/src/jsx" -import { h } from 'preact'; +import { Fragment, VNode } from "preact"; +import { useState } from "preact/hooks"; +import { JSXInternal } from "preact/src/jsx"; +import { h } from "preact"; export function ExchangeXmlTos({ doc }: { doc: Document }) { - const termsNode = doc.querySelector('[ids=terms-of-service]') + const termsNode = doc.querySelector("[ids=terms-of-service]"); if (!termsNode) { - return <div> - <p>The exchange send us an xml but there is no node with 'ids=terms-of-service'. This is the content:</p> - <pre>{new XMLSerializer().serializeToString(doc)}</pre> - </div> + return ( + <div> + <p> + The exchange send us an xml but there is no node with + 'ids=terms-of-service'. This is the content: + </p> + <pre>{new XMLSerializer().serializeToString(doc)}</pre> + </div> + ); } - return <Fragment> - {Array.from(termsNode.children).map(renderChild)} - </Fragment> + return <Fragment>{Array.from(termsNode.children).map(renderChild)}</Fragment>; } /** * Map XML elements into HTML - * @param child - * @returns + * @param child + * @returns */ function renderChild(child: Element): VNode { - const children = Array.from(child.children) + const children = Array.from(child.children); switch (child.nodeName) { - case 'title': return <header>{child.textContent}</header> - case '#text': return <Fragment /> - case 'paragraph': return <p>{child.textContent}</p> - case 'section': { - return <AnchorWithOpenState href={`#terms-${child.getAttribute('ids')}`}> - {children.map(renderChild)} - </AnchorWithOpenState> + case "title": + return <header>{child.textContent}</header>; + case "#text": + return <Fragment />; + case "paragraph": + return <p>{child.textContent}</p>; + case "section": { + return ( + <AnchorWithOpenState href={`#terms-${child.getAttribute("ids")}`}> + {children.map(renderChild)} + </AnchorWithOpenState> + ); } - case 'bullet_list': { - return <ul>{children.map(renderChild)}</ul> + case "bullet_list": { + return <ul>{children.map(renderChild)}</ul>; } - case 'enumerated_list': { - return <ol>{children.map(renderChild)}</ol> + case "enumerated_list": { + return <ol>{children.map(renderChild)}</ol>; } - case 'list_item': { - return <li>{children.map(renderChild)}</li> + case "list_item": { + return <li>{children.map(renderChild)}</li>; } - case 'block_quote': { - return <div>{children.map(renderChild)}</div> + case "block_quote": { + return <div>{children.map(renderChild)}</div>; } - default: return <div style={{ color: 'red', display: 'hidden' }}>unknown tag {child.nodeName} <a></a></div> + default: + return ( + <div style={{ color: "red", display: "hidden" }}> + unknown tag {child.nodeName} <a></a> + </div> + ); } } /** * Simple anchor with a state persisted into 'data-open' prop - * @returns + * @returns */ -function AnchorWithOpenState(props: JSXInternal.HTMLAttributes<HTMLAnchorElement>) { - const [open, setOpen] = useState<boolean>(false) +function AnchorWithOpenState( + props: JSXInternal.HTMLAttributes<HTMLAnchorElement>, +) { + const [open, setOpen] = useState<boolean>(false); function doClick(e: JSXInternal.TargetedMouseEvent<HTMLAnchorElement>) { setOpen(!open); e.preventDefault(); } - return <a data-open={open ? 'true' : 'false'} onClick={doClick} {...props} /> + return <a data-open={open ? "true" : "false"} onClick={doClick} {...props} />; } - diff --git a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx index 9b75c62a1..6c47dc92a 100644 --- a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx +++ b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx @@ -17,15 +17,22 @@ import { h } from "preact"; export function LogoHeader() { - return <div style={{ - display: 'flex', - justifyContent: 'space-around', - margin: '2em', - }}> - <img style={{ - width: 150, - height: 70, - }} src="/static/img/logo-2021.svg" width="150" /> - </div> - -}
\ No newline at end of file + return ( + <div + style={{ + display: "flex", + justifyContent: "space-around", + margin: "2em", + }} + > + <img + style={{ + width: 150, + height: 70, + }} + src="/static/img/logo-2021.svg" + width="150" + /> + </div> + ); +} diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx index 75c9df16f..c8ecb46d2 100644 --- a/packages/taler-wallet-webextension/src/components/Part.tsx +++ b/packages/taler-wallet-webextension/src/components/Part.tsx @@ -15,18 +15,28 @@ */ import { AmountLike } from "@gnu-taler/taler-util"; import { ExtraLargeText, LargeText, SmallLightText } from "./styled"; -import { h } from 'preact'; +import { h } from "preact"; -export type Kind = 'positive' | 'negative' | 'neutral'; +export type Kind = "positive" | "negative" | "neutral"; interface Props { - title: string, text: AmountLike, kind: Kind, big?: boolean + title: string; + text: AmountLike; + kind: Kind; + big?: boolean; } export function Part({ text, title, kind, big }: Props) { const Text = big ? ExtraLargeText : LargeText; - return <div style={{ margin: '1em' }}> - <SmallLightText style={{ margin: '.5em' }}>{title}</SmallLightText> - <Text style={{ color: kind == 'positive' ? 'green' : (kind == 'negative' ? 'red' : 'black') }}> - {text} - </Text> - </div> + return ( + <div style={{ margin: "1em" }}> + <SmallLightText style={{ margin: ".5em" }}>{title}</SmallLightText> + <Text + style={{ + color: + kind == "positive" ? "green" : kind == "negative" ? "red" : "black", + }} + > + {text} + </Text> + </div> + ); } diff --git a/packages/taler-wallet-webextension/src/components/QR.tsx b/packages/taler-wallet-webextension/src/components/QR.tsx index 8e3f69295..4ff1af961 100644 --- a/packages/taler-wallet-webextension/src/components/QR.tsx +++ b/packages/taler-wallet-webextension/src/components/QR.tsx @@ -14,24 +14,35 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ - import { h, VNode } from "preact"; - import { useEffect, useRef } from "preact/hooks"; - import qrcode from "qrcode-generator"; - - export function QR({ text }: { text: string; }):VNode { - const divRef = useRef<HTMLDivElement>(null); - useEffect(() => { - if (!divRef.current) return - const qr = qrcode(0, 'L'); - qr.addData(text); - qr.make(); - divRef.current.innerHTML = qr.createSvgTag({ - scalable: true, - }); - }); - - return <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}> - <div style={{ width: '50%', minWidth: 200, maxWidth: 300 }} ref={divRef} /> - </div>; - } -
\ No newline at end of file +import { h, VNode } from "preact"; +import { useEffect, useRef } from "preact/hooks"; +import qrcode from "qrcode-generator"; + +export function QR({ text }: { text: string }): VNode { + const divRef = useRef<HTMLDivElement>(null); + useEffect(() => { + if (!divRef.current) return; + const qr = qrcode(0, "L"); + qr.addData(text); + qr.make(); + divRef.current.innerHTML = qr.createSvgTag({ + scalable: true, + }); + }); + + return ( + <div + style={{ + width: "100%", + display: "flex", + flexDirection: "column", + alignItems: "center", + }} + > + <div + style={{ width: "50%", minWidth: 200, maxWidth: 300 }} + ref={divRef} + /> + </div> + ); +} diff --git a/packages/taler-wallet-webextension/src/components/SelectList.tsx b/packages/taler-wallet-webextension/src/components/SelectList.tsx index 536e5b89a..f89ba19b2 100644 --- a/packages/taler-wallet-webextension/src/components/SelectList.tsx +++ b/packages/taler-wallet-webextension/src/components/SelectList.tsx @@ -23,46 +23,67 @@ interface Props { onChange: (s: string) => void; label: string; list: { - [label: string]: string - } + [label: string]: string; + }; name: string; description?: string; canBeNull?: boolean; } -export function SelectList({ name, value, list, canBeNull, onChange, label, description }: Props): JSX.Element { - return <div> - <label - htmlFor={`text-${name}`} - style={{ marginLeft: "0.5em", fontWeight: "bold" }} - > {label}</label> - <NiceSelect> - <select name={name} onChange={(e) => { - console.log(e.currentTarget.value, value) - onChange(e.currentTarget.value) - }}> - {value !== undefined ? <option selected> - {list[value]} - </option> : <option selected disabled> - Select one option - </option>} - {Object.keys(list) - .filter((l) => l !== value) - .map(key => <option value={key} key={key}>{list[key]}</option>) - } - </select> - </NiceSelect> - {description && <span - style={{ - color: "#383838", - fontSize: "smaller", - display: "block", - marginLeft: "2em", - }} - > - {description} - </span>} - - </div> - +export function SelectList({ + name, + value, + list, + canBeNull, + onChange, + label, + description, +}: Props): JSX.Element { + return ( + <div> + <label + htmlFor={`text-${name}`} + style={{ marginLeft: "0.5em", fontWeight: "bold" }} + > + {" "} + {label} + </label> + <NiceSelect> + <select + name={name} + onChange={(e) => { + console.log(e.currentTarget.value, value); + onChange(e.currentTarget.value); + }} + > + {value !== undefined ? ( + <option selected>{list[value]}</option> + ) : ( + <option selected disabled> + Select one option + </option> + )} + {Object.keys(list) + .filter((l) => l !== value) + .map((key) => ( + <option value={key} key={key}> + {list[key]} + </option> + ))} + </select> + </NiceSelect> + {description && ( + <span + style={{ + color: "#383838", + fontSize: "smaller", + display: "block", + marginLeft: "2em", + }} + > + {description} + </span> + )} + </div> + ); } diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx index 991e97c94..1917d5627 100644 --- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx +++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx @@ -14,18 +14,33 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { AmountString, Timestamp, Transaction, TransactionType } from '@gnu-taler/taler-util'; -import { format, formatDistance } from 'date-fns'; -import { h } from 'preact'; -import imageBank from '../../static/img/ri-bank-line.svg'; -import imageHandHeart from '../../static/img/ri-hand-heart-line.svg'; -import imageRefresh from '../../static/img/ri-refresh-line.svg'; -import imageRefund from '../../static/img/ri-refund-2-line.svg'; -import imageShoppingCart from '../../static/img/ri-shopping-cart-line.svg'; +import { + AmountString, + Timestamp, + Transaction, + TransactionType, +} from "@gnu-taler/taler-util"; +import { format, formatDistance } from "date-fns"; +import { h } from "preact"; +import imageBank from "../../static/img/ri-bank-line.svg"; +import imageHandHeart from "../../static/img/ri-hand-heart-line.svg"; +import imageRefresh from "../../static/img/ri-refresh-line.svg"; +import imageRefund from "../../static/img/ri-refund-2-line.svg"; +import imageShoppingCart from "../../static/img/ri-shopping-cart-line.svg"; import { Pages } from "../NavigationBar"; -import { Column, ExtraLargeText, HistoryRow, SmallLightText, LargeText, LightText } from './styled/index'; +import { + Column, + ExtraLargeText, + HistoryRow, + SmallLightText, + LargeText, + LightText, +} from "./styled/index"; -export function TransactionItem(props: { tx: Transaction, multiCurrency: boolean }): JSX.Element { +export function TransactionItem(props: { + tx: Transaction; + multiCurrency: boolean; +}): JSX.Element { const tx = props.tx; switch (tx.type) { case TransactionType.Withdrawal: @@ -112,20 +127,26 @@ export function TransactionItem(props: { tx: Transaction, multiCurrency: boolean function TransactionLayout(props: TransactionLayoutProps): JSX.Element { const date = new Date(props.timestamp.t_ms); - const dateStr = format(date, 'dd MMM, hh:mm') + const dateStr = format(date, "dd MMM, hh:mm"); return ( - <HistoryRow href={Pages.transaction.replace(':tid', props.id)}> + <HistoryRow href={Pages.transaction.replace(":tid", props.id)}> <img src={props.iconPath} /> <Column> <LargeText> <div>{props.title}</div> - {props.subtitle && <div style={{color:'gray', fontSize:'medium', marginTop: 5}}>{props.subtitle}</div>} + {props.subtitle && ( + <div style={{ color: "gray", fontSize: "medium", marginTop: 5 }}> + {props.subtitle} + </div> + )} </LargeText> - {props.pending && - <LightText style={{ marginTop: 5, marginBottom: 5 }}>Waiting for confirmation</LightText> - } - <SmallLightText style={{marginTop:5 }}>{dateStr}</SmallLightText> + {props.pending && ( + <LightText style={{ marginTop: 5, marginBottom: 5 }}> + Waiting for confirmation + </LightText> + )} + <SmallLightText style={{ marginTop: 5 }}>{dateStr}</SmallLightText> </Column> <TransactionAmount pending={props.pending} @@ -170,14 +191,18 @@ function TransactionAmount(props: TransactionAmountProps): JSX.Element { sign = ""; } return ( - <Column style={{ - textAlign: 'center', - color: - props.pending ? "gray" : - (sign === '+' ? 'darkgreen' : - (sign === '-' ? 'darkred' : - undefined)) - }}> + <Column + style={{ + textAlign: "center", + color: props.pending + ? "gray" + : sign === "+" + ? "darkgreen" + : sign === "-" + ? "darkred" + : undefined, + }} + > <ExtraLargeText> {sign} {amount} @@ -187,4 +212,3 @@ function TransactionAmount(props: TransactionAmountProps): JSX.Element { </Column> ); } - diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 65c1f49e9..8b36dbd31 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -14,18 +14,17 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ - // need to import linaria types, otherwise compiler will complain -import type * as Linaria from '@linaria/core'; +import type * as Linaria from "@linaria/core"; -import { styled } from '@linaria/react'; +import { styled } from "@linaria/react"; export const PaymentStatus = styled.div<{ color: string }>` padding: 5px; border-radius: 5px; color: white; - background-color: ${p => p.color}; -` + background-color: ${(p) => p.color}; +`; export const WalletAction = styled.div` display: flex; @@ -36,9 +35,9 @@ export const WalletAction = styled.div` margin: auto; height: 100%; - + & h1:first-child { - margin-top: 0; + margin-top: 0; } section { margin-bottom: 2em; @@ -47,7 +46,7 @@ export const WalletAction = styled.div` margin-left: 8px; } } -` +`; export const WalletActionOld = styled.section` border: solid 5px black; border-radius: 10px; @@ -59,17 +58,17 @@ export const WalletActionOld = styled.section` margin: auto; height: 100%; - + & h1:first-child { - margin-top: 0; + margin-top: 0; } -` +`; export const DateSeparator = styled.div` color: gray; - margin: .2em; + margin: 0.2em; margin-top: 1em; -` +`; export const WalletBox = styled.div<{ noPadding?: boolean }>` display: flex; flex-direction: column; @@ -79,10 +78,10 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>` width: 400px; } & > section { - padding-left: ${({ noPadding }) => noPadding ? '0px' : '8px'}; - padding-right: ${({ noPadding }) => noPadding ? '0px' : '8px'}; + padding-left: ${({ noPadding }) => (noPadding ? "0px" : "8px")}; + padding-right: ${({ noPadding }) => (noPadding ? "0px" : "8px")}; // this margin will send the section up when used with a header - margin-bottom: auto; + margin-bottom: auto; overflow: auto; table td { @@ -128,13 +127,13 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>` margin-left: 8px; } } -` +`; export const Middle = styled.div` - justify-content: space-around; - display: flex; - flex-direction: column; - height: 100%; -` + justify-content: space-around; + display: flex; + flex-direction: column; + height: 100%; +`; export const PopupBox = styled.div<{ noPadding?: boolean }>` height: 290px; @@ -144,9 +143,9 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>` justify-content: space-between; & > section { - padding: ${({ noPadding }) => noPadding ? '0px' : '8px'}; + padding: ${({ noPadding }) => (noPadding ? "0px" : "8px")}; // this margin will send the section up when used with a header - margin-bottom: auto; + margin-bottom: auto; overflow-y: auto; table td { @@ -201,8 +200,7 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>` margin-left: 8px; } } - -` +`; export const Button = styled.button<{ upperCased?: boolean }>` display: inline-block; @@ -214,7 +212,7 @@ export const Button = styled.button<{ upperCased?: boolean }>` cursor: pointer; user-select: none; box-sizing: border-box; - text-transform: ${({ upperCased }) => upperCased ? 'uppercase' : 'none'}; + text-transform: ${({ upperCased }) => (upperCased ? "uppercase" : "none")}; font-family: inherit; font-size: 100%; @@ -223,7 +221,7 @@ export const Button = styled.button<{ upperCased?: boolean }>` color: rgba(0, 0, 0, 0.8); /* rgba supported */ border: 1px solid #999; /*IE 6/7/8*/ border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ - background-color: '#e6e6e6'; + background-color: "#e6e6e6"; text-decoration: none; border-radius: 2px; @@ -263,7 +261,7 @@ export const Link = styled.a<{ upperCased?: boolean }>` cursor: pointer; user-select: none; box-sizing: border-box; - text-transform: ${({ upperCased }) => upperCased ? 'uppercase' : 'none'}; + text-transform: ${({ upperCased }) => (upperCased ? "uppercase" : "none")}; font-family: inherit; font-size: 100%; @@ -304,9 +302,9 @@ export const FontIcon = styled.div` text-align: center; font-weight: bold; /* vertical-align: text-top; */ -` +`; export const ButtonBox = styled(Button)` - padding: .5em; + padding: 0.5em; width: fit-content; height: 2em; @@ -322,89 +320,87 @@ export const ButtonBox = styled(Button)` border-radius: 4px; border-color: black; color: black; -` - +`; const ButtonVariant = styled(Button)` color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -` +`; export const ButtonPrimary = styled(ButtonVariant)` background-color: rgb(66, 184, 221); -` +`; export const ButtonBoxPrimary = styled(ButtonBox)` color: rgb(66, 184, 221); border-color: rgb(66, 184, 221); -` +`; export const ButtonSuccess = styled(ButtonVariant)` background-color: #388e3c; -` +`; export const LinkSuccess = styled(Link)` color: #388e3c; -` +`; export const ButtonBoxSuccess = styled(ButtonBox)` color: #388e3c; border-color: #388e3c; -` +`; export const ButtonWarning = styled(ButtonVariant)` background-color: rgb(223, 117, 20); -` +`; export const LinkWarning = styled(Link)` color: rgb(223, 117, 20); -` +`; export const ButtonBoxWarning = styled(ButtonBox)` color: rgb(223, 117, 20); border-color: rgb(223, 117, 20); -` +`; export const ButtonDestructive = styled(ButtonVariant)` background-color: rgb(202, 60, 60); -` +`; export const ButtonBoxDestructive = styled(ButtonBox)` color: rgb(202, 60, 60); border-color: rgb(202, 60, 60); -` - +`; export const BoldLight = styled.div` -color: gray; -font-weight: bold; -` + color: gray; + font-weight: bold; +`; export const Centered = styled.div` text-align: center; & > :not(:first-child) { margin-top: 15px; } -` +`; export const Row = styled.div` display: flex; margin: 0.5em 0; justify-content: space-between; padding: 0.5em; -` +`; export const Row2 = styled.div` display: flex; /* margin: 0.5em 0; */ justify-content: space-between; padding: 0.5em; -` +`; export const Column = styled.div` display: flex; flex-direction: column; margin: 0em 1em; justify-content: space-between; -` +`; export const RowBorderGray = styled(Row)` border: 1px solid gray; /* border-radius: 0.5em; */ -` +`; export const RowLightBorderGray = styled(Row2)` border: 1px solid lightgray; @@ -414,7 +410,7 @@ export const RowLightBorderGray = styled(Row2)` border: 1px solid lightgray; background-color: red; } -` +`; export const HistoryRow = styled.a` text-decoration: none; @@ -423,7 +419,7 @@ export const HistoryRow = styled.a` display: flex; justify-content: space-between; padding: 0.5em; - + border: 1px solid lightgray; border-top: 0px; @@ -439,7 +435,7 @@ export const HistoryRow = styled.a` margin-left: auto; align-self: center; } -` +`; export const ListOfProducts = styled.div` & > div > a > img { @@ -453,62 +449,62 @@ export const ListOfProducts = styled.div` margin-right: auto; margin-left: 1em; } -` +`; export const LightText = styled.div` color: gray; -` +`; export const WarningText = styled.div` color: rgb(223, 117, 20); -` +`; export const SmallText = styled.div` - font-size: small; -` + font-size: small; +`; export const LargeText = styled.div` - font-size: large; -` + font-size: large; +`; export const ExtraLargeText = styled.div` - font-size: x-large; -` + font-size: x-large; +`; export const SmallLightText = styled(SmallText)` color: gray; -` +`; export const CenteredText = styled.div` white-space: nowrap; text-align: center; -` +`; export const CenteredBoldText = styled(CenteredText)` white-space: nowrap; text-align: center; font-weight: bold; color: ${((props: any): any => String(props.color) as any) as any}; -` +`; export const Input = styled.div<{ invalid?: boolean }>` & label { display: block; padding: 5px; - color: ${({ invalid }) => !invalid ? 'inherit' : 'red'} + color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; } & input { display: block; padding: 5px; width: calc(100% - 4px - 10px); - border-color: ${({ invalid }) => !invalid ? 'inherit' : 'red'} + border-color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; } -` +`; export const InputWithLabel = styled.div<{ invalid?: boolean }>` & label { display: block; padding: 5px; - color: ${({ invalid }) => !invalid ? 'inherit' : 'red'} + color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; } & > div { position: relative; @@ -516,20 +512,20 @@ export const InputWithLabel = styled.div<{ invalid?: boolean }>` top: 0px; bottom: 0px; - & > div { + & > div { position: absolute; background-color: lightgray; padding: 5px; margin: 2px; } - & > input { + & > input { flex: 1; - padding: 5px; - border-color: ${({ invalid }) => !invalid ? 'inherit' : 'red'} + padding: 5px; + border-color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; } } -` +`; export const ErrorBox = styled.div` border: 2px solid #f5c6cb; @@ -555,22 +551,22 @@ export const ErrorBox = styled.div` width: 28px; } } -` +`; export const SuccessBox = styled(ErrorBox)` color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; -` +`; export const WarningBox = styled(ErrorBox)` color: #664d03; background-color: #fff3cd; border-color: #ffecb5; -` +`; export const PopupNavigation = styled.div<{ devMode?: boolean }>` - background-color:#0042b2; + background-color: #0042b2; height: 35px; justify-content: space-around; display: flex; @@ -582,7 +578,7 @@ export const PopupNavigation = styled.div<{ devMode?: boolean }>` & > div > a { color: #f8faf7; display: inline-block; - width: calc(400px / ${({ devMode }) => !devMode ? 4 : 5}); + width: calc(400px / ${({ devMode }) => (!devMode ? 4 : 5)}); text-align: center; text-decoration: none; vertical-align: middle; @@ -597,7 +593,6 @@ export const PopupNavigation = styled.div<{ devMode?: boolean }>` `; export const NiceSelect = styled.div` - & > select { -webkit-appearance: none; -moz-appearance: none; @@ -617,19 +612,19 @@ export const NiceSelect = styled.div` display: flex; /* width: 10em; */ overflow: hidden; - border-radius: .25em; + border-radius: 0.25em; &::after { - content: '\u25BC'; + content: "\u25BC"; position: absolute; top: 0; right: 0; padding: 0.5em 1em; cursor: pointer; pointer-events: none; - -webkit-transition: .25s all ease; - -o-transition: .25s all ease; - transition: .25s all ease; + -webkit-transition: 0.25s all ease; + -o-transition: 0.25s all ease; + transition: 0.25s all ease; } &:hover::after { @@ -639,7 +634,7 @@ export const NiceSelect = styled.div` &::-ms-expand { display: none; } -` +`; export const Outlined = styled.div` border: 2px solid #388e3c; @@ -647,13 +642,12 @@ export const Outlined = styled.div` width: fit-content; border-radius: 2px; color: #388e3c; -` +`; /* { width: "1.5em", height: "1.5em", verticalAlign: "middle" } */ export const CheckboxSuccess = styled.input` vertical-align: center; - -` +`; export const TermsSection = styled.a` border: 1px solid black; @@ -664,13 +658,13 @@ export const TermsSection = styled.a` text-decoration: none; color: inherit; flex-direction: column; - + display: flex; &[data-open="true"] { - display: flex; + display: flex; } &[data-open="false"] > *:not(:first-child) { - display: none; + display: none; } header { @@ -681,11 +675,11 @@ export const TermsSection = styled.a` height: auto; } - &[data-open="true"] header:after { - content: '\\2227'; + &[data-open="true"] header:after { + content: "\\2227"; } - &[data-open="false"] header:after { - content: '\\2228'; + &[data-open="false"] header:after { + content: "\\2228"; } `; @@ -712,13 +706,13 @@ export const TermsOfService = styled.div` padding: 1em; margin-top: 2px; margin-bottom: 2px; - + display: flex; &[data-open="true"] { - display: flex; + display: flex; } &[data-open="false"] > *:not(:first-child) { - display: none; + display: none; } header { @@ -729,22 +723,20 @@ export const TermsOfService = styled.div` height: auto; } - &[data-open="true"] > header:after { - content: '\\2227'; + &[data-open="true"] > header:after { + content: "\\2227"; } - &[data-open="false"] > header:after { - content: '\\2228'; + &[data-open="false"] > header:after { + content: "\\2228"; } } - -` +`; export const StyledCheckboxLabel = styled.div` color: green; text-transform: uppercase; /* font-weight: bold; */ text-align: center; span { - input { display: none; opacity: 0; @@ -758,7 +750,7 @@ export const StyledCheckboxLabel = styled.div` margin-right: 1em; border-radius: 2px; border: 2px solid currentColor; - + svg { transition: transform 0.1s ease-in 25ms; transform: scale(0); @@ -776,12 +768,11 @@ export const StyledCheckboxLabel = styled.div` } input:disabled + div { color: #959495; - }; + } input:disabled + div + label { color: #959495; - }; + } input:focus + div + label { box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em currentColor; } - -`
\ No newline at end of file +`; |