From 9c0b8a6d0afa6a30966710df1bea281f4ef9c0d2 Mon Sep 17 00:00:00 2001
From: sean-binary <sean@deriv.com>
Date: Wed, 25 Nov 2020 16:14:58 +0800
Subject: [PATCH 1/6] fix: translation UI breaking

---
 src/pages/p2p/components/_hero.js      | 10 +++++-----
 src/pages/p2p/components/_numbers.js   | 10 +++++-----
 src/pages/p2p/components/_p2pbanner.js |  4 ++--
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/pages/p2p/components/_hero.js b/src/pages/p2p/components/_hero.js
index 8801346b2f3..f9d6ffaeb10 100644
--- a/src/pages/p2p/components/_hero.js
+++ b/src/pages/p2p/components/_hero.js
@@ -26,7 +26,7 @@ const Wrapper = styled(Container)`
         justify-content: center;
     }
     @media ${device.mobileM} {
-        height: 678px;
+        height: unset;
     }
 `
 
@@ -61,11 +61,11 @@ const ImgWrapper = styled.div`
 
 const InformationWrapper = styled(Flex)`
     width: 100%;
-    max-width: 48.6rem;
+    max-width: 60.5rem;
     z-index: 1;
 
     @media ${device.tabletL} {
-        max-width: 40rem;
+        max-width: 42rem;
     }
     @media ${device.tablet} {
         top: 280px;
@@ -119,7 +119,7 @@ const StyledHeader = styled(Header)`
     font-size: 8rem;
 
     @media ${device.laptopM} {
-        width: 40rem;
+        width: 100%;
         font-size: 6rem;
         line-height: 8rem;
     }
@@ -137,7 +137,7 @@ const StyledHeader = styled(Header)`
 
 const TryButton = styled(LinkButton)`
     padding: 14px 16px;
-    width: 125px;
+    width: 220px;
     font-size: 14px;
     margin-top: 3.2rem;
     margin-bottom: 40px;
diff --git a/src/pages/p2p/components/_numbers.js b/src/pages/p2p/components/_numbers.js
index ad29de78500..382b5c43e58 100644
--- a/src/pages/p2p/components/_numbers.js
+++ b/src/pages/p2p/components/_numbers.js
@@ -41,22 +41,23 @@ const ClientCard = styled.article`
     border-radius: 10px;
     box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.2);
     width: 38.4rem;
