From 21c2782d7430af2eb0d2bee6ae92ec4baba63d58 Mon Sep 17 00:00:00 2001 From: AzizbekFayziyev Date: Wed, 10 Sep 2025 16:20:42 +0500 Subject: [PATCH] add: fixes --- .../LabeledInput/styles.module.scss | 6 +- .../dex/InputPanelItem/styles.module.scss | 3 +- .../dex/OrdersPool/styles.module.scss | 2 +- .../dex/TradingHeader/styles.module.scss | 4 +- .../dex/UserOrders/cards/styles.module.scss | 326 +++++++++--------- .../dex/UserOrders/styles.module.scss | 6 +- src/pages/dex/trading/[id].tsx | 2 +- src/styles/Trading.module.scss | 3 +- src/utils/utils.ts | 10 +- 9 files changed, 180 insertions(+), 182 deletions(-) diff --git a/src/components/dex/InputPanelItem/components/LabeledInput/styles.module.scss b/src/components/dex/InputPanelItem/components/LabeledInput/styles.module.scss index ac2cefa..bc28171 100644 --- a/src/components/dex/InputPanelItem/components/LabeledInput/styles.module.scss +++ b/src/components/dex/InputPanelItem/components/LabeledInput/styles.module.scss @@ -48,7 +48,7 @@ align-items: center; justify-content: center; - >p { + > p { font-size: 14px; font-weight: 400; white-space: nowrap; @@ -76,9 +76,9 @@ &__currency { padding: 0 8px; - >p { + > p { font-size: 12px; } } } -} \ No newline at end of file +} diff --git a/src/components/dex/InputPanelItem/styles.module.scss b/src/components/dex/InputPanelItem/styles.module.scss index 5afa1e7..446f562 100644 --- a/src/components/dex/InputPanelItem/styles.module.scss +++ b/src/components/dex/InputPanelItem/styles.module.scss @@ -144,7 +144,6 @@ } } - @media screen and (max-width: 640px) { .inputPanel { padding: 0; @@ -195,4 +194,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/components/dex/OrdersPool/styles.module.scss b/src/components/dex/OrdersPool/styles.module.scss index c160bdb..9e6360a 100644 --- a/src/components/dex/OrdersPool/styles.module.scss +++ b/src/components/dex/OrdersPool/styles.module.scss @@ -195,7 +195,7 @@ position: fixed; border: 1px solid var(--dex-tooltip-border-color); min-width: 140px; - max-width: 180px; + max-width: 300px; padding: 10px; transform: translateX(-50%); background-color: var(--dex-tooltip-bg); diff --git a/src/components/dex/TradingHeader/styles.module.scss b/src/components/dex/TradingHeader/styles.module.scss index 892de98..d0cd246 100644 --- a/src/components/dex/TradingHeader/styles.module.scss +++ b/src/components/dex/TradingHeader/styles.module.scss @@ -22,7 +22,7 @@ background-color: var(--icon-bg-color); border-radius: 50%; - >img { + > img { width: 24px; height: auto; } @@ -169,4 +169,4 @@ gap: 12px; } } -} \ No newline at end of file +} diff --git a/src/components/dex/UserOrders/cards/styles.module.scss b/src/components/dex/UserOrders/cards/styles.module.scss index 2293e5c..8919c89 100644 --- a/src/components/dex/UserOrders/cards/styles.module.scss +++ b/src/components/dex/UserOrders/cards/styles.module.scss @@ -1,206 +1,206 @@ .cards { - margin-top: 10px; - display: flex; - flex-direction: column; - gap: 10px; + margin-top: 10px; + display: flex; + flex-direction: column; + gap: 10px; - .card { - position: relative; - display: flex; - flex-direction: column; - gap: 15px; - padding: 6px 10px; + .card { + position: relative; + display: flex; + flex-direction: column; + gap: 15px; + padding: 6px 10px; - &::before { - content: ''; - position: absolute; - left: 0; - top: 0; - width: 2px; - height: 100%; - } + &::before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 2px; + height: 100%; + } - &.sell { - &::before { - background-color: #ff6767; - } + &.sell { + &::before { + background-color: #ff6767; + } - .card__type { - color: #ff6767; - text-transform: capitalize; - } - } + .card__type { + color: #ff6767; + text-transform: capitalize; + } + } - &.buy { - &::before { - background-color: #16d1d6; - } + &.buy { + &::before { + background-color: #16d1d6; + } - .card__type { - color: #16d1d6; - text-transform: capitalize; - } - } + .card__type { + color: #16d1d6; + text-transform: capitalize; + } + } - &__row { - width: 100%; - display: flex; - align-items: center; - gap: 40px; + &__row { + width: 100%; + display: flex; + align-items: center; + gap: 40px; - &.sm { - gap: 18px; + &.sm { + gap: 18px; - .card__col { - min-width: 50px; - } - } - } + .card__col { + min-width: 50px; + } + } + } - &__label { - color: var(--table-th-color); - font-size: 12px; - font-weight: 500; - line-height: 100%; - } + &__label { + color: var(--table-th-color); + font-size: 12px; + font-weight: 500; + line-height: 100%; + } - &__value { - font-size: 12px; - font-weight: 500; - line-height: 100%; + &__value { + font-size: 12px; + font-weight: 500; + line-height: 100%; - &.primary { - color: #1f8feb; - } + &.primary { + color: #1f8feb; + } - &.secondary { - color: var(--table-th-color); - } + &.secondary { + color: var(--table-th-color); + } - span { - color: var(--table-th-color); - font-size: 11px; - font-weight: 500; - line-height: 100%; - } - } + span { + color: var(--table-th-color); + font-size: 11px; + font-weight: 500; + line-height: 100%; + } + } - &__col { - min-width: 100px; - display: flex; - flex-direction: column; - gap: 10px; - } + &__col { + min-width: 100px; + display: flex; + flex-direction: column; + gap: 10px; + } - &__pair { - .card__value { - display: flex; - align-items: center; - gap: 8px; - } + &__pair { + .card__value { + display: flex; + align-items: center; + gap: 8px; + } - .card__type { - display: none; - } - } + .card__type { + display: none; + } + } - &__flex { - gap: 10px; - display: flex; - align-items: center; - justify-content: space-between; - } + &__flex { + gap: 10px; + display: flex; + align-items: center; + justify-content: space-between; + } - &__actions { - display: flex; - align-items: center; - gap: 4px; - margin-left: auto; - } - } + &__actions { + display: flex; + align-items: center; + gap: 4px; + margin-left: auto; + } + } - .mobile { - display: none; - } + .mobile { + display: none; + } } @media screen and (max-width: 640px) { - .cards .card { - gap: 10px; + .cards .card { + gap: 10px; - &__row { - gap: 15px; + &__row { + gap: 15px; - &.sm { - gap: 5px; - } - } + &.sm { + gap: 5px; + } + } - &__col { - min-width: 80px; + &__col { + min-width: 80px; - &_direction { - display: none; - } - } + &_direction { + display: none; + } + } - &__label { - font-size: 10px; - } + &__label { + font-size: 10px; + } - &__value { - font-size: 11px; - } + &__value { + font-size: 11px; + } - &__pair { - .card__label { - display: none; - } + &__pair { + .card__label { + display: none; + } - .card__value { - font-size: 12px; - } + .card__value { + font-size: 12px; + } - .card__type { - font-size: 12px; - display: inline-block; - } - } - } + .card__type { + font-size: 12px; + display: inline-block; + } + } + } } @media screen and (max-width: 500px) { - .cards .card { - &__row { - justify-content: space-between; + .cards .card { + &__row { + justify-content: space-between; - &.sm { - justify-content: flex-start; - } - } + &.sm { + justify-content: flex-start; + } + } - &__col { - min-width: auto; - } + &__col { + min-width: auto; + } - &__flex { - flex-direction: column; - } + &__flex { + flex-direction: column; + } - &__price { - display: none; + &__price { + display: none; - &.mobile { - display: flex; - } - } + &.mobile { + display: flex; + } + } - &__offers { - display: none; + &__offers { + display: none; - &.mobile { - display: flex; - } - } - } -} \ No newline at end of file + &.mobile { + display: flex; + } + } + } +} diff --git a/src/components/dex/UserOrders/styles.module.scss b/src/components/dex/UserOrders/styles.module.scss index 65a3d68..122569f 100644 --- a/src/components/dex/UserOrders/styles.module.scss +++ b/src/components/dex/UserOrders/styles.module.scss @@ -57,7 +57,7 @@ td { position: relative; - >p { + > p { width: 100%; font-size: 12px; font-weight: 400; @@ -76,7 +76,7 @@ } } - >span { + > span { line-height: 1; color: var(--font-dimmed-color); font-size: 11px; @@ -115,4 +115,4 @@ margin-bottom: 10px; } } -} \ No newline at end of file +} diff --git a/src/pages/dex/trading/[id].tsx b/src/pages/dex/trading/[id].tsx index e1fd5ba..69ef00c 100644 --- a/src/pages/dex/trading/[id].tsx +++ b/src/pages/dex/trading/[id].tsx @@ -40,7 +40,7 @@ function Trading() { const fetchUser = useUpdateUser(); const [ordersHistory, setOrdersHistory] = useState([]); const [userOrders, setUserOrders] = useState([]); - const [periodsState, setPeriodsState] = useState(periods[6]); + const [periodsState, setPeriodsState] = useState(periods[4]); const [pairData, setPairData] = useState(null); const [candles, setCandles] = useState([]); const [trades, setTrades] = useState([]); diff --git a/src/styles/Trading.module.scss b/src/styles/Trading.module.scss index d6efdb5..4ba0c53 100644 --- a/src/styles/Trading.module.scss +++ b/src/styles/Trading.module.scss @@ -68,7 +68,6 @@ @media screen and (max-width: 1024px) { .trading__top { - &_trades, &_form { max-width: 100%; @@ -90,4 +89,4 @@ .trading__top { height: 370px; } -} \ No newline at end of file +} diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 01467e0..a41d021 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -183,15 +183,15 @@ export function createOrderSorter({ getSide, getPrice }: Getters) { return (a: T, b: T) => { const aSide = getSide(a); const bSide = getSide(b); - if (aSide !== bSide) return aSide === 'buy' ? -1 : 1; + + if (aSide !== bSide) { + return aSide === 'sell' ? -1 : 1; + } const ap = new Decimal(getPrice(a)); const bp = new Decimal(getPrice(b)); - if (aSide === 'buy') { - return bp.comparedTo(ap); - } - return ap.comparedTo(bp); + return bp.comparedTo(ap); }; }