binary-com · habib-deriv · Feb 4, 2022 · Jan 26, 2022 · Jan 26, 2022 · Jan 26, 2022
@@ -4,7 +4,7 @@ import { Paddings, Margins } from 'themes/function'
 import device from 'themes/device.js'
 
 export const SharedButtonStyle = css`
-    border-radius: 6px;
+    border-radius: 4px;
     padding: 10px 16px;
     font-size: 14px;
     transition: all 0.25s;

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 
-export const useDebouncedEffect = (effect: () => void, deps: any[], delay: number): void => {
+export const useDebouncedEffect = (effect: () => void, deps: unknown[], delay: number): void => {
     useEffect(() => {
         const handler = setTimeout(() => effect(), delay)
 

@@ -1,9 +1,9 @@
-import i18n from 'i18next'
+import i18n, { use, t } from 'i18next'
 import { initReactI18next } from 'react-i18next'
 import { str as crc32 } from 'crc-32'
 import language_config from '../../../i18n-config'
 
-i18n.use(initReactI18next).init({
+use(initReactI18next).init({
     ns: ['translations'],
     defaultNS: 'translations',
 
@@ -25,7 +25,6 @@ i18n.use(initReactI18next).init({
 
 i18n.languages = Object.keys(language_config)
 
-export const localize = (string, values) =>
-    i18n.t(crc32(string), { defaultValue: string, ...values })
+export const localize = (string, values) => t(crc32(string), { defaultValue: string, ...values })
 
 export default i18n
@@ -1,27 +1,15 @@
 import React from 'react'
 import styled from 'styled-components'
-import { graphql, useStaticQuery } from 'gatsby'
 import { isBrowser } from 'common/utility'
 import { SEO } from 'components/containers'
 import Layout from 'components/layout/layout'
-import { Header, Text, QueryImage } from 'components/elements'
+import { Header } from 'components/elements'
 import { localize, WithIntl } from 'components/localization'
 import { LinkButton } from 'components/form'
+import ImageNotAvailable from 'images/svg/image-not-available.svg'
 
-const query = graphql`
-    query {
-        page_not_found: file(relativePath: { eq: "page-not-found.png" }) {
-            ...fadeIn
-        }
-    }
-`
-
-const ImageWrapper = styled.div`
-    width: 100%;
-    max-width: 59.4rem;
-`
 const PageNotFoundContainerInfo = styled.div`
