summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--packages/taler-wallet-webextension/src/components/ExchangeToS.tsx12
-rw-r--r--packages/taler-wallet-webextension/src/components/styled/index.tsx16
-rw-r--r--packages/taler-wallet-webextension/src/cta/Withdraw.tsx8
3 files changed, 24 insertions, 12 deletions
diff --git a/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx b/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx
index 0325daa0..b7b0d2fd 100644
--- a/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx
+++ b/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx
@@ -28,6 +28,11 @@ export function ExchangeXmlTos({ doc }: { doc: Document }) {
</Fragment>
}
+/**
+ * Map XML elements into HTML
+ * @param child
+ * @returns
+ */
function renderChild(child: Element): VNode {
const children = Array.from(child.children)
switch (child.nodeName) {
@@ -55,13 +60,16 @@ function renderChild(child: Element): VNode {
}
}
+/**
+ * Simple anchor with a state persisted into 'data-open' prop
+ * @returns
+ */
function AnchorWithOpenState(props: JSXInternal.HTMLAttributes<HTMLAnchorElement>) {
const [open, setOpen] = useState<boolean>(false)
function doClick(e: JSXInternal.TargetedMouseEvent<HTMLAnchorElement>) {
setOpen(!open);
- e.stopPropagation();
e.preventDefault();
}
- return <a data-open={JSON.stringify(open)} onClick={doClick} {...props} />
+ return <a data-open={open ? 'true' : 'false'} onClick={doClick} {...props} />
}
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index a46f38ee..23b0b1b5 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -339,6 +339,9 @@ export const ButtonBoxSuccess = styled(ButtonBox)`
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);
@@ -641,14 +644,17 @@ export const TermsOfService = styled.div`
}
a {
+ text-decoration: none;
+ color: inherit;
+ flex-direction: column;
+ }
+
+ & > a {
border: 1px solid black;
border-radius: 5px;
padding: 1em;
margin-top: 2px;
margin-bottom: 2px;
- text-decoration: none;
- color: inherit;
- flex-direction: column;
display: flex;
&[data-open="true"] {
@@ -666,10 +672,10 @@ export const TermsOfService = styled.div`
height: auto;
}
- &[data-open="true"] header:after {
+ &[data-open="true"] > header:after {
content: '\\2227';
}
- &[data-open="false"] header:after {
+ &[data-open="false"] > header:after {
content: '\\2228';
}
}
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
index 304313a9..b8b8159f 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
@@ -28,7 +28,7 @@ import { CheckboxOutlined } from '../components/CheckboxOutlined';
import { ExchangeXmlTos } from '../components/ExchangeToS';
import { LogoHeader } from '../components/LogoHeader';
import { Part } from '../components/Part';
-import { ButtonDestructive, ButtonSuccess, ButtonWarning, LinkSuccess, TermsOfService, WalletAction } from '../components/styled';
+import { ButtonDestructive, ButtonSuccess, ButtonWarning, LinkSuccess, LinkWarning, TermsOfService, WalletAction } from '../components/styled';
import {
acceptWithdrawal, getExchangeWithdrawalInfo, getWithdrawalDetailsForUri, onUpdateNotification, setExchangeTosAccepted
} from "../wxApi";
@@ -42,8 +42,6 @@ export interface ViewProps {
details: ExchangeWithdrawDetails;
amount: string;
onWithdraw: () => Promise<void>;
- // setCancelled: (b: boolean) => void;
- // setSelecting: (b: boolean) => void;
onReview: (b: boolean) => void;
onAccept: (b: boolean) => void;
reviewing: boolean;
@@ -171,9 +169,9 @@ export function View({ details, amount, onWithdraw, terms, reviewing, onReview,
</ButtonSuccess>
}
{terms.status === 'notfound' &&
- <ButtonDestructive upperCased disabled>
+ <LinkWarning upperCased>
{i18n.str`Exchange doesn't have terms of service`}
- </ButtonDestructive>
+ </LinkWarning>
}
</section>
</WalletAction>