From d2200e3702b04f97167c5c34940485dad0b270b7 Mon Sep 17 00:00:00 2001
From: Mariusz Klochowicz <mariusz@klochowicz.com>
Date: Tue, 7 Dec 2021 17:50:40 +1030
Subject: [PATCH 1/2] Improve closing Cfd message in the taker UI

- Present the timestamp in human-readable format instead of Unix time,
- use lowercase action name
---
 taker-frontend/src/components/CloseButton.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/taker-frontend/src/components/CloseButton.tsx b/taker-frontend/src/components/CloseButton.tsx
index ca5eb90..d0ca422 100644
--- a/taker-frontend/src/components/CloseButton.tsx
+++ b/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>

From 070a45f13aadf9731cbd7faf953f8a21f67c04be Mon Sep 17 00:00:00 2001
From: Mariusz Klochowicz <mariusz@klochowicz.com>
Date: Tue, 7 Dec 2021 17:58:05 +1030
Subject: [PATCH 2/2] Improve the link display in the disclaimer

Add the link icon with the same colour as other links.
---
 taker-frontend/src/components/Disclaimer.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/taker-frontend/src/components/Disclaimer.tsx b/taker-frontend/src/components/Disclaimer.tsx
index 8664b70..b098dc0 100644
--- a/taker-frontend/src/components/Disclaimer.tsx
+++ b/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>