-    height: 21.6rem;
+    height: unset;
     padding: 5.2rem;
     position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 
     :first-child {
         margin: -20rem 0 0 0;
     }
     @media ${device.laptopM} {
         min-height: 22rem;
-        height: 100%;
     }
     @media ${device.tablet} {
         margin: 0 0 24px 0;
         max-height: unset;
         width: 328px;
-        height: 184px;
         padding: 46px 44px;
 
         :first-child {
@@ -68,7 +69,6 @@ const ClientCard = styled.article`
     }
     @media ${device.mobileM} {
         max-width: 290px;
-        height: unset;
     }
 `
 const StyledHeader = styled(Header)`
@@ -95,7 +95,7 @@ const StyledLinkButton = styled(LinkButton)`
     padding: 14px 16px;
     font-size: 14px;
     border: unset;
-    width: 125px;
+    width: 220px;
     margin: 80px auto 0 auto;
     white-space: nowrap;
 
diff --git a/src/pages/p2p/components/_p2pbanner.js b/src/pages/p2p/components/_p2pbanner.js
index c28fe0c4854..4f2493db113 100644
--- a/src/pages/p2p/components/_p2pbanner.js
+++ b/src/pages/p2p/components/_p2pbanner.js
@@ -35,7 +35,7 @@ const Wrapper = styled(Container)`
 `
 const TryButton = styled(LinkButton)`
     padding: 14px 16px;
-    width: 125px;
+    width: 220px;
     font-size: 14px;
     margin-top: 2.4rem;
     border: unset;
@@ -134,7 +134,7 @@ const P2PBanner = ({ title }) => {
             </Show.Desktop>
             <Show.Mobile>
                 <Background
-                    style={{ height: '402px', backgroundPosition: '40% 50%' }}
+                    style={{ height: '500px', backgroundPosition: '40% 50%' }}
                     data={data['p2p_banner_mobile']}
                 >
                     <Wrapper>

From b5432cdfc121646d90a1a7ea8987527e1e290190 Mon Sep 17 00:00:00 2001
From: sean-binary <sean@deriv.com>
Date: Thu, 26 Nov 2020 11:04:26 +0800
Subject: [PATCH 2/6] responsive button sizes for all languages

---
 src/pages/p2p/components/_hero.js      | 3 ++-
 src/pages/p2p/components/_numbers.js   | 2 +-
 src/pages/p2p/components/_p2pbanner.js | 4 ++--
 src/translations/vi.json               | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/pages/p2p/components/_hero.js b/src/pages/p2p/components/_hero.js
index f9d6ffaeb10..148cd9d4d47 100644
--- a/src/pages/p2p/components/_hero.js
+++ b/src/pages/p2p/components/_hero.js
@@ -137,7 +137,8 @@ const StyledHeader = styled(Header)`
 
 const TryButton = styled(LinkButton)`
     padding: 14px 16px;
-    width: 220px;
+    width: min-content;
+    white-space: nowrap;
     font-size: 14px;
     margin-top: 3.2rem;
     margin-bottom: 40px;
diff --git a/src/pages/p2p/components/_numbers.js b/src/pages/p2p/components/_numbers.js
index 382b5c43e58..c9a3fd1e428 100644
--- a/src/pages/p2p/components/_numbers.js
+++ b/src/pages/p2p/components/_numbers.js
@@ -95,7 +95,7 @@ const StyledLinkButton = styled(LinkButton)`
     padding: 14px 16px;
     font-size: 14px;
     border: unset;
-    width: 220px;
+    width: min-content;
     margin: 80px auto 0 auto;
     white-space: nowrap;
 
diff --git a/src/pages/p2p/components/_p2pbanner.js b/src/pages/p2p/components/_p2pbanner.js
index 4f2493db113..0db9f62bfc9 100644
--- a/src/pages/p2p/components/_p2pbanner.js
+++ b/src/pages/p2p/components/_p2pbanner.js
@@ -35,7 +35,8 @@ const Wrapper = styled(Container)`
 `
 const TryButton = styled(LinkButton)`
     padding: 14px 16px;
-    width: 220px;
+    width: min-content;
+    white-space: nowrap;
     font-size: 14px;
     margin-top: 2.4rem;
     border: unset;
@@ -43,7 +44,6 @@ const TryButton = styled(LinkButton)`
     @media ${device.mobileL} {
         padding: 1.5rem 1.6rem;
         height: 42px;
-        white-space: nowrap;
     }
     @media (max-width: 460px) {
         margin-bottom: 2rem;
diff --git a/src/translations/vi.json b/src/translations/vi.json
index 7e43299de46..8f30dd2f3e4 100644
--- a/src/translations/vi.json
+++ b/src/translations/vi.json
@@ -567,7 +567,7 @@
     "1356903499": "Joanna giám sát toàn bộ quá trình đánh giá hiệu suất của tập đoàn đối với các quy định trong mọi khu vực pháp lý mà chúng tôi phục vụ. Thông tin của bà ấy bao gồm bằng tốt nghiệp về hoạt động và tuân thủ dịch vụ tài chính, bằng tốt nghiệp sau đại học chuyên nghiệp về phòng chống tội phạm tài chính và là thành viên với Hiệp hội tuân thủ luật pháp quốc tế.",
     "1357493810": "Giao dịch tài nguyên thiên nhiên - trung tâm của nền kinh tế thế giới.",
     "1360754724": "Ghé thăm Deriv.com ngay",
-    "1363565586": "Bắt đầu trao đổi",
+    "1363565586": "3. Bắt đầu trao đổi",
     "1364947573": "Bảng vẽ Dtrader",
     "1367990698": "Chỉ số biến động 10",
     "1371193412": "Huỷ",

From b9292514a7d682eb3a9d19b9bf44a6e4b4e13c48 Mon Sep 17 00:00:00 2001
From: sean-binary <sean@deriv.com>
Date: Thu, 26 Nov 2020 11:58:17 +0800
Subject: [PATCH 3/6] fix: translation UI breaking

---
 src/pages/p2p/components/_exchange-steps.js |  2 +-
 src/pages/p2p/components/_hero.js           |  6 +---
 src/pages/p2p/v2/index.js                   | 32 +++++++++++++++------
 src/translations/vi.json                    |  2 +-
 4 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/pages/p2p/components/_exchange-steps.js b/src/pages/p2p/components/_exchange-steps.js
index 5002d82417a..d23f143168f 100644
--- a/src/pages/p2p/components/_exchange-steps.js
+++ b/src/pages/p2p/components/_exchange-steps.js
@@ -46,7 +46,7 @@ const CardContainer = styled(Flex)`
 `
 const Card = styled(Flex)`
     flex-direction: column;
-    width: 38.4rem;
+    width: 38.1rem;
     height: auto;
     margin-right: 2.4rem;
     margin-bottom: 2rem;
diff --git a/src/pages/p2p/components/_hero.js b/src/pages/p2p/components/_hero.js
index 148cd9d4d47..4e0a5c4a0ca 100644
--- a/src/pages/p2p/components/_hero.js
+++ b/src/pages/p2p/components/_hero.js
@@ -18,16 +18,12 @@ const Wrapper = styled(Container)`
     justify-content: space-between;
     background-color: transparent;
     width: 80%;
-    height: 700px;
+    height: unset;
 
     @media ${device.tabletL} {
-        height: 95.4rem;
         flex-direction: column-reverse;
         justify-content: center;
     }
-    @media ${device.mobileM} {
-        height: unset;
-    }
 `
 
 const ImgWrapper = styled.div`
diff --git a/src/pages/p2p/v2/index.js b/src/pages/p2p/v2/index.js
index 2485a9ba411..3999b942f67 100644
--- a/src/pages/p2p/v2/index.js
+++ b/src/pages/p2p/v2/index.js
@@ -7,7 +7,7 @@ import Numbers from '../components/_numbers'
 import Availability from '../components/_availability'
 import { localize, Localize, WithIntl } from 'components/localization'
 import Layout from 'components/layout/layout'
-import { SEO } from 'components/containers'
+import { SEO, Show } from 'components/containers'
 
 const DP2P_CONTENT = [
     {
@@ -42,13 +42,29 @@ const DP2P_v2 = () => {
                 title={localize('DP2P')}
                 description={localize('Faster deposits and withdrawals')}
             />
-            <Hero
-                title={localize('Faster deposits and withdrawals')}
-                content={
-                    <Localize translate_text="Waiting too long? With DP2P, it just takes minutes. Spend more time on things that really matter." />
-                }
-                image_name="DP2P"
-            />
+            <Show.Desktop>
+                <Hero
+                    title={
+                        <Localize
+                            translate_text="Faster <0 />deposits and withdrawals"
+                            components={[<br key={0} />]}
+                        />
+                    }
+                    content={
+                        <Localize translate_text="Waiting too long? With DP2P, it just takes minutes. Spend more time on things that really matter." />
+                    }
+                    image_name="DP2P"
+                />
+            </Show.Desktop>
+            <Show.Mobile>
+                <Hero
+                    title={localize('Faster deposits and withdrawals')}
+                    content={
+                        <Localize translate_text="Waiting too long? With DP2P, it just takes minutes. Spend more time on things that really matter." />
+                    }
+                    image_name="DP2P"
+                />
+            </Show.Mobile>
             <DP2P reverse P2P={DP2P_CONTENT} />
             <Numbers />
             <ExchangeSteps />
diff --git a/src/translations/vi.json b/src/translations/vi.json
index 8f30dd2f3e4..7e43299de46 100644
--- a/src/translations/vi.json
+++ b/src/translations/vi.json
@@ -567,7 +567,7 @@
     "1356903499": "Joanna giám sát toàn bộ quá trình đánh giá hiệu suất của tập đoàn đối với các quy định trong mọi khu vực pháp lý mà chúng tôi phục vụ. Thông tin của bà ấy bao gồm bằng tốt nghiệp về hoạt động và tuân thủ dịch vụ tài chính, bằng tốt nghiệp sau đại học chuyên nghiệp về phòng chống tội phạm tài chính và là thành viên với Hiệp hội tuân thủ luật pháp quốc tế.",
     "1357493810": "Giao dịch tài nguyên thiên nhiên - trung tâm của nền kinh tế thế giới.",
     "1360754724": "Ghé thăm Deriv.com ngay",
-    "1363565586": "3. Bắt đầu trao đổi",
+    "1363565586": "Bắt đầu trao đổi",
     "1364947573": "Bảng vẽ Dtrader",
     "1367990698": "Chỉ số biến động 10",
     "1371193412": "Huỷ",

From ffc5d315a36f4b890b28d09d7469158cb749ccec Mon Sep 17 00:00:00 2001
From: sean-binary <sean@deriv.com>
Date: Thu, 26 Nov 2020 14:03:17 +0800
Subject: [PATCH 4/6] fix: translation UI breaking

---
 src/pages/p2p/components/_dp2p.js      |  1 +
 src/pages/p2p/components/_hero.js      | 11 ++++++++---
 src/pages/p2p/components/_p2pbanner.js |  2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/pages/p2p/components/_dp2p.js b/src/pages/p2p/components/_dp2p.js
index 61dfedb887f..6759048aafa 100644
--- a/src/pages/p2p/components/_dp2p.js
+++ b/src/pages/p2p/components/_dp2p.js
@@ -57,6 +57,7 @@ const StyledHeader = styled(Header)`
     line-height: 1.25;
 
     @media ${device.tabletL} {
+        width: 98%;
         margin-top: 0;
         text-align: center;
         font-size: 24px;
diff --git a/src/pages/p2p/components/_hero.js b/src/pages/p2p/components/_hero.js
index 4e0a5c4a0ca..e91bfc6309f 100644
--- a/src/pages/p2p/components/_hero.js
+++ b/src/pages/p2p/components/_hero.js
@@ -88,6 +88,7 @@ const HeroContent = styled(Flex)`
         display: flex;
         margin-top: 1.6rem;
         line-height: 3.6rem;
+        max-width: 78%;
     }
     @media ${device.laptopM} {
         ${Header} {
@@ -97,6 +98,7 @@ const HeroContent = styled(Flex)`
     @media ${device.tabletL} {
         ${Header} {
             font-size: 16px;
+            max-width: 74%;
         }
     }
     @media ${device.mobileL} {
@@ -106,6 +108,11 @@ const HeroContent = styled(Flex)`
             margin-top: 16px;
         }
     }
+    @media ${device.mobileS} {
+        ${Header} {
+            max-width: 98%;
+        }
+    }
 `
 const StyledHeader = styled(Header)`
     color: var(--color-white);
@@ -121,12 +128,10 @@ const StyledHeader = styled(Header)`
     }
     @media ${device.tabletL} {
         margin-top: 2rem;
-        width: 45rem;
         font-size: 40px;
         line-height: 6rem;
     }
     @media ${device.mobileL} {
-        width: 250px;
         line-height: 50px;
     }
 `
@@ -161,7 +166,7 @@ const HeroComponent = ({ title, content, background_data, img_data }) => {
                         {title}
                     </StyledHeader>
                     <HeroContent>
-                        <Header as="h1">{content}</Header>
+                        <Header as="h2">{content}</Header>
                     </HeroContent>
                     <TryButton
                         secondary="true"
diff --git a/src/pages/p2p/components/_p2pbanner.js b/src/pages/p2p/components/_p2pbanner.js
index 0db9f62bfc9..c2822e60b75 100644
--- a/src/pages/p2p/components/_p2pbanner.js
+++ b/src/pages/p2p/components/_p2pbanner.js
@@ -134,7 +134,7 @@ const P2PBanner = ({ title }) => {
             </Show.Desktop>
             <Show.Mobile>
                 <Background
-                    style={{ height: '500px', backgroundPosition: '40% 50%' }}
+                    style={{ height: '402px', backgroundPosition: '40% 50%' }}
                     data={data['p2p_banner_mobile']}
                 >
                     <Wrapper>

From 0b43769a6f57ed98a7b8d6f630cca1bf104a2afc Mon Sep 17 00:00:00 2001
From: sean-binary <sean@deriv.com>
Date: Thu, 26 Nov 2020 14:16:08 +0800
Subject: [PATCH 5/6] fix: translation UI breaking

---
 src/pages/p2p/components/_dp2p.js |  9 +++++++--
 src/pages/p2p/v1/index.js         | 12 ++++++++++++
 src/pages/p2p/v2/index.js         | 12 ++++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/pages/p2p/components/_dp2p.js b/src/pages/p2p/components/_dp2p.js
index 6759048aafa..c8bf157a565 100644
--- a/src/pages/p2p/components/_dp2p.js
+++ b/src/pages/p2p/components/_dp2p.js
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import { graphql, useStaticQuery } from 'gatsby'
 import device from 'themes/device'
-import { Container, SectionContainer } from 'components/containers'
+import { Container, SectionContainer, Show } from 'components/containers'
 import { Header, Text, QueryImage } from 'components/elements'
 import { localize } from 'components/localization'
 
@@ -117,7 +117,12 @@ const DP2P = ({ P2P, reverse, two_title }) => {
                         <Row flex_direction={!is_even ? 'row' : 'row-reverse'} key={index}>
                             <Content margin_right={!is_even ? '12.6rem' : '0'}>
                                 <StyledHeader>{item.title}</StyledHeader>
-                                <Text>{item.subtitle}</Text>
+                                <Show.Desktop>
+                                    <Text>{item.subtitle}</Text>
+                                </Show.Desktop>
+                                <Show.Mobile>
+                                    <Text>{item.subtitle_mobile}</Text>
+                                </Show.Mobile>
                                 {two_title && (
                                     <>
                                         <StyledHeader mt="2.4rem">{item.second_title}</StyledHeader>
diff --git a/src/pages/p2p/v1/index.js b/src/pages/p2p/v1/index.js
index f1c796c2925..8d877130f93 100644
--- a/src/pages/p2p/v1/index.js
+++ b/src/pages/p2p/v1/index.js
@@ -13,6 +13,12 @@ const DP2P_CONTENT = [
     {
         title: <Localize translate_text="Save time" />,
         subtitle: <Localize translate_text="Exchange in minutes. Less waiting, more trading." />,
+        subtitle_mobile: (
+            <Localize
+                translate_text="Exchange in minutes.<0 />Less waiting, more trading."
+                components={[<br key={0} />]}
+            />
+        ),
 
         image_name: 'buy_sell',
         image_alt: localize('Buy and sell'),
@@ -20,6 +26,9 @@ const DP2P_CONTENT = [
     {
         title: <Localize translate_text="Works in your local currency" />,
         subtitle: <Localize translate_text="Exchange with fellow traders at pre-agreed rates." />,
+        subtitle_mobile: (
+            <Localize translate_text="Exchange with fellow traders at pre-agreed rates." />
+        ),
 
         image_name: 'local_currency',
         image_alt: localize('Local currency'),
@@ -29,6 +38,9 @@ const DP2P_CONTENT = [
         subtitle: (
             <Localize translate_text="Easily make deposits and withdrawals on your desktop and mobile devices." />
         ),
+        subtitle_mobile: (
+            <Localize translate_text="Easily make deposits and withdrawals on your desktop and mobile devices." />
+        ),
 
         image_name: 'web_and_mobile',
         image_alt: localize('Web and mobile apps'),
diff --git a/src/pages/p2p/v2/index.js b/src/pages/p2p/v2/index.js
index 3999b942f67..ae0281d1559 100644
--- a/src/pages/p2p/v2/index.js
+++ b/src/pages/p2p/v2/index.js
@@ -13,6 +13,12 @@ const DP2P_CONTENT = [
     {
         title: <Localize translate_text="Save time" />,
         subtitle: <Localize translate_text="Exchange in minutes. Less waiting, more trading." />,
+        subtitle_mobile: (
+            <Localize
+                translate_text="Exchange in minutes.<0 />Less waiting, more trading."
+                components={[<br key={0} />]}
+            />
+        ),
 
         image_name: 'buy_sell',
         image_alt: localize('Buy and sell'),
@@ -20,6 +26,9 @@ const DP2P_CONTENT = [
     {
         title: <Localize translate_text="Works in your local currency" />,
         subtitle: <Localize translate_text="Exchange with fellow traders at pre-agreed rates." />,
+        subtitle_mobile: (
+            <Localize translate_text="Exchange with fellow traders at pre-agreed rates." />
+        ),
 
         image_name: 'local_currency',
         image_alt: localize('Local currency'),
@@ -29,6 +38,9 @@ const DP2P_CONTENT = [
         subtitle: (
             <Localize translate_text="Easily make deposits and withdrawals on your desktop and mobile devices." />
         ),
+        subtitle_mobile: (
+            <Localize translate_text="Easily make deposits and withdrawals on your desktop and mobile devices." />
+        ),
 
         image_name: 'web_and_mobile',
         image_alt: localize('Web and mobile apps'),

From dd221599f398ca137d1d0ac7b25d4278b0564e38 Mon Sep 17 00:00:00 2001
From: sean-binary <sean@deriv.com>
Date: Thu, 26 Nov 2020 16:25:07 +0800
Subject: [PATCH 6/6] fix: banner header size to cater all languages

---
 src/pages/p2p/components/_p2pbanner.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/p2p/components/_p2pbanner.js b/src/pages/p2p/components/_p2pbanner.js
index c2822e60b75..fe67987cf0e 100644
--- a/src/pages/p2p/components/_p2pbanner.js
+++ b/src/pages/p2p/components/_p2pbanner.js
@@ -84,7 +84,8 @@ const StyledHeader = styled(Header)`
         margin-top: 40px;
     }
     @media ${device.tabletS} {
-        font-size: 32px;
+        font-size: 24px;
+        max-width: 70%;
         margin-top: 20px;
     }
     @media ${device.mobileL} {