[DTRA] Maryia/DTRA-1632/fix: Chart Scroll Behavior improvement for V2 (…

…deriv-com#16434) * fix: improve bottom nav styles + add fixed height to trade params minimized * fix: badge styling * chore: remove unused important
ahmadtaimoor-deriv · Aug 29, 2024 · 540748a · 540748a
1 parent 152b7a6
commit 540748a
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 25 deletions.
diff --git a/packages/trader/src/AppV2/Components/BottomNav/bottom-nav-item.tsx b/packages/trader/src/AppV2/Components/BottomNav/bottom-nav-item.tsx
@@ -17,8 +17,8 @@ const BottomNavItem = ({ icon, selectedIndex, label, index, setSelectedIndex }:
             className={classNames('bottom-nav-item', isActive ? 'bottom-nav-item--active' : '')}
             onClick={() => setSelectedIndex(index)}
         >
-            <span>{icon}</span>
-            <Text size='sm' className='bottom-nav-item-label'>
+            <span className='bottom-nav-item__icon'>{icon}</span>
+            <Text size='sm' className='bottom-nav-item__label'>
                 {label}
             </Text>
         </button>

diff --git a/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.scss b/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.scss
@@ -5,41 +5,52 @@
 
     &-container {
         display: flex;
-        padding: var(--core-spacing-400);
+        padding: var(--core-spacing-200) var(--core-spacing-400);
         align-items: flex-start;
         gap: var(--core-spacing-500);
         width: 100%;
+        height: var(--core-size-2800);
         border-top: 1px solid var(--core-color-opacity-black-100); // waiting on quill tokens in deriv-app
         background-color: var(--core-color-solid-slate-50);
     }
-
     &-selection {
         flex: 1;
         overflow: auto;
         -ms-overflow-style: none;
         scrollbar-width: none;
     }
-
     &-item {
         all: unset;
         display: flex;
         flex-direction: column;
         align-items: center;
+        justify-content: center;
         flex: 1 0 0;
-        height: var(--core-size-2100);
+        height: var(--core-size-2400);
 
         &--active {
             .bottom-nav-item-label {
                 color: var(--core-color-opacity-coral-600);
             }
-            svg {
+            svg,
+            svg path {
                 fill: var(--core-color-opacity-coral-600);
             }
         }
-
-        &-label {
+        &__label {
             font-size: var(--core-fontSize-50);
             line-height: var(--core-lineHeight-100);
         }
+        &__icon {
+            width: var(--core-size-1200);
+            height: var(--core-size-1200);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .badge__base {
+                z-index: 1;
+            }
+        }
     }
 }
diff --git a/packages/trader/src/AppV2/Components/TradeParameters/trade-parameters-container.tsx b/packages/trader/src/AppV2/Components/TradeParameters/trade-parameters-container.tsx
@@ -15,19 +15,21 @@ const TradeParametersContainer = ({
     is_minimized_visible,
 }: React.PropsWithChildren<TTradeParametersContainer>) =>
     is_minimized ? (
-        <CSSTransition
-            in={is_minimized_visible}
-            timeout={0}
-            classNames={{
-                appear: 'trade-params__options__wrapper--minimized--enter',
-                enter: 'trade-params__options__wrapper--minimized--enter',
-                enterDone: 'trade-params__options__wrapper--minimized--enter-done',
-                exit: 'trade-params__options__wrapper--minimized--exit',
-            }}
-            unmountOnExit
-        >
-            {children}
-        </CSSTransition>
+        <div className='trade-params--minimized'>
+            <CSSTransition
+                in={is_minimized_visible}
+                timeout={0}
+                classNames={{
+                    appear: 'trade-params__options__wrapper--minimized--enter',
+                    enter: 'trade-params__options__wrapper--minimized--enter',
+                    enterDone: 'trade-params__options__wrapper--minimized--enter-done',
+                    exit: 'trade-params__options__wrapper--minimized--exit',
+                }}
+                unmountOnExit
+            >
+                {children}
+            </CSSTransition>
+        </div>
     ) : (
         <section className='trade-params'>
             <div className='trade-params__title'>

diff --git a/packages/trader/src/AppV2/Components/TradeParameters/trade-parameters.scss b/packages/trader/src/AppV2/Components/TradeParameters/trade-parameters.scss
@@ -12,7 +12,6 @@
         align-items: center;
         justify-content: space-between;
     }
-
     &__options {
         &__wrapper {
             display: flex;
@@ -66,7 +65,6 @@
             padding: 0 var(--core-spacing-400) var(--core-spacing-400);
         }
     }
-
     &__option {
         &--minimized {
             width: 16rem;
@@ -79,4 +77,8 @@
             padding-inline-start: 0;
         }
     }
+    &--minimized {
+        height: var(--core-size-3600);
+        width: 100%;
+    }
 }
diff --git a/packages/trader/src/AppV2/Containers/Trade/trade.tsx b/packages/trader/src/AppV2/Containers/Trade/trade.tsx
@@ -60,7 +60,7 @@ const Trade = observer(() => {
         if (current_chart_ref) {
             const chart_bottom_Y = current_chart_ref.getBoundingClientRect().bottom;
             const container_bottom_Y = window.innerHeight - HEIGHT.BOTTOM_NAV;
-            setIsMinimizedParamsVisible(chart_bottom_Y < container_bottom_Y);
+            setIsMinimizedParamsVisible(chart_bottom_Y <= container_bottom_Y);
         }
     }, []);