refactored terms of service to remove duplicated code

prettfied some sources

3 files changed, 34 insertions, 25 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts
index 9603b3d2c..06d519268 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts
@@ -17,13 +17,12 @@
 import {
   DenomOperationMap,
   ExchangeFullDetails,
-  ExchangeListItem, FeeDescriptionPair
+  ExchangeListItem,
+  FeeDescriptionPair,
 } from "@gnu-taler/taler-util";
 import { Loading } from "../../components/Loading.js";
 import { HookError } from "../../hooks/useAsyncAsHook.js";
-import {
-  State as SelectExchangeState
-} from "../../hooks/useSelectedExchange.js";
+import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js";
 import { ButtonHandler, SelectFieldHandler } from "../../mui/handlers.js";
 import { compose, StateViewMap } from "../../utils/index.js";
 import * as wxApi from "../../wxApi.js";
@@ -32,12 +31,12 @@ import {
   ComparingView,
   ErrorLoadingView,
   NoExchangesView,
-  ReadyView
+  ReadyView,
 } from "./views.js";
 
 export interface Props {
-  list: ExchangeListItem[],
-  currentExchange: string,
+  list: ExchangeListItem[];
+  currentExchange: string;
   onCancel: () => Promise<void>;
   onSelection: (exchange: string) => Promise<void>;
 }
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts
index 954e52239..e1b270a42 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts
@@ -25,9 +25,13 @@ export function useComponentState(
   { onCancel, onSelection, list: exchanges, currentExchange }: Props,
   api: typeof wxApi,
 ): State {
-  const initialValue = exchanges.findIndex(e => e.exchangeBaseUrl === currentExchange);
+  const initialValue = exchanges.findIndex(
+    (e) => e.exchangeBaseUrl === currentExchange,
+  );
   if (initialValue === -1) {
-    throw Error(`wrong usage of ExchangeSelection component, currentExchange '${currentExchange}' is not in the list of exchanges`)
+    throw Error(
+      `wrong usage of ExchangeSelection component, currentExchange '${currentExchange}' is not in the list of exchanges`,
+    );
   }
   const [value, setValue] = useState(String(initialValue));
 
@@ -113,7 +117,7 @@ export function useComponentState(
     withdraw: createPairTimeline(
       selected.denomFees.withdraw,
       original.denomFees.withdraw,
-    )
+    ),
   };
 
   return {
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
index 6b753e215..d39aa3878 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
@@ -14,24 +14,20 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import {
-  Amounts,
-  FeeDescription,
-  FeeDescriptionPair,
-} from "@gnu-taler/taler-util";
+import { FeeDescription, FeeDescriptionPair } from "@gnu-taler/taler-util";
 import { styled } from "@linaria/react";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Amount } from "../../components/Amount.js";
 import { LoadingError } from "../../components/LoadingError.js";
 import { SelectList } from "../../components/SelectList.js";
-import { Input, LinkPrimary, SvgIcon } from "../../components/styled/index.js";
+import { Input, SvgIcon } from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
 import { useTranslationContext } from "../../context/translation.js";
+import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js";
 import { Button } from "../../mui/Button.js";
 import arrowDown from "../../svg/chevron-down.svg";
 import { State } from "./index.js";
-import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js";
 
 const ButtonGroup = styled.div`
   & > button {
@@ -39,6 +35,16 @@ const ButtonGroup = styled.div`
     margin-right: 8px;
   }
 `;
+const ButtonGroupFooter = styled.div`
+  & {
+    display: flex;
+    justify-content: space-between;
+  }
+  & > button {
+    margin-left: 8px;
+    margin-right: 8px;
+  }
+`;
 
 const FeeDescriptionTable = styled.table`
   & {
@@ -343,10 +349,10 @@ export function ComparingView({
         </table>
       </section>
       <section>
-        <ButtonGroup>
-          <LinkPrimary>Privacy policy</LinkPrimary>
-          <LinkPrimary>Terms of service</LinkPrimary>
-        </ButtonGroup>
+        <ButtonGroupFooter>
+          <Button variant="outlined">Privacy policy</Button>
+          <Button variant="outlined">Terms of service</Button>
+        </ButtonGroupFooter>
       </section>
     </Container>
   );
@@ -609,10 +615,10 @@ export function ReadyView({
         </FeeDescriptionTable>
       </section>
       <section>
-        <ButtonGroup>
-          <LinkPrimary>Privacy policy</LinkPrimary>
-          <LinkPrimary>Terms of service</LinkPrimary>
-        </ButtonGroup>
+        <ButtonGroupFooter>
+          <Button variant="outlined">Privacy policy</Button>
+          <Button variant="outlined">Terms of service</Button>
+        </ButtonGroupFooter>
       </section>
     </Container>
   );