fix some feedback from belen

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} />
 }
 

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';
     }
   }

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>