Codestin Search App

- + - {children.map((child, idx) => ( -

- {child} -

- ))} + {children.map((child, idx) => { + const new_style = + last_slide_no_spacing && idx === children.length - 1 + ? { ...slide_style, marginRight: 0, paddingRight: 0 } + : slide_style + return ( +

+ + {child} + +

+ ) + })} {chevron_color && is_arrow && ( @@ -172,7 +185,11 @@ export const Carousel = ({ /> )} {nav_color && ( - + {/* 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, diff --git a/src/components/elements/off-canvas-menu.js b/src/components/elements/off-canvas-menu.js index 2147b2e6bb7..043b1ecb063 100644 --- a/src/components/elements/off-canvas-menu.js +++ b/src/components/elements/off-canvas-menu.js @@ -199,9 +199,9 @@ export const OffCanvasMenuWrapper = (props) => { aria_label="DMT5" icon={() =>

} content={ - + } - title={} + title={} onClick={handleArrowClick} to={props.is_ppc_redirect ? '/landing/dmt5/' : '/dmt5/'} /> @@ -212,7 +212,7 @@ export const OffCanvasMenuWrapper = (props) => { aria_label="Derivx" icon={() =>

} content={ - + } title={} onClick={handleArrowClick} diff --git a/src/components/elements/query-image.tsx b/src/components/elements/query-image.tsx index ebf85c60de1..2731de28902 100644 --- a/src/components/elements/query-image.tsx +++ b/src/components/elements/query-image.tsx @@ -1,15 +1,19 @@ -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 + onMouseOut?: MouseEventHandler + onClick?: MouseEventHandler } export type ImageWrapperProps = { @@ -17,6 +21,7 @@ export type ImageWrapperProps = { height: string className?: string loading: 'eager' | 'lazy' + disable_transition: boolean } export const ImageWrapper = styled.div` @@ -25,8 +30,8 @@ export const ImageWrapper = styled.div` 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 ( - - + + ) } diff --git a/src/components/elements/typography.js b/src/components/elements/typography.js index 9cd7c41222f..1c288094c4d 100644 --- a/src/components/elements/typography.js +++ b/src/components/elements/typography.js @@ -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 }) => diff --git a/src/components/graphql/image-fragments.js b/src/components/graphql/image-fragments.js index 2d80d70a07a..730ef8bf336 100644 --- a/src/components/graphql/image-fragments.js +++ b/src/components/graphql/image-fragments.js @@ -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) } } ` diff --git a/src/components/hooks/use-recursive-timeout.js b/src/components/hooks/use-recursive-timeout.js index 9ab2b0fff03..20255e0376c 100644 --- a/src/components/hooks/use-recursive-timeout.js +++ b/src/components/hooks/use-recursive-timeout.js @@ -1,6 +1,6 @@ import { useState, useRef, useEffect, useCallback } from 'react' -export const useRecursiveTimeout = (callback, delay) => { +export const useRecursiveTimeout = (callback, delay, start_delay = 0) => { const [isRunning, setIsRunning] = useState(false) const stop = useCallback(() => setIsRunning(false), [setIsRunning]) const play = useCallback(() => setIsRunning(true), [setIsRunning]) @@ -19,7 +19,7 @@ export const useRecursiveTimeout = (callback, delay) => { savedCallback.current() requestAnimationFrame(() => (id = setTimeout(tick, delay))) } - requestAnimationFrame(() => (id = setTimeout(tick, delay))) + setTimeout(() => requestAnimationFrame(() => (id = setTimeout(tick, delay))), start_delay) return () => { if (id) clearTimeout(id) diff --git a/src/components/layout/footer/common/style.js b/src/components/layout/footer/common/style.js index b8d0e5e3f74..216582a3e3a 100644 --- a/src/components/layout/footer/common/style.js +++ b/src/components/layout/footer/common/style.js @@ -202,6 +202,7 @@ export const CopyrightWrapper = styled(Flex)` width: 90%; margin: 0 auto; padding: 2rem 0; + justify-content: center; p { font-size: 1.75rem; diff --git a/src/components/layout/footer/main-links.js b/src/components/layout/footer/main-links.js index e42ed275490..ce595f8cf33 100644 --- a/src/components/layout/footer/main-links.js +++ b/src/components/layout/footer/main-links.js @@ -121,6 +121,43 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => { + + + Codestin Search App + + + + {localize('Deriv MT5')} + + + + {localize('DTrader')} + + + + {localize('SmartTrader')} + + + + {localize('DBot')} + + + + {localize('Binary Bot')} + + + Codestin Search App diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js index 03ee6e12e93..b0f4abdfdee 100644 --- a/src/components/layout/layout.js +++ b/src/components/layout/layout.js @@ -117,6 +117,7 @@ const Layout = ({ interim_type, is_ppc, is_ppc_redirect, + is_nav_transparent, margin_top, no_live_chat, no_login_signup, @@ -213,7 +214,13 @@ const Layout = ({ FooterNav =