-    margin-left: 2.4rem;
+    margin: 16px;
 
     * {
         margin: 1.6rem 0;
@@ -34,13 +22,14 @@ const PageNotFoundContainer = styled.div`
     align-items: center;
     padding: 16rem 0;
     flex-wrap: wrap;
+    flex-direction: column;
 `
 const ButtonWrapper = styled.div`
-    margin-top: 2.6rem;
+    margin-top: 3rem;
+    text-align: center;
 `
 
 const PageNotFound = () => {
-    const data = useStaticQuery(query)
     return (
         isBrowser() && (
             <Layout>
@@ -49,27 +38,26 @@ const PageNotFound = () => {
                     description={localize('The page you are looking for does not exist.')}
                 />
                 <PageNotFoundContainer>
-                    <ImageWrapper>
-                        <QueryImage
-                            data={data['page_not_found']}
-                            alt={localize('Page not found')}
-                            loading="eager"
-                        />
-                    </ImageWrapper>
+                    <img
+                        src={ImageNotAvailable}
+                        alt={localize('Page not found')}
+                        width="96"
+                        height="96"
+                    />
 
                     <PageNotFoundContainerInfo>
-                        <Header as="h3" type="sub-section-title">
-                            {localize("This channel doesn't work")}
+                        <Header as="h3" type="heading-3" align="center">
+                            {localize('We couldn’t find that page')}
                         </Header>
-                        <Text>
+                        <Header as="p" type="paragraph-1" align="center" weight="normal">
                             {localize(
-                                'You may have followed a broken link, or the page has moved to a new address.',
+                                'It may not be available in your country, or maybe a broken link has brought you here.',
                             )}
-                        </Text>
-                        <Text>{localize('Error code: 404 page not found')}</Text>
+                        </Header>
+
                         <ButtonWrapper>
                             <LinkButton secondary="true" to="/">
-                                {localize('Go to the homepage')}
+                                {localize('Visit our homepage')}
                             </LinkButton>
                         </ButtonWrapper>
                     </PageNotFoundContainerInfo>

@@ -66,7 +66,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
                                 <MainArticle image={getAssetUrl(headline_recent?.main_image?.id)}>
                                     <Description>
                                         <TagParentWrapper>
-                                            {headline_recent.tags.map((article) => {
+                                            {headline_recent.tags.slice(0, 3).map((article) => {
                                                 return (
                                                     <TagWrapper key={article?.id}>
                                                         <StyledCategories>
@@ -149,15 +149,17 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
                                     >
                                         <Description>
                                             <TagParentWrapper>
-                                                {headline_featured.tags.map((article) => {
-                                                    return (
-                                                        <TagWrapper key={article.id}>
-                                                            <StyledCategories>
-                                                                {article.tags_id?.tag_name}
-                                                            </StyledCategories>
-                                                        </TagWrapper>
-                                                    )
-                                                })}
+                                                {headline_featured.tags
+                                                    .slice(0, 3)
+                                                    .map((article) => {
+                                                        return (
+                                                            <TagWrapper key={article.id}>
+                                                                <StyledCategories>
+                                                                    {article.tags_id?.tag_name}
+                                                                </StyledCategories>
+                                                            </TagWrapper>
+                                                        )
+                                                    })}
                                             </TagParentWrapper>
                                             <Header as="h3" type="heading-3" color="white" mb="5px">
                                                 {headline_featured.blog_title}

@@ -16,6 +16,10 @@ export const StyledContainer = styled(Flex)`
     @media ${device.laptopM} {
         max-width: 58.8rem;
     }
+
+    @media ${device.mobileL} {
+        width: 100%;
+    }
 `
 
 export const StyledTabs = styled(Tabs)`
@@ -26,10 +30,16 @@ export const ArticleContentWrapper = styled(Container)`
     margin-top: 24px;
     color: var(--color-white);
     width: 100%;
+
     @media ${device.laptopM} {
         flex-direction: column;
         width: 100%;
     }
+
+    @media ${device.mobileL} {
+        margin: 24px auto 0;
+        padding: 0 16px 0 18px;
+    }
 `
 
 export const LeftContent = styled(Flex)`
@@ -291,6 +301,11 @@ export const AllArticleButton = styled(LinkButton)`
     @media ${device.laptopM} {
         width: 100%;
     }
+
+    @media ${device.mobileL} {
+        width: 90%;
+        margin-top: 24px;
+    }
 `
 
 export const RedirectLink = styled(LocalizedLink)`

@@ -368,16 +368,16 @@ export const guernsey = {
     has_iframe: false,
 }
 export const all_offices: locationsTypes[] = [
-    london,
     dubai,
-    paris,
     malta,
     cyprus,
-    guernsey,
     cyberjaya,
     labuan,
     ipoh,
     melaka,
+    london,
+    paris,
+    guernsey,
     asuncion,
     rwanda,
     minsk,

@@ -12,7 +12,7 @@ import device from 'themes/device'
 type CardContentType = {
     header: React.ReactElement
     text: React.ReactElement
-    image: any // Sean declared content as any
+    image: string
     key: number
 }
 

@@ -133,7 +133,7 @@ const LeftCTASection = (params: LeftCTASectionProps) => {
 }
 
 type RightCTASectionProps = LeftCTASectionProps & {
-    button_props?: any
+    button_props?: unknown
 }
 
 const RightCTASection = (params: RightCTASectionProps) => {

@@ -1,11 +1,25 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import { graphql, useStaticQuery } from 'gatsby'
 import device from 'themes/device'
 import { Container, Flex, SectionContainer } from 'components/containers'
 import { Header, Text, QueryImage } from 'components/elements'
 
+type ContentProps = {
+    margin_right: string
+    margin_left: string
+}
+
+type ImageWrapperProps = {
+    width: string
+    margin_right?: string
+}
+
+type RowProps = {
+    flex_direction: string
+    flex_direction_mobile: string
+}
+
 const StyledSection = styled(SectionContainer)`
     background-color: var(--color-white);
     padding: 40px 120px;
@@ -16,7 +30,7 @@ const StyledSection = styled(SectionContainer)`
 const Wrapper = styled(Container)`
     width: 100%;
 `
-const Content = styled.div`
+const Content = styled.div<ContentProps>`
     width: 689px;
     display: flex;
     flex-direction: column;
@@ -54,7 +68,7 @@ const MobileImageWrapper = styled(Container)`
     }
 `
 
-const ImageWrapper = styled(Flex)`
+const ImageWrapper = styled(Flex)<ImageWrapperProps>`
     width: ${(props) => props.width};
     margin-right: ${(props) => props.margin_right};
 
@@ -77,7 +91,8 @@ const StyledHeader = styled(Header)`
         text-align: center;
     }
 `
-const Row = styled.div`
+
+const Row = styled.div<RowProps>`
     flex-direction: ${(props) => props.flex_direction};
     width: 100%;
     display: flex;
@@ -145,14 +160,30 @@ const query = graphql`
         }
     }
 `
-const DTrading = ({ contentMargin, trading, reverse, setWidth, two_title }) => {
+
+type DTradingProps = {
+    contentMargin: string
+    reverse: boolean
+    setWidth: string
+    trading: TradingType[]
+}
+
+type TradingType = {
+    title: ReactElement
+    subtitle: ReactElement
+    image_name: string
+    image_alt: string
+    image_name_mobile?: string
+}
+
+const DTrading = ({ contentMargin, trading, reverse, setWidth }: DTradingProps) => {
     const data = useStaticQuery(query)
 
     return (
         <StyledSection>
             <Wrapper fd="column" ai="center">
                 {trading.map((item, index) => {
-                    let is_even = reverse ? (index + 1) % 2 : index % 2
+                    const is_even = reverse ? (index + 1) % 2 : index % 2
                     return (
                         <Row
                             flex_direction={!is_even ? 'row' : 'row-reverse'}
@@ -165,14 +196,6 @@ const DTrading = ({ contentMargin, trading, reverse, setWidth, two_title }) => {
                             >
                                 <StyledHeader type="display-title">{item.title}</StyledHeader>
                                 <Text>{item.subtitle}</Text>
-                                {two_title && (
-                                    <>
-                                        <StyledHeader type="page-title" mt="2.4rem">
-                                            {item.second_title}
-                                        </StyledHeader>
-                                        <Text>{item.second_subtitle}</Text>
-                                    </>
-                                )}
                             </Content>
                             {item.image_name_mobile && (
                                 <ImageWrapper width={setWidth ? setWidth : '448px;'} ai="center">
@@ -209,12 +232,4 @@ const DTrading = ({ contentMargin, trading, reverse, setWidth, two_title }) => {
     )
 }
 
-DTrading.propTypes = {
-    contentMargin: PropTypes.string,
-    reverse: PropTypes.bool,
-    setWidth: PropTypes.string,
-    trading: PropTypes.array,
-    two_title: PropTypes.bool,
-}
-
 export default DTrading