[DTRA] Maryia/DTRA-1685/feat: design updates for DTrader V2 pages

packages/components/src/components/loading/dtrader-v2-loaders/positions-loader.tsx

@@ -17,9 +17,7 @@ const PositionsLoader = ({ initial_app_loading, is_closed_tab }: TPositionsLoade
                 </div>
             )}
             <div className='skeleton-box__filters'>
-                {[...new Array(is_closed_tab ? 2 : 1)].map((_, idx) => {
-                    return <Skeleton key={idx} width={144} height={32} />;
-                })}
+                <Skeleton width={144} height={32} />
             </div>
             <div className='skeleton-box__total-pnl-or-date'>
                 {[...new Array(is_closed_tab ? 1 : 2)].map((_, idx) => {

packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.scss

@@ -5,4 +5,5 @@
     padding: var(--semantic-spacing-general-md);
     border-radius: var(--core-borderRadius-500);
     gap: var(--semantic-spacing-gap-lg);
+    box-shadow: var(--core-elevation-shadow-130);
 }

packages/trader/src/AppV2/Components/ContractCard/contract-card.scss

@@ -40,8 +40,9 @@
     .timer {
         background-color: var(--core-color-opacity-black-75);
 
+        &,
         .dc-remaining-time {
-            font-size: unset;
+            font-size: var(--core-fontSize-50);
         }
     }
     .status-and-profit {
@@ -86,14 +87,17 @@
         button {
             all: unset;
             display: flex;
+            flex-direction: column;
             justify-content: center;
             align-items: center;
             width: var(--core-size-3600);
             height: 100%;
             cursor: pointer;
 
-            .label {
+            .label,
+            .dc-remaining-time {
                 color: var(--core-color-solid-slate-50);
+                font-size: var(--core-fontSize-50);
             }
             &:disabled:not(.loading) {
                 background-color: var(--core-color-opacity-black-200);
@@ -137,7 +141,7 @@
     }
     &.lost {
         .profit {
-            color: var(--core-color-solid-red-600);
+            color: var(--core-color-solid-red-700);
         }
         button:not(:disabled),
         button.loading {
@@ -150,7 +154,7 @@
     }
     &.won {
         .profit {
-            color: var(--core-color-solid-green-600);
+            color: var(--core-color-solid-green-700);
         }
         button:not(:disabled),
         button.loading {

packages/trader/src/AppV2/Components/ContractCard/contract-card.tsx

@@ -2,13 +2,14 @@ import React from 'react';
 import clsx from 'clsx';
 import { CaptionText, Text } from '@deriv-com/quill-ui';
 import { useSwipeable } from 'react-swipeable';
-import { IconTradeTypes, Money } from '@deriv/components';
+import { IconTradeTypes, Money, RemainingTime } from '@deriv/components';
 import {
     TContractInfo,
     getCardLabels,
     getCurrentTick,
     getMarketName,
     getTradeTypeName,
+    isCryptoContract,
     isEnded,
     isHighLow,
     isMultiplierContract,
@@ -66,12 +67,14 @@ const ContractCard = ({
         isHighLow: is_high_low,
         showMainTitle: true,
     });
+    const cancellation_date_expiry = 'cancellation' in contractInfo ? contractInfo.cancellation?.date_expiry : null;
     const currentTick = 'tick_count' in contractInfo && contractInfo.tick_count ? getCurrentTick(contractInfo) : null;
     const tradeTypeName = `${contract_main_title} ${getTradeTypeName(contract_type ?? '', {
         isHighLow: is_high_low,
     })}`.trim();
     const symbolName =
         'underlying_symbol' in contractInfo ? getMarketName(contractInfo.underlying_symbol ?? '') : display_name;
+    const is_crypto = isCryptoContract((contractInfo as TContractInfo).underlying);
     const isMultiplier = isMultiplierContract(contract_type);
     const isSold = !!sell_time || isEnded(contractInfo as TContractInfo);
     const totalProfit = getProfit(contractInfo);
@@ -147,7 +150,7 @@ const ContractCard = ({
                     <div className='status-and-profit'>
                         <ContractCardStatusTimer
                             currentTick={currentTick}
-                            hasNoAutoExpiry={isMultiplier}
+                            hasNoAutoExpiry={isMultiplier && !is_crypto}
                             isSold={isSold}
                             serverTime={serverTime}
                             {...contractInfo}
@@ -168,9 +171,21 @@ const ContractCard = ({
                                 {isCancelButtonPressed ? (
                                     <div className='circle-loader' data-testid='dt_button_loader' />
                                 ) : (
-                                    <CaptionText bold as='div' className='label'>
-                                        {getCardLabels().CANCEL}
-                                    </CaptionText>
+                                    <>
+                                        <CaptionText bold as='div' className='label'>
+                                            {getCardLabels().CANCEL}
+                                        </CaptionText>
+                                        {cancellation_date_expiry && (
+                                            <CaptionText bold as='div' className='label'>
+                                                <RemainingTime
+                                                    end_time={cancellation_date_expiry}
+                                                    format='mm:ss'
+                                                    getCardLabels={getCardLabels}
+                                                    start_time={serverTime as moment.Moment}
+                                                />
+                                            </CaptionText>
+                                        )}
+                                    </>
                                 )}
                             </button>
                         )}

packages/trader/src/AppV2/Components/ContractDetailsFooter/__tests__/contract-details-footer.spec.tsx

@@ -44,7 +44,7 @@ describe('ContractDetailsFooter', () => {
         (isMultiplierContract as jest.Mock).mockImplementation(() => false);
         (isValidToSell as jest.Mock).mockImplementation(() => true);
         renderFooter();
-        const closeButton = screen.getByRole('button', { name: /close @ 100.00 usd/i });
+        const closeButton = screen.getByRole('button', { name: /close 100.00 usd/i });
         expect(closeButton).toBeInTheDocument();
         expect(closeButton).toBeEnabled();
     });
@@ -76,7 +76,7 @@ describe('ContractDetailsFooter', () => {
         (isValidToSell as jest.Mock).mockImplementation(() => true);
 
         renderFooter();
-        const closeButton = screen.getByRole('button', { name: /close @ 100.00 usd/i });
+        const closeButton = screen.getByRole('button', { name: /close 100.00 usd/i });
 
         userEvent.click(closeButton);
 

packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.scss

@@ -1,15 +1,14 @@
 .contract-details-footer {
     &--container {
-        padding: var(--semantic-spacing-general-md);
-        background-color: var(--core-color-solid-slate-50);
+        padding: 0 var(--semantic-spacing-general-sm) var(--semantic-spacing-general-sm);
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         gap: var(--semantic-spacing-gap-md);
         width: 100%;
-        box-shadow: var(--core-elevation-shadow-210);
         position: fixed;
         bottom: 0;
+        z-index: 2; // chart has z-index: 1, it should not overlap buttons if screen height is small
     }
 }

packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.tsx

@@ -1,8 +1,8 @@
-import { Button, TButtonColor, TButtonVariant } from '@deriv-com/quill-ui';
+import React from 'react';
+import { Button, TButtonColor } from '@deriv-com/quill-ui';
 import { RemainingTime } from '@deriv/components';
 import { TContractInfo, getCardLabelsV2, isMultiplierContract, isValidToCancel, isValidToSell } from '@deriv/shared';
 import { useStore } from '@deriv/stores';
-import React from 'react';
 import { observer } from 'mobx-react';
 import { TRegularSizesWithExtraLarge } from '@deriv-com/quill-ui/dist/types';
 import { FormatUtils } from '@deriv-com/utils';
@@ -12,7 +12,6 @@ type ContractInfoProps = {
 };
 
 type ButtonProps = {
-    variant: TButtonVariant;
     color: TButtonColor;
     size: TRegularSizesWithExtraLarge;
     fullWidth: boolean;
@@ -36,11 +35,13 @@ const ContractDetailsFooter = observer(({ contract_info }: ContractInfoProps) =>
     const is_multiplier = isMultiplierContract(contract_type);
 
     const cardLabels = getCardLabelsV2();
-    const bidDetails = !is_valid_to_cancel ? `@${bid_price} ${currency}` : '';
+    const formatted_bid_price = FormatUtils.formatMoney(bid_price || 0, {
+        currency: currency as 'USD', // currency types mismatched between utils and shared
+    });
+    const bidDetails = !is_valid_to_cancel ? `${formatted_bid_price} ${currency}` : '';
     const label = `${cardLabels.CLOSE} ${bidDetails}`;
 
     const buttonProps: ButtonProps = {
-        variant: 'secondary',
         color: 'black',
         size: 'lg',
         fullWidth: true,
@@ -53,6 +54,7 @@ const ContractDetailsFooter = observer(({ contract_info }: ContractInfoProps) =>
                     <Button
                         label={label}
                         isLoading={is_sell_requested}
+                        isOpaque
                         disabled={Number(profit) < 0 && is_valid_to_cancel}
                         onClick={() => onClickSell(contract_id)}
                         {...buttonProps}
@@ -74,6 +76,8 @@ const ContractDetailsFooter = observer(({ contract_info }: ContractInfoProps) =>
                                 </>
                             }
                             disabled={Number(profit) >= 0}
+                            isOpaque
+                            variant='secondary'
                             {...buttonProps}
                         />
                     )}
@@ -82,12 +86,11 @@ const ContractDetailsFooter = observer(({ contract_info }: ContractInfoProps) =>
                 <Button
                     label={
                         is_valid_to_sell
-                            ? `${cardLabels.CLOSE} @ ${FormatUtils.formatMoney(bid_price || 0, {
-                                  currency: currency as any, // currency types mismatched between utils and shared
-                              })} ${currency}`
+                            ? `${cardLabels.CLOSE} ${formatted_bid_price} ${currency}`
                             : cardLabels.RESALE_NOT_OFFERED
                     }
                     isLoading={is_sell_requested && is_valid_to_sell}
+                    isOpaque
                     onClick={is_valid_to_sell ? () => onClickSell(contract_id) : undefined}
                     disabled={!is_valid_to_sell}
                     {...buttonProps}

packages/trader/src/AppV2/Components/DealCancellationRemainingTime/__tests__/deal-cancellation-remaining-time.spec.tsx

@@ -19,6 +19,7 @@ jest.mock('@deriv/stores', () => ({
 jest.mock('AppV2/Hooks/useContractDetails', () => jest.fn());
 
 describe('DealCancellationRemainingTime component', () => {
+    const cancellation_badge_testid = 'dt_deal_cancellation_badge';
     const mockCommon = {
         server_time: {
             unix: () => 1623441000,
@@ -44,7 +45,7 @@ describe('DealCancellationRemainingTime component', () => {
         render(<DealCancellationRemainingTime />);
 
         expect(screen.getByText('05:00')).toBeInTheDocument();
-        expect(screen.getByTestId('deal-cancellation-badge')).toBeInTheDocument();
+        expect(screen.getByTestId(cancellation_badge_testid)).toBeInTheDocument();
     });
 
     it('does not render the remaining time tag when end time is before start time', () => {
@@ -59,7 +60,7 @@ describe('DealCancellationRemainingTime component', () => {
         render(<DealCancellationRemainingTime />);
 
         expect(screen.queryByText('05:00')).not.toBeInTheDocument();
-        expect(screen.queryByTestId('deal-cancellation-badge')).not.toBeInTheDocument();
+        expect(screen.queryByTestId(cancellation_badge_testid)).not.toBeInTheDocument();
     });
 
     it('does not render the remaining time tag when there is no cancellation date', () => {
@@ -72,6 +73,6 @@ describe('DealCancellationRemainingTime component', () => {
         render(<DealCancellationRemainingTime />);
 
         expect(screen.queryByText('05:00')).not.toBeInTheDocument();
-        expect(screen.queryByTestId('deal-cancellation-badge')).not.toBeInTheDocument();
+        expect(screen.queryByTestId(cancellation_badge_testid)).not.toBeInTheDocument();
     });
 });

packages/trader/src/AppV2/Components/DealCancellationRemainingTime/deal-cancellation-remaining-time.tsx

@@ -1,9 +1,10 @@
+import React from 'react';
 import { Tag } from '@deriv-com/quill-ui';
 import { RemainingTime } from '@deriv/components';
+import { LabelPairedStopwatchCaptionRegularIcon } from '@deriv/quill-icons';
 import { getCardLabelsV2 } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import useContractDetails from 'AppV2/Hooks/useContractDetails';
-import React from 'react';
 
 type DealCancellationRemainingTimeProps = {
     format?: string;
@@ -22,12 +23,12 @@ const DealCancellationRemainingTime = observer(({ format = 'mm:ss' }: DealCancel
     return (
         <Tag
             className='deal-cancellation-badge'
-            color='custom'
-            data-testid='deal-cancellation-badge'
+            data-testid='dt_deal_cancellation_badge'
+            icon={<LabelPairedStopwatchCaptionRegularIcon key='open-contract-card' />}
             label={
                 <RemainingTime
                     end_time={end_time}
-                    format='mm:ss'
+                    format={format}
                     getCardLabels={getCardLabelsV2}
                     start_time={start_time}
                 />

packages/trader/src/AppV2/Components/EmptyPositions/__tests__/empty-positions.spec.tsx

@@ -7,14 +7,14 @@ describe('EmptyPositions', () => {
 
     it('should render "No open trades" content when isClosedTab prop is false', () => {
         render(<EmptyPositions />);
-        expect(screen.getByText('No open trades')).toBeInTheDocument();
-        expect(screen.getByText('Your open trades will appear here.')).toBeInTheDocument();
+        expect(screen.getByText('No open positions')).toBeInTheDocument();
+        expect(screen.getByText('Your open positions will appear here.')).toBeInTheDocument();
     });
 
     it('should render "No closed trades" content when isClosedTab prop is true', () => {
         render(<EmptyPositions isClosedTab />);
-        expect(screen.getByText('No closed trades')).toBeInTheDocument();
-        expect(screen.getByText('Your closed trades will be shown here.')).toBeInTheDocument();
+        expect(screen.getByText('No closed positions')).toBeInTheDocument();
+        expect(screen.getByText('Your closed positions will be shown here.')).toBeInTheDocument();
     });
 
     it('should render "No matches found" content when noMatchesFound prop is true', () => {

packages/trader/src/AppV2/Components/EmptyPositions/empty-positions.tsx

@@ -24,9 +24,9 @@ const EmptyPositions = ({ isClosedTab, noMatchesFound }: TEmptyPositionsProps) =
                     {noMatchesFound && <Localize i18n_default_text='No matches found' />}
                     {!noMatchesFound &&
                         (isClosedTab ? (
-                            <Localize i18n_default_text='No closed trades' />
+                            <Localize i18n_default_text='No closed positions' />
                         ) : (
-                            <Localize i18n_default_text='No open trades' />
+                            <Localize i18n_default_text='No open positions' />
                         ))}
                 </Text>
                 <Text size='sm' centered color='quill-typography__color--subtle'>
@@ -35,9 +35,9 @@ const EmptyPositions = ({ isClosedTab, noMatchesFound }: TEmptyPositionsProps) =
                     )}
                     {!noMatchesFound &&
                         (isClosedTab ? (
-                            <Localize i18n_default_text='Your closed trades will be shown here.' />
+                            <Localize i18n_default_text='Your closed positions will be shown here.' />
                         ) : (
-                            <Localize i18n_default_text='Your open trades will appear here.' />
+                            <Localize i18n_default_text='Your open positions will appear here.' />
                         ))}
                 </Text>
             </div>

packages/trader/src/AppV2/Components/EntryExitDetails/entry-exit-details.scss

@@ -13,8 +13,16 @@
             display: flex;
             justify-content: space-between;
             width: 100%;
-            border-bottom: var(--core-color-solid-slate-75);
-            margin: var(--core-spacing-400) 0;
+            border-bottom: var(--core-borderWidth-75) solid var(--core-color-opacity-black-100);
+            padding: var(--core-spacing-400) 0;
+
+            &:first-child {
+                padding-top: 0;
+            }
+            &:last-child {
+                border-bottom: none;
+                padding-bottom: 0;
+            }
         }
 
         &-cell {

packages/trader/src/AppV2/Components/Filter/__tests__/contract-type-filter.spec.tsx

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import ContractTypeFilter from '../contract-type-filter';
 
-const defaultFilterName = 'All trade types';
+const defaultFilterName = 'Trade types';
 const mockProps = {
     onApplyContractTypeFilter: jest.fn(),
     contractTypeFilter: [],
@@ -25,16 +25,16 @@ describe('ContractTypeFilter', () => {
 
         render(<ContractTypeFilter {...mockProps} contractTypeFilter={mockContractTypeFilter} />);
 
-        expect(screen.queryByText(defaultFilterName)).not.toBeInTheDocument();
-        expect(screen.getByText(mockContractTypeFilter[0])).toBeInTheDocument();
+        expect(screen.queryByText(defaultFilterName)).toBeInTheDocument();
+        expect(screen.getByText('(1)')).toBeInTheDocument();
     });
 
     it('should render correct chip name is contractTypeFilter is with multiple items', () => {
         const mockContractTypeFilter = ['Vanillas', 'Turbos'];
         render(<ContractTypeFilter {...mockProps} contractTypeFilter={mockContractTypeFilter} />);
 
-        expect(screen.queryByText(defaultFilterName)).not.toBeInTheDocument();
-        expect(screen.getByText(`${mockContractTypeFilter.length} trade types`)).toBeInTheDocument();
+        expect(screen.queryByText(defaultFilterName)).toBeInTheDocument();
+        expect(screen.getByText('(2)')).toBeInTheDocument();
     });
 
     it('should call onApplyContractTypeFilter and setter (spied on) with array with chosen option after user clicks on contract type and clicks on "Apply" button', () => {