Yauheni/80158/update UI according to latest design part 2

packages/components/src/components/contract-card/contract-card-items/contract-card-body.jsx

@@ -175,8 +175,8 @@ const AccumulatorCardBody = ({
                 <ContractCardItem header={getCardLabels().STAKE} className='dc-contract-card__stake'>
                     <Money amount={buy_price} currency={currency} />
                 </ContractCardItem>
-                <ContractCardItem header={getCardLabels().INDICATIVE_PRICE}>
-                    <Money currency={currency} amount={sell_price || indicative} />
+                <ContractCardItem header={getCardLabels().INDICATIVE_PRICE} className='dc-contract-card__current-stake'>
+                    <Money amount={sell_price || indicative} currency={currency} />
                     <div
                         className={classNames('dc-contract-card__indicative--movement', {
                             'dc-contract-card__indicative--movement-complete': is_sold,

packages/components/src/components/contract-card/contract-card-items/contract-update-form.jsx

@@ -118,7 +118,6 @@ const ContractUpdateForm = props => {
             onChange={onChange}
             error_message_alignment={error_message_alignment || 'right'}
             value={contract_profit_or_loss.contract_update_take_profit}
-            is_checkbox_hidden={is_accumulator}
             is_disabled={!is_accumulator && !!is_valid_to_cancel}
             setCurrentFocus={setCurrentFocus}
         />

packages/components/src/components/contract-card/contract-card.jsx

@@ -15,7 +15,6 @@ const ContractCard = ({
     contract_info,
     getCardLabels,
     getContractPath,
-    // is_accumulator,
     is_multiplier,
     is_positions,
     is_unsupported,
@@ -35,7 +34,6 @@ const ContractCard = ({
                         contract_id={contract_info.contract_id}
                         getCardLabels={getCardLabels}
                         getContractPath={getContractPath}
-                        // is_accumulator={is_accumulator}
                         is_unsupported={is_unsupported}
                         is_multiplier={is_multiplier}
                         is_visible={!!contract_info.is_sold}
@@ -64,7 +62,6 @@ ContractCard.propTypes = {
     contract_info: PropTypes.object,
     getCardLabels: PropTypes.func,
     getContractPath: PropTypes.func,
-    // is_accumulator: PropTypes.bool,
     is_multiplier: PropTypes.bool,
     is_positions: PropTypes.bool,
     is_unsupported: PropTypes.bool,

packages/components/src/components/contract-card/contract-card.scss

@@ -221,24 +221,6 @@
                 fill: var(--brand-secondary) !important;
             }
         }
-        //&--accumulators {
-        //    @include mobile {
-        //        justify-content: flex-end;
-        //
-        //        .dc-contract-type__type {
-        //            &-label {
-        //                width: fit-content;
-        //            }
-        //            &-wrapper {
-        //                padding: 0.5em 0.8em 0.5em 0.3em;
-        //            }
-        //        }
-        //    }
-        //    .dc-contract-type__type-wrapper .category-type {
-        //        width: unset;
-        //        height: unset;
-        //    }
-        //}
     }
     &__symbol {
         margin-left: 0.4rem;

packages/reports/src/Containers/open-positions.jsx

@@ -94,7 +94,7 @@ const MobileRowRenderer = ({
     const duration_type = getContractDurationType(contract_info.longcode);
     const progress_value = getTimePercentage(server_time, date_start, date_expiry) / 100;
 
-    if (isMultiplierContract(type)) {
+    if (isMultiplierContract(type) || isAccumulatorContract(type)) {
         return (
             <PositionsDrawerCard
                 contract_info={contract_info}

packages/reports/src/sass/app/modules/reports.scss

@@ -998,6 +998,12 @@ $side-padding: 1.2em;
                 }
             }
         }
+        & .dc-contract-card-item {
+            &:nth-child(3),
+            &:nth-child(5) {
+                order: unset;
+            }
+        }
     }
 }
 

packages/shared/src/utils/contract/contract.ts

@@ -48,7 +48,7 @@ export const isValidToSell = (contract_info: TIsValidToSell) =>
 
 export const hasContractEntered = (contract_info: TContractInfo) => !!contract_info.entry_spot;
 
-export const isAccumulatorContract = (contract_type: string) => /(A|DE)CCU/i.test(contract_type);
+export const isAccumulatorContract = (contract_type: string) => /ACCU/i.test(contract_type);
 
 export const isMultiplierContract = (contract_type: string) => /MULT/i.test(contract_type);
 

packages/trader/src/Assets/Trading/Categories/trade-categories.jsx

@@ -13,7 +13,7 @@ const TradeCategories = ({ category }) => {
                     <React.Fragment>
                         <p>
                             {localize(
-                                'When you open a position, barriers will be created around the asset price. For each new tick, the upper and lower barriers are automatically calculated based on the asset and accumulator value that you choose. You will earn a profit if you close your position before the asset price hits either of the barriers.'
+                                'When you open a position, barriers will be created around the asset price. For each new tick, the upper and lower barriers are automatically calculated based on the asset and accumulator value you choose. You will earn a profit if you close your position before the asset price hits either of the barriers.'
                             )}
                         </p>
                         <p>

packages/trader/src/Modules/Contract/Components/AccumulatorsStats/accumulators-stats-manual-modal.jsx

@@ -20,8 +20,8 @@ const AccumulatorsStatsManualModal = ({ title, icon_classname, is_manual_open, t
                 should_header_stick_body={false}
                 title={title}
                 toggleModal={toggleManual}
-                height={is_mobile ? '605px' : '712px'}
-                width={is_mobile ? '328px' : '755px'}
+                height={is_mobile ? '605px' : '615px'}
+                width={is_mobile ? '328px' : '596px'}
                 className='accumulators-stats-manual-modal'
             >
                 <Modal.Body className='accumulators-stats-modal-body'>
@@ -40,7 +40,7 @@ const AccumulatorsStatsManualModal = ({ title, icon_classname, is_manual_open, t
                             'The numbers show the history (last 100 results from the current spot) of tick counts that stayed inside the barrier of your selected market and accumulator.'
                         )}{' '}
                         {localize(
-                            'For example, a tick count of 5 means that the price “stayed inside” for 5 ticks before breaking outside the barrier for Volatility 100 index with a 3% accumulator.'
+                            'For example, a tick count of 5 means that the price “stayed inside” for 5 ticks before breaking outside the barrier for Volatility 10 index with a 3% accumulator.'
                         )}
                     </Text>
                 </Modal.Body>

packages/trader/src/Modules/Contract/Components/AccumulatorsStats/ticks-history-counter.jsx

@@ -1,18 +1,41 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-const TicksHistoryCounter = ({ has_progress_dots, value }) => (
-    <div data-testid='dt_accu_stats_history_counter' className='accumulators-stats__history-counter'>
-        {value}
-        {has_progress_dots && (
-            <div className='accumulators-stats__progress-dots'>
-                {[1, 2, 3].map(dot => {
-                    return <span key={dot} className={`dot-${dot}`} />;
-                })}
-            </div>
-        )}
-    </div>
-);
+const TicksHistoryCounter = ({ has_progress_dots, value }) => {
+    const [is_spot_emphasizing, setIsSpotEmphasizing] = React.useState(has_progress_dots && value === 0);
+
+    React.useLayoutEffect(() => {
+        let emphasizing_timeout;
+        if (has_progress_dots && value === 0) {
+            setIsSpotEmphasizing(true);
+            emphasizing_timeout = setTimeout(() => {
+                setIsSpotEmphasizing(false);
+            }, 700);
+        }
+        return () => {
+            clearTimeout(emphasizing_timeout);
+        };
+    }, [value]);
+
+    return (
+        <div
+            data-testid='dt_accu_stats_history_counter'
+            className={classNames('accumulators-stats__history-counter', {
+                'accumulators-stats__spot-emphasizing': is_spot_emphasizing,
+            })}
+        >
+            {value}
+            {has_progress_dots && (
+                <div className='accumulators-stats__progress-dots'>
+                    {[1, 2, 3].map(dot => {
+                        return <span key={dot} className={`dot-${dot}`} />;
+                    })}
+                </div>
+            )}
+        </div>
+    );
+};
 
 TicksHistoryCounter.propTypes = {
     has_progress_dots: PropTypes.bool,

packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.jsx

@@ -15,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>

packages/trader/src/Modules/Trading/Containers/trade-params.jsx

@@ -22,8 +22,8 @@ const TradeParams = ({ form_components, is_minimized }) => {
             {isVisible('duration') && <Duration key={'duration'} is_minimized={is_minimized} />}
             {isVisible('barrier') && <Barrier key={'barrier'} is_minimized={is_minimized} />}
             {isVisible('last_digit') && <LastDigit key={'last_digit'} is_minimized={is_minimized} />}
-            {isVisible('amount') && <Amount key={'amount'} is_minimized={is_minimized} />}
             {isVisible('accumulator') && <Accumulator key={'accumulator'} />}
+            {isVisible('amount') && <Amount key={'amount'} is_minimized={is_minimized} />}
             {isVisible('take_profit') && <TakeProfit key={'take_profit'} />}
             {isVisible('stop_loss') && <StopLoss key={'stop_loss'} />}
             {isVisible('cancellation') && <CancelDeal key={'cancellation'} />}

packages/trader/src/Modules/Trading/Containers/trade.jsx

@@ -158,7 +158,7 @@ const Trade = ({
                 id='chart_container'
                 className='chart-container'
                 is_disabled={isDesktop()}
-                height_offset={is_accumulator ? '317px' : '259px'}
+                height_offset={is_accumulator ? '295px' : '259px'}
             >
                 <NotificationMessages />
                 <React.Suspense

packages/trader/src/sass/app/_common/layout/trader-layouts.scss

@@ -404,7 +404,7 @@ $FLOATING_HEADER_HEIGHT: 41px;
     position: relative;
 
     .trade-container--accumulators & {
-        height: 27rem;
+        height: 24.8rem;
     }
     &__content-loader {
         position: absolute;

packages/trader/src/sass/app/modules/contract/accumulators-stats.scss

@@ -12,7 +12,7 @@
     margin: 0 2.5em 0 1em;
     background-color: var(--general-section-1);
     border-radius: $BORDER_RADIUS * 2;
-    width: 56.3rem;
+    width: 55.8rem;
 
     @include mobile {
         position: absolute;
@@ -36,7 +36,7 @@
         display: flex;
         align-items: center;
         width: 100%;
-        height: 5.2rem;
+        height: 3.8rem;
         position: relative;
         padding: 0.8rem;
 
@@ -68,6 +68,26 @@
             }
         }
     }
+
+    &__spot-emphasizing {
+        position: relative;
+
+        &:before {
+            content: '';
+            position: absolute;
+            width: 3.2rem;
+            height: 3.2rem;
+            top: -0.3rem;
+            left: 0.3rem;
+            border-radius: 50%;
+            background: center no-repeat radial-gradient(50% 50% at 50% 50%, rgba(55, 124, 252, 0.72) 0%, rgba(55, 124, 252, 0) 100%);
+
+            @include mobile {
+                left: 0rem;
+            }
+        }
+    }
+
     &__history {
         display: flex;
         align-items: center;
@@ -141,7 +161,7 @@
             display: flex;
             flex-direction: column;
             gap: 1rem;
-            padding: 0.6rem 0.8rem 1.3rem;
+            padding: 0.2rem 0.8rem 1.2rem;
             width: 100%;
 
             #{ $self }__row {
@@ -175,10 +195,10 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding: 1.6rem;
 
     &__image {
-        margin-bottom: 2.4rem;
-        height: 49rem;
+        margin-bottom: 0.8rem;
 
         @include mobile {
             margin: 0.8rem 0 1.6rem;
@@ -190,10 +210,16 @@
     }
 }
 
-@include mobile {
-    .dc-modal-header--accumulators-stats-manual-modal {
+.dc-modal-header--accumulators-stats-manual-modal {
+    height: 5.6rem;
+
+    @include mobile {
         height: 5.2rem;
+
     }
+}
+
+@include mobile {
     .dc-mobile-dialog__accumulators-stats {
         padding: 1.1rem 1.6rem;
     }