binary-com · habib-deriv · Jan 27, 2022 · Nov 23, 2021 · Nov 23, 2021 · Nov 23, 2021
@@ -33,7 +33,6 @@ module.exports = {
             options: {
                 failOnError: true,
                 base64Width: 20,
-                forceBase64Format: 'webp',
                 stripMetadata: true,
                 defaultQuality: 50,
             },

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+import device from 'themes/device'
+
+type WrapperProps = {
+    media?: string
+}
+
+export const DesktopWrapper = styled.div<WrapperProps>`
+    display: block;
+
+    @media ${(props) => props.media || device.tabletL} {
+        display: none;
+    }
+`
+
+export const MobileWrapper = styled.div<WrapperProps>`
+    display: none;
+
+    @media ${(props) => props.media || device.tabletL} {
+        display: block;
+    }
+`
@@ -29,12 +29,12 @@ const StyledSectionContainer = styled(Box).attrs({ as: 'section' })`
     background-color: var(--color-white);
 
     @media ${device.tabletL} {
-        padding: 41px 0 40px;
+        padding: 0 0 40px;
     }
 `
 const Wrapper = styled.div`
     border-radius: 8px;
-    background-image: linear-gradient(73deg, #ff6444, #ff444f);
+    background: linear-gradient(241.92deg, #d74b56 12.96%, #d1632f 86.33%);
     background-repeat: round;
     position: relative;
     display: flex;
@@ -374,7 +374,7 @@ const SignupPublic = ({
                                             background="white"
                                             tabletBackground="green-1"
                                             inputColor="grey-5"
-                                            inputBackground="grey-8"
+                                            inputBackground="white"
                                             labelFocusColor="grey-7"
                                             labelColor="black-3"
                                             labelSize="16px"
@@ -387,7 +387,6 @@ const SignupPublic = ({
                                             autoFocus={autofocus}
                                             autoComplete="off"
                                             required
-                                            border="unset"
                                             height="40px"
                                             focusBorder="var(--color-grey-7)"
                                         />
@@ -412,7 +411,7 @@ const SignupPublic = ({
                                     handleChangeCheckbox={handleChange}
                                 />
                                 <SocialWrapper jc="unset" ai="center">
-                                    <SignInText>{localize('Or sign in with')}</SignInText>
+                                    <SignInText>{localize('Or sign up with')}</SignInText>
                                     <SocialButton
                                         onClick={handleSocialSignup}
                                         provider="google"

@@ -140,11 +140,9 @@ export const DMT5Card = ({ is_selected, is_ppc_redirect, word_break_cover }) =>
         <Card
             cover_background="var(--color-green)"
             cover_content={localize('Discover DMT5 now')}
-            title={localize('DMT5')}
+            title={localize('Deriv MT5')}
             Icon={() => <StyledDmt5 src={DMT5} alt="" width="72" height="72" />}
-            content={[
-                localize('Trade on Deriv MT5 (DMT5), the all-in-one FX and CFD trading platform.'),
-            ]}
+            content={[localize('Trade on Deriv MT5, the all-in-one CFD trading platform.')]}
             is_inline_icon
             min_height="12.4rem"
             is_selected={is_selected}
@@ -314,12 +312,12 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
             <Flex direction="column" wrap="wrap" jc="flex-start">
                 <StyledText>{localize('Trading platforms')}</StyledText>
                 <NavCard
-                    aria_label="DMT5"
+                    aria_label="Deriv MT5"
                     icon={() => <img src={DMT5} alt="" width="32" height="32" />}
                     content={
-                        <Localize translate_text="Trade on Deriv MT5 (DMT5), the all-in-one FX and CFD trading platform." />
+                        <Localize translate_text="Trade on Deriv MT5, the all-in-one CFD trading platform." />
                     }
-                    title={<Localize translate_text="DMT5" />}
+                    title={<Localize translate_text="Deriv MT5" />}
                     onClick={onClick}
                     to={is_ppc_redirect ? '/landing/dmt5/' : '/dmt5/'}
                 />

@@ -14,10 +14,26 @@ const StyledBackground = styled(BackgroundImage)`
     }
 `
 
-export const Background = ({ children, data, fluid, style, dark, ...props }) => {
+export const Background = ({
+    children,
+    dark,
+    data,
+    fluid,
+    is_unstyled = false,
+    style,
+    ...props
+}) => {
     const image = getImage(data)
     const bgImage = convertToBgImage(image)
 
+    if (is_unstyled) {
+        return (
+            <BackgroundImage Tag="div" {...bgImage} {...props}>
+                {children}
+            </BackgroundImage>
+        )
+    }
+
     return (
         <StyledBackground Tag="div" style={style} dark={dark} fluid={fluid} {...bgImage} {...props}>
             {children}
@@ -31,7 +47,7 @@ Background.propTypes = {
     dark: PropTypes.string,
     data: PropTypes.object,
     fluid: PropTypes.array,
-    img_name: PropTypes.string,
+    is_unstyled: PropTypes.bool,
     style: PropTypes.object,
 }
 export default Background
@@ -324,8 +324,8 @@ const FlexHover = styled(Flex)`
 const SvgWrapper = styled.div`
     & > svg,
     img {
-        width: 33px;
-        height: 33px;
+        width: 32px;
+        height: 32px;
         margin-right: 1.6rem;
 
         @media ${device.mobileL} {

@@ -32,6 +32,12 @@ export const EmblaSlideInner = styled.div`
     padding-left: 0;
     margin: 0 auto;
     height: 100%;
