From 4abfa7ddb10d5eabd539ae4dc775d349fab1c538 Mon Sep 17 00:00:00 2001
From: kate-deriv <121025168+kate-deriv@users.noreply.github.com>
Date: Fri, 24 May 2024 16:23:34 +0300
Subject: [PATCH] DTRA-1279/ Kate/ Feat: add Date picker (#62)

* feat: add second action sheet

* feat: add date range formatting and refactored existing code

* feat: add range selection filtration

* refactor: chip and time filter

* fix: empty posituions after filtration

* refactor: do clean up

* chore: rename variables
---
 .../src/AppV2/Components/Chip/chip.scss       | 45 ++------------
 .../trader/src/AppV2/Components/Chip/chip.tsx | 26 ++------
 .../Components/DatePicker/date-picker.scss    | 15 +++++
 .../Components/DatePicker/date-picker.tsx     | 53 ++++++++++++++++
 .../src/AppV2/Components/DatePicker/index.ts  |  4 ++
 .../EmptyPositions/empty-positions.scss       |  4 ++
 .../EmptyPositions/empty-positions.tsx        |  2 +-
 .../Filter/contract-type-filter.tsx           |  4 +-
 .../Filter/custom-time-filter-button.tsx      | 25 ++++++++
 .../src/AppV2/Components/Filter/filter.scss   | 33 ++++++++++
 .../AppV2/Components/Filter/time-filter.tsx   | 62 ++++++++++++++-----
 .../Positions/positions-content.tsx           | 16 ++++-
 .../AppV2/Containers/Positions/positions.scss | 12 +---
 13 files changed, 209 insertions(+), 92 deletions(-)
 create mode 100644 packages/trader/src/AppV2/Components/DatePicker/date-picker.scss
 create mode 100644 packages/trader/src/AppV2/Components/DatePicker/date-picker.tsx
 create mode 100644 packages/trader/src/AppV2/Components/DatePicker/index.ts
 create mode 100644 packages/trader/src/AppV2/Components/Filter/custom-time-filter-button.tsx

diff --git a/packages/trader/src/AppV2/Components/Chip/chip.scss b/packages/trader/src/AppV2/Components/Chip/chip.scss
index c093730835eb..74be670a031a 100644
--- a/packages/trader/src/AppV2/Components/Chip/chip.scss
+++ b/packages/trader/src/AppV2/Components/Chip/chip.scss
@@ -7,6 +7,9 @@
     border-color: var(--component-chip-border-color);
     border-radius: var(--component-chip-border-radius);
     background-color: var(--core-color-solid-slate-50);
+    padding-inline: var(--component-chip-spacing-padding-lg);
+    height: var(--component-chip-height-md);
+    gap: var(--component-chip-spacing-padding-sm);
 
     &:hover {
         background-color: var(--component-chip-bg-hover);
@@ -67,48 +70,8 @@
         }
     }
 
-    &__disabled {
-        &--true {
-            & > svg {
-                fill: var(--component-chip-icon-disabled) !important;
-            }
-
-            & > p {
-                color: var(--component-chip-label-color-disabled) !important;
-            }
-        }
-    }
-
-    &__size {
-        &--sm {
-            padding-inline: var(--component-chip-spacing-padding-md);
-            height: var(--component-chip-height-sm);
-            gap: var(--component-chip-spacing-padding-xs);
-        }
-        &--md {
-            padding-inline: var(--component-chip-spacing-padding-lg);
-            height: var(--component-chip-height-md);
-            gap: var(--component-chip-spacing-padding-sm);
-        }
-        &--lg {
-            padding-inline: var(--component-chip-spacing-padding-xl);
-            height: var(--component-chip-height-lg);
-            gap: var(--component-chip-spacing-padding-md);
-        }
-    }
-
     &__custom-right-padding {
-        &__size {
-            &--sm {
-                padding-inline: var(--component-chip-spacing-padding-md) var(--component-chip-spacing-padding-xs);
-            }
-            &--md {
-                padding-inline: var(--component-chip-spacing-padding-lg) var(--component-chip-spacing-padding-sm);
-            }
-            &--lg {
-                padding-inline: var(--component-chip-spacing-padding-xl) var(--component-chip-spacing-padding-md);
-            }
-        }
+        padding-inline: var(--component-chip-spacing-padding-lg) var(--component-chip-spacing-padding-sm);
     }
 }
 
