Kate/88725/No quick access to trade type description (deriv-com#7667)

* refactor: make info icon always visible * refactor: add info icon for mobile * fix: add arrow and trade type to the trade type info in mobile * fix: add scss for mobile scrollbar * refactor: remove important from css * refactor: change to positive condition * feat: add style for button responsive in trade type info * chore: empty commit to trigger codcov --------- Co-authored-by: Carol Sachdeva <58209918+carol-deriv@users.noreply.github.com>
mahdiyeh-deriv · Mar 2, 2023 · ba516e9 · ba516e9
1 parent 3fc801d
commit ba516e9
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 46 deletions.
diff --git a/.../src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.jsx b/.../src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.jsx
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Button, ThemedScrollbars, Carousel } from '@deriv/components';
+import { isMobile } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import TradeCategories from 'Assets/Trading/Categories/trade-categories.jsx';
 import TradeCategoriesGIF from 'Assets/Trading/Categories/trade-categories-gif.jsx';
@@ -14,7 +15,11 @@ const Info = ({ handleNavigationClick, handleSelect, initial_index, item, list }
                 <div className='contract-type-info__gif'>
                     <TradeCategoriesGIF category={type.value} />
                 </div>
-                <ThemedScrollbars className='contract-type-info__scrollbars' height='300px' autohide={false}>
+                <ThemedScrollbars
+                    className='contract-type-info__scrollbars'
+                    height={isMobile() ? '' : '300px'}
+                    autohide={false}
+                >
                     <div className='contract-type-info__content'>
                         <TradeCategories category={type.value} />
                     </div>
@@ -43,7 +48,7 @@ const Info = ({ handleNavigationClick, handleSelect, initial_index, item, list }
                 handleNavigationClick(contract_types[active_index]);
             }}
             list={cards}
-            width={290}
+            width={isMobile() ? 328 : 290}
         />
     );
 };

diff --git a/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-dialog.jsx b/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-dialog.jsx
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { DesktopWrapper, MobileDialog, MobileWrapper } from '@deriv/components';
+import { Header } from './ContractTypeInfo';
 import { localize } from '@deriv/translations';
 import ContractTypeMenu from './ContractTypeMenu';
 
@@ -17,39 +18,47 @@ const ContractTypeDialog = ({
     onChangeInput,
     onCategoryClick,
     show_loading,
-}) => (
-    <React.Fragment>
-        <MobileWrapper>
-            <span className='contract-type-widget__select-arrow' />
-            <MobileDialog
-                portal_element_id='modal_root'
-                title={localize('Trade type')}
-                wrapper_classname='contracts-modal-list'
-                visible={is_open}
-                onClose={onClose}
-                has_content_scroll
-            >
-                {children}
-            </MobileDialog>
-        </MobileWrapper>
-        <DesktopWrapper>
-            <ContractTypeMenu
-                is_info_dialog_open={is_info_dialog_open}
-                is_open={is_open}
-                item={item}
-                list={list}
-                selected={selected}
-                categories={categories}
-                onBackButtonClick={onBackButtonClick}
-                onChangeInput={onChangeInput}
-                onCategoryClick={onCategoryClick}
-                show_loading={show_loading}
-            >
-                {children}
-            </ContractTypeMenu>
-        </DesktopWrapper>
-    </React.Fragment>
-);
+}) => {
+    const current_mobile_title = is_info_dialog_open ? (
+        <Header title={item.text} onClickGoBack={onBackButtonClick} text_size='xs' />
+    ) : (
+        localize('Trade type')
+    );
+    return (
+        <React.Fragment>
+            <MobileWrapper>
+                <span className='contract-type-widget__select-arrow' />
+                <MobileDialog
+                    portal_element_id='modal_root'
+                    title={current_mobile_title}
+                    header_classname='contract-type-widget__header'
+                    wrapper_classname='contracts-modal-list'
+                    visible={is_open}
+                    onClose={onClose}
+                    has_content_scroll
+                >
+                    {children}
+                </MobileDialog>
+            </MobileWrapper>
+            <DesktopWrapper>
+                <ContractTypeMenu
+                    is_info_dialog_open={is_info_dialog_open}
+                    is_open={is_open}
+                    item={item}
+                    list={list}
+                    selected={selected}
+                    categories={categories}
+                    onBackButtonClick={onBackButtonClick}
+                    onChangeInput={onChangeInput}
+                    onCategoryClick={onCategoryClick}
+                    show_loading={show_loading}
+                >
+                    {children}
+                </ContractTypeMenu>
+            </DesktopWrapper>
+        </React.Fragment>
+    );
+};
 
 ContractTypeDialog.propTypes = {
     categories: PropTypes.array,

diff --git a/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-item.jsx b/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-item.jsx
@@ -2,7 +2,7 @@ import { PropTypes as MobxPropTypes } from 'mobx-react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Icon, DesktopWrapper, Text } from '@deriv/components';
+import { Icon, Text } from '@deriv/components';
 import IconTradeCategory from 'Assets/Trading/Categories/icon-trade-categories.jsx';
 
 const Item = ({ contract_types, handleInfoClick, handleSelect, name, value }) =>
@@ -22,11 +22,9 @@ const Item = ({ contract_types, handleInfoClick, handleSelect, name, value }) =>
             <Text size='xs' className='contract-type-item__title'>
                 {type.text}
             </Text>
-            <DesktopWrapper>
-                <div id='info-icon' className='contract-type-item__icon' onClick={() => handleInfoClick(type)}>
-                    <Icon icon='IcInfoOutline' />
-                </div>
-            </DesktopWrapper>
+            <div id='info-icon' className='contract-type-item__icon' onClick={() => handleInfoClick(type)}>
+                <Icon icon='IcInfoOutline' />
+            </div>
         </div>
     ));
 

diff --git a/packages/trader/src/sass/app/_common/components/contract-type-info.scss b/packages/trader/src/sass/app/_common/components/contract-type-info.scss
@@ -21,6 +21,10 @@
         @media screen and (min-height: 821px) {
             min-height: 535px;
         }
+        @include mobile {
+            min-height: calc(100vh - 140px);
+            padding: 0;
+        }
     }
     &__content {
         overflow: hidden;
@@ -53,12 +57,26 @@
         width: 100%;
         height: 148px;
         border-radius: 4px;
+
+        @include mobile {
+            width: 32.8rem;
+            height: 14.1rem;
+            background-color: var(--general-section-1);
+            svg {
+                width: 100%;
+                height: 100%;
+            }
+        }
     }
     &__action-bar {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
+
+        @include mobile {
+            gap: 2.4rem;
+        }
     }
     &__title {
         margin: auto;
@@ -106,5 +124,10 @@
     }
     &__button {
         margin-top: 2.4rem;
+        @include mobile {
+            width: 27.2rem;
+            padding: 1.5rem 0;
+            align-self: center;
+        }
     }
 }
diff --git a/packages/trader/src/sass/app/_common/components/contract-type-list.scss b/packages/trader/src/sass/app/_common/components/contract-type-list.scss
@@ -34,16 +34,11 @@
 
     &:hover {
         background-color: var(--state-hover);
-
-        .contract-type-item__icon {
-            display: block;
-        }
     }
     &__title {
         padding-left: 1.6rem;
     }
     &__icon {
-        display: none;
         margin-left: auto;
 
         /* postcss-bem-linter: ignore */