+    ${(props) => {
+        if (props.width)
+            return css`
+                width: ${props.width};
+            `
+    }}
 `
 
 export const StyledButtonWrapper = styled.div`
@@ -121,10 +127,16 @@ export const StyledChevron = styled(Chevron)`
 `
 
 export const NavigationContainer = styled(Flex)`
-    position: relative;
-    width: 100%;
-    height: ${(props) => props.height ?? '8px'};
-    bottom: ${(props) => props.bottom_offset ?? '40px'};
+    ${({ navigation_css, bottom_offset }) => {
+        if (navigation_css) return navigation_css
+        else
+            return css`
+                position: relative;
+                width: 100%;
+                height: 8px;
+                bottom: ${bottom_offset ?? '40px'};
+            `
+    }}
 `
 
 export const StyledDot = styled.div`

@@ -68,16 +68,21 @@ export const NextButton = ({ color, enabled, is_reviews, onClick, style }) => (
 NextButton.propTypes = PrevButton.propTypes
 
 export const Carousel = ({
+    autoplay_delay,
     autoplay_interval,
     chevron_style,
     children,
     container_style,
+    embla_style,
     has_autoplay,
     navigation_style,
     options,
     slide_style,
+    slide_inner_width,
     vertical_container,
     view_port,
+    last_slide_no_spacing = false,
+    navigation_css,
 }) => {
     const [emblaRef, embla] = useEmblaCarousel(options)
     const [prevBtnEnabled, setPrevBtnEnabled] = useState(false)
@@ -95,7 +100,7 @@ export const Carousel = ({
         }
     }, [embla])
 
-    const { play, stop } = useRecursiveTimeout(autoplay, autoplay_interval)
+    const { play, stop } = useRecursiveTimeout(autoplay, autoplay_interval, autoplay_delay)
 
     const scrollPrev = useCallback(() => {
         if (!embla) return
@@ -143,14 +148,22 @@ export const Carousel = ({
 
     return (
         <div style={container_style}>
-            <Embla>
+            <Embla style={embla_style}>
                 <ViewPort style={view_port} ref={emblaRef}>
                     <EmblaContainer style={vertical_container ? vertical_container : null}>
-                        {children.map((child, idx) => (
-                            <div key={idx} style={slide_style}>
-                                <EmblaSlideInner>{child}</EmblaSlideInner>
-                            </div>
-                        ))}
+                        {children.map((child, idx) => {
+                            const new_style =
+                                last_slide_no_spacing && idx === children.length - 1
+                                    ? { ...slide_style, marginRight: 0, paddingRight: 0 }
+                                    : slide_style
+                            return (
+                                <div key={idx} style={new_style}>
+                                    <EmblaSlideInner width={slide_inner_width}>
+                                        {child}
+                                    </EmblaSlideInner>
+                                </div>
+                            )
+                        })}
                     </EmblaContainer>
                 </ViewPort>
                 {chevron_color && is_arrow && (
@@ -172,7 +185,11 @@ export const Carousel = ({
                     />
                 )}
                 {nav_color && (
-                    <NavigationContainer bottom_offset={bottom_offset} height={height}>
+                    <NavigationContainer
+                        navigation_css={navigation_css}
+                        bottom_offset={bottom_offset}
+                        height={height}
+                    >
                         {/* We need the `child` below as an argument for embla-carousel to
                         correctly render the navigation buttons */}
                         {children.map((child, idx) => (
@@ -191,13 +208,18 @@ export const Carousel = ({
 }
 
 Carousel.propTypes = {
+    autoplay_delay: PropTypes.number,
     autoplay_interval: PropTypes.number,
     chevron_style: PropTypes.object,
     children: PropTypes.array,
     container_style: PropTypes.object,
+    embla_style: PropTypes.object,
     has_autoplay: PropTypes.bool,
+    last_slide_no_spacing: PropTypes.bool,
+    navigation_css: PropTypes.array,
     navigation_style: PropTypes.object,
     options: PropTypes.object,
+    slide_inner_width: PropTypes.string,
     slide_style: PropTypes.object,
     vertical_container: PropTypes.object,
     view_port: PropTypes.object,

@@ -199,9 +199,9 @@ export const OffCanvasMenuWrapper = (props) => {
                                 aria_label="DMT5"
                                 icon={() => <img src={DMT5} alt="" width="32" height="32" />}
                                 content={
-                                    <Localize translate_text="Trade on Deriv MT5 (DMT5), the all-in-one FX and CFD trading platform." />
+                                    <Localize translate_text="Trade on Deriv MT5, the all-in-one CFD trading platform." />
                                 }
-                                title={<Localize translate_text="DMT5" />}
+                                title={<Localize translate_text="Deriv MT5" />}
                                 onClick={handleArrowClick}
                                 to={props.is_ppc_redirect ? '/landing/dmt5/' : '/dmt5/'}
                             />
@@ -212,7 +212,7 @@ export const OffCanvasMenuWrapper = (props) => {
                                     aria_label="Derivx"
                                     icon={() => <img src={DerivX} alt="" width="32" height="32" />}
                                     content={
-                                        <Localize translate_text="Trade FX and CFDs on a customisable, easy-to-use trading platform." />
+                                        <Localize translate_text="Trade CFDs on a customisable, easy-to-use trading platform." />
                                     }
                                     title={<Localize translate_text="Deriv X" />}
                                     onClick={handleArrowClick}

@@ -1,22 +1,27 @@
-import React from 'react'
+import React, { MouseEventHandler, ReactElement } from 'react'
 import styled, { css } from 'styled-components'
 import { GatsbyImage, getImage } from 'gatsby-plugin-image'
 import type { ImageDataLike } from 'gatsby-plugin-image'
 
-type QueryImageProps = {
-    alt: string
+export type QueryImageProps = {
+    alt: ReactElement | string
     className?: string
     data: ImageDataLike
     height?: string
     width?: string
     loading?: 'eager' | 'lazy'
+    disable_transition?: boolean
+    onMouseOver?: MouseEventHandler<HTMLDivElement>
+    onMouseOut?: MouseEventHandler<HTMLDivElement>
+    onClick?: MouseEventHandler<HTMLDivElement>
 }
 
 export type ImageWrapperProps = {
     width: string
     height: string
     className?: string
     loading: 'eager' | 'lazy'
+    disable_transition: boolean
 }
 
 export const ImageWrapper = styled.div<ImageWrapperProps>`
