From dae48c82cc076ff9a98decb3616998360dd24ba4 Mon Sep 17 00:00:00 2001
From: niloo-fs <niloofar.sadeghi@firstsource.tech>
Date: Wed, 5 Jan 2022 19:29:26 +0330
Subject: [PATCH 1/7] convert to TS

---
 .../components/{_hero.js => _hero.tsx}              |  0
 ...-text-switching.js => _image-text-switching.tsx} | 12 ++++++++----
 .../components/{_title-btn.js => _title-btn.tsx}    | 13 ++++++-------
 .../landing/weekend-trading/{index.js => index.tsx} |  0
 4 files changed, 14 insertions(+), 11 deletions(-)
 rename src/pages/landing/weekend-trading/components/{_hero.js => _hero.tsx} (100%)
 rename src/pages/landing/weekend-trading/components/{_image-text-switching.js => _image-text-switching.tsx} (96%)
 rename src/pages/landing/weekend-trading/components/{_title-btn.js => _title-btn.tsx} (90%)
 rename src/pages/landing/weekend-trading/{index.js => index.tsx} (100%)

diff --git a/src/pages/landing/weekend-trading/components/_hero.js b/src/pages/landing/weekend-trading/components/_hero.tsx
similarity index 100%
rename from src/pages/landing/weekend-trading/components/_hero.js
rename to src/pages/landing/weekend-trading/components/_hero.tsx
diff --git a/src/pages/landing/weekend-trading/components/_image-text-switching.js b/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
similarity index 96%
rename from src/pages/landing/weekend-trading/components/_image-text-switching.js
rename to src/pages/landing/weekend-trading/components/_image-text-switching.tsx
index 684e70fafc2..b3112455989 100644
--- a/src/pages/landing/weekend-trading/components/_image-text-switching.js
+++ b/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
@@ -1,6 +1,5 @@
 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'
@@ -8,6 +7,11 @@ import { Header, Text, QueryImage } from 'components/elements'
 import { localize } from 'components/localization'
 import { isIndexEven } from 'common/utility'
 
