chore: fix jurisdiction modal styles (deriv-com#13577)

arshad-rao-deriv · Feb 15, 2024 · 441ddc4 · 441ddc4
1 parent bee40e8
commit 441ddc4
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 48 deletions.
diff --git a/packages/tradershub/src/components/Modal/Modal.classnames.ts b/packages/tradershub/src/components/Modal/Modal.classnames.ts
@@ -2,7 +2,7 @@ import { cva, VariantProps } from 'class-variance-authority';
 import { ExcludeAllNull } from '@deriv/quill-design';
 
 export const ModalFooterClass = cva(
-    'grid gap-8 p-16 border border-solid border-t-2 border-system-light-secondary-background bottom-0 lg:items-center lg:px-24 lg:py-16',
+    'grid gap-8 p-16 border border-solid border-t-2 border-system-light-secondary-background bottom-0 lg:items-center lg:px-24 lg:py-16 rounded-b-default',
     {
         variants: {
             align: {

diff --git a/packages/tradershub/src/components/Modal/ModalContent.tsx b/packages/tradershub/src/components/Modal/ModalContent.tsx
@@ -10,7 +10,7 @@ import { TModalComponents } from './Modal';
  * @returns {JSX.Element} The ModalContent component.
  */
 const ModalContent = ({ children, className }: TModalComponents) => (
-    <div className={qtMerge('flex-grow overflow-y-auto p-0 sm:p-8 lg:flex-none', className)}>{children}</div>
+    <div className={qtMerge('flex-grow overflow-y-auto sm:p-8 lg:flex-none', className)}>{children}</div>
 );
 
 export default ModalContent;
diff --git a/packages/tradershub/src/components/Modal/ModalHeader.tsx b/packages/tradershub/src/components/Modal/ModalHeader.tsx
@@ -25,7 +25,7 @@ const ModalHeader = ({ className, hideCloseButton = false, title, titleClassName
     return (
         <div
             className={qtMerge(
-                'flex items-center pl-16 pr-24 py-16 lg:px-24 border border-solid border-b-2 border-system-light-secondary-background w-full',
+                'flex items-center pl-16 pr-24 py-16 lg:px-24 border border-solid border-b-2 border-system-light-secondary-background w-full rounded-t-default',
                 title ? 'justify-between' : 'justify-end',
                 className
             )}

diff --git a/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageScreen.tsx b/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageScreen.tsx
@@ -15,7 +15,7 @@ const DynamicLeverageScreen = () => {
     return (
         <div
             className={qtMerge(
-                'flex flex-col gap-24 mt-16 mx-24 mb-24 sm:mx-[128px] sm:mb-0 pb-[100px] absolute top-50 [transform:rotateY(180deg)] transition-transform ease-in duration-[0.6s] backface-hidden',
+                'flex flex-col gap-24 mt-16 mx-24 mb-24 sm:mx-[128px] sm:mb-0 absolute top-0 [transform:rotateY(180deg)] transition-transform ease-in duration-[0.6s] backface-hidden bg-system-light-primary-background',
                 isDynamicLeverageVisible && '[transform:rotateY(0deg)]'
             )}
         >

diff --git a/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageTitle.tsx b/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageTitle.tsx
@@ -7,7 +7,7 @@ export const DynamicLeverageTitle = () => {
     const { toggleDynamicLeverage } = useDynamicLeverageModalState();
 
     return (
-        <div className='flex items-center border-solid border-b-1 -mx-8 pb-12 pr-16 pl-24 gap-16 h-14 border-system-light-secondary-background '>
+        <div className='flex items-center h-auto gap-16 py-12 pl-24 pr-16 -mx-8 border-solid border-b-1'>
             <StandaloneArrowLeftBoldIcon className='flex items-center cursor-pointer' onClick={toggleDynamicLeverage} />
             <Text weight='bold'>Get more out of Deriv MT5 Financial</Text>
         </div>

diff --git a/...radershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardBack.tsx b/...radershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardBack.tsx
@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction } from 'react';
-import BackArrowIcon from '@/assets/svgs/ic-back-arrow.svg';
+import { LabelPairedArrowLeftLgRegularIcon } from '@deriv/quill-icons';
 import { Text } from '@deriv-com/ui';
 import { verificationIconsMapper, verificationStatusIconsMapper } from '../constants';
 import { jurisdictionVerificationContents } from '../jurisdiction-contents/jurisdiction-verification-contents';
@@ -18,13 +18,15 @@ const JurisdictionCardBack = ({ setIsFlipped, verificationDocs }: TJurisdictionC
     if (!verificationDocs) return null;
     return (
         <div className='absolute flex flex-col h-full backface-hidden [transform:rotateY(180deg)] gap-16 pt-[15px] px-16 pb-[150px]'>
-            <BackArrowIcon
-                className='cursor-pointer'
-                onClick={e => {
-                    e.stopPropagation();
-                    setIsFlipped(false);
-                }}
-            />
+            <div>
+                <LabelPairedArrowLeftLgRegularIcon
+                    className='cursor-pointer'
+                    onClick={e => {
+                        e.stopPropagation();
+                        setIsFlipped(false);
+                    }}
+                />
+            </div>
             <Text size='sm'>{verificationContents.shortDescription}</Text>
             {verificationDocs.map((verificationDocument: TJurisdictionCardItemVerificationItem) => {
                 return (

diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx
@@ -30,14 +30,14 @@ const JurisdictionScreen = ({
         () =>
             availableMT5Accounts
                 ?.filter(account => account.market_type === marketType)
-                .map(account => account.shortcode) || [],
+                .map(account => account.shortcode) ?? [],
         [availableMT5Accounts, marketType]
     );
     const addedJurisdictions = useMemo(
         () =>
             mt5AccountsList
                 ?.filter(account => account.market_type === marketType && !account.is_virtual)
-                .map(account => account.landing_company_short) || [],
+                .map(account => account.landing_company_short) ?? [],
         [marketType, mt5AccountsList]
     );
 
@@ -48,16 +48,17 @@ const JurisdictionScreen = ({
     return (
         <div
             className={qtMerge(
-                'flex flex-col h-auto w-[85vw] items-center justify-center my-auto mx-1500 sm:h-[75vh] transition-all ease-in duration-[0.6s]',
-                isDynamicLeverageVisible && '[transform:rotateY(-180deg)] h-[700px] opacity-50'
+                'flex flex-col h-auto w-[85vw] items-center justify-center my-auto mx-30 sm:h-[75vh] transition-all ease-in duration-[0.6s]',
+                isDynamicLeverageVisible &&
+                    '[transform:rotateY(-180deg)] h-[700px] opacity-50 bg-system-light-primary-background'
             )}
         >
-            <div className='flex py-20 items-center gap-16 justify-center w-full h-[82%] sm:flex-col sm:py-50'>
+            <div className='flex lg:flex-row lg:py-20 items-center gap-16 justify-center w-full h-[82%] flex-col py-0'>
                 {jurisdictions.map(jurisdiction => (
                     <JurisdictionCard
                         isAdded={addedJurisdictions.includes(jurisdiction as typeof addedJurisdictions[number])}
                         isSelected={selectedJurisdiction === jurisdiction}
-                        jurisdiction={jurisdiction || Jurisdiction.BVI}
+                        jurisdiction={jurisdiction ?? Jurisdiction.BVI}
                         key={jurisdiction}
                         onSelect={clickedJurisdiction => {
                             if (clickedJurisdiction === selectedJurisdiction) {

diff --git a/...b/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.tsx b/...b/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
+import { StaticLink } from '@/components';
 import { getStaticUrl } from '@/helpers';
 import { THooks } from '@/types';
 import { companyNamesAndUrls, Jurisdiction, MarketType } from '@cfd/constants';
 import { Provider } from '@deriv/library';
-import { Link, useBreakpoint } from '@deriv/quill-design';
-import { Text } from '@deriv-com/ui';
+import { useBreakpoint } from '@deriv/quill-design';
+import { Checkbox, Text } from '@deriv-com/ui';
 import { JurisdictionFootNoteTitle } from '../JurisdictionFootNoteTitle';
 
 type TJurisdictionTncSectionProps = {
@@ -30,7 +31,7 @@ const JurisdictionTncSection = ({
 }: TJurisdictionTncSectionProps) => {
     const { isMobile } = useBreakpoint();
     const { getCFDState } = Provider.useCFDContext();
-    const marketType = getCFDState('marketType') || MarketType.ALL;
+    const marketType = getCFDState('marketType') ?? MarketType.ALL;
     const selectedCompany = companyNamesAndUrls[selectedJurisdiction as keyof typeof companyNamesAndUrls];
 
     return (
@@ -40,27 +41,25 @@ const JurisdictionTncSection = ({
             )}
             {selectedJurisdiction && selectedJurisdiction !== Jurisdiction.SVG && (
                 <div className='flex justify-center space-x-8'>
-                    <input
+                    <Checkbox
                         checked={isCheckBoxChecked}
-                        className='cursor-pointer'
-                        id='tnc-checkbox'
+                        label={
+                            <Text size={isMobile ? 'sm' : 'md'}>
+                                I confirm and accept {selectedCompany.name}&lsquo;s{' '}
+                                <StaticLink
+                                    className='no-underline cursor-pointer text-solid-coral-700 hover:no-underline'
+                                    href={getStaticUrl(selectedCompany.tncUrl)}
+                                    size='lg'
+                                >
+                                    Terms and Conditions
+                                </StaticLink>
+                            </Text>
+                        }
                         onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                             setIsCheckBoxChecked(event.target.checked)
                         }
-                        type='checkbox'
+                        wrapperClassName='w-auto'
                     />
-                    <label className='cursor-pointer' htmlFor='tnc-checkbox'>
-                        <Text size={isMobile ? 'sm' : 'md'}>
-                            I confirm and accept {selectedCompany.name}&lsquo;s{' '}
-                            <Link
-                                className='cursor-pointer text-solid-coral-700 text-1 pl-50 sm:text-100'
-                                href={getStaticUrl(selectedCompany.tncUrl)}
-                                target='_blank'
-                            >
-                                Terms and Conditions
-                            </Link>
-                        </Text>
-                    </label>
                 </div>
             )}
         </div>

diff --git a/packages/tradershub/src/features/cfd/screens/MT5AccountTypeCard/MT5AccountTypeCard.tsx b/packages/tradershub/src/features/cfd/screens/MT5AccountTypeCard/MT5AccountTypeCard.tsx
@@ -12,37 +12,36 @@ type TMT5AccountTypeCardProps = {
 
 const MT5AccountTypeCard = ({ description, icon, isSelected, onClick, title }: TMT5AccountTypeCardProps) => {
     return (
-        <div
+        <button
             className={qtMerge(
-                isSelected
-                    ? 'rounded-16 border-brand-blue bg-system-light-primary-background cursor-pointer border-solid border-sm'
-                    : 'cursor-pointer'
+                'cursor-pointer',
+                isSelected &&
+                    'rounded-16 border-brand-blue bg-system-light-primary-background border-solid border-1 rounded-lg'
             )}
             onClick={onClick}
             onKeyDown={e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     onClick();
                 }
             }}
-            role='button'
             tabIndex={0}
         >
             <div className='flex w-[264px] h-[250px] items-start'>
-                <div className='flex items-start self-stretch flex-1 border-solid rounded-lg p-24 border-system-light-active-background bg-system-light-primary-background border-sm'>
+                <div className='flex items-start self-stretch flex-1 p-24 border-solid rounded-lg border-system-light-active-background bg-system-light-primary-background border-1'>
                     <div className='flex flex-col items-center self-stretch justify-center gap-24'>
                         {icon}
-                        <div className='flex flex-col items-center self-stretch gap-8'>
-                            <div className='flex items-center flex-1 text-center'>
+                        <div className='flex flex-col items-center self-stretch gap-8 text-center'>
+                            <div className='flex items-center flex-1'>
                                 <Text weight='bold'>{title}</Text>
                             </div>
-                            <div className='self-stretch text-center'>
+                            <div className='self-stretch'>
                                 <Text size='sm'>{description}</Text>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </button>
     );
 };