Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

Sean/dp2p page translatation ui #1232

Merged
merged 6 commits into from Nov 27, 2020
Merged

Sean/dp2p page translatation ui #1232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9c0b8a6
fix: translation UI breaking
Nov 25, 2020
b5432cd
responsive button sizes for all languages
Nov 26, 2020
b929251
fix: translation UI breaking
Nov 26, 2020
ffc5d31
fix: translation UI breaking
Nov 26, 2020
0b43769
fix: translation UI breaking
Nov 26, 2020
dd22159
fix: banner header size to cater all languages
Nov 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions src/pages/p2p/components/_dp2p.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -116,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>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/p2p/components/_exchange-steps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
26 changes: 14 additions & 12 deletions src/pages/p2p/components/_hero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: 678px;
}
`

const ImgWrapper = styled.div`
Expand Down Expand Up @@ -61,11 +57,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;
Expand All @@ -92,6 +88,7 @@ const HeroContent = styled(Flex)`
display: flex;
margin-top: 1.6rem;
line-height: 3.6rem;
max-width: 78%;
}
@media ${device.laptopM} {
${Header} {
Expand All @@ -101,6 +98,7 @@ const HeroContent = styled(Flex)`
@media ${device.tabletL} {
${Header} {
font-size: 16px;
max-width: 74%;
}
}
@media ${device.mobileL} {
Expand All @@ -110,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);
Expand All @@ -119,25 +122,24 @@ const StyledHeader = styled(Header)`
font-size: 8rem;

@media ${device.laptopM} {
width: 40rem;
width: 100%;
font-size: 6rem;
line-height: 8rem;
}
@media ${device.tabletL} {
margin-top: 2rem;
width: 45rem;
font-size: 40px;
line-height: 6rem;
}
@media ${device.mobileL} {
width: 250px;
line-height: 50px;
}
`

const TryButton = styled(LinkButton)`
padding: 14px 16px;
width: 125px;
width: min-content;
white-space: nowrap;
font-size: 14px;
margin-top: 3.2rem;
margin-bottom: 40px;
Expand All @@ -164,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"
Expand Down
10 changes: 5 additions & 5 deletions src/pages/p2p/components/_numbers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -68,7 +69,6 @@ const ClientCard = styled.article`
}
@media ${device.mobileM} {
max-width: 290px;
height: unset;
}
`
const StyledHeader = styled(Header)`
Expand All @@ -95,7 +95,7 @@ const StyledLinkButton = styled(LinkButton)`
padding: 14px 16px;
font-size: 14px;
border: unset;
width: 125px;
width: min-content;
margin: 80px auto 0 auto;
white-space: nowrap;

Expand Down
7 changes: 4 additions & 3 deletions src/pages/p2p/components/_p2pbanner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,15 @@ const Wrapper = styled(Container)`
`
const TryButton = styled(LinkButton)`
padding: 14px 16px;
width: 125px;
width: min-content;
white-space: nowrap;
font-size: 14px;
margin-top: 2.4rem;
border: unset;

@media ${device.mobileL} {
padding: 1.5rem 1.6rem;
height: 42px;
white-space: nowrap;
}
@media (max-width: 460px) {
margin-bottom: 2rem;
Expand Down Expand Up @@ -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} {
Expand Down
12 changes: 12 additions & 0 deletions src/pages/p2p/v1/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,22 @@ 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'),
},
{
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'),
Expand All @@ -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'),
Expand Down
44 changes: 36 additions & 8 deletions src/pages/p2p/v2/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,28 @@ 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 = [
{
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'),
},
{
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'),
Expand All @@ -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'),
Expand All @@ -42,13 +54,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 />
Expand Down