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.

Niloofar / Weekend trading to ts #2466

Merged
merged 7 commits into from
Jan 26, 2022
Merged

Niloofar / Weekend trading to ts #2466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
dae48c8
convert to TS
Jan 5, 2022
aa56216
convert the rest of the page to ts
Jan 5, 2022
f56d691
rebuild
Jan 5, 2022
596ae45
fix build bug
Jan 9, 2022
4859981
resolve review comments
Jan 16, 2022
287cac0
code improvement
Jan 24, 2022
5958752
refactor image-text-switching component
Jan 26, 2022
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
80 changes: 28 additions & 52 deletions ...nding/weekend-trading/components/_hero.js → ...ding/weekend-trading/components/_hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React from 'react'
import styled from 'styled-components'
import PropTypes from 'prop-types'
import { graphql, useStaticQuery } from 'gatsby'
import { Flex, Container, Show } from 'components/containers'
import { Flex, Container } from 'components/containers'
import { Header } from 'components/elements'
import { localize } from 'components/localization'
import { localize, Localize } from 'components/localization'
import { Background } from 'components/elements/background-image'
import { LinkButton } from 'components/form'
import device from 'themes/device.js'
import { useBrowserResize } from 'components/hooks/use-browser-resize'

const BackgroundWrapper = styled(Background)`
background-size: cover;
Expand Down Expand Up @@ -114,14 +114,35 @@ const TryButton = styled(LinkButton)`
}
`

const HeroComponent = ({ title, content, background_data }) => {
const query = graphql`
query {
p2p_hero_background: file(relativePath: { eq: "landing/weekend.png" }) {
...fadeIn
}
p2p_hero_background_mobile: file(relativePath: { eq: "landing/weekend-m.png" }) {
...fadeIn
}
}
`

const Hero = () => {
const data = useStaticQuery(query)
const [is_mobile] = useBrowserResize()
const background = is_mobile ? data['p2p_hero_background_mobile'] : data['p2p_hero_background']

return (
<BackgroundWrapper data={background_data}>
<BackgroundWrapper data={background}>
<Wrapper p="4rem 0 0" justify="space-between" height="unset">
<InformationWrapper height="unset" direction="column">
<StyledHeader type="hero">{title}</StyledHeader>
<StyledHeader type="hero">
{localize('Ride the trends even on weekends')}
</StyledHeader>
<HeroContent direction="column" justify="flex-start">
<Header type="subtitle-1">{content}</Header>
<Header as="h2" type="subtitle-1">
{
<Localize translate_text="Trade even when most financial markets are closed" />
}
</Header>
</HeroContent>
<TryButton
target="_blank"
Expand All @@ -138,49 +159,4 @@ const HeroComponent = ({ title, content, background_data }) => {
)
}

const query = graphql`
query {
p2p_hero_background: file(relativePath: { eq: "landing/weekend.png" }) {
...fadeIn
}
p2p_hero_background_mobile: file(relativePath: { eq: "landing/weekend-m.png" }) {
...fadeIn
}
}
`

const Hero = ({ title, content }) => {
const data = useStaticQuery(query)

return (
<div>
<Show.Desktop min_width="800">
<HeroComponent
title={title}
content={content}
background_data={data['p2p_hero_background']}
/>
</Show.Desktop>
<Show.Mobile>
<HeroComponent
title={title}
content={content}
background_data={data['p2p_hero_background_mobile']}
/>
</Show.Mobile>
</div>
)
}

HeroComponent.propTypes = {
background_data: PropTypes.any,
content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
title: PropTypes.string,
}

Hero.propTypes = {
content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
title: PropTypes.string,
}

export default Hero
0 ...kend-trading/components/_icon-text-row.js → ...end-trading/components/_icon-text-row.tsx
View file
Open in desktop
File renamed without changes.
84 changes: 45 additions & 39 deletions ...ading/components/_image-text-switching.js → ...ding/components/_image-text-switching.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
import React from 'react'
import styled from 'styled-components'
import PropTypes from 'prop-types'
import { graphql, useStaticQuery } from 'gatsby'
import device from 'themes/device'
import { Container, SectionContainer, Show } from 'components/containers'
import device, { size } from 'themes/device'
import { Container, SectionContainer } from 'components/containers'
import { Header, Text, QueryImage } from 'components/elements'
import { localize } from 'components/localization'
import { isIndexEven } from 'common/utility'
import { useBrowserResize } from 'components/hooks/use-browser-resize'

type ImageWrapperProps = {
margin_right: string
}

type RowProps = {
flex_direction: string
}

const StyledSection = styled(SectionContainer)`
@media ${device.tabletL} {
Expand All @@ -18,7 +26,7 @@ const StyledContainer = styled(Container)`
width: 100%;
}
`
const Content = styled.div`
const Content = styled.div<ImageWrapperProps>`
display: flex;
flex-direction: column;
justify-content: center;
Expand All @@ -38,7 +46,7 @@ const Content = styled.div`
}
`

const ImageWrapper = styled.div`
const ImageWrapper = styled.div<ImageWrapperProps>`
max-width: 47.1rem;
width: 100%;
max-height: 30rem;
Expand All @@ -60,7 +68,7 @@ const StyledText = styled(Text)`
line-height: 30px;
}
`
const Row = styled.div`
const Row = styled.div<RowProps>`
flex-direction: ${(props) => props.flex_direction};
width: 100%;
display: flex;
Expand All @@ -86,8 +94,26 @@ const query = graphql`
}
}
`
const ImageTextSwitching = ({ P2P, reverse, two_title }) => {

type P2PType = {
title: React.ReactElement
subtitle1: React.ReactElement
subtitle2: React.ReactElement
subtitle_mobile1: React.ReactElement
subtitle_mobile2: React.ReactElement
image_name: string
image_alt: string
}

type ImageTextSwitchingProps = {
P2P: P2PType[]
reverse: boolean
}

const ImageTextSwitching = ({ P2P, reverse }: ImageTextSwitchingProps) => {
const data = useStaticQuery(query)
const [is_tabletL] = useBrowserResize(size.tabletL)

return (
<StyledSection background="var(--color-white)" padding="5rem 0 0 0">
<StyledContainer direction="column">
Expand All @@ -102,38 +128,24 @@ const ImageTextSwitching = ({ P2P, reverse, two_title }) => {
</StyledText>

{P2P.map((item, index) => {
let is_even = isIndexEven(index, reverse)
const is_even = isIndexEven(index, reverse)
return (
<Row flex_direction={!is_even ? 'row' : 'row-reverse'} key={index}>
<Content
width="100%"
max_width="58.8rem"
margin_right={!is_even ? '12.6rem' : '0'}
>
<Content margin_right={!is_even ? '12.6rem' : '0'}>
<StyledHeader type="heading-3" mb="1rem">
{item.title}
</StyledHeader>
<Show.Desktop>
<Text size="var(--text-size-m)" pb="2rem">
{item.subtitle1}
</Text>
</Show.Desktop>
<Show.Desktop>
<Text size="var(--text-size-m)">{item.subtitle2}</Text>
</Show.Desktop>
<Show.Mobile>
<Text pb="2rem">{item.subtitle_mobile1}</Text>
</Show.Mobile>
<Show.Mobile>
<Text>{item.subtitle_mobile2}</Text>
</Show.Mobile>
{two_title && (
{is_tabletL ? (
<>
<StyledHeader type="heading-3">
{item.second_title}
</StyledHeader>
<Text>{item.second_subtitle1}</Text>
<Text>{item.second_subtitle2}</Text>
<Text pb="2rem">{item.subtitle_mobile1}</Text>
<Text>{item.subtitle_mobile2}</Text>
</>
) : (
<>
<Text size="var(--text-size-m)" pb="2rem">
{item.subtitle1}
</Text>
<Text size="var(--text-size-m)">{item.subtitle2}</Text>
</>
)}
</Content>
Expand All @@ -152,10 +164,4 @@ const ImageTextSwitching = ({ P2P, reverse, two_title }) => {
)
}

ImageTextSwitching.propTypes = {
P2P: PropTypes.array,
reverse: PropTypes.bool,
two_title: PropTypes.bool,
}

export default ImageTextSwitching
13 changes: 6 additions & 7 deletions .../weekend-trading/components/_title-btn.js → ...weekend-trading/components/_title-btn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react'
import styled from 'styled-components'
import PropTypes from 'prop-types'
import device from 'themes/device'
import { Container, SectionContainer } from 'components/containers'
import { Text } from 'components/elements'
Expand Down Expand Up @@ -37,7 +36,12 @@ const TryButton = styled(LinkButton)`
}
`

const Titlebtn = ({ btnlabel, text }) => {
type TitlebtnProps = {
btnlabel: string
text: string
}

const Titlebtn = ({ btnlabel, text }: TitlebtnProps) => {
return (
<StyledSection background="var(--color-grey-30)" padding="7rem 0 3rem" mt="9rem">
<StyledContainer direction="column">
Expand All @@ -59,9 +63,4 @@ const Titlebtn = ({ btnlabel, text }) => {
)
}

Titlebtn.propTypes = {
btnlabel: PropTypes.string,
text: PropTypes.string,
}

export default Titlebtn
8 changes: 1 addition & 7 deletions src/pages/landing/weekend-trading/index.js → src/pages/landing/weekend-trading/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ const DP2P_CONTENT = [
subtitle_mobile2: (
<Localize translate_text="Available to trade on Deriv MT5 and Deriv X (with margin), DTrader (with options and multipliers), and Deriv GO (with multipliers)." />
),

image_name: 'buy_sell',
image_alt: localize('Buy and sell'),
},
Expand Down Expand Up @@ -66,12 +65,7 @@ const WeekenLP = () => {
title={localize('Weekends')}
description={localize('Ride the trends even on weekends')}
/>
<Hero
title={localize('Ride the trends even on weekends')}
content={
<Localize translate_text="Trade even when most financial markets are closed" />
}
/>
<Hero />
<IconTextRow />
<ImageTextSwitching reverse P2P={DP2P_CONTENT} />
<Titlebtn
Expand Down