add exchange feature

2 files changed, 15 insertions, 4 deletions

diff --git a/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
index 3b9519f39..c22103a85 100644
--- a/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
+++ b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
@@ -48,8 +48,8 @@ export function CheckboxOutlined({
   label,
 }: Props): VNode {
   return (
-    <Outlined>
-      <StyledCheckboxLabel onClick={onToggle}>
+    <StyledCheckboxLabel onClick={onToggle}>
+      <Outlined>
         <span>
           <input
             type="checkbox"
@@ -62,7 +62,7 @@ export function CheckboxOutlined({
           </div>
           <label for={name}>{label}</label>
         </span>
-      </StyledCheckboxLabel>
-    </Outlined>
+      </Outlined>
+    </StyledCheckboxLabel>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index b2ca13801..7cef8789b 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -476,6 +476,14 @@ const ButtonVariant = styled(Button)`
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 `;
 
+export const LinkDestructive = styled(Link)`
+  background-color: rgb(202, 60, 60);
+`;
+
+export const LinkPrimary = styled(Link)`
+  color: rgb(66, 184, 221);
+`;
+
 export const ButtonPrimary = styled(ButtonVariant)<{ small?: boolean }>`
   font-size: ${({ small }) => (small ? "small" : "inherit")};
   background-color: rgb(66, 184, 221);
@@ -892,12 +900,14 @@ export const StyledCheckboxLabel = styled.div`
   text-transform: uppercase;
   /* font-weight: bold; */
   text-align: center;
+  cursor: pointer;
   span {
     input {
       display: none;
       opacity: 0;
       width: 1em;
       height: 1em;
+      cursor: pointer;
     }
     div {
       display: inline-grid;
@@ -916,6 +926,7 @@ export const StyledCheckboxLabel = styled.div`
     label {
       padding: 0px;
       font-size: small;
+      cursor: pointer;
     }
   }