@@ -25,8 +30,8 @@ export const ImageWrapper = styled.div<ImageWrapperProps>`
         height: ${(props) => props.height};
     }
     .gatsby-image-wrapper [data-main-image] {
-        ${(props) => {
-            if (props.loading === 'eager') {
+        ${({ loading, disable_transition }) => {
+            if (disable_transition && loading === 'eager') {
                 return css`
                     transition: none;
                     opacity: 1;
@@ -40,16 +45,25 @@ const QueryImage = ({
     alt,
     className,
     data,
+    disable_transition = false,
     height,
     loading = 'lazy',
+    onClick,
     width,
     ...props
 }: QueryImageProps) => {
     const image = getImage(data)
     if (data) {
         return (
-            <ImageWrapper loading={loading} width={width} height={height} className={className}>
-                <GatsbyImage image={image} alt={alt} loading={loading} {...props} />
+            <ImageWrapper
+                loading={loading}
+                width={width}
+                height={height}
+                className={className}
+                disable_transition={disable_transition}
+                onClick={onClick}
+            >
+                <GatsbyImage image={image} alt={alt as string} loading={loading} {...props} />
             </ImageWrapper>
         )
     }

@@ -69,7 +69,7 @@ export const BaseElement = css`
 `
 
 //////////////////////////////////////////////////////////////////////////////
-/////////////////// TEXT IS DEPRICATED. PLEASE USE HEADER. ///////////////////
+/////////////////// TEXT IS DEPRECATED. PLEASE USE HEADER. ///////////////////
 //////////////////////////////////////////////////////////////////////////////
 export const Text = styled.p`
     ${BaseElement}
@@ -84,7 +84,7 @@ export const Text = styled.p`
     ${responsiveStyles}
 `
 //////////////////////////////////////////////////////////////////////////////
-/////////////////// TEXT IS DEPRICATED. PLEASE USE HEADER. ///////////////////
+/////////////////// TEXT IS DEPRECATED. PLEASE USE HEADER. ///////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 export const Header = styled(({ as = 'h1', children, ...props }) =>

@@ -38,12 +38,7 @@ export const fadeIn = graphql`
 export const homePageHeroFadeIn = graphql`
     fragment homePageHeroFadeIn on File {
         childImageSharp {
-            gatsbyImageData(
-                formats: [AUTO, WEBP]
-                layout: CONSTRAINED
-                breakpoints: [360, 992]
-                placeholder: DOMINANT_COLOR
-            )
+            gatsbyImageData(formats: [AUTO, AVIF, WEBP], layout: CONSTRAINED, placeholder: NONE)
         }
     }
 `