diff --git a/packages/trader/src/AppV2/Components/Chip/chip.tsx b/packages/trader/src/AppV2/Components/Chip/chip.tsx
index 2c174debf5ae..01bb389074e9 100644
--- a/packages/trader/src/AppV2/Components/Chip/chip.tsx
+++ b/packages/trader/src/AppV2/Components/Chip/chip.tsx
@@ -1,16 +1,10 @@
 import React from 'react';
-import { StandaloneChevronDownRegularIcon } from '@deriv/quill-icons';
+import { LabelPairedChevronDownSmRegularIcon } from '@deriv/quill-icons';
 import './chip.scss';
 import clsx from 'clsx';
-import { CaptionText, Text } from '@deriv-com/quill-ui';
+import { Text } from '@deriv-com/quill-ui';
 import { TRegularSizes } from '@deriv-com/quill-ui/dist/types';
 
-export const LabelTextSizes: Record<TRegularSizes, JSX.Element> = {
-    sm: <CaptionText />,
-    md: <Text />,
-    lg: <Text />,
-};
-
 type BaseChipProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'label'> & {
     label?: React.ReactNode;
     disabled?: boolean;
@@ -25,24 +19,14 @@ const Chip = React.forwardRef<HTMLButtonElement, BaseChipProps>(
     ({ size = 'md', label, dropdown = false, className, selected, isDropdownOpen = false, onClick, ...rest }, ref) => (
         <button
             onClick={onClick}
-            className={clsx(
-                'quill-chip',
-                `quill-chip__size--${size}`,
-                dropdown && `quill-chip__custom-right-padding__size--${size}`,
-                className
-            )}
+            className={clsx('quill-chip', dropdown && 'quill-chip__custom-right-padding', className)}
             data-state={selected ? 'selected' : ''}
             ref={ref}
             {...rest}
         >
-            {label &&
-                React.cloneElement(LabelTextSizes[size], {
-                    children: label,
-                })}
+            {label && <Text size={size}>{label}</Text>}
             {dropdown && (
-                <StandaloneChevronDownRegularIcon
-                    width={24}
-                    height={24}
+                <LabelPairedChevronDownSmRegularIcon
                     data-state={isDropdownOpen ? 'open' : 'close'}
                     className='rotate'
                 />
diff --git a/packages/trader/src/AppV2/Components/DatePicker/date-picker.scss b/packages/trader/src/AppV2/Components/DatePicker/date-picker.scss
new file mode 100644
index 000000000000..11c74f7fdb77
--- /dev/null
+++ b/packages/trader/src/AppV2/Components/DatePicker/date-picker.scss
@@ -0,0 +1,15 @@
+.date-picker__action-sheet {
+    padding: 0;
+
+    .react-calendar__month-view__days {
+        font-size: var(--core-fontSize-100);
+    }
+    //TODO: temporary CSS
+    .react-calendar__tile--now:after {
+        display: none;
+    }
+}
+
+.quill-date-picker__wrapper--fixed-width {
+    margin: auto;
+}
diff --git a/packages/trader/src/AppV2/Components/DatePicker/date-picker.tsx b/packages/trader/src/AppV2/Components/DatePicker/date-picker.tsx
new file mode 100644
index 000000000000..70d246f5e194
--- /dev/null
+++ b/packages/trader/src/AppV2/Components/DatePicker/date-picker.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { ActionSheet, DatePicker } from '@deriv-com/quill-ui';
+import { toMoment } from '@deriv/shared';
+import { Localize } from '@deriv/translations';
+
+type TDateRangePicker = {
+    isOpen?: boolean;
+    onClose: () => void;
+    setSelectedDateRangeString: React.Dispatch<React.SetStateAction<string | undefined>>;
+    handleDateChange: (values: { to?: moment.Moment; from?: moment.Moment; is_batch?: boolean }) => void;
+};
+const DateRangePicker = ({ isOpen, onClose, setSelectedDateRangeString, handleDateChange }: TDateRangePicker) => {
+    const [chosenRangeString, setChosenRangeString] = React.useState<string>();
+    const [chosenRange, setChosenRange] = React.useState<(string | null | Date)[] | null | Date>([]);
+
+    const onApply = () => {
+        setSelectedDateRangeString(chosenRangeString);
+        if (Array.isArray(chosenRange) && chosenRange.length)
+            handleDateChange({ from: toMoment(chosenRange[0]), to: toMoment(chosenRange[1]) });
+        onClose();
+    };
+
+    return (
+        <ActionSheet.Root isOpen={isOpen} onClose={onClose} position='left'>
+            <ActionSheet.Portal>
+                <ActionSheet.Header title={<Localize i18n_default_text='Choose a date range' />} />
+                <ActionSheet.Content>
+                    <DatePicker
+                        selectRange
+                        onFormattedDate={value => setChosenRangeString(value)}
+                        className='date-picker__action-sheet'
+                        onChange={value => setChosenRange(value)}
+                        optionsConfig={{
+                            day: '2-digit',
+                            month: 'short',
+                            year: 'numeric',
+                        }}
+                    />
+                </ActionSheet.Content>
+                <ActionSheet.Footer
+                    primaryAction={{
+                        content: 'Apply',
+                        onAction: onApply,
+                    }}
+                    alignment='vertical'
+                    isPrimaryButtonDisabled={!chosenRangeString}
+                />
+            </ActionSheet.Portal>
+        </ActionSheet.Root>
+    );
+};
+
+export default DateRangePicker;
diff --git a/packages/trader/src/AppV2/Components/DatePicker/index.ts b/packages/trader/src/AppV2/Components/DatePicker/index.ts
new file mode 100644
index 000000000000..e1fd3c52ef90
--- /dev/null
+++ b/packages/trader/src/AppV2/Components/DatePicker/index.ts
@@ -0,0 +1,4 @@
+import DatePicker from './date-picker';
+import './date-picker.scss';
+
+export default DatePicker;
diff --git a/packages/trader/src/AppV2/Components/EmptyPositions/empty-positions.scss b/packages/trader/src/AppV2/Components/EmptyPositions/empty-positions.scss
index 07ed9f3c1926..2b264d9cf198 100644
--- a/packages/trader/src/AppV2/Components/EmptyPositions/empty-positions.scss
+++ b/packages/trader/src/AppV2/Components/EmptyPositions/empty-positions.scss
@@ -14,5 +14,9 @@
             align-items: center;
             gap: var(--semantic-spacing-gap-sm);
         }
+
+        .icon {
+            fill: var(--core-color-solid-slate-200);
+        }
     }
 }
diff --git a/packages/trader/src/AppV2/Components/EmptyPositions/empty-positions.tsx b/packages/trader/src/AppV2/Components/EmptyPositions/empty-positions.tsx
index 2abcaaf7b621..f5601ae6c6a5 100644
--- a/packages/trader/src/AppV2/Components/EmptyPositions/empty-positions.tsx
+++ b/packages/trader/src/AppV2/Components/EmptyPositions/empty-positions.tsx
@@ -14,7 +14,7 @@ const EmptyPositions = ({ isClosedTab, noMatchesFound }: TEmptyPositionsProps) =
     return (
         <div className={`empty-positions__${isClosedTab ? 'closed' : 'open'}`}>
             <div className='icon' data-testid='dt_empty_state_icon'>
-                <Icon iconSize='2xl' fill='var(--core-color-solid-slate-200)' />
+                <Icon iconSize='2xl' />
             </div>
             <div className='message'>
                 {/* There is an issue with tokens: the 'lg' size should give 18px but it's giving 20px, it's being discussed. */}
diff --git a/packages/trader/src/AppV2/Components/Filter/contract-type-filter.tsx b/packages/trader/src/AppV2/Components/Filter/contract-type-filter.tsx
index 18fb30728203..19027772fb73 100644
--- a/packages/trader/src/AppV2/Components/Filter/contract-type-filter.tsx
+++ b/packages/trader/src/AppV2/Components/Filter/contract-type-filter.tsx
@@ -57,6 +57,7 @@ const ContractTypeFilter = ({ setContractTypeFilter, contractTypeFilter }: TCont
                 isDropdownOpen={isDropdownOpen}
                 onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                 selected={!!changedOptions.length}
+                size='sm'
             />
             <ActionSheet.Root isOpen={isDropdownOpen} onClose={onActionSheetClose} position='left'>
                 <ActionSheet.Portal>
@@ -80,8 +81,7 @@ const ContractTypeFilter = ({ setContractTypeFilter, contractTypeFilter }: TCont
                         secondaryAction={{ content: 'Clear All', onAction: () => setChangedOptions([]) }}
                         alignment='vertical'
                         shouldCloseOnSecondaryButtonClick={false}
-                        // TODO: replace className with disabling props after Quill library updates
-                        className={`${changedOptions.length ? '' : 'disabled'}`}
+                        isSecondaryButtonDisabled={!changedOptions.length}
                     />
                 </ActionSheet.Portal>
             </ActionSheet.Root>
diff --git a/packages/trader/src/AppV2/Components/Filter/custom-time-filter-button.tsx b/packages/trader/src/AppV2/Components/Filter/custom-time-filter-button.tsx
new file mode 100644
index 000000000000..5946b09c3ca6
--- /dev/null
+++ b/packages/trader/src/AppV2/Components/Filter/custom-time-filter-button.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Text } from '@deriv-com/quill-ui';
+import { LabelPairedChevronRightSmBoldIcon } from '@deriv/quill-icons';
+import { Localize } from '@deriv/translations';
+
+type TCustomDateFilterButton = {
+    setShowDatePicker: React.Dispatch<React.SetStateAction<boolean>>;
+    selectedRangeDateString?: string;
+};
+
+const CustomDateFilterButton = ({ setShowDatePicker, selectedRangeDateString }: TCustomDateFilterButton) => (
+    <button className='custom-time-filter__wrapper' onClick={() => setShowDatePicker(true)}>
+        <Text size='md' className='custom-time-filter__label'>
+            <Localize i18n_default_text='Custom' />
+        </Text>
+        {selectedRangeDateString && (
+            <Text size='sm' color='quill-typography__color--subtle'>
+                {selectedRangeDateString}
+            </Text>
+        )}
+        <LabelPairedChevronRightSmBoldIcon className='custom-time-filter__icon' />
+    </button>
+);
+
+export default CustomDateFilterButton;
diff --git a/packages/trader/src/AppV2/Components/Filter/filter.scss b/packages/trader/src/AppV2/Components/Filter/filter.scss
index 9c8444e21dfb..50487a926c16 100644
--- a/packages/trader/src/AppV2/Components/Filter/filter.scss
+++ b/packages/trader/src/AppV2/Components/Filter/filter.scss
@@ -5,8 +5,41 @@
         height: var(--core-size-2000);
         padding-block: var(--core-spacing-400);
 
+        label {
+            flex-grow: 1;
+        }
+
         &__wrapper {
             padding-block: var(--core-spacing-800);
+
+            .quill-radio-button {
+                padding-block: var(--core-spacing-400);
+                width: 100%;
+
+                &__label {
+                    font-size: var(--core-fontSize-100);
+                    flex-grow: 1;
+                    margin: 0;
+                }
+            }
         }
     }
 }
+
+.custom-time-filter {
+    &__wrapper {
+        display: flex;
+        gap: var(--core-spacing-400);
+        margin-block: var(--core-spacing-400);
+        width: 100%;
+    }
+
+    &__label {
+        flex-grow: 1;
+    }
+
+    &__icon {
+        width: var(--core-size-1200);
+        height: var(--core-size-1200);
+    }
+}
diff --git a/packages/trader/src/AppV2/Components/Filter/time-filter.tsx b/packages/trader/src/AppV2/Components/Filter/time-filter.tsx
index 37f021bd1ad0..25aa16b6ce02 100644
--- a/packages/trader/src/AppV2/Components/Filter/time-filter.tsx
+++ b/packages/trader/src/AppV2/Components/Filter/time-filter.tsx
@@ -3,19 +3,16 @@ import Chip from 'AppV2/Components/Chip';
 import { toMoment } from '@deriv/shared';
 import { ActionSheet, RadioGroup } from '@deriv-com/quill-ui';
 import { Localize } from '@deriv/translations';
+import CustomDateFilterButton from './custom-time-filter-button';
+import DateRangePicker from 'AppV2/Components/DatePicker';
 
 type TTimeFilter = {
+    handleDateChange: (values: { to?: moment.Moment; from?: moment.Moment; is_batch?: boolean }) => void;
     chosenTimeFilter?: string;
-    setChosenTimeFilter: React.Dispatch<React.SetStateAction<string>>;
-    handleDateChange: (
-        date_values: { from?: moment.Moment; to: moment.Moment; is_batch: boolean },
-        {
-            date_range,
-        }?: {
-            // TODO: refactor type
-            date_range: any;
-        }
-    ) => void;
+    setChosenTimeFilter: React.Dispatch<React.SetStateAction<string | undefined>>;
+    selectedRangeDateString?: string;
+    setSelectedDateRangeString: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setNoMatchesFound: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 // TODO: replace strings with numbers when types in Quill be changed
@@ -24,6 +21,7 @@ const timeFilterList = [
         value: '0',
         label: <Localize i18n_default_text='All time' />,
     },
+    // TODO: Fix today and yesterday
     {
         value: '1',
         label: <Localize i18n_default_text='Today' />,
@@ -50,8 +48,16 @@ const timeFilterList = [
     },
 ];
 
-const TimeFilter = ({ chosenTimeFilter, setChosenTimeFilter, handleDateChange }: TTimeFilter) => {
+const TimeFilter = ({
+    handleDateChange,
+    chosenTimeFilter,
+    setChosenTimeFilter,
+    selectedRangeDateString,
+    setSelectedDateRangeString,
+    setNoMatchesFound,
+}: TTimeFilter) => {
     const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+    const [showDatePicker, setShowDatePicker] = React.useState(false);
 
     const defaultCheckedTime = '0';
 
@@ -72,6 +78,7 @@ const TimeFilter = ({ chosenTimeFilter, setChosenTimeFilter, handleDateChange }:
 
     const onReset = () => {
         setChosenTimeFilter('');
+        setSelectedDateRangeString('');
         setIsDropdownOpen(false);
         handleDateChange({
             from: Number(defaultCheckedTime)
@@ -80,9 +87,11 @@ const TimeFilter = ({ chosenTimeFilter, setChosenTimeFilter, handleDateChange }:
             to: toMoment().endOf('day'),
             is_batch: true,
         });
+        setNoMatchesFound(false);
     };
 
     const chipLabelFormatting = () =>
+        selectedRangeDateString ||
         timeFilterList.find(item => item.value === (chosenTimeFilter || defaultCheckedTime))?.label;
 
     return (
@@ -92,19 +101,32 @@ const TimeFilter = ({ chosenTimeFilter, setChosenTimeFilter, handleDateChange }:
                 dropdown
                 isDropdownOpen={isDropdownOpen}
                 onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-                selected={!!chosenTimeFilter}
+                selected={!!(selectedRangeDateString || chosenTimeFilter)}
+                size='sm'
             />
             <ActionSheet.Root isOpen={isDropdownOpen} onClose={() => setIsDropdownOpen(false)} position='left'>
                 <ActionSheet.Portal>
                     <ActionSheet.Header title={<Localize i18n_default_text='Filter by trade types' />} />
                     <ActionSheet.Content className='filter__item__wrapper'>
-                        <RadioGroup selected={chosenTimeFilter || defaultCheckedTime} onToggle={onRadioButtonChange}>
+                        <RadioGroup
+                            selected={selectedRangeDateString || chosenTimeFilter || defaultCheckedTime}
+                            onToggle={onRadioButtonChange}
+                            size='sm'
+                            className='filter__item--radio'
+                        >
                             {timeFilterList.map(({ value, label }) => (
-                                <RadioGroup.Item value={value} label={label.props.i18n_default_text} key={value} />
+                                <RadioGroup.Item
+                                    value={value}
+                                    label={label.props.i18n_default_text}
+                                    key={value}
+                                    radioButtonPosition='right'
+                                />
                             ))}
                         </RadioGroup>
-                        {/* TODO: Replace with real component*/}
-                        <div>Custom</div>
+                        <CustomDateFilterButton
+                            setShowDatePicker={setShowDatePicker}
+                            selectedRangeDateString={selectedRangeDateString}
+                        />
                     </ActionSheet.Content>
                     <ActionSheet.Footer
                         secondaryAction={{
@@ -116,6 +138,14 @@ const TimeFilter = ({ chosenTimeFilter, setChosenTimeFilter, handleDateChange }:
                     />
                 </ActionSheet.Portal>
             </ActionSheet.Root>
+            {showDatePicker && (
+                <DateRangePicker
+                    isOpen={showDatePicker}
+                    onClose={() => setShowDatePicker(false)}
+                    setSelectedDateRangeString={setSelectedDateRangeString}
+                    handleDateChange={handleDateChange}
+                />
+            )}
         </React.Fragment>
     );
 };
diff --git a/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx b/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx
index 8cfe9b4b9e7e..62ad9a955f0b 100644
--- a/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx
+++ b/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx
@@ -21,8 +21,9 @@ export type TClosedPosition = {
 
 const PositionsContent = observer(({ hasButtonsDemo, isClosedTab, setHasButtonsDemo }: TPositionsContentProps) => {
     const [contractTypeFilter, setContractTypeFilter] = React.useState<string[]>([]);
-    const [chosenTimeFilter, setChosenTimeFilter] = React.useState<string>('');
+    const [chosenTimeFilter, setChosenTimeFilter] = React.useState<string>();
     const [filteredPositions, setFilteredPositions] = React.useState<(TPortfolioPosition | TClosedPosition)[]>([]);
+    const [selectedRangeDateString, setSelectedDateRangeString] = React.useState<string>();
     const [noMatchesFound, setNoMatchesFound] = React.useState(false);
 
     const { common, client, portfolio } = useStore();
@@ -41,7 +42,7 @@ const PositionsContent = observer(({ hasButtonsDemo, isClosedTab, setHasButtonsD
         () => (isClosedTab ? closedPositions : active_positions),
         [active_positions, isClosedTab, closedPositions]
     );
-    const hasNoPositions = isClosedTab ? is_empty : is_active_empty;
+    const hasNoPositions = isClosedTab ? is_empty && !chosenTimeFilter && !selectedRangeDateString : is_active_empty;
     const shouldShowEmptyMessage = hasNoPositions || noMatchesFound;
     const shouldShowContractCards =
         isClosedTab || (filteredPositions.length && (filteredPositions[0]?.contract_info as TContractInfo)?.status);
@@ -65,6 +66,14 @@ const PositionsContent = observer(({ hasButtonsDemo, isClosedTab, setHasButtonsD
         }
     };
 
+    React.useEffect(() => {
+        if (!positions.length && isClosedTab && (selectedRangeDateString || chosenTimeFilter)) {
+            setNoMatchesFound(true);
+        } else {
+            setNoMatchesFound(false);
+        }
+    }, [selectedRangeDateString, chosenTimeFilter, positions, isClosedTab]);
+
     if (isLoading || (!shouldShowContractCards && !shouldShowEmptyMessage)) return <Loading />;
     return (
         <div className={`positions-page__${isClosedTab ? 'closed' : 'open'}`}>
@@ -76,6 +85,9 @@ const PositionsContent = observer(({ hasButtonsDemo, isClosedTab, setHasButtonsD
                                 chosenTimeFilter={chosenTimeFilter}
                                 setChosenTimeFilter={setChosenTimeFilter}
                                 handleDateChange={handleDateChange}
+                                selectedRangeDateString={selectedRangeDateString}
+                                setSelectedDateRangeString={setSelectedDateRangeString}
+                                setNoMatchesFound={setNoMatchesFound}
                             />
                         )}
                         <ContractTypeFilter
diff --git a/packages/trader/src/AppV2/Containers/Positions/positions.scss b/packages/trader/src/AppV2/Containers/Positions/positions.scss
index 928ab10cdd8f..28507e976032 100644
--- a/packages/trader/src/AppV2/Containers/Positions/positions.scss
+++ b/packages/trader/src/AppV2/Containers/Positions/positions.scss
@@ -37,20 +37,14 @@ $TABS_HEIGHT: 4.8rem;
     }
     &__filter {
         &__wrapper {
-            padding: var(--core-spacing-400);
+            padding-block: var(--core-spacing-400);
+            padding-inline-start: var(--core-spacing-400);
             display: flex;
             gap: var(--core-spacing-400);
+            flex-wrap: wrap;
         }
     }
     .initial-loader {
         height: 100%;
     }
 }
-
-// TODO: Temporary style, waiting for new Quill version
-.disabled {
-    .quill__color--secondary-black {
-        pointer-events: none;
-        opacity: 0.1;
-    }
-}