From 5609c9540d417334fd5e413960aebe0359058740 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Mon, 18 Oct 2021 22:41:23 +0200
Subject: [PATCH] Link modal redesign (#82)

* Redesign link modal

* Add cursor pointer
---
 .../src/components/Buttons/DownloadButton.tsx | 11 ++--
 .../src/components/Buttons/buttonStyle.tsx    | 11 ++++
 .../components/Chat/ChatMessageContent.tsx    |  1 +
 .../src/components/Modals/LinkModal.tsx       | 53 +++++++++++--------
 4 files changed, 48 insertions(+), 28 deletions(-)
 create mode 100644 packages/react-chat/src/components/Buttons/buttonStyle.tsx

diff --git a/packages/react-chat/src/components/Buttons/DownloadButton.tsx b/packages/react-chat/src/components/Buttons/DownloadButton.tsx
index 78f8d517..eb1ffbbf 100644
--- a/packages/react-chat/src/components/Buttons/DownloadButton.tsx
+++ b/packages/react-chat/src/components/Buttons/DownloadButton.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 
+import { buttonStyles } from "./buttonStyle";
+
 const userAgent = window.navigator.userAgent;
 const platform = window.navigator.platform;
 const macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"];
@@ -59,11 +61,6 @@ export const DownloadButton = ({ className }: DownloadButtonProps) => {
 const Link = styled.a`
   margin-top: 24px;
   padding: 11px 32px;
-  font-weight: 500;
-  font-size: 15px;
-  line-height: 22px;
-  text-align: center;
-  color: ${({ theme }) => theme.tertiary};
-  background: ${({ theme }) => theme.buttonBg};
-  border-radius: 8px;
+
+  ${buttonStyles}
 `;
diff --git a/packages/react-chat/src/components/Buttons/buttonStyle.tsx b/packages/react-chat/src/components/Buttons/buttonStyle.tsx
new file mode 100644
index 00000000..cf461a4f
--- /dev/null
+++ b/packages/react-chat/src/components/Buttons/buttonStyle.tsx
@@ -0,0 +1,11 @@
+import { css } from "styled-components";
+
+export const buttonStyles = css`
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 22px;
+  text-align: center;
+  color: ${({ theme }) => theme.tertiary};
+  background: ${({ theme }) => theme.buttonBg};
+`;
diff --git a/packages/react-chat/src/components/Chat/ChatMessageContent.tsx b/packages/react-chat/src/components/Chat/ChatMessageContent.tsx
index 85cd4fcc..4b5e5af2 100644
--- a/packages/react-chat/src/components/Chat/ChatMessageContent.tsx
+++ b/packages/react-chat/src/components/Chat/ChatMessageContent.tsx
@@ -169,5 +169,6 @@ const ContentWrapper = styled.div`
 
 const Link = styled.div`
   text-decoration: underline;
+  cursor: pointer;
   color: ${({ theme }) => theme.memberNameColor};
 `;
diff --git a/packages/react-chat/src/components/Modals/LinkModal.tsx b/packages/react-chat/src/components/Modals/LinkModal.tsx
index 9b34883a..60c25c3b 100644
--- a/packages/react-chat/src/components/Modals/LinkModal.tsx
+++ b/packages/react-chat/src/components/Modals/LinkModal.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
+import { buttonStyles } from "../Buttons/buttonStyle";
 import { textMediumStyles } from "../Text";
 
 import { BasicModalProps, Modal } from "./Modal";
@@ -13,7 +14,10 @@ export const LinkModal = ({ isVisible, onClose, link }: LinkModalProps) => {
   return (
     <Modal isVisible={isVisible} onClose={onClose}>
       <Section>
-        <Text>Are you sure you want to visit {link}</Text>
+        <Question>Are you sure you want to visit this website?</Question>
+      </Section>
+      <Section>
+        <Link>{link}</Link>
       </Section>
       <ButtonSection>
         <ButtonNo onClick={onClose}>No</ButtonNo>
@@ -23,45 +27,52 @@ export const LinkModal = ({ isVisible, onClose, link }: LinkModalProps) => {
             onClose();
           }}
         >
-          Yes
+          Yes, take me there
         </ButtonYes>
       </ButtonSection>
     </Modal>
   );
 };
 
-const ButtonSection = styled.div`
-  display: flex;
-`;
-
 const Section = styled.div`
-  padding: 20px 16px;
+  padding: 16px;
 
   & + & {
     border-top: 1px solid ${({ theme }) => theme.border};
   }
 `;
 
-const Text = styled.p`
+const Question = styled.p`
+  color: ${({ theme }) => theme.primary};
+  font-weight: bold;
+  font-size: 17px;
+  line-height: 24px;
+`;
+
+const Link = styled.a`
+  text-decoration: none;
+  word-break: break-all;
   color: ${({ theme }) => theme.primary};
 
   ${textMediumStyles}
 `;
 
-const ButtonYes = styled.button`
-  background-color: ${({ theme }) => theme.tertiary};
-  padding: 10px;
-  width: 50px;
-  height: 40px;
-  border-radius: 10px;
-  margin: 10px;
+const ButtonSection = styled(Section)`
+  display: flex;
+  justify-content: flex-end;
 `;
 
 const ButtonNo = styled.button`
-  background-color: ${({ theme }) => theme.secondary};
-  padding: 10px;
-  width: 50px;
-  height: 40px;
-  border-radius: 10px;
-  margin: 10px;
+  padding: 11px 24px;
+  margin-right: 16px;
+
+  ${buttonStyles}
+  background: rgba(255, 45, 85, 0.1);
+  color: #ff2d55;
+`;
+
+const ButtonYes = styled.button`
+  padding: 11px 24px;
+
+  ${buttonStyles}
 `;