Merge pull request #129 from thisyahlen-deriv/thisyahlen/compare-acco…

…unt-style-fix fix: compare accounts ui
deriv-com · Apr 29, 2024 · ca5ab14 · ca5ab14
2 parents 00e22b7 + d764928
commit ca5ab14
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/src/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx b/src/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx
@@ -1,3 +1,5 @@
+import { twMerge } from 'tailwind-merge';
+
 import { LabelPairedChevronLeftMdRegularIcon, LabelPairedChevronRightMdRegularIcon } from '@deriv/quill-icons';
 
 type TPrevNextButtonProps = {
@@ -8,9 +10,10 @@ type TPrevNextButtonProps = {
 
 const CFDCompareAccountsCarouselButton = ({ enabled, isNext = false, onClick }: TPrevNextButtonProps) => (
     <button
-        className={`bg-system-light-primary-background z-10 absolute flex items-center justify-center top-1/2 cursor-pointer w-40 h-40 rounded-[50%] disabled:opacity-8 disabled:hidden border-0 shadow-7,
-            ${isNext && 'right-16'},
-            ${!isNext && 'left-16'}`}
+        className={twMerge(
+            'bg-system-light-primary-background z-10 absolute flex items-center justify-center top-1/2 cursor-pointer w-40 h-40 rounded-[50%] disabled:opacity-8 disabled:hidden border-0 shadow-7',
+            isNext ? 'right-16' : 'left-16'
+        )}
         disabled={!enabled}
         onClick={onClick}
     >

diff --git a/src/cfd/screens/CFDCompareAccounts/CompareAccountsHeader.tsx b/src/cfd/screens/CFDCompareAccounts/CompareAccountsHeader.tsx
@@ -1,8 +1,8 @@
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
+import { LabelPairedArrowLeftMdFillIcon, LabelPairedXmarkLgRegularIcon } from '@deriv/quill-icons';
 import { Text } from '@deriv-com/ui';
 
-import { IconComponent } from '@/components';
 import { useActiveDerivTradingAccount, useRegulationFlags } from '@/hooks';
 
 const CompareAccountsHeader = () => {
@@ -19,18 +19,22 @@ const CompareAccountsHeader = () => {
 
     return (
         <div className='sticky flex items-center border-solid z-[999] border-b-1 py-0 px-16 top-0 h-50 border-system-light-secondary-background'>
-            <div className='flex justify-center w-full'>
+            <div className='flex justify-start lg:justify-center w-full items-center'>
+                <div className='absolute left-30 lg:block d-none'>
+                    <div className='flex items-center gap-8'>
+                        <LabelPairedArrowLeftMdFillIcon />
+                        <Link to='/'>
+                            <Text weight='bold'>Trader&apos;s Hub</Text>
+                        </Link>
+                    </div>
+                </div>
                 <Text size='xl' weight='bold'>
                     {headerTitle}
                 </Text>
+                <div className='absolute right-30 block lg:d-none'>
+                    <LabelPairedXmarkLgRegularIcon onClick={() => navigate('/')} className='cursor-pointer' />
+                </div>
             </div>
-            <IconComponent
-                icon='Close'
-                className='cursor-pointer'
-                onClick={() => {
-                    navigate('/traders-hub');
-                }}
-            />
         </div>
     );
 };

diff --git a/src/pages/compareAccounts/compareAccounts.tsx b/src/pages/compareAccounts/compareAccounts.tsx
@@ -1,11 +1,8 @@
-import { Link } from 'react-router-dom';
-
 import CompareAccountsScreen from '../../cfd/screens/CFDCompareAccounts/CompareAccountsScreen';
 
 export const CompareAccounts = () => {
     return (
         <>
-            <Link to='/'>Go to Homepage</Link>
             <CompareAccountsScreen />
         </>
     );