[TRAH] Aizad/TRAH-2627/Currency Switcher Modal for responsive (binary…

…-com#12827) * chore: Added currency switcher modal on mobile: - added modal id inside of AppContent - change ModalStepWrapper to Modal - change tailwind classes for Modal to accommodate responsive view * fix: made some changes to the tailwind classes to make the modal responsive * fix: made the loader full width for responsive
amina-deriv · Jan 9, 2024 · fcc3354 · fcc3354
1 parent c25a209
commit fcc3354
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 24 deletions.
diff --git a/packages/tradershub/src/AppContent.tsx b/packages/tradershub/src/AppContent.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { Router } from './routes';
 
 const AppContent = () => (
-    <div className='font-sans max-w-[1232px] mx-auto pt-400 lg:pt-2500 lg:px-50'>
+    <div className='font-sans max-w-[1232px] mx-auto lg:pt-2500 lg:px-50'>
+        <div className='z-10' id='v2_modal_show_header_root' />
         <Router />
     </div>
 );

diff --git a/packages/tradershub/src/components/CurrencySwitcher/CurrencySwitcher.tsx b/packages/tradershub/src/components/CurrencySwitcher/CurrencySwitcher.tsx
@@ -50,19 +50,6 @@ const CurrencySwitcher = () => {
 
     const iconCurrency = isDemo ? 'virtual' : activeAccount?.currency ?? 'virtual';
 
-    const renderButton = () => {
-        return (
-            <Button
-                className='py-900 rounded-200 border-sm border-system-light-less-prominent-text'
-                colorStyle='black'
-                fullWidth
-                variant='secondary'
-            >
-                Add or manage account
-            </Button>
-        );
-    };
-
     if (!isSuccess) return <CurrencySwitcherLoader />;
 
     return (
@@ -89,11 +76,20 @@ const CurrencySwitcher = () => {
                     onClick={() => {
                         show(
                             <Modal>
-                                <Modal.Header title='Select account' titleClassName='text-typography-default' />
-                                <Modal.Content className='overflow-y-scroll'>
+                                <Modal.Header title='Select account' titleClassName='text-[14px] sm:text-[16px]' />
+                                <Modal.Content>
                                     <TradingAccountsList />
                                 </Modal.Content>
-                                <Modal.Footer>{renderButton()}</Modal.Footer>
+                                <Modal.Footer className='grid-cols-1'>
+                                    <Button
+                                        className='py-900 rounded-200 border-sm border-system-light-less-prominent-text'
+                                        colorStyle='black'
+                                        fullWidth
+                                        variant='secondary'
+                                    >
+                                        Add or manage account
+                                    </Button>
+                                </Modal.Footer>
                             </Modal>
                         );
                     }}

diff --git a/packages/tradershub/src/components/Loaders/CurrencySwitcherLoader.tsx b/packages/tradershub/src/components/Loaders/CurrencySwitcherLoader.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
 const CurrencySwitcherLoader = () => (
-    <div className='flex items-center justify-between border-solid gap-800 h-3600 p-800 rounded-400 border-sm border-system-light-active-background shrink-0'>
+    <div className='flex items-center justify-between border-solid gap-800 h-3600 p-800 rounded-400 border-sm border-system-light-active-background w-full lg:w-auto'>
         <div className='rounded-full animate-pulse bg-solid-slate-100 w-2000 h-2000 rounded-1500' />
-        <div className='space-y-500'>
+        <div className='grow space-y-500'>
             <div className='animate-pulse bg-solid-slate-100 w-2500 h-500 rounded-200' />
             <div className='animate-pulse bg-solid-slate-100 w-5000 h-500 rounded-200' />
         </div>

diff --git a/packages/tradershub/src/components/Modal/Modal.tsx b/packages/tradershub/src/components/Modal/Modal.tsx
@@ -47,7 +47,7 @@ const Modal = ({ children, className }: TModal) => {
     return (
         <div
             className={qtMerge(
-                'flex flex-col h-screen w-screen bg-background-primary-base lg:mx-auto lg:h-full lg:w-full lg:rounded-400',
+                'flex flex-col h-[calc(100vh-40px)] w-screen bg-system-light-primary-background lg:mx-auto lg:h-full lg:w-full lg:rounded-400',
                 className
             )}
         >

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 p-400 lg:flex-none', className)}>{children}</div>
+    <div className={qtMerge('flex-grow overflow-y-auto p-400 lg:flex-none', className)}>{children}</div>
 );
 
 export default ModalContent;
diff --git a/packages/tradershub/src/components/TradingAccountsList/TradingAccountsList.tsx b/packages/tradershub/src/components/TradingAccountsList/TradingAccountsList.tsx
@@ -9,8 +9,8 @@ const TradingAccountsList = () => {
     const { switchAccount } = useAuthorize();
 
     return (
-        <div className='flex w-[500px] h-[350px] flex-col items-center rounded-400 bg-system-light-primary-background'>
-            <div className='flex flex-col items-start self-stretch flex-1 p-400 gap-200'>
+        <div className='lg:w-[500px] lg:h-[350px] rounded-400'>
+            <div className='flex flex-col items-start self-stretch p-400 gap-200'>
                 {tradingAccountsList
                     ?.filter(account => !account.is_virtual)
                     .map(account => {

diff --git a/packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx b/packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx
@@ -24,7 +24,7 @@ const TradersHubRoute = () => {
                     <TotalAssets />
                 </div>
                 <ContentSwitcher>
-                    <ContentSwitcher.HeaderList list={['Options & Multiplier', 'CFDs']} />
+                    <ContentSwitcher.HeaderList list={['Options & Multipliers', 'CFDs']} />
                     <ContentSwitcher.PanelContainer>
                         <OptionsAndMultipliersSection />
                     </ContentSwitcher.PanelContainer>