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 (
- Are you sure you want to visit {link} + Are you sure you want to visit this website? +
+
+ {link}
No @@ -23,45 +27,52 @@ export const LinkModal = ({ isVisible, onClose, link }: LinkModalProps) => { onClose(); }} > - Yes + Yes, take me there
); }; -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} `;