From d96ef5e3b38d0da9189575368bc6add64bca621f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CkonstantinosG-deriv=E2=80=9D?= Date: Mon, 5 Feb 2024 10:05:15 +0100 Subject: [PATCH] feat: regulatory page revamp --- src/images/svg/regulatory/pdf-icon-black.svg | 15 +- src/pages/regulatory/_document_accordion.tsx | 249 ++----- src/pages/regulatory/_eu-grid.tsx | 397 ++++++----- src/pages/regulatory/index.tsx | 696 ++++++++----------- 4 files changed, 599 insertions(+), 758 deletions(-) diff --git a/src/images/svg/regulatory/pdf-icon-black.svg b/src/images/svg/regulatory/pdf-icon-black.svg index 6b5275e7d20..61ceb880a86 100644 --- a/src/images/svg/regulatory/pdf-icon-black.svg +++ b/src/images/svg/regulatory/pdf-icon-black.svg @@ -1,7 +1,10 @@ - - - - - - + + + + + + + + + diff --git a/src/pages/regulatory/_document_accordion.tsx b/src/pages/regulatory/_document_accordion.tsx index a0aa8075dbe..d1247c63ceb 100644 --- a/src/pages/regulatory/_document_accordion.tsx +++ b/src/pages/regulatory/_document_accordion.tsx @@ -1,207 +1,70 @@ import React from 'react' -import styled from 'styled-components' +import { Text } from '@deriv/quill-design' +import { CustomLink } from '@deriv-com/components' import { kid_data, kid_data_multiplier } from './data/_kid_data' -import { Text, Accordion, AccordionItem, LinkText, Divider } from 'components/elements' -import { Flex } from 'components/containers' -import { Localize, localize } from 'components/localization' -import device from 'themes/device' +import { getLanguage } from 'common/utility' +import { Divider } from 'components/elements' +import { Localize } from 'components/localization' import PDFIcon from 'images/svg/regulatory/pdf-icon-black.svg' -type DocumentAccordionProps = { locale: { language: string } } - -const FlexText = styled(LinkText)` - width: 26%; - display: flex; - align-items: center; - justify-content: flex-start; - - & > img { - margin-right: 0.8rem; - } - @media ${device.laptopM} { - width: 40%; - } - @media (max-width: 685px) { - width: 80%; - justify-content: flex-start; - padding-left: 0; - margin-inline: 0; - } -` - -const FlexText_Pillar = styled(LinkText)` - display: flex; - align-items: center; - justify-content: center; - - & > img { - margin-right: 0.8rem; - } -` -const EdgeFlex = styled(Flex)` - flex-wrap: wrap; - justify-content: flex-start; - - /* Edge does not support space-evenly */ - @supports (-ms-ime-align: auto) { - justify-content: space-around; - } - @media ${device.tabletS} { - flex-direction: column; - } -` - -const RTS27_28 = () => ( - - - {localize('_t_pdf - - - - - - {localize('_t_pdf - - - - - -) - -const DocumentAccordion = (locale: DocumentAccordionProps) => { - const content_style = { - background: 'var(--color-white)', - boxShadow: '-2px 6px 15px 0 rgba(195, 195, 195, 0.31)', - } - const header_style = { - borderRadius: '6px', - } - const item_style = { - padding: '1.6rem', - position: 'relative', - background: 'var(--color-white)', - } - const parent_style = { - marginBottom: '2.4rem', - width: '100%', - } - - const selected_language = locale.locale.language || 'en' +const DocumentAccordion = () => { + const selected_language = getLanguage() || 'en' const supported_languages = ['es', 'it', 'pl', 'pt'] const is_supported_language = (language: string) => supported_languages.includes(language) return ( - - - - - - - - pdf icon black - - - - - - - - - - - - - {kid_data.map((data, idx) => ( - - pdf icon black - + <> +
+ {kid_data.map((data, idx) => ( +
+ +
+ pdf icon black + - - - ))} - - - - - - {kid_data_multiplier.map((data, idx) => ( - - pdf icon black - + +
+ +
+ ))} +
+ +
+ {kid_data_multiplier.map((data, idx) => ( +
+ +
+ pdf icon black + - - - ))} - - - - - - - - - + +
+ +
+ ))} +
+ ) } diff --git a/src/pages/regulatory/_eu-grid.tsx b/src/pages/regulatory/_eu-grid.tsx index 8f5ad97d19c..4620479521b 100644 --- a/src/pages/regulatory/_eu-grid.tsx +++ b/src/pages/regulatory/_eu-grid.tsx @@ -1,164 +1,251 @@ import React from 'react' -import styled from 'styled-components' -import { CssGrid, CssGridColumn } from 'components/containers' +import { + FlagAustriaIcon, + FlagBulgariaIcon, + FlagCroatiaIcon, + FlagCyprusIcon, + FlagCzechRepublicIcon, + FlagDenmarkIcon, + FlagEstoniaIcon, + FlagFinlandIcon, + FlagFranceIcon, + FlagGermanyIcon, + FlagGreeceIcon, + FlagHungaryIcon, + FlagItalyIcon, + FlagIrelandIcon, + FlagLatviaIcon, + FlagLithuaniaIcon, + FlagLuxembourgIcon, + FlagNetherlandIcon, + FlagPolandIcon, + FlagPortugalIcon, + FlagRomaniaIcon, + FlagSlovakiaIcon, + FlagSloveniaIcon, + FlagSpainIcon, + FlagSwedenIcon, // eslint-disable-next-line import/no-unresolved +} from '@deriv/quill-icons/Flags' +import { Text } from '@deriv/quill-design' +import { CustomLink } from '@deriv-com/components' import { WithIntl, Localize } from 'components/localization' -import { ReactComponent as ViewLicense } from 'images/svg/regulatory/view-license.svg' -import { TString } from 'types/generics' - -type GridItemProps = { - name: TString - order: string - url: string -} - -const Country = styled.div` - margin-bottom: 2.4rem; - text-align: start; - display: grid; - grid-template-columns: 1.9rem 1fr; - grid-column-gap: 0.8rem; - font-size: var(--text-size-s); - color: var(--color-grey-3); - align-items: center; - inline-size: 20rem; - - & a { - display: inline; - font-size: 1rem; - line-height: 1rem; - color: var(--color-grey-3); - } - - @media (max-width: 425px) { - font-size: var(--text-size-xs); - inline-size: 16rem; - } -` -const Order = styled.div` - display: inline-block; - font-size: 1rem; - line-height: 1.9rem; - font-weight: 500; - border: 0.1rem solid var(--color-grey-3); - border-radius: 100%; - width: 2rem; - height: 2rem; - text-align: center; -` -const License = styled.div` - margin: 0; - display: flex; - align-items: center; - - & a { - margin-left: 0.3rem; - font-size: 1rem; - line-height: 1rem; - color: var(--color-grey-3); - text-decoration: none; - - :hover { - color: var(--color-red); - text-decoration: underline; - } - } -` - -const AttachmentIcon = styled(ViewLicense)` - margin-left: 1rem; - - path { - transition: 0.2s fill; - } - &:hover { - path { - fill: red; - } - } -` - -const GridItem = ({ name, order, url }: GridItemProps) => ( - - {order} - - - - - - - -) const EUgrid = () => { return ( - - - - - - - - - - - - - - - - - - - 14 - +
+ +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + - - - - - - - - - - - - - - - + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ +
) } diff --git a/src/pages/regulatory/index.tsx b/src/pages/regulatory/index.tsx index 4ec1054fb2e..ab971853c43 100644 --- a/src/pages/regulatory/index.tsx +++ b/src/pages/regulatory/index.tsx @@ -1,116 +1,21 @@ import React from 'react' -import { Hero } from '@deriv-com/blocks' +import { Hero, AccordionBlock, BlockWrapper } from '@deriv-com/blocks' import { Text, Heading } from '@deriv/quill-design' import { CustomLink } from '@deriv-com/components' -import styled from 'styled-components' import EUgrid from './_eu-grid' import DocumentAccordion from './_document_accordion' -import FinancialCommission from './_financial_commission' +import { deriv_app_url } from 'common/constants' import useRegion from 'components/hooks/use-region' import Layout from 'components/layout/layout' -import { Divider, Header, LinkText } from 'components/elements' -import { - CssGrid, - CssGridColumn, - Desktop, - GridContainer, - Mobile, - SectionContainer, - SEO, - SmallContainer, -} from 'components/containers' +import { Divider } from 'components/elements' +import PDFIcon from 'images/svg/regulatory/pdf-icon-black.svg' +import { SEO } from 'components/containers' import { Localize, WithIntl } from 'components/localization' -// Icons -import EU from 'images/svg/regulatory/europe-map.svg' -import Vanuatu from 'images/common/regulatory/vanuatu.svg' -import VanuatuFMA from 'images/common/regulatory/vanuatu-fma.svg' -import FSC from 'images/common/regulatory/bvi.svg' -import LabuanFintech from 'images/common/regulatory/labuan-fintech.svg' -import Deriv from 'images/common/regulatory/deriv.svg' -import TFC from 'images/common/regulatory/tfc.svg' -import SVG from 'images/svg/regulatory/svg.svg' -import device from 'themes/device' -import useBreakpoints from 'components/hooks/use-breakpoints' import { TGatsbyHead } from 'features/types' import InitialLoader from 'components/elements/dot-loader' -type BoxProps = { - padding?: string - maxwidth?: string -} - -type RegulatoryProps = { - language: string -} - -const Img = styled.img` - display: flex; - width: 16rem; - height: 8rem; -` - -const ImgFintech = styled.img` - display: flex; - width: 160px; - height: 38.8px; -` - -const StyledHeader = styled(Header)<{ maxwidth?: string }>` - max-width: ${(props) => props.maxwidth || '100%'}; - margin: 0 auto; - @media ${device.tabletS} { - text-align: center; - margin-bottom: 1.6rem; - } -` - -const MobileWrapper = styled(Mobile)` - display: flex; -` - -const DesktopWrapper = styled(Desktop)` - display: flex; -` -const Box = styled.div` - display: flex; - flex-direction: column; - align-items: center; - padding: ${(props) => props.padding || '4rem 0 0'}; - max-width: ${(props) => props.maxwidth || '100%'}; - ${Text} { - @media ${device.tabletS} { - text-align: center; - } - } - @media ${device.tabletS} { - text-align: center; - } -` -const Europe = styled.img` - max-width: 69rem; - max-height: 63rem; - width: 100%; - height: 100%; - margin: 0; -` - -const ResponsiveGrid = styled(CssGridColumn)` - @media ${device.tabletL} { - justify-self: center; - justify-content: center; - display: flex; - flex-direction: column; - align-items: center; - } -` - -const StyledLinkText = styled(LinkText)` - font-weight: bold; -` - -const Regulatory = (locale: RegulatoryProps) => { +const Regulatory = () => { const { is_row, is_cpa_plan, is_region_loading } = useRegion() - const { is_mobile } = useBreakpoints() return ( @@ -134,90 +39,295 @@ const Regulatory = (locale: RegulatoryProps) => { - {!is_region_loading ? ( is_row || is_cpa_plan ? null : ( <> - - - - - - -
- , - ]} - /> -
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +
+ + Deriv Investments (Europe) Limited + + + , + ]} + /> + + + + + + + + + +
+ +
+ pdf icon black + + + +
+ +
+ + ) + }, + divider: 'bottom', + title: 'Financial disclosure report', + }, + + { + className: + 'border-opacity-black-100 border-x-none', + content: function noRefCheck() { + return ( +
+ +
+ ) + }, + title: 'Key information documents', + }, + { + className: + 'border-opacity-black-100 border-x-none', + content: function noRefCheck() { + return ( +
+ +
+ pdf icon black + + + +
+ + +
+ pdf icon black + + + +
+ +
+ ) + }, + title: 'RTS', + }, + ], + ], + }} + variant="Flush" + /> +
+ + +
+ + Deriv (FX) Ltd + + + + , + , + ]} + /> + + + + +
+ + +
+ + Deriv (BVI) Ltd + + + + , + ]} + /> + + + + +
+ + +
+ + Deriv (V) Ltd + + + + , + , + ]} + /> + + + + +
+ + +
+ + Deriv (SVG) LLC + + + + + + + + +
+ + +
+ + Deriv.com Limited + + + + + +
+ + +
+ + The Financial Commission + + + + , + ]} + /> + + + , + , + ]} + /> + +
+ ) ) : ( @@ -410,228 +520,6 @@ const Regulatory = (locale: RegulatoryProps) => { ) : null} - {!is_row ? ( - <> - - - - - - - - - - - - - - - - - - - , - , - ]} - /> - - - - - - - - - - - - - British Virgin Islands Financial Services Commission - - - - - - - - - , - ]} - /> - - - - - - - - - - - - - Vanuata Financial Services Commission - Vanuatu Financial Markets Association - - - - - - - - - , - , - ]} - /> - - - - - - - - - - - - - Deriv SVG - - - - - - - - - - - - - - - - - - - - - - Deriv Limited - - - - - - - - - - - - - - - - - - - - - - - - The Financial Commission - - - - - - - - - , - ]} - /> - - - - - - - - ) : null} - )