+type StylesProps = {
+    margin_right?: string
+    flex_direction?: string
+}
+
 const StyledSection = styled(SectionContainer)`
     @media ${device.tabletL} {
         padding: 40px 16px 0;
@@ -18,7 +22,7 @@ const StyledContainer = styled(Container)`
         width: 100%;
     }
 `
-const Content = styled.div`
+const Content = styled.div<StylesProps>`
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -38,7 +42,7 @@ const Content = styled.div`
     }
 `
 
-const ImageWrapper = styled.div`
+const ImageWrapper = styled.div<StylesProps>`
     max-width: 47.1rem;
     width: 100%;
     max-height: 30rem;
@@ -60,7 +64,7 @@ const StyledText = styled(Text)`
         line-height: 30px;
     }
 `
-const Row = styled.div`
+const Row = styled.div<StylesProps>`
     flex-direction: ${(props) => props.flex_direction};
     width: 100%;
     display: flex;
diff --git a/src/pages/landing/weekend-trading/components/_title-btn.js b/src/pages/landing/weekend-trading/components/_title-btn.tsx
similarity index 90%
rename from src/pages/landing/weekend-trading/components/_title-btn.js
rename to src/pages/landing/weekend-trading/components/_title-btn.tsx
index 2d44846944f..0e00c2b7d17 100644
--- a/src/pages/landing/weekend-trading/components/_title-btn.js
+++ b/src/pages/landing/weekend-trading/components/_title-btn.tsx
@@ -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'
@@ -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">
@@ -59,9 +63,4 @@ const Titlebtn = ({ btnlabel, text }) => {
     )
 }
 
-Titlebtn.propTypes = {
-    btnlabel: PropTypes.string,
-    text: PropTypes.string,
-}
-
 export default Titlebtn
diff --git a/src/pages/landing/weekend-trading/index.js b/src/pages/landing/weekend-trading/index.tsx
similarity index 100%
rename from src/pages/landing/weekend-trading/index.js
rename to src/pages/landing/weekend-trading/index.tsx

From aa5621662b622c6f5fc6ac4cd2e1b5b948cb82a5 Mon Sep 17 00:00:00 2001
From: niloo-fs <niloofar.sadeghi@firstsource.tech>
Date: Wed, 5 Jan 2022 20:04:31 +0330
Subject: [PATCH 2/7] convert the rest of the page to ts

---
 .../weekend-trading/components/_hero.tsx      | 80 +++++++------------
 .../{_icon-text-row.js => _icon-text-row.tsx} |  0
 .../components/_image-text-switching.tsx      | 54 ++++++-------
 src/pages/landing/weekend-trading/index.tsx   |  7 +-
 4 files changed, 56 insertions(+), 85 deletions(-)
 rename src/pages/landing/weekend-trading/components/{_icon-text-row.js => _icon-text-row.tsx} (100%)

diff --git a/src/pages/landing/weekend-trading/components/_hero.tsx b/src/pages/landing/weekend-trading/components/_hero.tsx
index a5894cf33b9..ed1058c0ea2 100644
--- a/src/pages/landing/weekend-trading/components/_hero.tsx
+++ b/src/pages/landing/weekend-trading/components/_hero.tsx
@@ -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;
@@ -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 type="subtitle-1">
+                            {
+                                <Localize translate_text="Trade even when most financial markets are closed" />
+                            }
+                        </Header>
                     </HeroContent>
                     <TryButton
                         target="_blank"
@@ -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
diff --git a/src/pages/landing/weekend-trading/components/_icon-text-row.js b/src/pages/landing/weekend-trading/components/_icon-text-row.tsx
similarity index 100%
rename from src/pages/landing/weekend-trading/components/_icon-text-row.js
rename to src/pages/landing/weekend-trading/components/_icon-text-row.tsx
diff --git a/src/pages/landing/weekend-trading/components/_image-text-switching.tsx b/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
index b3112455989..c775b1cee8f 100644
--- a/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
+++ b/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
@@ -7,11 +7,16 @@ import { Header, Text, QueryImage } from 'components/elements'
 import { localize } from 'components/localization'
 import { isIndexEven } from 'common/utility'
 
-type StylesProps = {
-    margin_right?: string
-    flex_direction?: string
+type ImageWrapperProps = {
+    margin_right: string
 }
 
+type RowProps = {
+    flex_direction: string
+}
+
+type ContentProps = ImageWrapperProps & {}
+
 const StyledSection = styled(SectionContainer)`
     @media ${device.tabletL} {
         padding: 40px 16px 0;
@@ -22,7 +27,7 @@ const StyledContainer = styled(Container)`
         width: 100%;
     }
 `
-const Content = styled.div<StylesProps>`
+const Content = styled.div<ContentProps>`
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -42,7 +47,7 @@ const Content = styled.div<StylesProps>`
     }
 `
 
-const ImageWrapper = styled.div<StylesProps>`
+const ImageWrapper = styled.div<ImageWrapperProps>`
     max-width: 47.1rem;
     width: 100%;
     max-height: 30rem;
@@ -64,7 +69,7 @@ const StyledText = styled(Text)`
         line-height: 30px;
     }
 `
-const Row = styled.div<StylesProps>`
+const Row = styled.div<RowProps>`
     flex-direction: ${(props) => props.flex_direction};
     width: 100%;
     display: flex;
@@ -90,7 +95,21 @@ const query = graphql`
         }
     }
 `
-const ImageTextSwitching = ({ P2P, reverse, two_title }) => {
+
+type ImageTextSwitchingProps = {
+    P2P: {
+        title: React.ReactElement
+        subtitle1: React.ReactElement
+        subtitle2: React.ReactElement
+        subtitle_mobile1: React.ReactElement
+        subtitle_mobile2: React.ReactElement
+        image_name: string
+        image_alt: string
+    }[]
+    reverse: boolean
+}
+
+const ImageTextSwitching = ({ P2P, reverse }: ImageTextSwitchingProps) => {
     const data = useStaticQuery(query)
     return (
         <StyledSection background="var(--color-white)" padding="5rem 0 0 0">
@@ -109,11 +128,7 @@ const ImageTextSwitching = ({ P2P, reverse, two_title }) => {
                     let 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>
@@ -131,15 +146,6 @@ const ImageTextSwitching = ({ P2P, reverse, two_title }) => {
                                 <Show.Mobile>
                                     <Text>{item.subtitle_mobile2}</Text>
                                 </Show.Mobile>
-                                {two_title && (
-                                    <>
-                                        <StyledHeader type="heading-3">
-                                            {item.second_title}
-                                        </StyledHeader>
-                                        <Text>{item.second_subtitle1}</Text>
-                                        <Text>{item.second_subtitle2}</Text>
-                                    </>
-                                )}
                             </Content>
                             <ImageWrapper margin_right={!is_even ? '0' : '12.6rem'}>
                                 <QueryImage
@@ -156,10 +162,4 @@ const ImageTextSwitching = ({ P2P, reverse, two_title }) => {
     )
 }
 
-ImageTextSwitching.propTypes = {
-    P2P: PropTypes.array,
-    reverse: PropTypes.bool,
-    two_title: PropTypes.bool,
-}
-
 export default ImageTextSwitching
diff --git a/src/pages/landing/weekend-trading/index.tsx b/src/pages/landing/weekend-trading/index.tsx
index 2811dd927a0..82cd79f14e8 100644
--- a/src/pages/landing/weekend-trading/index.tsx
+++ b/src/pages/landing/weekend-trading/index.tsx
@@ -66,12 +66,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

From f56d69143d1e09d465fa36dc3567d4ddf6a9c8cc Mon Sep 17 00:00:00 2001
From: niloo-fs <niloofar.sadeghi@firstsource.tech>
Date: Wed, 5 Jan 2022 20:24:35 +0330
Subject: [PATCH 3/7] rebuild

---
 src/pages/landing/weekend-trading/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/landing/weekend-trading/index.tsx b/src/pages/landing/weekend-trading/index.tsx
index 82cd79f14e8..832b72f4f55 100644
--- a/src/pages/landing/weekend-trading/index.tsx
+++ b/src/pages/landing/weekend-trading/index.tsx
@@ -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'),
     },

From 596ae45ed40ab38dcf86f0fa1dc9356722169c7a Mon Sep 17 00:00:00 2001
From: niloo-fs <niloofar.sadeghi@firstsource.tech>
Date: Sun, 9 Jan 2022 11:55:28 +0330
Subject: [PATCH 4/7] fix build bug

---
 .../weekend-trading/components/_image-text-switching.tsx      | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/landing/weekend-trading/components/_image-text-switching.tsx b/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
index c775b1cee8f..40af9bd177d 100644
--- a/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
+++ b/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
@@ -15,8 +15,6 @@ type RowProps = {
     flex_direction: string
 }
 
-type ContentProps = ImageWrapperProps & {}
-
 const StyledSection = styled(SectionContainer)`
     @media ${device.tabletL} {
         padding: 40px 16px 0;
@@ -27,7 +25,7 @@ const StyledContainer = styled(Container)`
         width: 100%;
     }
 `
-const Content = styled.div<ContentProps>`
+const Content = styled.div<ImageWrapperProps>`
     display: flex;
     flex-direction: column;
     justify-content: center;

From 48599817bfbe8f7aa783f9de988dfc0931a578e5 Mon Sep 17 00:00:00 2001
From: niloo-fs <niloofar.sadeghi@firstsource.tech>
Date: Sun, 16 Jan 2022 16:18:41 +0330
Subject: [PATCH 5/7] resolve review comments

---
 .../weekend-trading/components/_hero.tsx      |  2 +-
 .../components/_image-text-switching.tsx      | 20 ++++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/pages/landing/weekend-trading/components/_hero.tsx b/src/pages/landing/weekend-trading/components/_hero.tsx
index ed1058c0ea2..4c695ed1867 100644
--- a/src/pages/landing/weekend-trading/components/_hero.tsx
+++ b/src/pages/landing/weekend-trading/components/_hero.tsx
@@ -138,7 +138,7 @@ const Hero = () => {
                         {localize('Ride the trends even on weekends')}
                     </StyledHeader>
                     <HeroContent direction="column" justify="flex-start">
-                        <Header type="subtitle-1">
+                        <Header as="h2" type="subtitle-1">
                             {
                                 <Localize translate_text="Trade even when most financial markets are closed" />
                             }
diff --git a/src/pages/landing/weekend-trading/components/_image-text-switching.tsx b/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
index 40af9bd177d..a54d56c02d7 100644
--- a/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
+++ b/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
@@ -94,16 +94,18 @@ const query = graphql`
     }
 `
 
+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: {
-        title: React.ReactElement
-        subtitle1: React.ReactElement
-        subtitle2: React.ReactElement
-        subtitle_mobile1: React.ReactElement
-        subtitle_mobile2: React.ReactElement
-        image_name: string
-        image_alt: string
-    }[]
+    P2P: P2PType[]
     reverse: boolean
 }
 

From 287cac07f63ca679c5d77832cdb7f502b5e9fbd7 Mon Sep 17 00:00:00 2001
From: niloo-fs <niloofar.sadeghi@firstsource.tech>
Date: Mon, 24 Jan 2022 13:08:02 +0330
Subject: [PATCH 6/7] code improvement

---
 .../weekend-trading/components/_image-text-switching.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/landing/weekend-trading/components/_image-text-switching.tsx b/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
index a54d56c02d7..89810709315 100644
--- a/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
+++ b/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
@@ -125,7 +125,7 @@ const ImageTextSwitching = ({ P2P, reverse }: ImageTextSwitchingProps) => {
                 </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 margin_right={!is_even ? '12.6rem' : '0'}>

From 59587527a405c6b9e3f0dc770f3bb255c33af373 Mon Sep 17 00:00:00 2001
From: niloo-fs <niloofar.sadeghi@firstsource.tech>
Date: Wed, 26 Jan 2022 15:12:07 +0330
Subject: [PATCH 7/7] refactor image-text-switching component

---
 .../components/_image-text-switching.tsx      | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/pages/landing/weekend-trading/components/_image-text-switching.tsx b/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
index 89810709315..17888db83ac 100644
--- a/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
+++ b/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
@@ -1,11 +1,12 @@
 import React from 'react'
 import styled from 'styled-components'
 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
@@ -111,6 +112,8 @@ type ImageTextSwitchingProps = {
 
 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">
@@ -132,20 +135,19 @@ const ImageTextSwitching = ({ P2P, reverse }: ImageTextSwitchingProps) => {
                                 <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>
+                                {is_tabletL ? (
+                                    <>
+                                        <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>
                             <ImageWrapper margin_right={!is_even ? '0' : '12.6rem'}>
                                 <QueryImage