Merge #818

818: Improve closing Cfd message in the taker UI r=klochowicz a=klochowicz

- Present the timestamp in human-readable format instead of Unix time,
- use lowercase action name

Co-authored-by: Mariusz Klochowicz <mariusz@klochowicz.com>

taker-frontend/src/components/CloseButton.tsx

@@ -13,6 +13,7 @@ import {
 } from "@chakra-ui/react";
 import * as React from "react";
 import { Cfd, StateGroupKey, StateKey } from "../types";
+import Timestamp from "./Timestamp";
 
 interface Props {
     cfd: Cfd;
@@ -44,8 +45,10 @@ export default function CloseButton({ cfd, request, status, action }: Props) {
                     <PopoverCloseButton />
                     <PopoverBody>
                         <Text>
-                            This will {action} your position with the counterparty. The exchange rate at {cfd
-                                .expiry_timestamp}
+                            This will {action.toLowerCase()} your position with the counterparty. The exchange rate at
+                        </Text>
+                        <Timestamp timestamp={cfd.expiry_timestamp} />
+                        <Text>
                             will determine your profit/losses. It is likely that the rate will change until then.
                         </Text>
                     </PopoverBody>

taker-frontend/src/components/Disclaimer.tsx

@@ -1,3 +1,4 @@
+import { ExternalLinkIcon } from "@chakra-ui/icons";
 import {
     Button,
     Link,
@@ -9,6 +10,7 @@ import {
     ModalHeader,
     ModalOverlay,
     Text,
+    useColorModeValue,
     useDisclosure,
 } from "@chakra-ui/react";
 import React, { useEffect, useState } from "react";
@@ -21,6 +23,8 @@ export default function Disclaimer() {
 
     const { isOpen, onOpen, onClose } = useDisclosure();
 
+    const iconColor = useColorModeValue("white.200", "white.600");
+
     useEffect(() => {
         if (!ack) {
             onOpen();
@@ -49,6 +53,7 @@ export default function Disclaimer() {
                             isExternal
                         >
                             this guide!
+                            <ExternalLinkIcon mx="2px" color={iconColor} />
                         </Link>
                         <Text>Additionally, CFD trading is inherently risky: so don't get rekt</Text>
                     </ModalBody>