From 5424464d2467d708b99b5f435687860bdaa3f28a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hub=C3=A9rt=20de=20Lalye?= Date: Mon, 25 Nov 2024 15:08:32 +0400 Subject: [PATCH 01/35] colors clean up --- src/App/App.scss | 8 +- .../AddressDropdown/AddressDropdown.scss | 2 +- src/components/AlertInfo/AlertInfo.tsx | 6 +- src/components/Button/Button.scss | 2 +- .../BuyInputSection/BuyInputSection.tsx | 4 +- src/components/Exchange/PositionSeller.jsx | 4 +- src/components/Exchange/SwapBox.jsx | 2 +- src/components/ExternalLink/ExternalLink.scss | 2 +- src/components/Footer/Footer.css | 2 +- src/components/Glp/GlpSwap.css | 2 +- src/components/Header/Header.scss | 24 +- .../InterviewModal/InterviewModal.tsx | 2 +- .../InterviewToast/InterviewToast.tsx | 2 +- src/components/Modal/Modal.css | 4 +- .../NetworkDropdown/NetworkDropdown.css | 4 +- src/components/NotifyButton/NotifyButton.scss | 2 +- src/components/NotifyModal/NotifyModal.scss | 2 +- src/components/NumberInput/NumberInput.tsx | 3 +- src/components/PageTitle/PageTitle.tsx | 2 +- src/components/RatingToast/RatingToast.tsx | 2 +- src/components/SearchInput/SearchInput.tsx | 38 ++- .../StatsTooltip/StatsTooltipRow.tsx | 2 +- .../SuggestionInput/SuggestionInput.scss | 8 +- .../Synthetics/BridgingInfo/BridgingInfo.tsx | 4 +- .../ChartTokenSelector/ChartTokenSelector.tsx | 2 +- src/components/Synthetics/ExpandableRow.tsx | 4 +- .../GmAssetDropdown/GmAssetDropdown.tsx | 2 +- src/components/Synthetics/GmList/GmList.tsx | 2 +- .../Synthetics/GmList/TokenValuesInfoCell.tsx | 2 +- .../GmSwap/GmSwapBox/showMarketToast.tsx | 2 +- .../Synthetics/MarketCard/MarketCard.scss | 30 -- .../Synthetics/MarketCard/MarketCard.tsx | 312 ------------------ .../Synthetics/MarketNetFee/MarketNetFee.tsx | 2 +- .../Synthetics/MarketStats/MarketStats.scss | 2 +- .../components/MarketDescription.tsx | 2 +- .../MarketTokenSelector.tsx | 10 +- .../Synthetics/MarketsList/NetFeeTooltip.tsx | 10 +- .../Synthetics/OrderItem/OrderItem.tsx | 4 +- .../Synthetics/PositionItem/PositionItem.tsx | 4 +- .../Synthetics/PositionList/PositionList.tsx | 2 +- .../SubaccountModal/SubaccountModal.tsx | 2 +- .../Synthetics/TVChart/TVChart.scss | 6 +- .../Synthetics/TVChart/TVChartHeader.tsx | 18 +- .../MarketFilterLongShort.tsx | 2 +- .../Synthetics/TradeBox/TradeBox.scss | 5 - .../TradeBoxRows/AdvancedDisplayRows.tsx | 2 +- .../TradeBox/TradeBoxRows/OneClickTrading.tsx | 4 +- .../Synthetics/TradeFeesRow/TradeFeesRow.scss | 3 +- .../TradeHistoryRow/TradeHistoryRow.tsx | 2 +- .../TradeboxPoolWarnings.tsx | 2 +- src/components/Tab/Tab.css | 2 +- src/components/Table/Table.tsx | 2 +- src/components/TokenCard/TokenCard.tsx | 2 +- .../tokens/useAirdroppedTokenTitle.tsx | 4 +- src/img/ic_discord.svg | 2 +- src/img/ic_github.svg | 2 +- src/img/ic_substack.svg | 2 +- src/img/ic_telegram.svg | 2 +- src/img/ic_x.svg | 2 +- src/img/search.svg | 2 +- src/locales/de/messages.po | 53 ++- src/locales/en/messages.po | 53 ++- src/locales/es/messages.po | 53 ++- src/locales/fr/messages.po | 53 ++- src/locales/ja/messages.po | 53 ++- src/locales/ko/messages.po | 53 ++- src/locales/pseudo/messages.po | 53 ++- src/locales/ru/messages.po | 53 ++- src/locales/zh/messages.po | 53 ++- .../DailyAndCumulativePnL.tsx | 2 +- .../VersionNetworkSwitcherRow.tsx | 4 +- src/pages/Dashboard/AssetDropdown.scss | 2 +- src/pages/Exchange/Exchange.css | 5 +- .../LeaderboardPage/LeaderboardPage.scss | 2 +- src/styles/Input.css | 7 +- src/styles/Shared.scss | 8 +- 76 files changed, 330 insertions(+), 770 deletions(-) delete mode 100644 src/components/Synthetics/MarketCard/MarketCard.scss delete mode 100644 src/components/Synthetics/MarketCard/MarketCard.tsx diff --git a/src/App/App.scss b/src/App/App.scss index dfc89495e2..a0ef56c722 100644 --- a/src/App/App.scss +++ b/src/App/App.scss @@ -29,7 +29,7 @@ $app-card-padding: 1.5rem; padding-left: 3.2rem; padding-right: 3.2rem; background: transparent 0% 0% no-repeat padding-box; - border-bottom: 1px solid var(--color-gray-950); + border-bottom: 1px solid var(--color-slate-700); z-index: 1; } @@ -285,7 +285,7 @@ button.App-connect-wallet:hover { } .App-header-user-address { - border: 1px solid var(--color-gray-800); + border: 1px solid var(--color-gray-700); height: 3.6rem; border-radius: 0.4rem; display: inline-flex; @@ -407,7 +407,7 @@ button.App-connect-wallet:hover { } .Page-description { - color: var(--color-gray-300); + color: var(--color-slate-100); font-size: var(--font-size-body-large); line-height: var(--line-height-body-large); } @@ -1171,7 +1171,7 @@ button.App-button { padding-left: 1.6rem; padding-right: 1.6rem; background: transparent 0% 0% no-repeat padding-box; - border-bottom: 1px solid var(--color-gray-950); + border-bottom: 1px solid var(--color-slate-700); } .App-header.small::after { diff --git a/src/components/AddressDropdown/AddressDropdown.scss b/src/components/AddressDropdown/AddressDropdown.scss index 0da30c880d..cba0282bfd 100644 --- a/src/components/AddressDropdown/AddressDropdown.scss +++ b/src/components/AddressDropdown/AddressDropdown.scss @@ -34,7 +34,7 @@ border-radius: 0.4rem; overflow: hidden; background: var(--color-slate-800); - border: 1px solid var(--color-gray-800); + border: 1px solid var(--color-gray-700); list-style: none; cursor: pointer; outline: none; diff --git a/src/components/AlertInfo/AlertInfo.tsx b/src/components/AlertInfo/AlertInfo.tsx index 1fc0ce4a45..5c89fe4438 100644 --- a/src/components/AlertInfo/AlertInfo.tsx +++ b/src/components/AlertInfo/AlertInfo.tsx @@ -14,9 +14,9 @@ interface Props { noMargin?: boolean; onClick?: () => void; /** - * @default "text-gray-300" + * @default "text-slate-100" */ - textColor?: "text-gray-300" | "text-yellow-500"; + textColor?: "text-slate-100" | "text-yellow-500"; } export function AlertInfo({ @@ -24,7 +24,7 @@ export function AlertInfo({ noMargin = false, children, type, - textColor = "text-gray-300", + textColor = "text-slate-100", className, onClick, }: Props) { diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 3836f2fe08..cb4d043b89 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -122,7 +122,7 @@ } &.link { - color: var(--color-gray-300); + color: var(--color-slate-100); text-decoration: underline; padding: 0; diff --git a/src/components/BuyInputSection/BuyInputSection.tsx b/src/components/BuyInputSection/BuyInputSection.tsx index 88768f4007..055d0015bd 100644 --- a/src/components/BuyInputSection/BuyInputSection.tsx +++ b/src/components/BuyInputSection/BuyInputSection.tsx @@ -85,7 +85,7 @@ export default function BuyInputSection(props: Props) {
-
+
{topLeftLabel} {topLeftValue && `${INPUT_LABEL_SEPARATOR} ${topLeftValue}`}
@@ -94,7 +94,7 @@ export default function BuyInputSection(props: Props) { className={cx("align-right", { clickable: onClickTopRightLabel })} onClick={onClickTopRightLabel} > - {topRightLabel} + {topRightLabel} {topRightValue && ( {topRightLabel ? INPUT_LABEL_SEPARATOR : ""} {topRightValue} diff --git a/src/components/Exchange/PositionSeller.jsx b/src/components/Exchange/PositionSeller.jsx index ad7e822283..fe83dfcb7d 100644 --- a/src/components/Exchange/PositionSeller.jsx +++ b/src/components/Exchange/PositionSeller.jsx @@ -1145,13 +1145,13 @@ export default function PositionSeller(props) { {hasPendingProfit && orderOption !== STOP && (
- Forfeit profit + Forfeit profit
)}
- + Keep leverage at {formatAmount(position.leverage, 4, 2)}x diff --git a/src/components/Exchange/SwapBox.jsx b/src/components/Exchange/SwapBox.jsx index 26f62c5772..677a9239ce 100644 --- a/src/components/Exchange/SwapBox.jsx +++ b/src/components/Exchange/SwapBox.jsx @@ -2172,7 +2172,7 @@ export default function SwapBox(props) { onClick={() => { setShortCollateralAddress(existingCurrentIndexCollateralToken?.address); }} - className="cursor-pointer text-gray-300 underline" + className="cursor-pointer text-slate-100 underline" > Switch to {existingCurrentIndexCollateralToken?.symbol} collateral.
diff --git a/src/components/ExternalLink/ExternalLink.scss b/src/components/ExternalLink/ExternalLink.scss index 1e515e6a96..85eeba1000 100644 --- a/src/components/ExternalLink/ExternalLink.scss +++ b/src/components/ExternalLink/ExternalLink.scss @@ -2,7 +2,7 @@ text-decoration: underline; cursor: pointer; display: inline-flex; - color: var(--color-gray-300); + color: var(--color-slate-100); &:hover { color: var(--color-white); } diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index 96a2c4822c..cad6f37b6e 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -7,7 +7,7 @@ transform: translateX(-50%); left: 50%; bottom: 0; - border-top: 1px solid var(--color-gray-950); + border-top: 1px solid var(--color-slate-700); } .Footer-logo { diff --git a/src/components/Glp/GlpSwap.css b/src/components/Glp/GlpSwap.css index f93ffe8338..f52ede9d40 100644 --- a/src/components/Glp/GlpSwap.css +++ b/src/components/Glp/GlpSwap.css @@ -82,7 +82,7 @@ font-size: 1.2rem; line-height: 1.5rem; letter-spacing: 0px; - color: var(--color-gray-400); + color: var(--color-slate-100); } .GlpSwap-token-list { diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss index 28958d7cf5..96a145861d 100644 --- a/src/components/Header/Header.scss +++ b/src/components/Header/Header.scss @@ -16,7 +16,7 @@ padding-left: 3.2rem; padding-right: 3.2rem; background: transparent 0% 0% no-repeat padding-box; - border-bottom: 1px solid var(--color-gray-950); + border-bottom: 1px solid var(--color-slate-700); } .App-header.large::after { @@ -193,30 +193,12 @@ align-items: center; } -.App-header-user-settings { - display: inline-flex; - cursor: pointer; - border: none; - border-radius: 1.5rem; - font-size: var(--font-size-body-medium); - background: none; - color: var(--color-white); - padding: 0; - width: 2.4rem; - height: 2.4rem; - align-items: center; - border-radius: 0.4rem; - display: inline-flex; - justify-content: center; - align-items: center; -} - .App-header-user-link { margin-right: 2.4rem; } .App-header-user-address { - border: 1px solid var(--color-gray-800); + border: 1px solid var(--color-gray-700); height: 3.6rem; border-radius: 0.4rem; display: inline-flex; @@ -268,7 +250,7 @@ padding-left: 1.6rem; padding-right: 1.6rem; background: transparent 0% 0% no-repeat padding-box; - border-bottom: 1px solid var(--color-gray-950); + border-bottom: 1px solid var(--color-slate-700); } .App-header.small::after { diff --git a/src/components/InterviewModal/InterviewModal.tsx b/src/components/InterviewModal/InterviewModal.tsx index 2e94adea81..6d9dd4bb82 100644 --- a/src/components/InterviewModal/InterviewModal.tsx +++ b/src/components/InterviewModal/InterviewModal.tsx @@ -29,7 +29,7 @@ export function InterviewModal({ isVisible, setIsVisible }: Props) {
-
+
Discord account:{" "}

-
+
Give us your feedback on GMX.

diff --git a/src/components/Modal/Modal.css b/src/components/Modal/Modal.css index 425ce32546..3edc0994cb 100644 --- a/src/components/Modal/Modal.css +++ b/src/components/Modal/Modal.css @@ -41,7 +41,7 @@ } .divider { - border-bottom: 1px solid var(--color-gray-800); + border-bottom: 1px solid var(--color-gray-700); } .Modal.non-scrollable .Modal-content { @@ -80,7 +80,7 @@ } .Modal-close-icon { - opacity: 0.6; + color: var(--color-slate-100); cursor: pointer; text-align: right; } diff --git a/src/components/NetworkDropdown/NetworkDropdown.css b/src/components/NetworkDropdown/NetworkDropdown.css index 0d26f2f4ca..1b3994e749 100644 --- a/src/components/NetworkDropdown/NetworkDropdown.css +++ b/src/components/NetworkDropdown/NetworkDropdown.css @@ -1,6 +1,6 @@ .App-header-network { position: relative; - border: 1px solid var(--dark-blue-border); + border: 1px solid var(--color-gray-700); border-radius: var(--border-radius-sm); height: 3.6rem; display: inline-flex; @@ -25,7 +25,7 @@ .network-dropdown-divider { margin-bottom: 0.8rem; - border-bottom: 1px solid var(--color-gray-800); + border-bottom: 1px solid var(--color-gray-700); } .App-header-network:hover { background: var(--dark-blue-hover); diff --git a/src/components/NotifyButton/NotifyButton.scss b/src/components/NotifyButton/NotifyButton.scss index 0c48bca1a6..209d003449 100644 --- a/src/components/NotifyButton/NotifyButton.scss +++ b/src/components/NotifyButton/NotifyButton.scss @@ -1,6 +1,6 @@ .NotifyButton { position: relative; - border: 1px solid var(--dark-blue-border); + border: 1px solid var(--color-gray-700); border-radius: var(--border-radius-sm); height: 3.6rem; width: 3.6rem; diff --git a/src/components/NotifyModal/NotifyModal.scss b/src/components/NotifyModal/NotifyModal.scss index e3d10d1936..9b643658e0 100644 --- a/src/components/NotifyModal/NotifyModal.scss +++ b/src/components/NotifyModal/NotifyModal.scss @@ -30,7 +30,7 @@ .NotifyModal-terms { margin-top: 2rem; text-align: center; - color: var(--text-gray); + color: var(--color-slate-100); } .NotifyModal-notify { diff --git a/src/components/NumberInput/NumberInput.tsx b/src/components/NumberInput/NumberInput.tsx index 1e3607549d..192faa0191 100644 --- a/src/components/NumberInput/NumberInput.tsx +++ b/src/components/NumberInput/NumberInput.tsx @@ -1,3 +1,4 @@ +import cx from "classnames"; import { ChangeEvent, KeyboardEvent, RefObject } from "react"; function escapeSpecialRegExpChars(string: string): string { @@ -48,7 +49,7 @@ function NumberInput({ type="text" inputMode="decimal" placeholder={placeholder} - className={className} + className={cx(className, "text-white placeholder:text-slate-100")} value={value} ref={inputRef} onChange={onChange} diff --git a/src/components/PageTitle/PageTitle.tsx b/src/components/PageTitle/PageTitle.tsx index d6b77a5154..bce7bae54f 100644 --- a/src/components/PageTitle/PageTitle.tsx +++ b/src/components/PageTitle/PageTitle.tsx @@ -35,7 +35,7 @@ export default function PageTitle({ {showNetworkIcon && Current Network Icon} {afterTitle}
-
{subtitle}
+
{subtitle}
); } diff --git a/src/components/RatingToast/RatingToast.tsx b/src/components/RatingToast/RatingToast.tsx index cbf8f05e73..508347f972 100644 --- a/src/components/RatingToast/RatingToast.tsx +++ b/src/components/RatingToast/RatingToast.tsx @@ -17,7 +17,7 @@ export function RatingToast({ onRatingClick }: Props) { onRatingClick(rating)} rating={rating} key={rating} /> ))}
-
+
Not likely
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx index dabde5d4aa..36769d36dd 100644 --- a/src/components/SearchInput/SearchInput.tsx +++ b/src/components/SearchInput/SearchInput.tsx @@ -50,7 +50,7 @@ export default function SearchInput({ }, [setValue]); return ( -
+
-
- +
+ +
+ + )}
); } diff --git a/src/components/StatsTooltip/StatsTooltipRow.tsx b/src/components/StatsTooltip/StatsTooltipRow.tsx index 056e419cae..429a889843 100644 --- a/src/components/StatsTooltip/StatsTooltipRow.tsx +++ b/src/components/StatsTooltip/StatsTooltipRow.tsx @@ -16,7 +16,7 @@ export default function StatsTooltipRow({ label, value, textClassName = "text-white", - labelClassName = "text-gray-300", + labelClassName = "text-slate-100", showDollar = true, unit, showColon = true, diff --git a/src/components/SuggestionInput/SuggestionInput.scss b/src/components/SuggestionInput/SuggestionInput.scss index e32ed8a310..d9bc80c177 100644 --- a/src/components/SuggestionInput/SuggestionInput.scss +++ b/src/components/SuggestionInput/SuggestionInput.scss @@ -27,6 +27,7 @@ border-radius: var(--border-radius-sm); padding-right: 0.5rem; line-height: 1; + color: var(--color-slate-100); background: var(--color-slate-700); label { @@ -51,9 +52,10 @@ line-height: var(--line-height-body-medium); border-radius: 4px; max-width: 7rem; - } - span { - opacity: 0.7; + color: var(--color-white); + &::placeholder { + color: var(--color-slate-100); + } } } } diff --git a/src/components/Synthetics/BridgingInfo/BridgingInfo.tsx b/src/components/Synthetics/BridgingInfo/BridgingInfo.tsx index a6ed5381e1..0b145ef956 100644 --- a/src/components/Synthetics/BridgingInfo/BridgingInfo.tsx +++ b/src/components/Synthetics/BridgingInfo/BridgingInfo.tsx @@ -21,7 +21,7 @@ export function BridgingInfo(props: Props) { return bridgingOptions.map((option, i) => { if (option.render) { return ( -

+

{option.render()}

); @@ -33,7 +33,7 @@ export function BridgingInfo(props: Props) { const bridgeLink = option.generateLink(chainId); return ( -

+

Bridge {tokenSymbol} to {chainName} with {" "} diff --git a/src/components/Synthetics/ChartTokenSelector/ChartTokenSelector.tsx b/src/components/Synthetics/ChartTokenSelector/ChartTokenSelector.tsx index 658fd753a7..7e2e4c2c32 100644 --- a/src/components/Synthetics/ChartTokenSelector/ChartTokenSelector.tsx +++ b/src/components/Synthetics/ChartTokenSelector/ChartTokenSelector.tsx @@ -84,7 +84,7 @@ export default function ChartTokenSelector(props: Props) { {poolName && ( diff --git a/src/components/Synthetics/ExpandableRow.tsx b/src/components/Synthetics/ExpandableRow.tsx index 767b3d466d..07fe514c10 100644 --- a/src/components/Synthetics/ExpandableRow.tsx +++ b/src/components/Synthetics/ExpandableRow.tsx @@ -79,9 +79,9 @@ export function ExpandableRow({ label={{label}} value={ open ? ( - + ) : ( - + ) } /> diff --git a/src/components/Synthetics/GmAssetDropdown/GmAssetDropdown.tsx b/src/components/Synthetics/GmAssetDropdown/GmAssetDropdown.tsx index 21bbaea5bd..0ad2116e3e 100644 --- a/src/components/Synthetics/GmAssetDropdown/GmAssetDropdown.tsx +++ b/src/components/Synthetics/GmAssetDropdown/GmAssetDropdown.tsx @@ -100,7 +100,7 @@ export default function GmAssetDropdown({ token, marketsInfoData, tokensData, po ref={refs.setReference} className="dropdown-arrow center-both" > - +

-
+
[{getMarketPoolName({ longToken, shortToken })}]
diff --git a/src/components/Synthetics/GmList/TokenValuesInfoCell.tsx b/src/components/Synthetics/GmList/TokenValuesInfoCell.tsx index f219a5e6c3..7578ce302c 100644 --- a/src/components/Synthetics/GmList/TokenValuesInfoCell.tsx +++ b/src/components/Synthetics/GmList/TokenValuesInfoCell.tsx @@ -2,7 +2,7 @@ export function TokenValuesInfoCell({ token, usd }: { token?: string; usd?: stri return ( <> {token &&
{token}
} - {usd &&
({usd})
} + {usd &&
({usd})
} ); } diff --git a/src/components/Synthetics/GmSwap/GmSwapBox/showMarketToast.tsx b/src/components/Synthetics/GmSwap/GmSwapBox/showMarketToast.tsx index 24ee3a3e4f..d260320eda 100644 --- a/src/components/Synthetics/GmSwap/GmSwapBox/showMarketToast.tsx +++ b/src/components/Synthetics/GmSwap/GmSwapBox/showMarketToast.tsx @@ -18,7 +18,7 @@ export function showMarketToast(market: GlvOrMarketInfo) {
{titlePrefix} {indexName ?  {indexName} : null} - [{poolName}] + [{poolName}]
{" "} selected in order form diff --git a/src/components/Synthetics/MarketCard/MarketCard.scss b/src/components/Synthetics/MarketCard/MarketCard.scss deleted file mode 100644 index c0630b93ac..0000000000 --- a/src/components/Synthetics/MarketCard/MarketCard.scss +++ /dev/null @@ -1,30 +0,0 @@ -.info-row { - margin-bottom: 0rem; -} - -.MarketCard-pool-balance { - .Tooltip { - display: flex; - align-items: center; - height: 100%; - } -} - -.MarketCard, -.MarketCard-net-fee { - .Tooltip-popup { - min-width: 32rem; - } -} - -.MarketCard-pool-balance .Tooltip-handle { - text-decoration: none; -} - -@media (max-width: 350px) { - .MarketCard-net-fee { - .Tooltip-popup { - min-width: 26rem; - } - } -} diff --git a/src/components/Synthetics/MarketCard/MarketCard.tsx b/src/components/Synthetics/MarketCard/MarketCard.tsx deleted file mode 100644 index e13006e597..0000000000 --- a/src/components/Synthetics/MarketCard/MarketCard.tsx +++ /dev/null @@ -1,312 +0,0 @@ -import "./MarketCard.scss"; - -import { t, Trans } from "@lingui/macro"; -import { useCallback, useMemo } from "react"; - -import Tooltip from "components/Tooltip/Tooltip"; -import { getBorrowingFactorPerPeriod, getFundingFactorPerPeriod } from "domain/synthetics/fees"; -import { - getAvailableUsdLiquidityForPosition, - getMarketIndexName, - getMarketPoolName, - getMaxOpenInterestUsd, - getMaxReservedUsd, - getOpenInterestUsd, - getReservedUsd, - MarketInfo, -} from "domain/synthetics/markets"; -import { CHART_PERIODS } from "lib/legacy"; -import { formatPercentage, formatRatePercentage, formatUsd, getBasisPoints } from "lib/numbers"; - -import ExchangeInfoRow from "components/Exchange/ExchangeInfoRow"; -import ExternalLink from "components/ExternalLink/ExternalLink"; -import { ShareBar } from "components/ShareBar/ShareBar"; -import StatsTooltipRow from "components/StatsTooltip/StatsTooltipRow"; -import MarketNetFee from "components/Synthetics/MarketNetFee/MarketNetFee"; -import { renderNetFeeHeaderTooltipContent } from "components/Synthetics/MarketsList/NetFeeHeaderTooltipContent"; -import TooltipWithPortal from "components/Tooltip/TooltipWithPortal"; -import { selectSelectedMarketPriceDecimals } from "context/SyntheticsStateContext/selectors/statsSelectors"; -import { useSelector } from "context/SyntheticsStateContext/utils"; - -export type Props = { - marketInfo?: MarketInfo; - allowedSlippage?: number; - isLong: boolean; -}; - -export function MarketCard({ marketInfo, allowedSlippage, isLong }: Props) { - const { indexToken } = marketInfo || {}; - - const entryPrice = isLong ? indexToken?.prices?.maxPrice : indexToken?.prices?.minPrice; - const exitPrice = isLong ? indexToken?.prices?.minPrice : indexToken?.prices?.maxPrice; - - const longShortText = isLong ? t`Long` : t`Short`; - - const { - liquidity, - maxReservedUsd, - reservedUsd, - borrowingRateLong, - borrowingRateShort, - fundingRateLong, - fundingRateShort, - totalInterestUsd, - currentOpenInterest, - maxOpenInterest, - } = useMemo(() => { - if (!marketInfo) return {}; - return { - liquidity: getAvailableUsdLiquidityForPosition(marketInfo, isLong), - maxReservedUsd: getMaxReservedUsd(marketInfo, isLong), - reservedUsd: getReservedUsd(marketInfo, isLong), - borrowingRateLong: -getBorrowingFactorPerPeriod(marketInfo, true, CHART_PERIODS["1h"]), - borrowingRateShort: -getBorrowingFactorPerPeriod(marketInfo, false, CHART_PERIODS["1h"]), - fundingRateLong: getFundingFactorPerPeriod(marketInfo, true, CHART_PERIODS["1h"]), - fundingRateShort: getFundingFactorPerPeriod(marketInfo, false, CHART_PERIODS["1h"]), - currentOpenInterest: getOpenInterestUsd(marketInfo, isLong), - totalInterestUsd: marketInfo.longInterestUsd + marketInfo.shortInterestUsd, - maxOpenInterest: getMaxOpenInterestUsd(marketInfo, isLong), - }; - }, [marketInfo, isLong]); - const fundingRate = isLong ? fundingRateLong : fundingRateShort; - const borrowingRate = isLong ? borrowingRateLong : borrowingRateShort; - const netRateHourly = (fundingRate ?? 0n) + (borrowingRate ?? 0n); - const indexName = marketInfo && getMarketIndexName(marketInfo); - const poolName = marketInfo && getMarketPoolName(marketInfo); - const priceDecimals = useSelector(selectSelectedMarketPriceDecimals); - - const renderFundingFeeTooltipContent = useCallback(() => { - if (fundingRateLong === undefined || fundingRateShort === undefined) return []; - - const long = ( - - ); - - const short = ( - - ); - - const [currentFeeElement, oppositeFeeElement] = isLong ? [long, short] : [short, long]; - - return ( -
- {currentFeeElement} -
- {oppositeFeeElement} -
- ); - }, [fundingRateLong, fundingRateShort, isLong, borrowingRateLong, borrowingRateShort]); - - return ( -
-
- {longShortText} {indexToken?.symbol} -
-
-
- - {indexName && indexName} - {poolName && `[${poolName}]`} -
- } - /> - - } - value={ - ( - - The position will be opened at a reference price of{" "} - {formatUsd(entryPrice, { - displayDecimals: priceDecimals, - })} - , not accounting for price impact, with a max slippage of - - {allowedSlippage ? (allowedSlippage / 100.0).toFixed(2) : "..."} - %. -
-
- The slippage amount can be configured under Settings, found by clicking on your address at the top - right of the page after connecting your wallet. -
-
- Read more. - - )} - /> - } - /> - - - } - value={ - ( - - If you have an existing position, the position will be closed at a reference price of{" "} - {formatUsd(entryPrice, { - displayDecimals: priceDecimals, - })} - , not accounting for price impact. -
-
- This exit price will change with the price of the asset. -
-
- Read more. - - )} - /> - } - /> - - - Net Rate - - } - value={ - - } - /> - - ( -
- - - -
- {isLong && ( - <> - - The long reserve accounts for the PnL of open positions, while the open interest does not. - {" "} - - )} - - The available liquidity will be the lesser of the difference between the maximum value and the - current value for both the reserve and open interest. - -
- )} - /> - } - /> - - - 0 ? ( - - ) : ( - "..." - ) - } - renderContent={() => ( -
- {(marketInfo && totalInterestUsd !== undefined && ( - <> - - {formatUsd(marketInfo.longInterestUsd, { displayDecimals: 0 })}
- {totalInterestUsd > 0 && - `(${formatPercentage(getBasisPoints(marketInfo.longInterestUsd, totalInterestUsd))})`} - - } - showDollar={false} - /> -
- - {formatUsd(marketInfo.shortInterestUsd, { displayDecimals: 0 })}
- {totalInterestUsd > 0 && - `(${formatPercentage(getBasisPoints(marketInfo.shortInterestUsd, totalInterestUsd))})`} - - } - showDollar={false} - /> - - )) || - null} -
- )} - /> -
- } - /> -
-
- ); -} diff --git a/src/components/Synthetics/MarketNetFee/MarketNetFee.tsx b/src/components/Synthetics/MarketNetFee/MarketNetFee.tsx index 52d745c166..de9d2588ab 100644 --- a/src/components/Synthetics/MarketNetFee/MarketNetFee.tsx +++ b/src/components/Synthetics/MarketNetFee/MarketNetFee.tsx @@ -35,7 +35,7 @@ export default function MarketNetFee(props: Props) { return ( <> -
+
{positionType} {netRate}:
    diff --git a/src/components/Synthetics/MarketStats/MarketStats.scss b/src/components/Synthetics/MarketStats/MarketStats.scss index 36a7d3fe70..67492ffa9d 100644 --- a/src/components/Synthetics/MarketStats/MarketStats.scss +++ b/src/components/Synthetics/MarketStats/MarketStats.scss @@ -43,7 +43,7 @@ font-size: var(--font-size-body-small); line-height: var(--line-height-body-small); letter-spacing: 0px; - color: var(--color-gray-400); + color: var(--color-slate-100); } .gm-market-name { diff --git a/src/components/Synthetics/MarketStats/components/MarketDescription.tsx b/src/components/Synthetics/MarketStats/components/MarketDescription.tsx index 628a078880..e9cd2918a0 100644 --- a/src/components/Synthetics/MarketStats/components/MarketDescription.tsx +++ b/src/components/Synthetics/MarketStats/components/MarketDescription.tsx @@ -52,5 +52,5 @@ export function MarketDescription({ marketInfo }: Props) { } } - return
    {text}
    ; + return
    {text}
    ; } diff --git a/src/components/Synthetics/MarketTokenSelector/MarketTokenSelector.tsx b/src/components/Synthetics/MarketTokenSelector/MarketTokenSelector.tsx index 8edbd0ea94..f40515d3be 100644 --- a/src/components/Synthetics/MarketTokenSelector/MarketTokenSelector.tsx +++ b/src/components/Synthetics/MarketTokenSelector/MarketTokenSelector.tsx @@ -106,11 +106,11 @@ export default function MarketTokenSelector(props: Props) { ) : ( GM{indexName && `: ${indexName}`} )} - + {poolName && `[${poolName}]`}
-
+
{isGlv ? getGlvMarketSubtitle(chainId, getGlvOrMarketAddress(currentMarketInfo)) : "GMX Market Tokens"} @@ -196,7 +196,7 @@ function MarketTokenSelectorInternal(props: Props) { const rowVerticalPadding = isMobile ? "py-8" : cx("py-4 group-last-of-type/row:pb-8"); const rowHorizontalPadding = isSmallMobile ? cx("px-6 first-of-type:pl-16 last-of-type:pr-16") : "px-16"; const thClassName = cx( - "sticky top-0 z-10 border-b border-slate-700 bg-slate-800 text-left font-normal uppercase text-gray-400 last-of-type:text-right", + "sticky top-0 z-10 border-b border-slate-700 bg-slate-800 text-left font-normal uppercase text-slate-100 last-of-type:text-right", rowVerticalPadding, rowHorizontalPadding ); @@ -520,7 +520,7 @@ function MarketTokenListItem({
{indexName && indexName} - {poolName && `[${poolName}]`} + {poolName && `[${poolName}]`}
)} @@ -528,7 +528,7 @@ function MarketTokenListItem({
{indexName && indexName} - {poolName && `[${poolName}]`} + {poolName && `[${poolName}]`}
)} diff --git a/src/components/Synthetics/MarketsList/NetFeeTooltip.tsx b/src/components/Synthetics/MarketsList/NetFeeTooltip.tsx index 89942f381d..a8a6738827 100644 --- a/src/components/Synthetics/MarketsList/NetFeeTooltip.tsx +++ b/src/components/Synthetics/MarketsList/NetFeeTooltip.tsx @@ -21,7 +21,7 @@ export function NetFeeTooltip({ marketStats }: { marketStats: MarketStat[] }) { [{getMarketPoolName(market)}]
- + Longs Net Rate / 1h
- + Shorts Net Rate / 1h - + Pool - + Longs Net Rate / 1h - + Shorts Net Rate / 1h diff --git a/src/components/Synthetics/OrderItem/OrderItem.tsx b/src/components/Synthetics/OrderItem/OrderItem.tsx index 22842e09af..e00c8616ad 100644 --- a/src/components/Synthetics/OrderItem/OrderItem.tsx +++ b/src/components/Synthetics/OrderItem/OrderItem.tsx @@ -490,12 +490,12 @@ function OrderItemLarge({ {!hideActions && (
- {onCancelOrder && (
@@ -768,7 +768,7 @@ function PositionItemOrdersLarge({ "Exchange-list-info-label", "Exchange-position-list-orders", "clickable", - "text-gray-300", + "text-slate-100", ])} maxAllowedWidth={370} tooltipClassName="!z-10 w-[370px]" diff --git a/src/components/Synthetics/PositionList/PositionList.tsx b/src/components/Synthetics/PositionList/PositionList.tsx index 41f768ef84..29e709c8e4 100644 --- a/src/components/Synthetics/PositionList/PositionList.tsx +++ b/src/components/Synthetics/PositionList/PositionList.tsx @@ -49,7 +49,7 @@ export function PositionList(p: Props) { {isMobile && ( <> {positions.length === 0 && ( -
{isLoading ? t`Loading...` : t`No open positions`}
+
{isLoading ? t`Loading...` : t`No open positions`}
)}
{!isLoading && diff --git a/src/components/Synthetics/SubaccountModal/SubaccountModal.tsx b/src/components/Synthetics/SubaccountModal/SubaccountModal.tsx index 749a97159b..9566b5851d 100644 --- a/src/components/Synthetics/SubaccountModal/SubaccountModal.tsx +++ b/src/components/Synthetics/SubaccountModal/SubaccountModal.tsx @@ -822,7 +822,7 @@ const InputRowBase = forwardRef( return (
-
+
diff --git a/src/components/Synthetics/TVChart/TVChart.scss b/src/components/Synthetics/TVChart/TVChart.scss index 3157003b39..aea56329c0 100644 --- a/src/components/Synthetics/TVChart/TVChart.scss +++ b/src/components/Synthetics/TVChart/TVChart.scss @@ -10,7 +10,7 @@ .Dropdown-current-arrow { font-size: var(--font-size-body-small); - color: hsla(0, 0%, 100%, 0.7); + color: var(--color-slate-100); margin-left: 1rem; margin-top: -2px; } @@ -81,8 +81,8 @@ } .Chart-header-value { - font-size: var(--font-size-body-small); - line-height: var(--line-height-body-small); + font-size: var(--font-size-body-medium); + line-height: var(--line-height-body-medium); } @media (max-width: 1100px) { diff --git a/src/components/Synthetics/TVChart/TVChartHeader.tsx b/src/components/Synthetics/TVChart/TVChartHeader.tsx index 3c9228c21b..81743ece6f 100644 --- a/src/components/Synthetics/TVChart/TVChartHeader.tsx +++ b/src/components/Synthetics/TVChart/TVChartHeader.tsx @@ -127,7 +127,7 @@ function TVChartHeaderInfoMobile() {
-
+
Open Interest @@ -334,15 +334,11 @@ function TVChartHeaderInfoDesktop() {
-
- - Open Interest - - {" ("} - {longOIPercentage} - / - {shortOIPercentage} - {")"} +
+ Open Interest + {" ("} + {longOIPercentage}/{shortOIPercentage} + {")"}
{longOIValue}
@@ -458,7 +454,7 @@ function TVChartHeaderInfoDesktop() {
{avgPrice}
-
{dayPriceDelta}
+
{dayPriceDelta}
{additionalInfo}
diff --git a/src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx b/src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx index 5ac5d7ef7b..78cb52d34d 100644 --- a/src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx +++ b/src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx @@ -176,7 +176,7 @@ export function MarketFilterLongShort({ value, onChange, withPositions, asButton
[{poolName}]
- {collateralSymbol && ({collateralSymbol})} + {collateralSymbol && ({collateralSymbol})} ); } diff --git a/src/components/Synthetics/TradeBox/TradeBox.scss b/src/components/Synthetics/TradeBox/TradeBox.scss index 48162dfa1e..f999cb0563 100644 --- a/src/components/Synthetics/TradeBox/TradeBox.scss +++ b/src/components/Synthetics/TradeBox/TradeBox.scss @@ -50,11 +50,6 @@ .SwapBox-info-row { opacity: 1; margin-bottom: 0.5rem; - - .Exchange-info-label { - opacity: 1; - color: var(--color-gray-400); - } } .SwapBox-section { diff --git a/src/components/Synthetics/TradeBox/TradeBoxRows/AdvancedDisplayRows.tsx b/src/components/Synthetics/TradeBox/TradeBoxRows/AdvancedDisplayRows.tsx index 91ca771cfd..e4c6f8608e 100644 --- a/src/components/Synthetics/TradeBox/TradeBoxRows/AdvancedDisplayRows.tsx +++ b/src/components/Synthetics/TradeBox/TradeBoxRows/AdvancedDisplayRows.tsx @@ -135,7 +135,7 @@ function LeverageInfoRows() { setIsChecked={setKeepLeverage} disabled={decreaseAmounts?.isFullClose} > - + Keep leverage at {formatLeverage(selectedPosition.leverage)} diff --git a/src/components/Synthetics/TradeBox/TradeBoxRows/OneClickTrading.tsx b/src/components/Synthetics/TradeBox/TradeBoxRows/OneClickTrading.tsx index 719f04ed67..c888b0a943 100644 --- a/src/components/Synthetics/TradeBox/TradeBoxRows/OneClickTrading.tsx +++ b/src/components/Synthetics/TradeBox/TradeBoxRows/OneClickTrading.tsx @@ -171,9 +171,9 @@ export function TradeBoxOneClickTrading() { {onCloseClick && (
-
+
Daily Profit
diff --git a/src/pages/AccountDashboard/VersionNetworkSwitcherRow.tsx b/src/pages/AccountDashboard/VersionNetworkSwitcherRow.tsx index 2aebcf25fc..595a43a113 100644 --- a/src/pages/AccountDashboard/VersionNetworkSwitcherRow.tsx +++ b/src/pages/AccountDashboard/VersionNetworkSwitcherRow.tsx @@ -35,7 +35,7 @@ function Options({ account, chainId, version }: { account?: Address; chainId: nu key={supportedChainId} className={cx("flex items-center gap-4", { "text-white": supportedChainId === chainId && version === 2, - "text-gray-300": supportedChainId !== chainId || version !== 2, + "text-slate-100": supportedChainId !== chainId || version !== 2, })} > V2 @@ -52,7 +52,7 @@ function Options({ account, chainId, version }: { account?: Address; chainId: nu key={supportedChainId} className={cx("flex items-center gap-4", { "text-white": supportedChainId === chainId && version === 1, - "text-gray-300": supportedChainId !== chainId || version !== 1, + "text-slate-100": supportedChainId !== chainId || version !== 1, })} > V1 diff --git a/src/pages/Dashboard/AssetDropdown.scss b/src/pages/Dashboard/AssetDropdown.scss index 7ee8700e3a..6443547dce 100644 --- a/src/pages/Dashboard/AssetDropdown.scss +++ b/src/pages/Dashboard/AssetDropdown.scss @@ -11,7 +11,7 @@ .dropdown-arrow { margin-left: 0.8rem; cursor: pointer; - color: var(--color-white); + color: var(--color-slate-100); opacity: 0.8; &:hover { diff --git a/src/pages/Exchange/Exchange.css b/src/pages/Exchange/Exchange.css index 6e27e317d3..0c38d01515 100644 --- a/src/pages/Exchange/Exchange.css +++ b/src/pages/Exchange/Exchange.css @@ -31,6 +31,7 @@ .Exchange-empty-positions-list-note { padding-bottom: 0.5rem; + color: var(--color-slate-100); } .Exchange-empty-positions-list-note.small { @@ -277,9 +278,9 @@ } .ExchangeChart-info-label { + color: var(--color-slate-100); font-size: var(--font-size-body-small); line-height: var(--line-height-body-small); - opacity: 0.7; white-space: nowrap; } @@ -581,7 +582,7 @@ table.Position-list .Exchange-list-item-active { } .Exchange-info-label { - color: var(--color-gray-300); + color: var(--color-slate-100); margin-right: 0.8rem; } .Exchange-info-value-warning { diff --git a/src/pages/LeaderboardPage/LeaderboardPage.scss b/src/pages/LeaderboardPage/LeaderboardPage.scss index 28fee9572b..23ccf5c2f3 100644 --- a/src/pages/LeaderboardPage/LeaderboardPage.scss +++ b/src/pages/LeaderboardPage/LeaderboardPage.scss @@ -399,7 +399,7 @@ $tabs-threshold: 990px; white-space: nowrap; &_selected { - background: var(--color-slate-500) !important; + background: var(--color-slate-600) !important; } } diff --git a/src/styles/Input.css b/src/styles/Input.css index 2f7c688348..b82e7de570 100644 --- a/src/styles/Input.css +++ b/src/styles/Input.css @@ -13,8 +13,13 @@ } .text-input { - border: 1px solid var(--color-gray-800); + color: var(--color-slate-100); + border: 1px solid var(--color-gray-700); font-size: var(--font-size-body-medium); width: 100%; box-sizing: border-box; + + &::placeholder { + color: var(--color-slate-500); + } } diff --git a/src/styles/Shared.scss b/src/styles/Shared.scss index ee978cbebe..6f636fb818 100644 --- a/src/styles/Shared.scss +++ b/src/styles/Shared.scss @@ -109,7 +109,7 @@ input[type="number"] { input { font-size: 2rem; - color: var(--color-white); + color: var(--color-slate-100); outline: none; background: none; padding: 1.25rem; @@ -147,7 +147,7 @@ tr { } .muted { - opacity: 0.7; + color: var(--color-slate-100); } .strong { @@ -165,7 +165,7 @@ tr { .label, .label a { - color: var(--color-gray-300); + color: var(--color-slate-100); } ul { @@ -383,7 +383,7 @@ button.btn-link:hover .logout-icon { .subtext { font-size: 1.2rem; - color: var(--color-gray-300); + color: var(--color-slate-100); margin-left: 0.25rem; } From 4b99a49428e7638b5d8ed3ff65347c94069c5342 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hub=C3=A9rt=20de=20Lalye?= Date: Mon, 2 Dec 2024 17:32:35 +0400 Subject: [PATCH 02/35] fixed colors --- src/App/App.scss | 8 ++-- src/components/Exchange/OrdersList.jsx | 2 +- src/components/FavoriteStar/FavoriteStar.tsx | 2 +- .../LeverageSlider/LeverageSlider.scss | 9 +++-- .../LeverageSlider/LeverageSlider.tsx | 2 +- src/components/SearchInput/SearchInput.tsx | 4 +- .../ChartTokenSelector/ChartTokenSelector.tsx | 2 +- .../Synthetics/GmList/TokenValuesInfoCell.tsx | 2 +- .../components/CompositionTable.tsx | 2 +- .../Synthetics/TVChart/TVChartHeader.tsx | 12 +++--- .../TradeBox/components/SideOrderEntries.tsx | 4 +- .../TableScrollFade/TableScrollFade.tsx | 4 +- src/components/TokenCard/TokenCard.tsx | 38 +++++++++---------- .../GeneralPerformanceDetails.tsx | 2 +- 14 files changed, 49 insertions(+), 44 deletions(-) diff --git a/src/App/App.scss b/src/App/App.scss index a0ef56c722..f1e2890d46 100644 --- a/src/App/App.scss +++ b/src/App/App.scss @@ -1025,7 +1025,7 @@ button.App-button { .App-slider .rc-slider-mark-text, .App-slider .rc-slider-mark-text-active { - color: var(--color-white); + color: var(--color-slate-100); opacity: 0.5; } @@ -1041,11 +1041,13 @@ button.App-button { .rc-slider-tooltip-inner { box-shadow: none; padding: 0.465rem 0.8rem; - background: var(--color-slate-600); + + background: rgb(49, 54, 85) !important; + box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.25) !important; } .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow { - border-top-color: var(--color-slate-600); + border-top-color: rgb(49, 54, 85) !important; } .header-connect-btn { diff --git a/src/components/Exchange/OrdersList.jsx b/src/components/Exchange/OrdersList.jsx index 2b4f06ab66..5ba6569074 100644 --- a/src/components/Exchange/OrdersList.jsx +++ b/src/components/Exchange/OrdersList.jsx @@ -131,7 +131,7 @@ export default function OrdersList(props) { return ( - + No open orders diff --git a/src/components/FavoriteStar/FavoriteStar.tsx b/src/components/FavoriteStar/FavoriteStar.tsx index 84638ba06b..0b6b73d48b 100644 --- a/src/components/FavoriteStar/FavoriteStar.tsx +++ b/src/components/FavoriteStar/FavoriteStar.tsx @@ -1,5 +1,5 @@ import { FaRegStar, FaStar } from "react-icons/fa"; export default function FavoriteStar({ isFavorite }: { isFavorite?: boolean }) { - return isFavorite ? : ; + return isFavorite ? : ; } diff --git a/src/components/LeverageSlider/LeverageSlider.scss b/src/components/LeverageSlider/LeverageSlider.scss index f3d5d9601c..68e073a652 100644 --- a/src/components/LeverageSlider/LeverageSlider.scss +++ b/src/components/LeverageSlider/LeverageSlider.scss @@ -8,11 +8,14 @@ .rc-slider-tooltip-inner { box-shadow: none; padding: 0.465rem 0.8rem; - background: var(--color-slate-600); } .rc-slider-tooltip { z-index: 5; + + background: rgb(49, 54, 85); + background: linear-gradient(270deg, rgba(49, 54, 85, 0.9) 0%, rgba(37, 40, 65, 0.9) 100%); + box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.25); } .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow { @@ -48,8 +51,8 @@ } .rc-slider-mark-text, .rc-slider-mark-text-active { - color: var(--color-white); - opacity: 0.5; + color: var(--color-slate-100); + opacity: 0.7; } .rc-slider-mark-text:hover, diff --git a/src/components/LeverageSlider/LeverageSlider.tsx b/src/components/LeverageSlider/LeverageSlider.tsx index 8c47e37a08..76aebc6978 100644 --- a/src/components/LeverageSlider/LeverageSlider.tsx +++ b/src/components/LeverageSlider/LeverageSlider.tsx @@ -98,7 +98,7 @@ const LeverageSliderHandle = forwardRef(function LeverageSl - {value.length > 0 && ( + {
- )} + }
); } diff --git a/src/components/Synthetics/ChartTokenSelector/ChartTokenSelector.tsx b/src/components/Synthetics/ChartTokenSelector/ChartTokenSelector.tsx index 3680b5b439..1cd80acea9 100644 --- a/src/components/Synthetics/ChartTokenSelector/ChartTokenSelector.tsx +++ b/src/components/Synthetics/ChartTokenSelector/ChartTokenSelector.tsx @@ -169,7 +169,7 @@ function MarketsList(props: { options: Token[] | undefined }) { ? cx("px-6 first-of-type:pl-15 last-of-type:pr-15") : "px-8 first-of-type:pl-16 last-of-type:pr-16"; const thClassName = cx( - "text-body-medium sticky top-0 border-b border-slate-700 bg-slate-800 text-left font-normal uppercase text-gray-400 first-of-type:text-left last-of-type:[&:not(:first-of-type)]:text-right", + "text-body-medium sticky top-0 border-b border-slate-700 bg-slate-800 text-left font-normal uppercase text-slate-100 first-of-type:text-left last-of-type:[&:not(:first-of-type)]:text-right", rowVerticalPadding, rowHorizontalPadding ); diff --git a/src/components/Synthetics/GmList/TokenValuesInfoCell.tsx b/src/components/Synthetics/GmList/TokenValuesInfoCell.tsx index 7578ce302c..f185eeb354 100644 --- a/src/components/Synthetics/GmList/TokenValuesInfoCell.tsx +++ b/src/components/Synthetics/GmList/TokenValuesInfoCell.tsx @@ -2,7 +2,7 @@ export function TokenValuesInfoCell({ token, usd }: { token?: string; usd?: stri return ( <> {token &&
{token}
} - {usd &&
({usd})
} + {usd &&
({usd})
} ); } diff --git a/src/components/Synthetics/MarketStats/components/CompositionTable.tsx b/src/components/Synthetics/MarketStats/components/CompositionTable.tsx index f896e7792d..cb822f4933 100644 --- a/src/components/Synthetics/MarketStats/components/CompositionTable.tsx +++ b/src/components/Synthetics/MarketStats/components/CompositionTable.tsx @@ -147,7 +147,7 @@ export function CompositionTableGm({ marketInfo }: CompositionTableGmProps) { /> - {prefix}: {token.symbol} + {prefix}: {token.symbol} diff --git a/src/components/Synthetics/TVChart/TVChartHeader.tsx b/src/components/Synthetics/TVChart/TVChartHeader.tsx index 2ac815689c..8fcd06fbea 100644 --- a/src/components/Synthetics/TVChart/TVChartHeader.tsx +++ b/src/components/Synthetics/TVChart/TVChartHeader.tsx @@ -128,14 +128,14 @@ function TVChartHeaderInfoMobile() {
- + Open Interest - {" ("} + {" ("} {longOIPercentage} - / + / {shortOIPercentage} - {")"} + {")"}
{longOIValue}
@@ -437,7 +437,7 @@ function TVChartHeaderInfoDesktop() { style={leftStyles} onClick={scrollToLeft} > - {scrollLeft > 0 && } + {scrollLeft > 0 && }
- {scrollRight > 0 && } + {scrollRight > 0 && }
diff --git a/src/components/Synthetics/TradeBox/components/SideOrderEntries.tsx b/src/components/Synthetics/TradeBox/components/SideOrderEntries.tsx index 48dc41dde5..28f08783f5 100644 --- a/src/components/Synthetics/TradeBox/components/SideOrderEntries.tsx +++ b/src/components/Synthetics/TradeBox/components/SideOrderEntries.tsx @@ -129,7 +129,7 @@ function SideOrderEntry({ "hover:focus-within:border-cold-blue-500": !priceError, })} > - $ + $ - $ + $ ) { return (
-
+
{children}
@@ -236,7 +236,7 @@ export function BodyScrollFadeContainer({ children, className }: PropsWithChildr return (
-
+
{children}
diff --git a/src/components/TokenCard/TokenCard.tsx b/src/components/TokenCard/TokenCard.tsx index 8acb3b8702..d42bf530ff 100644 --- a/src/components/TokenCard/TokenCard.tsx +++ b/src/components/TokenCard/TokenCard.tsx @@ -322,7 +322,7 @@ export default function TokenCard({ showRedirectModal }: Props) {
- Read more - +
@@ -443,14 +443,14 @@ export default function TokenCard({ showRedirectModal }: Props) {
- Read more - +
@@ -504,14 +504,14 @@ export default function TokenCard({ showRedirectModal }: Props) {
- Read more - +
diff --git a/src/pages/AccountDashboard/GeneralPerformanceDetails.tsx b/src/pages/AccountDashboard/GeneralPerformanceDetails.tsx index 130f4acd66..c87998fa6f 100644 --- a/src/pages/AccountDashboard/GeneralPerformanceDetails.tsx +++ b/src/pages/AccountDashboard/GeneralPerformanceDetails.tsx @@ -67,7 +67,7 @@ export function GeneralPerformanceDetails({ chainId, account }: { chainId: numbe PnL (%) - + Win / Loss From febbcc07845943dc0a06afaf43d1cb2608a02d74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hub=C3=A9rt=20de=20Lalye?= Date: Tue, 3 Dec 2024 01:01:48 +0400 Subject: [PATCH 03/35] updating colors in UI --- .../GmPoolsSelectorForGlvMarket.tsx | 2 +- .../MarketSelector/MarketSelector.tsx | 2 +- .../MarketSelector/PoolSelector.tsx | 2 +- src/components/SearchInput/SearchInput.scss | 28 ------------------- .../ChartTokenSelector/ChartTokenSelector.tsx | 2 +- .../Synthetics/Claims/ClaimsHistory.tsx | 4 +-- src/components/Synthetics/GmList/GmList.tsx | 2 +- .../MarketTokenSelector.tsx | 2 +- .../Synthetics/MarketsList/MarketsList.tsx | 2 +- .../Synthetics/OrderList/OrderList.tsx | 4 +-- .../Synthetics/PositionList/PositionList.tsx | 2 +- .../Synthetics/TradeHistory/TradeHistory.tsx | 4 +-- .../TokenSelector/TokenSelector.tsx | 2 +- .../DailyAndCumulativePnL.tsx | 2 +- .../components/LeaderboardAccountsTable.tsx | 2 +- .../components/LeaderboardPositionsTable.tsx | 2 +- src/styles/Shared.scss | 4 +-- tailwind.config.js | 22 +++++++-------- 18 files changed, 31 insertions(+), 59 deletions(-) delete mode 100644 src/components/SearchInput/SearchInput.scss diff --git a/src/components/MarketSelector/GmPoolsSelectorForGlvMarket.tsx b/src/components/MarketSelector/GmPoolsSelectorForGlvMarket.tsx index 063668c858..b595ab41df 100644 --- a/src/components/MarketSelector/GmPoolsSelectorForGlvMarket.tsx +++ b/src/components/MarketSelector/GmPoolsSelectorForGlvMarket.tsx @@ -218,7 +218,7 @@ export function GmPoolsSelectorForGlvMarket({ ))}
{filteredOptions.length === 0 && ( -
+
No pools matched.
)} diff --git a/src/components/MarketSelector/MarketSelector.tsx b/src/components/MarketSelector/MarketSelector.tsx index 64a5c98940..06d123fe17 100644 --- a/src/components/MarketSelector/MarketSelector.tsx +++ b/src/components/MarketSelector/MarketSelector.tsx @@ -188,7 +188,7 @@ export function MarketSelector({ ))}
{filteredOptions.length === 0 && ( -
+
No markets matched.
)} diff --git a/src/components/MarketSelector/PoolSelector.tsx b/src/components/MarketSelector/PoolSelector.tsx index 07cb3e3e1e..7313504a8c 100644 --- a/src/components/MarketSelector/PoolSelector.tsx +++ b/src/components/MarketSelector/PoolSelector.tsx @@ -197,7 +197,7 @@ export function PoolSelector({ })}
{filteredOptions.length === 0 && ( -
+
No pools matched.
)} diff --git a/src/components/SearchInput/SearchInput.scss b/src/components/SearchInput/SearchInput.scss deleted file mode 100644 index 715ebd811e..0000000000 --- a/src/components/SearchInput/SearchInput.scss +++ /dev/null @@ -1,28 +0,0 @@ -.Search-input { - padding: 0; - cursor: pointer; - border: 1px solid var(--color-gray-800); - position: relative; - background: transparent; - border-radius: var(--border-radius-sm); - - .Tokenselector-search-input { - font-size: 1.6rem; - background-position: 12px center; - background-size: 20px 20px; - background-repeat: no-repeat; - background-attachment: scroll; - padding: 1rem 1rem 1rem 4rem; - width: 100%; - display: block; - } - .Tokenselector-search-input::placeholder { - color: var(--dark-blue-accent); - } - - &_size_s .Tokenselector-search-input { - font-size: 14px; - padding: 6.25px 1rem 6.25px 3.4rem; - background-size: 1.5rem; - } -} diff --git a/src/components/Synthetics/ChartTokenSelector/ChartTokenSelector.tsx b/src/components/Synthetics/ChartTokenSelector/ChartTokenSelector.tsx index 1cd80acea9..3cf5046dbf 100644 --- a/src/components/Synthetics/ChartTokenSelector/ChartTokenSelector.tsx +++ b/src/components/Synthetics/ChartTokenSelector/ChartTokenSelector.tsx @@ -261,7 +261,7 @@ function MarketsList(props: { options: Token[] | undefined }) { ))} {options && options.length > 0 && !sortedTokens?.length && ( - + No markets matched. diff --git a/src/components/Synthetics/Claims/ClaimsHistory.tsx b/src/components/Synthetics/Claims/ClaimsHistory.tsx index acebb17e90..69dbd9da63 100644 --- a/src/components/Synthetics/Claims/ClaimsHistory.tsx +++ b/src/components/Synthetics/Claims/ClaimsHistory.tsx @@ -128,7 +128,7 @@ export function ClaimsHistory() { )} {isEmpty && !hasFilters && ( - + No claims yet @@ -136,7 +136,7 @@ export function ClaimsHistory() { {isEmpty && hasFilters && ( - + No claims match the selected filters diff --git a/src/components/Synthetics/GmList/GmList.tsx b/src/components/Synthetics/GmList/GmList.tsx index edb89d9af5..58d39d2bdb 100644 --- a/src/components/Synthetics/GmList/GmList.tsx +++ b/src/components/Synthetics/GmList/GmList.tsx @@ -225,7 +225,7 @@ export function GmList({ {!currentData.length && !isLoading && ( -
+
No pools matched.
diff --git a/src/components/Synthetics/MarketTokenSelector/MarketTokenSelector.tsx b/src/components/Synthetics/MarketTokenSelector/MarketTokenSelector.tsx index f40515d3be..5375201f8d 100644 --- a/src/components/Synthetics/MarketTokenSelector/MarketTokenSelector.tsx +++ b/src/components/Synthetics/MarketTokenSelector/MarketTokenSelector.tsx @@ -290,7 +290,7 @@ function MarketTokenSelectorInternal(props: Props) { ))} {sortedMarketsByIndexToken.length > 0 && !sortedTokensInfo?.length && ( - + No pools matched. diff --git a/src/components/Synthetics/MarketsList/MarketsList.tsx b/src/components/Synthetics/MarketsList/MarketsList.tsx index 4b251be124..4b4e2d6da6 100644 --- a/src/components/Synthetics/MarketsList/MarketsList.tsx +++ b/src/components/Synthetics/MarketsList/MarketsList.tsx @@ -108,7 +108,7 @@ function MarketsListDesktop({ chainId, indexTokensStats }: { chainId: number; in {indexTokensStats.length > 0 && !currentData.length && ( - + No markets found. diff --git a/src/components/Synthetics/OrderList/OrderList.tsx b/src/components/Synthetics/OrderList/OrderList.tsx index 4c1675385f..94ff4b3c72 100644 --- a/src/components/Synthetics/OrderList/OrderList.tsx +++ b/src/components/Synthetics/OrderList/OrderList.tsx @@ -160,7 +160,7 @@ export function OrderList({ return (
{isContainerSmall && orders.length === 0 && ( -
{isLoading ? t`Loading...` : t`No open orders`}
+
{isLoading ? t`Loading...` : t`No open orders`}
)} {(isContainerSmall || isScreenSmall) && !isLoading && orders.length !== 0 && ( @@ -253,7 +253,7 @@ export function OrderList({ {orders.length === 0 && ( - + {isLoading ? t`Loading...` : t`No open orders`} diff --git a/src/components/Synthetics/PositionList/PositionList.tsx b/src/components/Synthetics/PositionList/PositionList.tsx index 9d4169f7dc..16621d6a61 100644 --- a/src/components/Synthetics/PositionList/PositionList.tsx +++ b/src/components/Synthetics/PositionList/PositionList.tsx @@ -117,7 +117,7 @@ export function PositionList(p: Props) { {positions.length === 0 && ( -
{isLoading ? t`Loading...` : t`No open positions`}
+
{isLoading ? t`Loading...` : t`No open positions`}
 )} diff --git a/src/components/Synthetics/TradeHistory/TradeHistory.tsx b/src/components/Synthetics/TradeHistory/TradeHistory.tsx index 3518875666..7f5507aca2 100644 --- a/src/components/Synthetics/TradeHistory/TradeHistory.tsx +++ b/src/components/Synthetics/TradeHistory/TradeHistory.tsx @@ -199,14 +199,14 @@ export function TradeHistory(p: Props) { )} {isEmpty && hasFilters && ( - + No trades match the selected filters )} {isEmpty && !hasFilters && !isLoading && ( - + No trades yet diff --git a/src/components/TokenSelector/TokenSelector.tsx b/src/components/TokenSelector/TokenSelector.tsx index 6fbc0ef425..4f5406e9a6 100644 --- a/src/components/TokenSelector/TokenSelector.tsx +++ b/src/components/TokenSelector/TokenSelector.tsx @@ -298,7 +298,7 @@ export default function TokenSelector(props: Props) { })}
{sortedFilteredTokens.length === 0 && ( -
+
No tokens matched.
)} diff --git a/src/pages/AccountDashboard/DailyAndCumulativePnL.tsx b/src/pages/AccountDashboard/DailyAndCumulativePnL.tsx index d1c51d2d26..f54515d00b 100644 --- a/src/pages/AccountDashboard/DailyAndCumulativePnL.tsx +++ b/src/pages/AccountDashboard/DailyAndCumulativePnL.tsx @@ -139,7 +139,7 @@ export function DailyAndCumulativePnL({ chainId, account }: { chainId: number; a
)} {!loading && !error && clusteredPnlData.length === 0 && ( -
+
No data available
)} diff --git a/src/pages/LeaderboardPage/components/LeaderboardAccountsTable.tsx b/src/pages/LeaderboardPage/components/LeaderboardAccountsTable.tsx index dcc820cb39..90ac0113ea 100644 --- a/src/pages/LeaderboardPage/components/LeaderboardAccountsTable.tsx +++ b/src/pages/LeaderboardPage/components/LeaderboardAccountsTable.tsx @@ -399,7 +399,7 @@ const TableRow = memo( const EmptyRow = memo(() => { return ( - + No results found diff --git a/src/pages/LeaderboardPage/components/LeaderboardPositionsTable.tsx b/src/pages/LeaderboardPage/components/LeaderboardPositionsTable.tsx index f48c46684f..f24cd4617d 100644 --- a/src/pages/LeaderboardPage/components/LeaderboardPositionsTable.tsx +++ b/src/pages/LeaderboardPage/components/LeaderboardPositionsTable.tsx @@ -426,7 +426,7 @@ const TableCell = memo(({ children, className }: { children: ReactNode; classNam const EmptyRow = memo(() => { return ( - + No results found diff --git a/src/styles/Shared.scss b/src/styles/Shared.scss index 6f636fb818..4efc1e1621 100644 --- a/src/styles/Shared.scss +++ b/src/styles/Shared.scss @@ -108,8 +108,8 @@ input[type="number"] { } input { - font-size: 2rem; - color: var(--color-slate-100); + font-size: var(--font-size-body-medium); + color: var(--color-white); outline: none; background: none; padding: 1.25rem; diff --git a/tailwind.config.js b/tailwind.config.js index cf57509814..7afd3a8c2d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -32,17 +32,17 @@ const colors = { 950: "#08091b", }, gray: { - 50: "rgba(255, 255, 255, 0.95)", - 100: "rgba(255, 255, 255, 0.9)", - 200: "rgba(255, 255, 255, 0.8)", - 300: "rgba(255, 255, 255, 0.7)", - 400: "rgba(255, 255, 255, 0.6)", - 500: "rgba(255, 255, 255, 0.5)", - 600: "rgba(255, 255, 255, 0.4)", - 700: "rgba(255, 255, 255, 0.3)", - 800: "rgba(255, 255, 255, 0.2)", - 900: "rgba(255, 255, 255, 0.1)", - 950: "rgba(255, 255, 255, 0.05)", + 50: "#585866", + 100: "#e7e7e9", + 200: "#cfcfd3", + 300: "#b7b8bd", + 400: "#9fa0a7", + 500: "#878891", + 600: "#70707c", + 700: "#585866", + 800: "#585866", + 900: "#585866", + 950: "#585866", }, yellow: { 300: "#ffe166", From 6056c422c573acee5a0506541bc56c28aa0b5940 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hub=C3=A9rt=20de=20Lalye?= Date: Wed, 4 Dec 2024 00:39:27 +0400 Subject: [PATCH 04/35] fixed button styles --- src/components/Button/Button.scss | 6 +++--- tailwind.config.js | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index cb4d043b89..c4e50c31f0 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -54,7 +54,7 @@ } &.secondary { - background-color: color-mix(in srgb, var(--color-slate-600) 47%, transparent); + background-color: var(--color-slate-600); border-radius: var(--border-radius-sm); color: var(--color-white); padding: 1.1rem 1.25rem; @@ -79,11 +79,11 @@ } &:not([disabled], .disabled):hover { - background-color: #50577e99; + background-color: #50577e; } &:not([disabled], .disabled):active { - background: #50577eb3; + background: #50577e; } } diff --git a/tailwind.config.js b/tailwind.config.js index 7afd3a8c2d..c17ba75833 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -32,7 +32,7 @@ const colors = { 950: "#08091b", }, gray: { - 50: "#585866", + 50: "rgba(255, 255, 255, 0.95)", 100: "#e7e7e9", 200: "#cfcfd3", 300: "#b7b8bd", @@ -40,9 +40,9 @@ const colors = { 500: "#878891", 600: "#70707c", 700: "#585866", - 800: "#585866", - 900: "#585866", - 950: "#585866", + 800: "rgba(255, 255, 255, 0.2)", + 900: "rgba(255, 255, 255, 0.1)", + 950: "rgba(255, 255, 255, 0.05)", }, yellow: { 300: "#ffe166", From d9f27815472b33ee24550c048d7572239f51cede Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hub=C3=A9rt=20de=20Lalye?= Date: Wed, 4 Dec 2024 16:19:32 +0400 Subject: [PATCH 05/35] updated hover color for tabs --- src/components/Tab/Tab.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Tab/Tab.css b/src/components/Tab/Tab.css index cf46df0975..09cce39c8d 100644 --- a/src/components/Tab/Tab.css +++ b/src/components/Tab/Tab.css @@ -59,7 +59,7 @@ } .Tab.Tab__inline .Tab-option:not(.disabled):not(.active):hover { - opacity: 0.8; + color: var(--color-white); } .Tab.Tab__inline .Tab-option.active { From 3e3c0e47c85b61462609ac01dc3e690a96599340 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hub=C3=A9rt=20de=20Lalye?= Date: Wed, 4 Dec 2024 17:21:37 +0400 Subject: [PATCH 06/35] fixed hovers of chvrons in expandable row --- src/components/Synthetics/ExpandableRow.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Synthetics/ExpandableRow.tsx b/src/components/Synthetics/ExpandableRow.tsx index 07fe514c10..51281fffa9 100644 --- a/src/components/Synthetics/ExpandableRow.tsx +++ b/src/components/Synthetics/ExpandableRow.tsx @@ -79,9 +79,9 @@ export function ExpandableRow({ label={{label}} value={ open ? ( - + ) : ( - + ) } /> From 3ffa437577288acff1dadf19b1849c782d23636b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hub=C3=A9rt=20de=20Lalye?= Date: Mon, 9 Dec 2024 15:59:56 +0400 Subject: [PATCH 07/35] updated colors palette, added inject plugin for semantic colors --- src/App/App.scss | 2 +- .../AddressDropdown/AddressDropdown.scss | 2 +- src/components/Button/Button.scss | 4 +- src/components/Header/Header.scss | 2 +- .../LeverageSlider/LeverageSlider.tsx | 2 +- src/components/Modal/Modal.css | 2 +- .../NetworkDropdown/NetworkDropdown.css | 4 +- src/components/NotifyButton/NotifyButton.scss | 2 +- src/components/SearchInput/SearchInput.tsx | 2 +- .../SettingsModal/SettingsModal.tsx | 2 +- .../Synthetics/Claims/ClaimableCardUI.tsx | 16 ++--- src/components/Synthetics/Claims/Claims.scss | 45 +----------- .../GmAssetDropdown/GmAssetDropdown.tsx | 2 +- .../Synthetics/TradeBox/TradeBox.tsx | 28 ++------ .../Synthetics/TradeBox/tradeboxConstants.tsx | 41 +++++++++++ src/components/Tab/Tab.tsx | 14 +++- src/img/swap.svg | 2 +- src/locales/de/messages.po | 12 ++-- src/locales/en/messages.po | 12 ++-- src/locales/es/messages.po | 12 ++-- src/locales/fr/messages.po | 12 ++-- src/locales/ja/messages.po | 12 ++-- src/locales/ko/messages.po | 12 ++-- src/locales/pseudo/messages.po | 12 ++-- src/locales/ru/messages.po | 12 ++-- src/locales/zh/messages.po | 12 ++-- src/pages/Exchange/Exchange.css | 6 +- src/pages/SyntheticsPage/SyntheticsPage.tsx | 10 --- src/pages/UiPage/UiPage.tsx | 72 ++++++++++--------- src/styles/Input.css | 2 +- src/styles/Shared.scss | 2 +- tailwind.config.js | 30 ++++++-- 32 files changed, 197 insertions(+), 205 deletions(-) create mode 100644 src/components/Synthetics/TradeBox/tradeboxConstants.tsx diff --git a/src/App/App.scss b/src/App/App.scss index 8ee1cb86f2..9ccc72a54c 100644 --- a/src/App/App.scss +++ b/src/App/App.scss @@ -285,7 +285,7 @@ button.App-connect-wallet:hover { } .App-header-user-address { - border: 1px solid var(--color-gray-700); + border: 1px solid var(--color-stroke-primary); height: 3.6rem; border-radius: 0.4rem; display: inline-flex; diff --git a/src/components/AddressDropdown/AddressDropdown.scss b/src/components/AddressDropdown/AddressDropdown.scss index cba0282bfd..ec0d563df6 100644 --- a/src/components/AddressDropdown/AddressDropdown.scss +++ b/src/components/AddressDropdown/AddressDropdown.scss @@ -34,7 +34,7 @@ border-radius: 0.4rem; overflow: hidden; background: var(--color-slate-800); - border: 1px solid var(--color-gray-700); + border: 1px solid var(--color-stroke-primary); list-style: none; cursor: pointer; outline: none; diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index c4e50c31f0..801d61f4b9 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -54,7 +54,7 @@ } &.secondary { - background-color: var(--color-slate-600); + background-color: var(--color-slate-700); border-radius: var(--border-radius-sm); color: var(--color-white); padding: 1.1rem 1.25rem; @@ -83,7 +83,7 @@ } &:not([disabled], .disabled):active { - background: #50577e; + background: #737998; } } diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss index 96a145861d..698333967e 100644 --- a/src/components/Header/Header.scss +++ b/src/components/Header/Header.scss @@ -198,7 +198,7 @@ } .App-header-user-address { - border: 1px solid var(--color-gray-700); + border: 1px solid var(--color-stroke-primary); height: 3.6rem; border-radius: 0.4rem; display: inline-flex; diff --git a/src/components/LeverageSlider/LeverageSlider.tsx b/src/components/LeverageSlider/LeverageSlider.tsx index 76aebc6978..8c47e37a08 100644 --- a/src/components/LeverageSlider/LeverageSlider.tsx +++ b/src/components/LeverageSlider/LeverageSlider.tsx @@ -98,7 +98,7 @@ const LeverageSliderHandle = forwardRef(function LeverageSl +

); diff --git a/src/components/Synthetics/Claims/ClaimableCardUI.tsx b/src/components/Synthetics/Claims/ClaimableCardUI.tsx index a4eda0a3ff..1ba35860bf 100644 --- a/src/components/Synthetics/Claims/ClaimableCardUI.tsx +++ b/src/components/Synthetics/Claims/ClaimableCardUI.tsx @@ -1,5 +1,6 @@ import { t } from "@lingui/macro"; import cx from "classnames"; +import Button from "components/Button/Button"; import Tooltip from "components/Tooltip/Tooltip"; import { formatDeltaUsd } from "lib/numbers"; import { CSSProperties, ReactNode, useCallback, useMemo } from "react"; @@ -10,7 +11,6 @@ type Section = { tooltipText: ReactNode; onButtonClick: () => void; usd: bigint; - buttonStyle?: "primary" | "secondary"; }; type Props = { @@ -40,17 +40,9 @@ export function ClaimableCardUI({ title, style, sections }: Props) { ); } -function Section({ - buttonStyle = "primary", - buttonText, - onButtonClick, - tooltipText, - title, - usd, -}: Section & { title: string }) { +function Section({ buttonText, onButtonClick, tooltipText, title, usd }: Section & { title: string }) { const renderTooltipContent = useCallback(() => tooltipText, [tooltipText]); const usdFormatted = useMemo(() => formatDeltaUsd(usd), [usd]); - const buttonClassname = buttonStyle === "primary" ? "primary App-button-option App-card-option" : "secondary"; return (
@@ -65,9 +57,9 @@ function Section({
{usd > 0 && ( - + )}
); diff --git a/src/components/Synthetics/Claims/Claims.scss b/src/components/Synthetics/Claims/Claims.scss index 59a12f126b..c754a210f1 100644 --- a/src/components/Synthetics/Claims/Claims.scss +++ b/src/components/Synthetics/Claims/Claims.scss @@ -4,6 +4,7 @@ padding: 0.1rem 1.5rem; align-items: center; flex: 1; + justify-content: space-between; } .Claims-card { @@ -36,50 +37,6 @@ margin-bottom: 0.2rem; } -.Claims-claim-button.primary { - cursor: pointer; - border-radius: 4px; - font-size: var(--font-size-body-medium); - line-height: 2rem; - font-weight: normal; - letter-spacing: 0px; - color: var(--color-white); - padding-left: 16px; - padding-right: 16px; - text-decoration: none; - box-sizing: border-box; - position: relative; - min-height: 36px; - display: inline-flex !important; - align-items: center; - border: none; - background: rgb(43, 55, 94); - margin-left: auto; - height: 0; -} - -.Claims-claim-button.secondary { - cursor: pointer; - font-size: var(--font-size-body-medium); - font-weight: normal; - letter-spacing: 0px; - text-decoration: none; - box-sizing: border-box; - position: relative; - min-height: 36px; - display: inline-flex !important; - align-items: center; - border: none; - margin-left: auto; - height: 0; - background-color: transparent; - - color: var(--color-gray-300); - &:hover { - color: var(--color-white); - } -} - .Claims-col-title { white-space: nowrap; margin-bottom: 1.8rem; diff --git a/src/components/Synthetics/GmAssetDropdown/GmAssetDropdown.tsx b/src/components/Synthetics/GmAssetDropdown/GmAssetDropdown.tsx index 0ad2116e3e..368d41ae29 100644 --- a/src/components/Synthetics/GmAssetDropdown/GmAssetDropdown.tsx +++ b/src/components/Synthetics/GmAssetDropdown/GmAssetDropdown.tsx @@ -106,7 +106,7 @@ export default function GmAssetDropdown({ token, marketsInfoData, tokensData, po as="div" ref={refs.setFloating} style={floatingStyles} - className="z-30 rounded-4 border border-gray-800 bg-slate-800 outline-none" + className="stroke-primary z-30 rounded-4 border bg-slate-800 outline-none" > {market && ( diff --git a/src/components/Synthetics/TradeBox/TradeBox.tsx b/src/components/Synthetics/TradeBox/TradeBox.tsx index 26a6825699..cb336f0eda 100644 --- a/src/components/Synthetics/TradeBox/TradeBox.tsx +++ b/src/components/Synthetics/TradeBox/TradeBox.tsx @@ -1,4 +1,4 @@ -import { Trans, msg, t } from "@lingui/macro"; +import { Trans, t } from "@lingui/macro"; import { useConnectModal } from "@rainbow-me/rainbowkit"; import cx from "classnames"; import { ChangeEvent, KeyboardEvent, ReactNode, useCallback, useEffect, useMemo, useRef } from "react"; @@ -62,7 +62,6 @@ import { } from "domain/synthetics/positions"; import { convertToUsd } from "domain/synthetics/tokens"; import { - TradeMode, TradeType, applySlippageToPrice, getIncreasePositionAmounts, @@ -141,38 +140,18 @@ import { LimitPriceRow } from "./TradeBoxRows/LimitPriceRow"; import { MinReceiveRow } from "./TradeBoxRows/MinReceiveRow"; import { TradeBoxOneClickTrading } from "./TradeBoxRows/OneClickTrading"; -import LongIcon from "img/long.svg?react"; -import ShortIcon from "img/short.svg?react"; -import SwapIcon from "img/swap.svg?react"; - import { selectChartHeaderInfo } from "context/SyntheticsStateContext/selectors/chartSelectors"; import { MissedCoinsPlace } from "domain/synthetics/userFeedback"; import { sendTradeBoxInteractionStartedEvent, sendUserAnalyticsConnectWalletClickEvent } from "lib/userAnalytics"; import { MissedCoinsHint } from "../MissedCoinsHint/MissedCoinsHint"; +import { tradeModeLabels, tradeTypeClassNames, tradeTypeIcons, tradeTypeLabels } from "./tradeboxConstants"; + import "./TradeBox.scss"; export type Props = { setPendingTxns: (txns: any) => void; }; -const tradeTypeIcons = { - [TradeType.Long]: , - [TradeType.Short]: , - [TradeType.Swap]: , -}; - -const tradeModeLabels = { - [TradeMode.Market]: msg`Market`, - [TradeMode.Limit]: msg`Limit`, - [TradeMode.Trigger]: msg`TP/SL`, -}; - -const tradeTypeLabels = { - [TradeType.Long]: msg`Long`, - [TradeType.Short]: msg`Short`, - [TradeType.Swap]: msg`Swap`, -}; - export function TradeBox(p: Props) { const localizedTradeModeLabels = useLocalizedMap(tradeModeLabels); const localizedTradeTypeLabels = useLocalizedMap(tradeTypeLabels); @@ -1447,6 +1426,7 @@ export function TradeBox(p: Props) { icons={tradeTypeIcons} options={Object.values(TradeType)} optionLabels={localizedTradeTypeLabels} + optionClassnames={tradeTypeClassNames} option={tradeType} onChange={onTradeTypeChange} className="SwapBox-option-tabs" diff --git a/src/components/Synthetics/TradeBox/tradeboxConstants.tsx b/src/components/Synthetics/TradeBox/tradeboxConstants.tsx new file mode 100644 index 0000000000..bd49df307d --- /dev/null +++ b/src/components/Synthetics/TradeBox/tradeboxConstants.tsx @@ -0,0 +1,41 @@ +import { msg } from "@lingui/macro"; + +import { TradeMode, TradeType } from "domain/synthetics/trade"; + +import LongIcon from "img/long.svg?react"; +import ShortIcon from "img/short.svg?react"; +import SwapIcon from "img/swap.svg?react"; + +import "./TradeBox.scss"; + +export type Props = { + setPendingTxns: (txns: any) => void; +}; + +export const tradeTypeIcons = { + [TradeType.Long]: , + [TradeType.Short]: , + [TradeType.Swap]: , +}; + +export const tradeModeLabels = { + [TradeMode.Market]: msg`Market`, + [TradeMode.Limit]: msg`Limit`, + [TradeMode.Trigger]: msg`TP/SL`, +}; + +export const tradeTypeLabels = { + [TradeType.Long]: msg`Long`, + [TradeType.Short]: msg`Short`, + [TradeType.Swap]: msg`Swap`, +}; + +/** + * Colors are exceptions from palette + * @see https://www.notion.so/gmxio/New-Colors-for-Red-Green-and-Disabled-buttons-14c03574745d8070b2edc89744f3eff4 + */ +export const tradeTypeClassNames = { + [TradeType.Long]: { active: "!bg-[#1F3445] !text-green-500 border-b border-b-green-500" }, + [TradeType.Short]: { active: "!bg-[#392A46] !text-red-500 border-b border-b-red-500" }, + [TradeType.Swap]: { active: "!bg-[#252B57] !text-blue-300 border-b border-b-blue-300" }, +}; diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx index 58bfe23571..163bc17661 100644 --- a/src/components/Tab/Tab.tsx +++ b/src/components/Tab/Tab.tsx @@ -11,6 +11,13 @@ type Props = { type?: "block" | "inline"; className?: string; optionLabels?: Record | string[]; + optionClassnames?: Record< + string | number, + { + active?: string; + regular?: string; + } + >; icons?: Record; qa?: string; }; @@ -29,10 +36,15 @@ export default function Tab(props: Props) { return (
{options.map((opt) => { + const className = props.optionClassnames && props.optionClassnames[opt]; const label = optionLabels && optionLabels[opt] ? optionLabels[opt] : opt; + + const optionClassName = opt === option ? className?.active : className?.regular; return (
onClick(opt)} key={opt} data-qa={`${qa}-tab-${opt}`} diff --git a/src/img/swap.svg b/src/img/swap.svg index ca40d3b8ea..d514628e78 100644 --- a/src/img/swap.svg +++ b/src/img/swap.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/locales/de/messages.po b/src/locales/de/messages.po index 2c0cac0a25..b8a5b117c8 100644 --- a/src/locales/de/messages.po +++ b/src/locales/de/messages.po @@ -2941,7 +2941,7 @@ msgstr "" #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/TradeHistoryRow.tsx #: src/components/Synthetics/TradeHistory/useDownloadAsCsv.tsx msgid "Market" @@ -3810,7 +3810,7 @@ msgstr "Trigger-Preis für den Auftrag." #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -5011,7 +5011,7 @@ msgstr "" #: src/components/Synthetics/PositionItem/PositionItem.tsx #: src/components/Synthetics/PositionSeller/PositionSeller.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx msgid "TP/SL" msgstr "" @@ -6847,7 +6847,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7628,7 +7628,7 @@ msgstr "" #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "Swap" @@ -8002,7 +8002,7 @@ msgstr "" #: src/components/Synthetics/OrderItem/OrderItem.tsx #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/PositionItem/PositionItem.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeBox/TradeBoxRows/LimitAndTPSLRows.tsx #: src/components/Synthetics/TradeHistory/keys.ts msgid "Limit" diff --git a/src/locales/en/messages.po b/src/locales/en/messages.po index 2ad936bd2c..cf84e7f5a4 100644 --- a/src/locales/en/messages.po +++ b/src/locales/en/messages.po @@ -2941,7 +2941,7 @@ msgstr "No claims match the selected filters" #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/TradeHistoryRow.tsx #: src/components/Synthetics/TradeHistory/useDownloadAsCsv.tsx msgid "Market" @@ -3813,7 +3813,7 @@ msgstr "Trigger price for the order." #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -5014,7 +5014,7 @@ msgstr "Deposited!" #: src/components/Synthetics/PositionItem/PositionItem.tsx #: src/components/Synthetics/PositionSeller/PositionSeller.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx msgid "TP/SL" msgstr "TP/SL" @@ -6853,7 +6853,7 @@ msgstr "Shift error." #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7634,7 +7634,7 @@ msgstr "Activate Subaccount" #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "Swap" @@ -8008,7 +8008,7 @@ msgstr "Anonymous chat with GMX" #: src/components/Synthetics/OrderItem/OrderItem.tsx #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/PositionItem/PositionItem.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeBox/TradeBoxRows/LimitAndTPSLRows.tsx #: src/components/Synthetics/TradeHistory/keys.ts msgid "Limit" diff --git a/src/locales/es/messages.po b/src/locales/es/messages.po index a6ea042284..7bc3ff1dca 100644 --- a/src/locales/es/messages.po +++ b/src/locales/es/messages.po @@ -2941,7 +2941,7 @@ msgstr "" #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/TradeHistoryRow.tsx #: src/components/Synthetics/TradeHistory/useDownloadAsCsv.tsx msgid "Market" @@ -3810,7 +3810,7 @@ msgstr "Precio de activación para la orden." #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -5011,7 +5011,7 @@ msgstr "" #: src/components/Synthetics/PositionItem/PositionItem.tsx #: src/components/Synthetics/PositionSeller/PositionSeller.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx msgid "TP/SL" msgstr "" @@ -6847,7 +6847,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7628,7 +7628,7 @@ msgstr "" #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "Intercambiar" @@ -8002,7 +8002,7 @@ msgstr "" #: src/components/Synthetics/OrderItem/OrderItem.tsx #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/PositionItem/PositionItem.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeBox/TradeBoxRows/LimitAndTPSLRows.tsx #: src/components/Synthetics/TradeHistory/keys.ts msgid "Limit" diff --git a/src/locales/fr/messages.po b/src/locales/fr/messages.po index ed4e867f1d..ad6a273a65 100644 --- a/src/locales/fr/messages.po +++ b/src/locales/fr/messages.po @@ -2941,7 +2941,7 @@ msgstr "" #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/TradeHistoryRow.tsx #: src/components/Synthetics/TradeHistory/useDownloadAsCsv.tsx msgid "Market" @@ -3810,7 +3810,7 @@ msgstr "Prix de déclenchement pour l'ordre." #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -5011,7 +5011,7 @@ msgstr "" #: src/components/Synthetics/PositionItem/PositionItem.tsx #: src/components/Synthetics/PositionSeller/PositionSeller.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx msgid "TP/SL" msgstr "" @@ -6847,7 +6847,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7628,7 +7628,7 @@ msgstr "" #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "Échanger" @@ -8002,7 +8002,7 @@ msgstr "" #: src/components/Synthetics/OrderItem/OrderItem.tsx #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/PositionItem/PositionItem.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeBox/TradeBoxRows/LimitAndTPSLRows.tsx #: src/components/Synthetics/TradeHistory/keys.ts msgid "Limit" diff --git a/src/locales/ja/messages.po b/src/locales/ja/messages.po index c2d9346f25..fc46218ea0 100644 --- a/src/locales/ja/messages.po +++ b/src/locales/ja/messages.po @@ -2941,7 +2941,7 @@ msgstr "" #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/TradeHistoryRow.tsx #: src/components/Synthetics/TradeHistory/useDownloadAsCsv.tsx msgid "Market" @@ -3810,7 +3810,7 @@ msgstr "注文のトリガー価格" #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -5011,7 +5011,7 @@ msgstr "" #: src/components/Synthetics/PositionItem/PositionItem.tsx #: src/components/Synthetics/PositionSeller/PositionSeller.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx msgid "TP/SL" msgstr "" @@ -6847,7 +6847,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7628,7 +7628,7 @@ msgstr "" #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "スワップ" @@ -8002,7 +8002,7 @@ msgstr "" #: src/components/Synthetics/OrderItem/OrderItem.tsx #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/PositionItem/PositionItem.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeBox/TradeBoxRows/LimitAndTPSLRows.tsx #: src/components/Synthetics/TradeHistory/keys.ts msgid "Limit" diff --git a/src/locales/ko/messages.po b/src/locales/ko/messages.po index 172eb9a2c0..f76d285eff 100644 --- a/src/locales/ko/messages.po +++ b/src/locales/ko/messages.po @@ -2941,7 +2941,7 @@ msgstr "" #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/TradeHistoryRow.tsx #: src/components/Synthetics/TradeHistory/useDownloadAsCsv.tsx msgid "Market" @@ -3810,7 +3810,7 @@ msgstr "주문의 트리거 가격입니다." #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -5011,7 +5011,7 @@ msgstr "" #: src/components/Synthetics/PositionItem/PositionItem.tsx #: src/components/Synthetics/PositionSeller/PositionSeller.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx msgid "TP/SL" msgstr "" @@ -6847,7 +6847,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7628,7 +7628,7 @@ msgstr "" #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "스왑" @@ -8002,7 +8002,7 @@ msgstr "" #: src/components/Synthetics/OrderItem/OrderItem.tsx #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/PositionItem/PositionItem.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeBox/TradeBoxRows/LimitAndTPSLRows.tsx #: src/components/Synthetics/TradeHistory/keys.ts msgid "Limit" diff --git a/src/locales/pseudo/messages.po b/src/locales/pseudo/messages.po index bda7d39ca5..83cdcc1f20 100644 --- a/src/locales/pseudo/messages.po +++ b/src/locales/pseudo/messages.po @@ -2941,7 +2941,7 @@ msgstr "" #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/TradeHistoryRow.tsx #: src/components/Synthetics/TradeHistory/useDownloadAsCsv.tsx msgid "Market" @@ -3810,7 +3810,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -5011,7 +5011,7 @@ msgstr "" #: src/components/Synthetics/PositionItem/PositionItem.tsx #: src/components/Synthetics/PositionSeller/PositionSeller.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx msgid "TP/SL" msgstr "" @@ -6847,7 +6847,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7628,7 +7628,7 @@ msgstr "" #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "" @@ -8002,7 +8002,7 @@ msgstr "" #: src/components/Synthetics/OrderItem/OrderItem.tsx #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/PositionItem/PositionItem.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeBox/TradeBoxRows/LimitAndTPSLRows.tsx #: src/components/Synthetics/TradeHistory/keys.ts msgid "Limit" diff --git a/src/locales/ru/messages.po b/src/locales/ru/messages.po index cfc0fbcdba..7965e8f62c 100644 --- a/src/locales/ru/messages.po +++ b/src/locales/ru/messages.po @@ -2941,7 +2941,7 @@ msgstr "" #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/TradeHistoryRow.tsx #: src/components/Synthetics/TradeHistory/useDownloadAsCsv.tsx msgid "Market" @@ -3810,7 +3810,7 @@ msgstr "Цена триггера для ордера." #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -5011,7 +5011,7 @@ msgstr "" #: src/components/Synthetics/PositionItem/PositionItem.tsx #: src/components/Synthetics/PositionSeller/PositionSeller.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx msgid "TP/SL" msgstr "" @@ -6847,7 +6847,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7628,7 +7628,7 @@ msgstr "" #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "Обмен" @@ -8002,7 +8002,7 @@ msgstr "" #: src/components/Synthetics/OrderItem/OrderItem.tsx #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/PositionItem/PositionItem.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeBox/TradeBoxRows/LimitAndTPSLRows.tsx #: src/components/Synthetics/TradeHistory/keys.ts msgid "Limit" diff --git a/src/locales/zh/messages.po b/src/locales/zh/messages.po index b856eb436d..ee83a89b0e 100644 --- a/src/locales/zh/messages.po +++ b/src/locales/zh/messages.po @@ -2941,7 +2941,7 @@ msgstr "" #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx #: src/components/Synthetics/TradeBox/TradeBox.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/TradeHistoryRow.tsx #: src/components/Synthetics/TradeHistory/useDownloadAsCsv.tsx msgid "Market" @@ -3810,7 +3810,7 @@ msgstr "订单的触发价格" #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -5011,7 +5011,7 @@ msgstr "" #: src/components/Synthetics/PositionItem/PositionItem.tsx #: src/components/Synthetics/PositionSeller/PositionSeller.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx msgid "TP/SL" msgstr "" @@ -6847,7 +6847,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/FeesSettlementStatusNotification.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7628,7 +7628,7 @@ msgstr "" #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "交易" @@ -8002,7 +8002,7 @@ msgstr "" #: src/components/Synthetics/OrderItem/OrderItem.tsx #: src/components/Synthetics/OrderList/filters/OrderTypeFilter.tsx #: src/components/Synthetics/PositionItem/PositionItem.tsx -#: src/components/Synthetics/TradeBox/TradeBox.tsx +#: src/components/Synthetics/TradeBox/tradeboxConstants.tsx #: src/components/Synthetics/TradeBox/TradeBoxRows/LimitAndTPSLRows.tsx #: src/components/Synthetics/TradeHistory/keys.ts msgid "Limit" diff --git a/src/pages/Exchange/Exchange.css b/src/pages/Exchange/Exchange.css index 0c38d01515..1654130219 100644 --- a/src/pages/Exchange/Exchange.css +++ b/src/pages/Exchange/Exchange.css @@ -936,12 +936,8 @@ table.Exchange-list-small td { } .chart-positions:hover { - opacity: 0.8; -} -.chart-positions.span:hover { - opacity: 1; + color: var(--color-white); } - .position-list-collateral { display: flex; align-items: flex-end; diff --git a/src/pages/SyntheticsPage/SyntheticsPage.tsx b/src/pages/SyntheticsPage/SyntheticsPage.tsx index adcb854570..9587587d84 100644 --- a/src/pages/SyntheticsPage/SyntheticsPage.tsx +++ b/src/pages/SyntheticsPage/SyntheticsPage.tsx @@ -2,7 +2,6 @@ import { Plural, t, Trans } from "@lingui/macro"; import cx from "classnames"; import uniq from "lodash/uniq"; import { startTransition, useCallback, useEffect, useMemo, useState } from "react"; -import Helmet from "react-helmet"; import type { MarketFilterLongShortItemData } from "components/Synthetics/TableMarketFilter/MarketFilterLongShort"; import { getSyntheticsListSectionKey } from "config/localStorage"; @@ -240,15 +239,6 @@ export function SyntheticsPage(p: Props) { return (
- - -
diff --git a/src/pages/UiPage/UiPage.tsx b/src/pages/UiPage/UiPage.tsx index fd776d8cbd..8e4f3add90 100644 --- a/src/pages/UiPage/UiPage.tsx +++ b/src/pages/UiPage/UiPage.tsx @@ -62,53 +62,57 @@ const otherImages = Object.keys(otherImagesContext) const colors = { blue: { - "300": "bg-blue-300", - "400": "bg-blue-400", - "500": "bg-blue-500", - "600": "bg-blue-600", - "700": "bg-blue-700", + 300: "#7885ff", + 400: "#4d5ffa", + 500: "#3d51ff", + 600: "#2d42fc", + 700: "#2e3dcd", }, "cold-blue": { - "500": "bg-cold-blue-500", - "700": "bg-cold-blue-700", - "900": "bg-cold-blue-900", + 500: "#3a3f79", + 700: "#3a3f798f", + 900: "#1e203e", + }, + "pale-blue": { + 100: "rgba(180,187,255, 0.1)", + 600: "rgba(180,187,255, 0.6)", }, slate: { - "100": "bg-slate-100", - "500": "bg-slate-500", - "600": "bg-slate-600", - "700": "bg-slate-700", - "800": "bg-slate-800", - "900": "bg-slate-900", - "950": "bg-slate-950", + 100: "#a0a3c4", + 500: "#3e4361", + 600: "#373c58", + 700: "#23263b", + 800: "#16182e", + 900: "#101124", + 950: "#08091b", }, gray: { - "50": "bg-gray-50", - "100": "bg-gray-100", - "200": "bg-gray-200", - "300": "bg-gray-300", - "400": "bg-gray-400", - "500": "bg-gray-500", - "600": "bg-gray-600", - "700": "bg-gray-700", - "800": "bg-gray-800", - "900": "bg-gray-900", - "950": "bg-gray-950", + 50: "rgba(255, 255, 255, 0.95)", + 100: "#e7e7e9", + 200: "#cfcfd3", + 300: "#b7b8bd", + 400: "#9fa0a7", + 500: "#878891", + 600: "#70707c", + 700: "#585866", + 800: "rgba(255, 255, 255, 0.2)", + 900: "rgba(255, 255, 255, 0.1)", + 950: "rgba(255, 255, 255, 0.05)", }, yellow: { - "300": "bg-yellow-300", - "500": "bg-yellow-500", + 300: "#ffe166", + 500: "#f3b50c", }, red: { - "400": "bg-red-400", - "500": "bg-red-500", + 400: "#FE6C81", + 500: "#FB3C58", }, green: { - "300": "bg-green-300", - "500": "bg-green-500", + 300: "#8CF3CB", + 500: "#0FDE8D", }, - white: "bg-white", - black: "bg-black", + white: "#ffffff", + black: "#000000", }; export default function UiPage() { diff --git a/src/styles/Input.css b/src/styles/Input.css index b82e7de570..e232dd33f1 100644 --- a/src/styles/Input.css +++ b/src/styles/Input.css @@ -14,7 +14,7 @@ .text-input { color: var(--color-slate-100); - border: 1px solid var(--color-gray-700); + border: 1px solid var(--color-stroke-primary); font-size: var(--font-size-body-medium); width: 100%; box-sizing: border-box; diff --git a/src/styles/Shared.scss b/src/styles/Shared.scss index 4efc1e1621..963cfbcdc1 100644 --- a/src/styles/Shared.scss +++ b/src/styles/Shared.scss @@ -64,7 +64,7 @@ input { background: #b3b4c2; } :root { - --main-bg-color: var(--color-slate-900); + --main-bg-color: var(--color-slate-950); --dark-blue: var(--color-slate-800); --dark-blue-bg: var(--color-slate-800); --dark-blue-accent: var(--color-slate-100); diff --git a/tailwind.config.js b/tailwind.config.js index c17ba75833..ef9409994c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -49,12 +49,12 @@ const colors = { 500: "#f3b50c", }, red: { - 400: "#ff637a", - 500: "#ff506a", + 400: "#FE6C81", + 500: "#FB3C58", }, green: { - 300: "#56dba8", - 500: "#0ecc83", + 300: "#8CF3CB", + 500: "#0FDE8D", }, white: "#ffffff", black: "#000000", @@ -84,6 +84,26 @@ function injectColorsPlugin({ addBase, theme }) { }); } +/** + * @type {import('tailwindcss/types/config').PluginCreator} + * @See https://www.notion.so/gmxio/Colors-Clean-Up-13303574745d80deb5dcebb6f15e41ad#13303574745d8066aad0cbd650848ca6 + */ +function injectSemanticColorsPlugin({ addBase, addComponents }) { + addBase({ + ":root": { + "--color-stroke-primary": '#252A47', + "--color-button-secondary": '#23263E', + "--color-button-disabled": '#1B1D34', + }, + }); + + addComponents({ + ".stroke-primary": { + border: "1px solid var(--color-stroke-primary)", + }, + }); +} + /** * @type {import('tailwindcss/types/config').PluginCreator} */ @@ -189,5 +209,5 @@ module.exports = { ), }, }, - plugins: [injectColorsPlugin, customUtilsPlugin, fontComponentsPlugin], + plugins: [injectColorsPlugin, customUtilsPlugin, fontComponentsPlugin, injectSemanticColorsPlugin], }; From ff6ef51c8298283fbad5be18f7f460498bc6df1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hub=C3=A9rt=20de=20Lalye?= Date: Mon, 9 Dec 2024 17:25:28 +0400 Subject: [PATCH 08/35] updated primary stroke and disabled button state --- src/components/Button/Button.scss | 2 +- .../NetworkDropdown/NetworkDropdown.css | 2 +- .../Synthetics/TradeBox/tradeboxConstants.tsx | 15 ++++++++++++--- src/pages/Buy/Buy.css | 5 ----- src/pages/BuyGMX/BuyGMX.css | 1 - 5 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 801d61f4b9..50db6bd25c 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -139,7 +139,7 @@ &:disabled { box-shadow: none; cursor: not-allowed; - opacity: 0.8; + background-color: var(--color-button-disabled); } &.slim { diff --git a/src/components/NetworkDropdown/NetworkDropdown.css b/src/components/NetworkDropdown/NetworkDropdown.css index e4313cf493..5cd4b0e553 100644 --- a/src/components/NetworkDropdown/NetworkDropdown.css +++ b/src/components/NetworkDropdown/NetworkDropdown.css @@ -90,7 +90,7 @@ .network-option { cursor: pointer; background: var(--dark-blue); - border: 1px solid var(--dark-blue-border); + border: 1px solid var(--color-stroke-primary); border-radius: 0.4rem; padding: 0.8rem 1.5rem; display: flex; diff --git a/src/components/Synthetics/TradeBox/tradeboxConstants.tsx b/src/components/Synthetics/TradeBox/tradeboxConstants.tsx index bd49df307d..11e346a08a 100644 --- a/src/components/Synthetics/TradeBox/tradeboxConstants.tsx +++ b/src/components/Synthetics/TradeBox/tradeboxConstants.tsx @@ -35,7 +35,16 @@ export const tradeTypeLabels = { * @see https://www.notion.so/gmxio/New-Colors-for-Red-Green-and-Disabled-buttons-14c03574745d8070b2edc89744f3eff4 */ export const tradeTypeClassNames = { - [TradeType.Long]: { active: "!bg-[#1F3445] !text-green-500 border-b border-b-green-500" }, - [TradeType.Short]: { active: "!bg-[#392A46] !text-red-500 border-b border-b-red-500" }, - [TradeType.Swap]: { active: "!bg-[#252B57] !text-blue-300 border-b border-b-blue-300" }, + [TradeType.Long]: { + active: "!bg-[#1F3445] !text-green-500 border-b border-b-green-500", + regular: "border-b border-b-[transparent]", + }, + [TradeType.Short]: { + active: "!bg-[#392A46] !text-red-500 border-b border-b-red-500", + regular: "border-b border-b-[transparent]", + }, + [TradeType.Swap]: { + active: "!bg-[#252B57] !text-blue-300 border-b border-b-blue-300", + regular: "border-b border-b-[transparent]", + }, }; diff --git a/src/pages/Buy/Buy.css b/src/pages/Buy/Buy.css index d4a70c885a..eeb6f9da73 100644 --- a/src/pages/Buy/Buy.css +++ b/src/pages/Buy/Buy.css @@ -1,8 +1,3 @@ -.BuyGMXGLP { - background: var(--color-slate-900); - justify-content: space-between; -} - .BuyGMXGLP-container { padding: 0 0 3.1rem 0; width: 100%; diff --git a/src/pages/BuyGMX/BuyGMX.css b/src/pages/BuyGMX/BuyGMX.css index 8e24ef991f..de15ce1ab3 100644 --- a/src/pages/BuyGMX/BuyGMX.css +++ b/src/pages/BuyGMX/BuyGMX.css @@ -1,5 +1,4 @@ .BuyGMXGLP { - background: var(--color-slate-900); justify-content: space-between; } From b90c0de48617a574a3e568145b59ada334d8a094 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hub=C3=A9rt=20de=20Lalye?= Date: Tue, 17 Dec 2024 13:16:21 +0400 Subject: [PATCH 09/35] applying new color styles --- src/components/Button/Button.scss | 14 ++++- src/components/SearchInput/SearchInput.tsx | 51 ++++++++++++++----- .../Synthetics/TradeBox/tradeboxConstants.tsx | 8 +-- src/components/Tab/Tab.css | 10 ++-- src/components/Tab/Tab.tsx | 2 +- src/img/search.svg | 2 +- src/pages/Exchange/Exchange.css | 18 +++---- src/styles/Input.css | 2 +- tailwind.config.js | 9 ++-- 9 files changed, 71 insertions(+), 45 deletions(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 50db6bd25c..ac61701001 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -79,11 +79,11 @@ } &:not([disabled], .disabled):hover { - background-color: #50577e; + background-color: var(--color-cold-blue-700); } &:not([disabled], .disabled):active { - background: #737998; + background: var(--color-cold-blue-500); } } @@ -140,6 +140,16 @@ box-shadow: none; cursor: not-allowed; background-color: var(--color-button-disabled); + + &.primary-action, + &.primary { + background-color: #1d235f; + } + + &.secondary { + background-color: #1b1e32; + color: var(--color-slate-500); + } } &.slim { diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx index c993198ca1..c029064dc7 100644 --- a/src/components/SearchInput/SearchInput.tsx +++ b/src/components/SearchInput/SearchInput.tsx @@ -1,10 +1,10 @@ import { t } from "@lingui/macro"; import cx from "classnames"; -import React, { useCallback } from "react"; +import React, { useCallback, useState } from "react"; import { useMedia } from "react-use"; import CrossIconComponent from "img/cross.svg?react"; -import searchIcon from "img/search.svg"; +import SearchIconComponent from "img/search.svg?react"; type Props = { value: string; @@ -20,10 +20,6 @@ type Props = { qa?: string; }; -const STYLE = { - backgroundImage: `url(${searchIcon})`, -}; - export default function SearchInput({ value, setValue, @@ -37,6 +33,16 @@ export default function SearchInput({ const isSmallerScreen = useMedia("(max-width: 700px)"); const inputRef = React.useRef(null); + const [isFocused, setIsFocused] = useState(false); + + const handleFocus = useCallback(() => { + setIsFocused(true); + }, [setIsFocused]); + + const handleBlur = useCallback(() => { + setIsFocused(false); + }, [setIsFocused]); + const handleChange = useCallback( (e: React.ChangeEvent) => { setValue(e.target.value); @@ -50,7 +56,17 @@ export default function SearchInput({ }, [setValue]); return ( -
+
+
+ +
{
} diff --git a/src/components/Synthetics/TradeBox/tradeboxConstants.tsx b/src/components/Synthetics/TradeBox/tradeboxConstants.tsx index 11e346a08a..dc22f422a8 100644 --- a/src/components/Synthetics/TradeBox/tradeboxConstants.tsx +++ b/src/components/Synthetics/TradeBox/tradeboxConstants.tsx @@ -32,19 +32,19 @@ export const tradeTypeLabels = { /** * Colors are exceptions from palette - * @see https://www.notion.so/gmxio/New-Colors-for-Red-Green-and-Disabled-buttons-14c03574745d8070b2edc89744f3eff4 + * @see https://www.figma.com/design/U973bt4fbRrn9jTg2GfVTd/%F0%9F%93%8A-Trade-Page?node-id=896-87735&t=gJBQW6iIUmrYfMaP-0 */ export const tradeTypeClassNames = { [TradeType.Long]: { - active: "!bg-[#1F3445] !text-green-500 border-b border-b-green-500", + active: "!bg-[#1F3445] border-b border-b-green-500", regular: "border-b border-b-[transparent]", }, [TradeType.Short]: { - active: "!bg-[#392A46] !text-red-500 border-b border-b-red-500", + active: "!bg-[#392A46] border-b border-b-red-500", regular: "border-b border-b-[transparent]", }, [TradeType.Swap]: { - active: "!bg-[#252B57] !text-blue-300 border-b border-b-blue-300", + active: "!bg-[#252B57] border-b border-b-blue-300", regular: "border-b border-b-[transparent]", }, }; diff --git a/src/components/Tab/Tab.css b/src/components/Tab/Tab.css index 09cce39c8d..a15c4b40fe 100644 --- a/src/components/Tab/Tab.css +++ b/src/components/Tab/Tab.css @@ -4,12 +4,8 @@ font-size: var(--font-size-body-medium); border-radius: 3px; overflow: hidden; - color: var(--color-gray-300); - background: linear-gradient( - 90deg, - var(--color-cold-blue-900) 0%, - color-mix(in srgb, var(--color-slate-500) 40%, transparent) 100% - ); + color: var(--color-slate-100); + background: var(--color-cold-blue-900); box-shadow: inset 0px 0px 30px 5px rgba(255, 255, 255, 0.01); } @@ -33,7 +29,7 @@ .Tab.Tab__block .Tab-option.active { opacity: 1; pointer-events: none; - background: var(--primary-btn-bg); + background: var(--color-cold-blue-500); color: var(--color-white); } diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx index 163bc17661..5399b57c19 100644 --- a/src/components/Tab/Tab.tsx +++ b/src/components/Tab/Tab.tsx @@ -42,7 +42,7 @@ export default function Tab(props: Props) { const optionClassName = opt === option ? className?.active : className?.regular; return (
onClick(opt)} diff --git a/src/img/search.svg b/src/img/search.svg index 259c85aea7..4031a7a63a 100644 --- a/src/img/search.svg +++ b/src/img/search.svg @@ -1 +1 @@ - + diff --git a/src/pages/Exchange/Exchange.css b/src/pages/Exchange/Exchange.css index 2023d7a743..1b5b8fd842 100644 --- a/src/pages/Exchange/Exchange.css +++ b/src/pages/Exchange/Exchange.css @@ -731,17 +731,17 @@ table.Position-list .Exchange-list-item-active { z-index: 1; cursor: pointer; font-size: var(--font-size-body-medium); - background: var(--primary-btn-bg); + background: var(--color-cold-blue-500); border: none; } .Exchange-swap-max:hover { color: var(--color-white); - background: var(--primary-btn-hover); + background: #484e92; } .Exchange-swap-max:active { - background: var(--primary-btn-active); + background: #505699; } .Exchange-swap-section-bottom .TokenSelector-box { @@ -783,7 +783,6 @@ input.Exchange-swap-input.small { display: block; transform: rotate(90deg); font-size: 2rem; - opacity: 0.8; } .Exchange-swap-ball { @@ -796,7 +795,7 @@ input.Exchange-swap-input.small { border-radius: 3.1rem; cursor: pointer; user-select: none; - background: var(--primary-btn-bg); + background: var(--color-cold-blue-500); display: flex; justify-content: center; align-items: center; @@ -805,19 +804,14 @@ input.Exchange-swap-input.small { } .Exchange-swap-ball:hover { - background: var(--primary-btn-hover); + background: #484e92; } .Exchange-swap-ball:active { - background: var(--primary-btn-active); -} - -.Exchange-swap-ball:hover .Exchange-swap-ball-icon { - opacity: 1; + background: #505699; } .Exchange-swap-ball[disabled] { - background: var(--primary-btn-bg); opacity: 0.8; cursor: not-allowed; } diff --git a/src/styles/Input.css b/src/styles/Input.css index e232dd33f1..b82e7de570 100644 --- a/src/styles/Input.css +++ b/src/styles/Input.css @@ -14,7 +14,7 @@ .text-input { color: var(--color-slate-100); - border: 1px solid var(--color-stroke-primary); + border: 1px solid var(--color-gray-700); font-size: var(--font-size-body-medium); width: 100%; box-sizing: border-box; diff --git a/tailwind.config.js b/tailwind.config.js index ef9409994c..05cd7840e6 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -15,7 +15,7 @@ const colors = { }, "cold-blue": { 500: "#3a3f79", - 700: "#3a3f798f", + 700: "#282b54", 900: "#1e203e", }, "pale-blue": { @@ -49,11 +49,12 @@ const colors = { 500: "#f3b50c", }, red: { - 400: "#FE6C81", - 500: "#FB3C58", + 400: "#ff637a", + 500: "#FF506A", }, green: { - 300: "#8CF3CB", + 300: "#56dba8", + 400: "#8CF3CB", 500: "#0FDE8D", }, white: "#ffffff", From 802a13ed8483c1b745aa65ba495cb806ab5c63e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hub=C3=A9rt=20de=20Lalye?= Date: Tue, 17 Dec 2024 14:41:33 +0400 Subject: [PATCH 10/35] updating colors for buttons and tabs --- src/components/Button/Button.scss | 5 ++--- src/components/Exchange/SwapBox.jsx | 2 ++ src/components/Synthetics/GmList/GmList.tsx | 5 +---- .../Synthetics/GmSwap/GmSwapBox/GmSwapBox.tsx | 16 ++++++++++++++++ .../Synthetics/GmSwap/GmSwapBox/Swap.tsx | 8 ++++---- src/components/Tab/Tab.css | 1 + .../VersionSwitch/VersionSwitch.scss | 18 ++++-------------- src/lib/legacy.ts | 15 +++++++++++++++ src/pages/Exchange/Exchange.css | 6 +----- tailwind.config.js | 4 ++-- 10 files changed, 48 insertions(+), 32 deletions(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index ac61701001..6b4dd150b6 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -139,15 +139,14 @@ &:disabled { box-shadow: none; cursor: not-allowed; - background-color: var(--color-button-disabled); &.primary-action, &.primary { - background-color: #1d235f; + background-color: var(--color-primary-button-disabled); } &.secondary { - background-color: #1b1e32; + background-color: var(--color-secondary-button-disabled); color: var(--color-slate-500); } } diff --git a/src/components/Exchange/SwapBox.jsx b/src/components/Exchange/SwapBox.jsx index 5a82351324..f671af3f71 100644 --- a/src/components/Exchange/SwapBox.jsx +++ b/src/components/Exchange/SwapBox.jsx @@ -22,6 +22,7 @@ import { STOP, SWAP, SWAP_OPTIONS, + SWAP_OPTIONS_CLASSNAMES, SWAP_ORDER_OPTIONS, USDG_ADDRESS, USDG_DECIMALS, @@ -2009,6 +2010,7 @@ export default function SwapBox(props) { icons={SWAP_ICONS} options={SWAP_OPTIONS} optionLabels={localizedSwapLabels} + optionClassnames={SWAP_OPTIONS_CLASSNAMES} option={swapOption} onChange={onSwapOptionChange} className="Exchange-swap-option-tabs" diff --git a/src/components/Synthetics/GmList/GmList.tsx b/src/components/Synthetics/GmList/GmList.tsx index 2388057b78..f1f1eaac69 100644 --- a/src/components/Synthetics/GmList/GmList.tsx +++ b/src/components/Synthetics/GmList/GmList.tsx @@ -1,5 +1,4 @@ import { Trans, t } from "@lingui/macro"; -import cx from "classnames"; import values from "lodash/values"; import React, { useMemo, useState } from "react"; import { useAccount } from "wagmi"; @@ -431,9 +430,7 @@ function GmListItem({ const shiftButton = useMemo(() => { const btn = (
{status === "loading" && } - {status !== "loading" && txnHash && View} + {status !== "loading" && txnHash && ( + + View + + )}
); From 64336b34a152ac92a4b51cde61caeb6d7ceb4c5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hub=C3=A9rt=20de=20Lalye?= Date: Wed, 18 Dec 2024 16:01:24 +0400 Subject: [PATCH 13/35] fixed search input hover border color --- src/components/SearchInput/SearchInput.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx index 4b8b084f2b..8a331f79ad 100644 --- a/src/components/SearchInput/SearchInput.tsx +++ b/src/components/SearchInput/SearchInput.tsx @@ -84,9 +84,9 @@ export default function SearchInput({ onKeyDown={onKeyDown} onFocus={handleFocus} autoFocus={autoFocus ?? !isSmallerScreen} - className={cx("block w-full rounded-4 border border-gray-800 placeholder-slate-500", { + className={cx("block w-full rounded-4 border placeholder-slate-500", { "border-gray-400": isFocused, - "hover:border-gray-600": !isFocused, + "border-gray-800 hover:border-gray-600": !isFocused, "py-10 pl-40 pr-34 text-16": size === "m", "py-[8.5px] pl-34 pr-30 text-14 ": size === "s", })} From c8f8b4b09ef6200cbba38ff68418e21625ebd38a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hub=C3=A9rt=20de=20Lalye?= Date: Thu, 19 Dec 2024 14:08:02 +0400 Subject: [PATCH 14/35] reorganized tailwind config --- src/components/Button/Button.scss | 4 +-- .../SettingsModal/SettingsModal.tsx | 2 +- .../GmAssetDropdown/GmAssetDropdown.tsx | 2 +- .../Synthetics/GmSwap/GmSwapBox/Swap.tsx | 2 +- tailwind.config.js | 28 +++++-------------- 5 files changed, 12 insertions(+), 26 deletions(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index c3beea191b..c67c2286ad 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -142,11 +142,11 @@ &.primary-action, &.primary { - background-color: var(--color-primary-button-disabled); + background-color: #1d235f; } &.secondary { - background-color: var(--color-secondary-button-disabled); + background-color: #1b1e32; color: var(--color-slate-500); } } diff --git a/src/components/SettingsModal/SettingsModal.tsx b/src/components/SettingsModal/SettingsModal.tsx index de2b5741f9..bcf0694f48 100644 --- a/src/components/SettingsModal/SettingsModal.tsx +++ b/src/components/SettingsModal/SettingsModal.tsx @@ -328,7 +328,7 @@ function TenderlyInput({ value={value} onChange={handleChange} placeholder={placeholder} - className="stroke-primary w-[280px] border px-5 py-4 text-12" + className="border-1 w-[280px] border border-stroke-primary px-5 py-4 text-12" />

); diff --git a/src/components/Synthetics/GmAssetDropdown/GmAssetDropdown.tsx b/src/components/Synthetics/GmAssetDropdown/GmAssetDropdown.tsx index 368d41ae29..7e8ef33647 100644 --- a/src/components/Synthetics/GmAssetDropdown/GmAssetDropdown.tsx +++ b/src/components/Synthetics/GmAssetDropdown/GmAssetDropdown.tsx @@ -106,7 +106,7 @@ export default function GmAssetDropdown({ token, marketsInfoData, tokensData, po as="div" ref={refs.setFloating} style={floatingStyles} - className="stroke-primary z-30 rounded-4 border bg-slate-800 outline-none" + className="border-1 z-30 rounded-4 border border-stroke-primary bg-slate-800 outline-none" > {market && ( diff --git a/src/components/Synthetics/GmSwap/GmSwapBox/Swap.tsx b/src/components/Synthetics/GmSwap/GmSwapBox/Swap.tsx index e8f6afad3c..aa04104eb4 100644 --- a/src/components/Synthetics/GmSwap/GmSwapBox/Swap.tsx +++ b/src/components/Synthetics/GmSwap/GmSwapBox/Swap.tsx @@ -5,7 +5,7 @@ export function Swap() {
diff --git a/tailwind.config.js b/tailwind.config.js index b8abe6eaba..0d03822112 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,6 +5,9 @@ const fromPairs = require("lodash/fromPairs"); const merge = require("lodash/merge"); const defaultConfig = require("tailwindcss/defaultConfig"); +/** + * @See https://www.notion.so/gmxio/Colors-Clean-Up-13303574745d80deb5dcebb6f15e41ad#13303574745d8066aad0cbd650848ca6 + */ const colors = { blue: { 300: "#7885ff", @@ -59,6 +62,9 @@ const colors = { }, white: "#ffffff", black: "#000000", + stroke: { + primary: "#252A47", + }, }; /** @@ -85,26 +91,6 @@ function injectColorsPlugin({ addBase, theme }) { }); } -/** - * @type {import('tailwindcss/types/config').PluginCreator} - * @See https://www.notion.so/gmxio/Colors-Clean-Up-13303574745d80deb5dcebb6f15e41ad#13303574745d8066aad0cbd650848ca6 - */ -function injectSemanticColorsPlugin({ addBase, addComponents }) { - addBase({ - ":root": { - "--color-stroke-primary": '#252A47', - "--color-primary-button-disabled": "#1d235f", - "--color-secondary-button-disabled": "#1b1e32", - }, - }); - - addComponents({ - ".stroke-primary": { - border: "1px solid var(--color-stroke-primary)", - }, - }); -} - /** * @type {import('tailwindcss/types/config').PluginCreator} */ @@ -210,5 +196,5 @@ module.exports = { ), }, }, - plugins: [injectColorsPlugin, customUtilsPlugin, fontComponentsPlugin, injectSemanticColorsPlugin], + plugins: [injectColorsPlugin, customUtilsPlugin, fontComponentsPlugin], }; From 9042113c0a5688dc6873b70f41d0626c5c0e6d1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hub=C3=A9rt=20de=20Lalye?= Date: Thu, 19 Dec 2024 15:19:33 +0400 Subject: [PATCH 15/35] fixed issues in PR --- src/components/SearchInput/SearchInput.tsx | 12 +++++++----- .../Synthetics/GmAssetDropdown/GmAssetDropdown.tsx | 2 +- .../Synthetics/TradeBox/tradeboxConstants.tsx | 6 ------ 3 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx index 8a331f79ad..052fc48e24 100644 --- a/src/components/SearchInput/SearchInput.tsx +++ b/src/components/SearchInput/SearchInput.tsx @@ -59,15 +59,17 @@ export default function SearchInput({ inputRef.current?.focus(); }, [setValue]); + const handleClick = useCallback(() => { + inputRef.current?.focus(); + }, [inputRef]); + return (
{ - inputRef.current?.focus(); - }} + onClick={handleClick} className={cx("relative -top-1 ", { "text-slate-100": !isFocused, "text-white": isFocused, @@ -102,12 +104,12 @@ export default function SearchInput({
{market && ( diff --git a/src/components/Synthetics/TradeBox/tradeboxConstants.tsx b/src/components/Synthetics/TradeBox/tradeboxConstants.tsx index dc22f422a8..8e413c854f 100644 --- a/src/components/Synthetics/TradeBox/tradeboxConstants.tsx +++ b/src/components/Synthetics/TradeBox/tradeboxConstants.tsx @@ -6,12 +6,6 @@ import LongIcon from "img/long.svg?react"; import ShortIcon from "img/short.svg?react"; import SwapIcon from "img/swap.svg?react"; -import "./TradeBox.scss"; - -export type Props = { - setPendingTxns: (txns: any) => void; -}; - export const tradeTypeIcons = { [TradeType.Long]: , [TradeType.Short]: , From d643ff6fdd9723ca0db09fc38608771d99f7a72c Mon Sep 17 00:00:00 2001 From: midas-myth Date: Thu, 19 Dec 2024 17:46:06 +0100 Subject: [PATCH 16/35] Init release-54 From a1a70765beae6cde06697926610abbf0b7d92c6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hub=C3=A9rt=20de=20Lalye?= Date: Thu, 19 Dec 2024 22:29:48 +0400 Subject: [PATCH 17/35] fixed wallet button styles --- src/App/App.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/App/App.scss b/src/App/App.scss index a02e460e5e..5c7cbe3019 100644 --- a/src/App/App.scss +++ b/src/App/App.scss @@ -706,12 +706,6 @@ button.App-cta { color: var(--color-white); text-decoration: none; background: linear-gradient(90deg, rgba(45, 66, 252, 1) 0%, var(--color-blue-700) 100%); - &:hover:enabled { - background: var(--primary-btn-hover); - } - &:active:enabled { - background: var(--primary-btn-active); - } } .App-cta.small { From 49722afdc83c2ec85f4366e1391eef607f5697c4 Mon Sep 17 00:00:00 2001 From: midas-myth Date: Tue, 10 Dec 2024 15:56:12 +0100 Subject: [PATCH 18/35] Put tradebox in curtain --- src/components/Footer/Footer.css | 4 + src/components/Footer/Footer.tsx | 10 +- .../Synthetics/TradeBox/TradeBox.scss | 11 - .../Synthetics/TradeBox/TradeBox.tsx | 216 ++++++++++-------- src/components/Tab/Tab.scss | 77 +++++++ src/components/Tab/Tab.tsx | 2 +- src/img/swap.svg | 6 +- src/pages/Exchange/Exchange.css | 7 - src/pages/SyntheticsPage/SyntheticsPage.tsx | 39 +++- 9 files changed, 245 insertions(+), 127 deletions(-) create mode 100644 src/components/Tab/Tab.scss diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index cad6f37b6e..d0b98f717e 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -10,6 +10,10 @@ border-top: 1px solid var(--color-slate-700); } +.Footer-wrapper.mobile-trade-page { + padding-bottom: 86px; +} + .Footer-logo { margin-bottom: 2.4rem; display: flex; diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 5ba2c631de..8763ddb8b9 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -16,15 +16,19 @@ import { userAnalytics } from "lib/userAnalytics"; import { LandingPageFooterMenuEvent } from "lib/userAnalytics/types"; import "./Footer.css"; -type Props = { showRedirectModal?: (to: string) => void; redirectPopupTimestamp?: number }; +type Props = { + showRedirectModal?: (to: string) => void; + redirectPopupTimestamp?: number; + isMobileTradePage?: boolean; +}; -export default function Footer({ showRedirectModal, redirectPopupTimestamp }: Props) { +export default function Footer({ showRedirectModal, redirectPopupTimestamp, isMobileTradePage }: Props) { const isHome = isHomeSite(); const [isUserFeedbackModalVisible, setIsUserFeedbackModalVisible] = useState(false); return ( <> -
+
MetaMask
diff --git a/src/components/Synthetics/TradeBox/TradeBox.scss b/src/components/Synthetics/TradeBox/TradeBox.scss index f999cb0563..6a54bb58f1 100644 --- a/src/components/Synthetics/TradeBox/TradeBox.scss +++ b/src/components/Synthetics/TradeBox/TradeBox.scss @@ -7,17 +7,6 @@ padding: 1.05rem; } -.SwapBox-option-tabs.Tab.Tab__block .Tab-option-icon { - margin-top: -0.155rem; - transform: scale(0.75); - vertical-align: middle; - margin-right: 0.8rem; -} - -.SwapBox-asset-options-tabs { - margin: 1.5rem 0; -} - .SwapBox-info-section { margin-bottom: 0.8rem; } diff --git a/src/components/Synthetics/TradeBox/TradeBox.tsx b/src/components/Synthetics/TradeBox/TradeBox.tsx index 7336b12247..c25a9ac876 100644 --- a/src/components/Synthetics/TradeBox/TradeBox.tsx +++ b/src/components/Synthetics/TradeBox/TradeBox.tsx @@ -4,7 +4,7 @@ import cx from "classnames"; import { ChangeEvent, KeyboardEvent, ReactNode, useCallback, useEffect, useMemo, useRef } from "react"; import { IoMdSwap } from "react-icons/io"; import { useHistory } from "react-router-dom"; -import { useKey, useLatest, usePrevious } from "react-use"; +import { useKey, useLatest, useMedia, usePrevious } from "react-use"; import { getBridgingOptionsForToken } from "config/bridging"; import { BASIS_POINTS_DIVISOR, USD_DECIMALS } from "config/factors"; @@ -103,7 +103,6 @@ import useWallet from "lib/wallets/useWallet"; import TokenIcon from "components/TokenIcon/TokenIcon"; import { ExecutionPriceRow } from "../ExecutionPriceRow"; import { NetworkFeeRow } from "../NetworkFeeRow/NetworkFeeRow"; -import { SwapCard } from "../SwapCard/SwapCard"; import { TradeFeesRow } from "../TradeFeesRow/TradeFeesRow"; import { MarketPoolSelectorRow } from "./MarketPoolSelectorRow"; import { CollateralSelectorRow } from "./TradeBoxRows/CollateralSelectorRow"; @@ -159,6 +158,7 @@ export function TradeBox(p: Props) { const chartHeaderInfo = useSelector(selectChartHeaderInfo); const formRef = useRef(null); const isCursorInside = useCursorInside(formRef); + const curtainRef = useRef(null); const allowedSlippage = useSelector(selectTradeboxAllowedSlippage); const { setPendingTxns } = p; @@ -175,6 +175,7 @@ export function TradeBox(p: Props) { const chainId = useSelector(selectChainId); const { account } = useWallet(); const isMetamaskMobile = useIsMetamaskMobile(); + const isMobile = useMedia("(max-width: 1100px)"); const { showDebugValues, shouldDisableValidationForTesting, @@ -814,12 +815,21 @@ export function TradeBox(p: Props) { toTokenInputValue, ]); - function onTradeTypeChange(type: TradeType) { - onSelectTradeType(type); - if (tradeType !== type) { - history.push(`/trade/${type.toLowerCase()}`); - } - } + const onTradeTypeChange = useCallback( + (type: TradeType) => { + onSelectTradeType(type); + if (tradeType !== type) { + history.push(`/trade/${type.toLowerCase()}`); + } + + if (curtainRef.current) { + requestAnimationFrame(() => { + curtainRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }); + }); + } + }, + [history, onSelectTradeType, tradeType] + ); const { onSubmitWrapOrUnwrap, onSubmitSwap, onSubmitIncreaseOrder, onSubmitDecreaseOrder } = useTradeboxTransactions({ setPendingTxns, @@ -1418,100 +1428,120 @@ export function TradeBox(p: Props) { return ( <> -
-
- +
+ {isMobile &&
} +
+
+ {isMobile &&
} + +
+ +
+ +
+ {(isSwap || isIncrease) && renderTokenInputs()} + {isTrigger && renderDecreaseSizeInput()} - - - {(isSwap || isIncrease) && renderTokenInputs()} - {isTrigger && renderDecreaseSizeInput()} - - {isSwap && isLimit && renderTriggerRatioInput()} - {isPosition && (isLimit || isTrigger) && renderTriggerPriceInput()} - - - - {maxAutoCancelOrdersWarning} - {isSwap && isLimit && ( - - - The execution price will constantly vary based on fees and price impact to guarantee that you - receive the minimum receive amount. - - - )} - - - {isPosition && renderPositionControls()} - - - - - - - - - - {isIncrease && renderIncreaseOrderInfo()} - {isTrigger && renderTriggerOrderInfo()} - - - - - - - - - - - - {isTrigger && selectedPosition && decreaseAmounts?.receiveUsd !== undefined && ( + {isSwap && isLimit && renderTriggerRatioInput()} + {isPosition && (isLimit || isTrigger) && renderTriggerPriceInput()} + + - + {maxAutoCancelOrdersWarning} + {isSwap && isLimit && ( + + + The execution price will constantly vary based on fees and price impact to guarantee that you + receive the minimum receive amount. + + + )} - )} - {isSwap && ( + {isPosition && renderPositionControls()} - + + + + + + + + + {isIncrease && renderIncreaseOrderInfo()} + {isTrigger && renderTriggerOrderInfo()} + + + + - )} - {tradeboxWarningRows && {tradeboxWarningRows}} - {triggerConsentRows && {triggerConsentRows}} - -
{button}
- + + + + + + {isTrigger && selectedPosition && decreaseAmounts?.receiveUsd !== undefined && ( + + + + )} + + {isSwap && ( + + + + )} + + {tradeboxWarningRows && {tradeboxWarningRows}} + {triggerConsentRows && {triggerConsentRows}} + +
{button}
+ +
-
- {isSwap && } +
+
); } diff --git a/src/components/Tab/Tab.scss b/src/components/Tab/Tab.scss new file mode 100644 index 0000000000..7d58203723 --- /dev/null +++ b/src/components/Tab/Tab.scss @@ -0,0 +1,77 @@ +.Tab { + &.Tab__block { + display: grid; + grid-auto-flow: column; + font-size: var(--font-size-body-medium); + border-radius: 3px; + overflow: hidden; + background: linear-gradient( + 90deg, + var(--color-cold-blue-900) 0%, + color-mix(in srgb, var(--color-slate-500) 40%, transparent) 100% + ); + box-shadow: inset 0px 0px 30px 5px rgba(255, 255, 255, 0.01); + + .Tab-option { + text-align: center; + padding: 8px 15px; + + color: var(--color-gray-300); + + &.Tab-option-green { + border-bottom: 1px solid transparent; + } + + &.active { + color: var(--color-white); + background: var(--color-blue-600); + + &.Tab-option-green { + color: var(--color-green-500); + background-color: #1f3445; + border-bottom: 1px solid var(--color-green-500); + } + } + + &:not(.active):hover { + background: var(--color-cold-blue-700); + opacity: 0.8; + } + } + } + + &.Tab__inline { + overflow-x: scroll; + white-space: nowrap; + + @apply scrollbar-hide; + + .Tab-option { + margin-right: 15px; + + @apply text-body-medium; + + &.active { + color: var(--color-white); + } + + &:not(.active):hover { + opacity: 0.8; + } + } + } + + .Tab-option { + display: inline-flex; + cursor: pointer; + align-items: center; + justify-content: center; + gap: 8px; + + opacity: 0.7; + + &.active { + opacity: 1; + } + } +} diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx index 5399b57c19..ce25fc5c13 100644 --- a/src/components/Tab/Tab.tsx +++ b/src/components/Tab/Tab.tsx @@ -1,7 +1,7 @@ import cx from "classnames"; import { ReactNode } from "react"; -import "./Tab.css"; +import "./Tab.scss"; type Props = { options: (string | number)[]; diff --git a/src/img/swap.svg b/src/img/swap.svg index d514628e78..69132cbddd 100644 --- a/src/img/swap.svg +++ b/src/img/swap.svg @@ -1 +1,5 @@ - + + + \ No newline at end of file diff --git a/src/pages/Exchange/Exchange.css b/src/pages/Exchange/Exchange.css index 8519cf3be4..933e1edf69 100644 --- a/src/pages/Exchange/Exchange.css +++ b/src/pages/Exchange/Exchange.css @@ -694,13 +694,6 @@ table.Position-list .Exchange-list-item-active { margin-top: 1.5rem; } -.Exchange-swap-option-tabs.Tab.Tab__block .Tab-option-icon { - margin-top: -0.155rem; - transform: scale(0.75); - vertical-align: middle; - margin-right: 0.8rem; -} - .Exchange-swap-section-top { display: grid; grid-template-columns: auto auto; diff --git a/src/pages/SyntheticsPage/SyntheticsPage.tsx b/src/pages/SyntheticsPage/SyntheticsPage.tsx index dd895febba..b1eebb567c 100644 --- a/src/pages/SyntheticsPage/SyntheticsPage.tsx +++ b/src/pages/SyntheticsPage/SyntheticsPage.tsx @@ -8,7 +8,7 @@ import { getSyntheticsListSectionKey } from "config/localStorage"; import { useSettings } from "context/SettingsContext/SettingsContextProvider"; import { useSubaccount, useSubaccountCancelOrdersDetailsMessage } from "context/SubaccountContext/SubaccountContext"; import { useCalcSelector } from "context/SyntheticsStateContext/SyntheticsStateContextProvider"; -import { useClosingPositionKeyState } from "context/SyntheticsStateContext/hooks/globalsHooks"; +import { useClosingPositionKeyState, useTokensData } from "context/SyntheticsStateContext/hooks/globalsHooks"; import { useCancellingOrdersKeysState } from "context/SyntheticsStateContext/hooks/orderEditorHooks"; import { useOrderErrorsCount } from "context/SyntheticsStateContext/hooks/orderHooks"; import { selectChartToken } from "context/SyntheticsStateContext/selectors/chartSelectors"; @@ -16,7 +16,9 @@ import { selectClaimablesCount } from "context/SyntheticsStateContext/selectors/ import { selectChainId, selectPositionsInfoData } from "context/SyntheticsStateContext/selectors/globalSelectors"; import { selectOrdersCount } from "context/SyntheticsStateContext/selectors/orderSelectors"; import { + selectTradeboxMaxLiquidityPath, selectTradeboxSetActivePosition, + selectTradeboxState, selectTradeboxTradeFlags, } from "context/SyntheticsStateContext/selectors/tradeboxSelectors"; import { useSelector } from "context/SyntheticsStateContext/utils"; @@ -54,6 +56,7 @@ import { useMedia } from "react-use"; import { useMeasureComponentMountTime } from "lib/metrics"; import { useSetOrdersAutoCancelByQueryParams } from "domain/synthetics/orders/useSetOrdersAutoCancelByQueryParams"; import { getTokenVisualMultiplier } from "config/tokens"; +import { SwapCard } from "components/Synthetics/SwapCard/SwapCard"; export type Props = { openSettings: () => void; @@ -115,6 +118,12 @@ export function SyntheticsPage(p: Props) { setOrderTypesFilter, } = useOrdersControl(); + const { maxLiquidity: swapOutLiquidity } = useSelector(selectTradeboxMaxLiquidityPath); + const tokensData = useTokensData(); + const { fromTokenAddress, toTokenAddress } = useSelector(selectTradeboxState); + const fromToken = getByKey(tokensData, fromTokenAddress); + const toToken = getByKey(tokensData, toTokenAddress); + const [selectedPositionOrderKey, setSelectedPositionOrderKey] = useState(); const handlePositionListOrdersClick = useCallback( @@ -238,8 +247,12 @@ export function SyntheticsPage(p: Props) { useMeasureComponentMountTime({ metricType: "syntheticsPage", onlyForLocation: "#/trade" }); return ( -
-
+
+
{!isMobile && ( @@ -306,10 +319,17 @@ export function SyntheticsPage(p: Props) { )}
-
-
- -
+
+ + {isSwap && ( +
+ +
+ )}
{isMobile && ( @@ -352,14 +372,11 @@ export function SyntheticsPage(p: Props) {
)}
- - - -
+
); } From aef0608cb57b78606ca78b5df696007a3bc0d979 Mon Sep 17 00:00:00 2001 From: midas-myth Date: Tue, 10 Dec 2024 16:22:00 +0100 Subject: [PATCH 19/35] Sticky tradebox support ios safe area --- src/components/Synthetics/TradeBox/TradeBox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Synthetics/TradeBox/TradeBox.tsx b/src/components/Synthetics/TradeBox/TradeBox.tsx index c25a9ac876..3c75d11390 100644 --- a/src/components/Synthetics/TradeBox/TradeBox.tsx +++ b/src/components/Synthetics/TradeBox/TradeBox.tsx @@ -1435,13 +1435,13 @@ export function TradeBox(p: Props) { : "" } > - {isMobile &&
} + {isMobile &&
}
From db24bf9eb3a8555a11259088aeb402adc4eef68f Mon Sep 17 00:00:00 2001 From: midas-myth Date: Wed, 11 Dec 2024 16:00:58 +0100 Subject: [PATCH 20/35] Make first iteration of new tradebox in curtain work in safari --- .../Synthetics/TradeBox/TradeBox.tsx | 57 ++++++++++++++++--- 1 file changed, 50 insertions(+), 7 deletions(-) diff --git a/src/components/Synthetics/TradeBox/TradeBox.tsx b/src/components/Synthetics/TradeBox/TradeBox.tsx index 3c75d11390..8f4c405d45 100644 --- a/src/components/Synthetics/TradeBox/TradeBox.tsx +++ b/src/components/Synthetics/TradeBox/TradeBox.tsx @@ -1,7 +1,7 @@ import { Trans, t } from "@lingui/macro"; import { useConnectModal } from "@rainbow-me/rainbowkit"; import cx from "classnames"; -import { ChangeEvent, KeyboardEvent, ReactNode, useCallback, useEffect, useMemo, useRef } from "react"; +import { ChangeEvent, KeyboardEvent, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react"; import { IoMdSwap } from "react-icons/io"; import { useHistory } from "react-router-dom"; import { useKey, useLatest, useMedia, usePrevious } from "react-use"; @@ -1426,14 +1426,46 @@ export function TradeBox(p: Props) { buttonContent ); + const curtainScrollContainerRef = useRef(null); + const handleBarRef = useRef(null); + const [isAboveHalf, setIsAboveHalf] = useState(false); + const isAboveHalfRef = useRef(false); + + useEffect(() => { + const curtainScrollContainer = curtainScrollContainerRef.current; + if (!curtainScrollContainer) return; + + const handleScroll = (e: Event) => { + const target = e.target! as HTMLDivElement; + if (target.scrollTop > 100) { + if (!isAboveHalfRef.current) { + setIsAboveHalf(true); + isAboveHalfRef.current = true; + } + } else { + if (isAboveHalfRef.current) { + setIsAboveHalf(false); + isAboveHalfRef.current = false; + } + } + }; + + curtainScrollContainer.addEventListener("scroll", handleScroll, { passive: true }); + + return () => { + curtainScrollContainer.removeEventListener("scroll", handleScroll); + }; + }, []); + return ( <>
{isMobile &&
}
-
- {isMobile &&
} +
+ {isMobile && ( +
+ )} + {isMobile &&
}
-
+
- -
); From 8e27474bcbd1563f683e644973dfb6e31931b5d3 Mon Sep 17 00:00:00 2001 From: midas-myth Date: Thu, 12 Dec 2024 17:06:35 +0100 Subject: [PATCH 21/35] Sticky tradebox with framer motion --- .../Synthetics/TradeBox/Curtain.tsx | 111 ++++++++ .../Synthetics/TradeBox/TradeBox.tsx | 258 ++++++------------ .../TradeBox/TradeBoxHeaderTabs.tsx | 61 +++++ .../TradeBox/TradeBoxResponsiveContainer.tsx | 24 ++ src/pages/SyntheticsPage/SyntheticsPage.tsx | 4 +- 5 files changed, 275 insertions(+), 183 deletions(-) create mode 100644 src/components/Synthetics/TradeBox/Curtain.tsx create mode 100644 src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx create mode 100644 src/components/Synthetics/TradeBox/TradeBoxResponsiveContainer.tsx diff --git a/src/components/Synthetics/TradeBox/Curtain.tsx b/src/components/Synthetics/TradeBox/Curtain.tsx new file mode 100644 index 0000000000..f8bea9f731 --- /dev/null +++ b/src/components/Synthetics/TradeBox/Curtain.tsx @@ -0,0 +1,111 @@ +import cx from "classnames"; +import { AnimationProps, DragHandlers, DraggableProps, PanInfo, motion, useDragControls } from "framer-motion"; +import { PropsWithChildren, useCallback, useRef } from "react"; +import { useMedia } from "react-use"; + +const DRAG_TRANSITION: DraggableProps["dragTransition"] = { + power: 1, + timeConstant: 100, + modifyTarget: (target) => { + const half = (-window.innerHeight + 86) / 2; + + return target > half ? -86 : -window.innerHeight + 86; + }, +}; + +const DRAG_CONSTRAINTS: DraggableProps["dragConstraints"] = { bottom: -86, top: -window.innerHeight + 86 }; +const CURTAIN_DRAG_ELASTIC: DraggableProps["dragElastic"] = { bottom: 0.5, top: 0 }; +const INNER_DRAG_ELASTIC: DraggableProps["dragElastic"] = { bottom: 0, top: 0.5 }; + +const INITIAL: AnimationProps["initial"] = { y: -86 }; + +export function Curtain({ + children, + header, + dataQa, + // headerHeight = 86, +}: PropsWithChildren<{ + header: React.ReactNode; + dataQa?: string; + // headerHeight?: number; +}>) { + const curtainRef = useRef(null); + const innerContainerRef = useRef(null); + const innerRef = useRef(null); + const isMobile = useMedia("(max-width: 1100px)"); + + const curtainDragControls = useDragControls(); + const isDraggingCurtain = useRef(false); + + const handleCurtainPointerDown = useCallback( + (event: React.PointerEvent) => { + if (innerContainerRef.current?.contains(event.target as HTMLElement)) { + return; + } + + curtainDragControls.start(event); + }, + [curtainDragControls] + ); + + const handleInnerDragEnd = useCallback(() => { + isDraggingCurtain.current = false; + }, []); + + const handleInnerDrag: DragHandlers["onDrag"] = useCallback( + (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => { + if (!innerRef.current || !innerContainerRef.current) return; + + const { y: containerY } = innerContainerRef.current.getBoundingClientRect(); + const { y: innerY } = innerRef.current.getBoundingClientRect(); + + const isAtTop = innerY >= containerY; + const isMovingDown = info.delta.y >= 0; + + if (isAtTop && isMovingDown && !isDraggingCurtain.current) { + isDraggingCurtain.current = true; + + curtainDragControls.start(event as any); + } + }, + [curtainDragControls, isDraggingCurtain] + ); + + return ( + + {header} + + + + {children} + + + + ); +} diff --git a/src/components/Synthetics/TradeBox/TradeBox.tsx b/src/components/Synthetics/TradeBox/TradeBox.tsx index 8f4c405d45..e27f825cdb 100644 --- a/src/components/Synthetics/TradeBox/TradeBox.tsx +++ b/src/components/Synthetics/TradeBox/TradeBox.tsx @@ -1,10 +1,9 @@ import { Trans, t } from "@lingui/macro"; import { useConnectModal } from "@rainbow-me/rainbowkit"; import cx from "classnames"; -import { ChangeEvent, KeyboardEvent, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { ChangeEvent, KeyboardEvent, ReactNode, useCallback, useEffect, useMemo, useRef } from "react"; import { IoMdSwap } from "react-icons/io"; -import { useHistory } from "react-router-dom"; -import { useKey, useLatest, useMedia, usePrevious } from "react-use"; +import { useKey, useLatest, usePrevious } from "react-use"; import { getBridgingOptionsForToken } from "config/bridging"; import { BASIS_POINTS_DIVISOR, USD_DECIMALS } from "config/factors"; @@ -97,6 +96,7 @@ import { EMPTY_ARRAY, getByKey } from "lib/objects"; import { sleep } from "lib/sleep"; import { mustNeverExist } from "lib/types"; import { useCursorInside } from "lib/useCursorInside"; +import { usePendingTxns } from "lib/usePendingTxns"; import useIsMetamaskMobile from "lib/wallets/useIsMetamaskMobile"; import useWallet from "lib/wallets/useWallet"; @@ -146,11 +146,8 @@ import { tradeModeLabels, tradeTypeClassNames, tradeTypeIcons, tradeTypeLabels } import "./TradeBox.scss"; -export type Props = { - setPendingTxns: (txns: any) => void; -}; - -export function TradeBox(p: Props) { +export function TradeBox({ isInCurtain }: { isInCurtain?: boolean }) { + const [, setPendingTxns] = usePendingTxns(); const localizedTradeModeLabels = useLocalizedMap(tradeModeLabels); const localizedTradeTypeLabels = useLocalizedMap(tradeTypeLabels); @@ -158,13 +155,10 @@ export function TradeBox(p: Props) { const chartHeaderInfo = useSelector(selectChartHeaderInfo); const formRef = useRef(null); const isCursorInside = useCursorInside(formRef); - const curtainRef = useRef(null); const allowedSlippage = useSelector(selectTradeboxAllowedSlippage); - const { setPendingTxns } = p; const { openConnectModal } = useConnectModal(); - const history = useHistory(); const { swapTokens, infoTokens, sortedLongAndShortTokens, sortedAllMarkets } = avaialbleTokenOptions; const tokensData = useTokensData(); const marketsInfoData = useMarketsInfoData(); @@ -175,7 +169,6 @@ export function TradeBox(p: Props) { const chainId = useSelector(selectChainId); const { account } = useWallet(); const isMetamaskMobile = useIsMetamaskMobile(); - const isMobile = useMedia("(max-width: 1100px)"); const { showDebugValues, shouldDisableValidationForTesting, @@ -196,7 +189,6 @@ export function TradeBox(p: Props) { setToTokenInputValue: setToTokenInputValueRaw, setCollateralAddress: onSelectCollateralAddress, setFromTokenAddress: onSelectFromTokenAddress, - setTradeType: onSelectTradeType, setTradeMode: onSelectTradeMode, stage, setStage, @@ -815,22 +807,6 @@ export function TradeBox(p: Props) { toTokenInputValue, ]); - const onTradeTypeChange = useCallback( - (type: TradeType) => { - onSelectTradeType(type); - if (tradeType !== type) { - history.push(`/trade/${type.toLowerCase()}`); - } - - if (curtainRef.current) { - requestAnimationFrame(() => { - curtainRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }); - }); - } - }, - [history, onSelectTradeType, tradeType] - ); - const { onSubmitWrapOrUnwrap, onSubmitSwap, onSubmitIncreaseOrder, onSubmitDecreaseOrder } = useTradeboxTransactions({ setPendingTxns, }); @@ -1426,165 +1402,85 @@ export function TradeBox(p: Props) { buttonContent ); - const curtainScrollContainerRef = useRef(null); - const handleBarRef = useRef(null); - const [isAboveHalf, setIsAboveHalf] = useState(false); - const isAboveHalfRef = useRef(false); - - useEffect(() => { - const curtainScrollContainer = curtainScrollContainerRef.current; - if (!curtainScrollContainer) return; - - const handleScroll = (e: Event) => { - const target = e.target! as HTMLDivElement; - if (target.scrollTop > 100) { - if (!isAboveHalfRef.current) { - setIsAboveHalf(true); - isAboveHalfRef.current = true; - } - } else { - if (isAboveHalfRef.current) { - setIsAboveHalf(false); - isAboveHalfRef.current = false; - } - } - }; - - curtainScrollContainer.addEventListener("scroll", handleScroll, { passive: true }); - - return () => { - curtainScrollContainer.removeEventListener("scroll", handleScroll); - }; - }, []); - return ( <> -
- {isMobile &&
} -
-
+
+ {(isSwap || isIncrease) && renderTokenInputs()} + {isTrigger && renderDecreaseSizeInput()} + + {isSwap && isLimit && renderTriggerRatioInput()} + {isPosition && (isLimit || isTrigger) && renderTriggerPriceInput()} + + + + {maxAutoCancelOrdersWarning} + {isSwap && isLimit && ( + + + The execution price will constantly vary based on fees and price impact to guarantee that you receive + the minimum receive amount. + + )} - > - {isMobile && ( -
+ + {isPosition && renderPositionControls()} + + + + + + + + + + {isIncrease && renderIncreaseOrderInfo()} + {isTrigger && renderTriggerOrderInfo()} + + + + + + + + + + + + {isTrigger && selectedPosition && decreaseAmounts?.receiveUsd !== undefined && ( + + - )} - - {isMobile &&
} -
- -
- - - {(isSwap || isIncrease) && renderTokenInputs()} - {isTrigger && renderDecreaseSizeInput()} - - {isSwap && isLimit && renderTriggerRatioInput()} - {isPosition && (isLimit || isTrigger) && renderTriggerPriceInput()} - - - - {maxAutoCancelOrdersWarning} - {isSwap && isLimit && ( - - - The execution price will constantly vary based on fees and price impact to guarantee that you - receive the minimum receive amount. - - - )} - - - {isPosition && renderPositionControls()} - - - - - - - - - - {isIncrease && renderIncreaseOrderInfo()} - {isTrigger && renderTriggerOrderInfo()} - - - - - - - - - - - - {isTrigger && selectedPosition && decreaseAmounts?.receiveUsd !== undefined && ( - - - - )} + + )} - {isSwap && ( - - - - )} + {isSwap && ( + + + + )} - {tradeboxWarningRows && {tradeboxWarningRows}} - {triggerConsentRows && {triggerConsentRows}} - -
{button}
- -
-
-
+ {tradeboxWarningRows && {tradeboxWarningRows}} + {triggerConsentRows && {triggerConsentRows}} + +
{button}
+ ); } diff --git a/src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx b/src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx new file mode 100644 index 0000000000..95376867b0 --- /dev/null +++ b/src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx @@ -0,0 +1,61 @@ +import { msg } from "@lingui/macro"; +import cx from "classnames"; +import { useCallback } from "react"; +import { useHistory } from "react-router-dom"; + +import { selectTradeboxState } from "context/SyntheticsStateContext/selectors/tradeboxSelectors"; +import { useSelector } from "context/SyntheticsStateContext/utils"; +import { TradeType } from "domain/synthetics/trade"; +import { useLocalizedMap } from "lib/i18n"; + +import Tab from "components/Tab/Tab"; + +import LongIcon from "img/long.svg?react"; +import ShortIcon from "img/short.svg?react"; +import SwapIcon from "img/swap.svg?react"; + +import "./TradeBox.scss"; + +const tradeTypeIcons = { + [TradeType.Long]: , + [TradeType.Short]: , + [TradeType.Swap]: , +}; + +const tradeTypeLabels = { + [TradeType.Long]: msg`Long`, + [TradeType.Short]: msg`Short`, + [TradeType.Swap]: msg`Swap`, +}; + +export function TradeBoxHeaderTabs({ isInCurtain }: { isInCurtain?: boolean }) { + const localizedTradeTypeLabels = useLocalizedMap(tradeTypeLabels); + const history = useHistory(); + const { setTradeType: onSelectTradeType, tradeType } = useSelector(selectTradeboxState); + + const onTradeTypeChange = useCallback( + (type: TradeType) => { + onSelectTradeType(type); + if (tradeType !== type) { + history.push(`/trade/${type.toLowerCase()}`); + } + }, + [history, onSelectTradeType, tradeType] + ); + + return ( +
+ {isInCurtain &&
} + +
+ ); +} diff --git a/src/components/Synthetics/TradeBox/TradeBoxResponsiveContainer.tsx b/src/components/Synthetics/TradeBox/TradeBoxResponsiveContainer.tsx new file mode 100644 index 0000000000..ba01b4c05f --- /dev/null +++ b/src/components/Synthetics/TradeBox/TradeBoxResponsiveContainer.tsx @@ -0,0 +1,24 @@ +import { useMedia } from "react-use"; + +import { Curtain } from "./Curtain"; +import { TradeBox } from "./TradeBox"; +import { TradeBoxHeaderTabs } from "./TradeBoxHeaderTabs"; + +export function TradeBoxResponsiveContainer() { + const isMobile = useMedia("(max-width: 1100px)"); + + if (!isMobile) { + return ( +
+ + +
+ ); + } + + return ( + } dataQa="tradebox"> + + + ); +} diff --git a/src/pages/SyntheticsPage/SyntheticsPage.tsx b/src/pages/SyntheticsPage/SyntheticsPage.tsx index b1eebb567c..99a7d45c29 100644 --- a/src/pages/SyntheticsPage/SyntheticsPage.tsx +++ b/src/pages/SyntheticsPage/SyntheticsPage.tsx @@ -48,7 +48,6 @@ import { PositionEditor } from "components/Synthetics/PositionEditor/PositionEdi import { PositionList } from "components/Synthetics/PositionList/PositionList"; import { PositionSeller } from "components/Synthetics/PositionSeller/PositionSeller"; import { TVChart } from "components/Synthetics/TVChart/TVChart"; -import { TradeBox } from "components/Synthetics/TradeBox/TradeBox"; import { TradeHistory } from "components/Synthetics/TradeHistory/TradeHistory"; import Tab from "components/Tab/Tab"; import { useInterviewNotification } from "domain/synthetics/userFeedback/useInterviewNotification"; @@ -57,6 +56,7 @@ import { useMeasureComponentMountTime } from "lib/metrics"; import { useSetOrdersAutoCancelByQueryParams } from "domain/synthetics/orders/useSetOrdersAutoCancelByQueryParams"; import { getTokenVisualMultiplier } from "config/tokens"; import { SwapCard } from "components/Synthetics/SwapCard/SwapCard"; +import { TradeBoxResponsiveContainer } from "components/Synthetics/TradeBox/TradeBoxResponsiveContainer"; export type Props = { openSettings: () => void; @@ -324,7 +324,7 @@ export function SyntheticsPage(p: Props) { absolute: isMobile && !isSwap, })} > - + {isSwap && (
From 1a1eb26c8b5d85ef1762512135d62d3b36802686 Mon Sep 17 00:00:00 2001 From: midas-myth Date: Thu, 12 Dec 2024 17:11:18 +0100 Subject: [PATCH 22/35] Sync translation --- src/locales/de/messages.po | 3 +++ src/locales/en/messages.po | 3 +++ src/locales/es/messages.po | 3 +++ src/locales/fr/messages.po | 3 +++ src/locales/ja/messages.po | 3 +++ src/locales/ko/messages.po | 3 +++ src/locales/pseudo/messages.po | 3 +++ src/locales/ru/messages.po | 3 +++ src/locales/zh/messages.po | 3 +++ 9 files changed, 27 insertions(+) diff --git a/src/locales/de/messages.po b/src/locales/de/messages.po index 331306e3fb..40c5b52b48 100644 --- a/src/locales/de/messages.po +++ b/src/locales/de/messages.po @@ -3731,6 +3731,7 @@ msgstr "Trigger-Preis für den Auftrag." #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -6699,6 +6700,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7486,6 +7488,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "Swap" diff --git a/src/locales/en/messages.po b/src/locales/en/messages.po index 96f0e94427..d2ee16217a 100644 --- a/src/locales/en/messages.po +++ b/src/locales/en/messages.po @@ -3734,6 +3734,7 @@ msgstr "Trigger price for the order." #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -6705,6 +6706,7 @@ msgstr "Shift error." #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7492,6 +7494,7 @@ msgstr "Activate Subaccount" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "Swap" diff --git a/src/locales/es/messages.po b/src/locales/es/messages.po index 1bcff6c3a7..8921a33e28 100644 --- a/src/locales/es/messages.po +++ b/src/locales/es/messages.po @@ -3731,6 +3731,7 @@ msgstr "Precio de activación para la orden." #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -6699,6 +6700,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7486,6 +7488,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "Intercambiar" diff --git a/src/locales/fr/messages.po b/src/locales/fr/messages.po index 7fe9b2590c..7de9b4e140 100644 --- a/src/locales/fr/messages.po +++ b/src/locales/fr/messages.po @@ -3731,6 +3731,7 @@ msgstr "Prix de déclenchement pour l'ordre." #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -6699,6 +6700,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7486,6 +7488,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "Échanger" diff --git a/src/locales/ja/messages.po b/src/locales/ja/messages.po index 1e3db8841a..9b97650158 100644 --- a/src/locales/ja/messages.po +++ b/src/locales/ja/messages.po @@ -3731,6 +3731,7 @@ msgstr "注文のトリガー価格" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -6699,6 +6700,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7486,6 +7488,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "スワップ" diff --git a/src/locales/ko/messages.po b/src/locales/ko/messages.po index b5ffbfe455..84c23e0ed5 100644 --- a/src/locales/ko/messages.po +++ b/src/locales/ko/messages.po @@ -3731,6 +3731,7 @@ msgstr "주문의 트리거 가격입니다." #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -6699,6 +6700,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7486,6 +7488,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "스왑" diff --git a/src/locales/pseudo/messages.po b/src/locales/pseudo/messages.po index 90823d572e..3b6eb5f994 100644 --- a/src/locales/pseudo/messages.po +++ b/src/locales/pseudo/messages.po @@ -3731,6 +3731,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -6699,6 +6700,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7486,6 +7488,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "" diff --git a/src/locales/ru/messages.po b/src/locales/ru/messages.po index f71ecf6657..6aa62a0a87 100644 --- a/src/locales/ru/messages.po +++ b/src/locales/ru/messages.po @@ -3731,6 +3731,7 @@ msgstr "Цена триггера для ордера." #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -6699,6 +6700,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7486,6 +7488,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "Обмен" diff --git a/src/locales/zh/messages.po b/src/locales/zh/messages.po index f665fd3475..8c66a216e2 100644 --- a/src/locales/zh/messages.po +++ b/src/locales/zh/messages.po @@ -3731,6 +3731,7 @@ msgstr "订单的触发价格" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -6699,6 +6700,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/TableMarketFilter/MarketFilterLongShort.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/components/Synthetics/TradeHistory/TradeHistoryRow/utils/position.ts #: src/components/Synthetics/TVChart/components/AvailableLiquidityTooltip.tsx #: src/components/Synthetics/TVChart/TVChart.tsx @@ -7486,6 +7488,7 @@ msgstr "" #: src/components/Synthetics/StatusNotification/OrderStatusNotification.tsx #: src/components/Synthetics/SwapCard/SwapCard.tsx #: src/components/Synthetics/TradeBox/tradeboxConstants.tsx +#: src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx #: src/pages/OrdersOverview/OrdersOverview.jsx msgid "Swap" msgstr "交易" From 38814f65ae30ee6f4aa367d49650e7f28e4a63bf Mon Sep 17 00:00:00 2001 From: midas-myth Date: Thu, 12 Dec 2024 19:08:26 +0100 Subject: [PATCH 23/35] Last effort to optimize framer motion for new tradebox --- package.json | 2 +- .../Synthetics/TradeBox/Curtain.tsx | 28 ++++++++++++----- yarn.lock | 30 ++++++++++++++----- 3 files changed, 44 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 2017da9610..53e5a264f3 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "eslint-config-recommended": "4.1.0", "eth-testing": "1.9.1", "ethers": "6.12.1", - "framer-motion": "11.1.9", + "framer-motion": "11.14.1", "graphql": "15.8.0", "hex-to-rgba": "2.0.1", "html-to-image": "^1.10.8", diff --git a/src/components/Synthetics/TradeBox/Curtain.tsx b/src/components/Synthetics/TradeBox/Curtain.tsx index f8bea9f731..ac65166ef7 100644 --- a/src/components/Synthetics/TradeBox/Curtain.tsx +++ b/src/components/Synthetics/TradeBox/Curtain.tsx @@ -1,29 +1,34 @@ import cx from "classnames"; import { AnimationProps, DragHandlers, DraggableProps, PanInfo, motion, useDragControls } from "framer-motion"; -import { PropsWithChildren, useCallback, useRef } from "react"; +import { PropsWithChildren, useCallback, useMemo, useRef } from "react"; import { useMedia } from "react-use"; +const HEADER_HEIGHT = 86; + const DRAG_TRANSITION: DraggableProps["dragTransition"] = { power: 1, timeConstant: 100, modifyTarget: (target) => { - const half = (-window.innerHeight + 86) / 2; + const half = (-window.innerHeight + HEADER_HEIGHT) / 2; - return target > half ? -86 : -window.innerHeight + 86; + return target > half ? -HEADER_HEIGHT : -window.innerHeight + HEADER_HEIGHT; }, }; -const DRAG_CONSTRAINTS: DraggableProps["dragConstraints"] = { bottom: -86, top: -window.innerHeight + 86 }; +const DRAG_CONSTRAINTS: DraggableProps["dragConstraints"] = { + bottom: -HEADER_HEIGHT, + top: -window.innerHeight + HEADER_HEIGHT, +}; const CURTAIN_DRAG_ELASTIC: DraggableProps["dragElastic"] = { bottom: 0.5, top: 0 }; const INNER_DRAG_ELASTIC: DraggableProps["dragElastic"] = { bottom: 0, top: 0.5 }; -const INITIAL: AnimationProps["initial"] = { y: -86 }; +const INITIAL: AnimationProps["initial"] = { y: -HEADER_HEIGHT }; export function Curtain({ children, header, dataQa, - // headerHeight = 86, + // headerHeight = HEADER_HEIGHT, }: PropsWithChildren<{ header: React.ReactNode; dataQa?: string; @@ -71,6 +76,12 @@ export function Curtain({ [curtainDragControls, isDraggingCurtain] ); + const curtainStyle = useMemo(() => { + return { + maxHeight: `calc(100dvh - ${HEADER_HEIGHT}px)`, + }; + }, []); + return ( {header} @@ -101,7 +113,7 @@ export function Curtain({ onDrag={handleInnerDrag} dragConstraints={innerContainerRef} dragElastic={INNER_DRAG_ELASTIC} - className={cx(isMobile ? "touch-none px-15 pb-10" : "")} + className={cx(isMobile ? "touch-none px-15 pb-10 will-change-transform" : "")} > {children} diff --git a/yarn.lock b/yarn.lock index 327d9a9947..d0b80b07d8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9561,15 +9561,17 @@ __metadata: languageName: node linkType: hard -"framer-motion@npm:11.1.9": - version: 11.1.9 - resolution: "framer-motion@npm:11.1.9" +"framer-motion@npm:11.14.1": + version: 11.14.1 + resolution: "framer-motion@npm:11.14.1" dependencies: + motion-dom: ^11.14.1 + motion-utils: ^11.14.1 tslib: ^2.4.0 peerDependencies: "@emotion/is-prop-valid": "*" - react: ^18.0.0 - react-dom: ^18.0.0 + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 peerDependenciesMeta: "@emotion/is-prop-valid": optional: true @@ -9577,7 +9579,7 @@ __metadata: optional: true react-dom: optional: true - checksum: a7dcd8bfa1780fe8364c7e039a6e37d94edcdec6ee618355d649aab99451cb666ee4c2b5b8b5d2bcd1ccdba44fbb2cdd57deed9325c503d544d3f9a34fdfce27 + checksum: 6a540564c8faf0239996517891fa4ad3ee950cf3a0628cc088b3d2a7f1f097e9f8e6e8575cb053a3185f47d26e1022a2fbf9ed97c300beabbd77d7b579ffd229 languageName: node linkType: hard @@ -9949,7 +9951,7 @@ __metadata: eslint-plugin-react-perf: 3.3.2 eth-testing: 1.9.1 ethers: 6.12.1 - framer-motion: 11.1.9 + framer-motion: 11.14.1 graphql: 15.8.0 happy-dom: 14.12.3 hex-to-rgba: 2.0.1 @@ -11931,6 +11933,20 @@ __metadata: languageName: node linkType: hard +"motion-dom@npm:^11.14.1": + version: 11.14.1 + resolution: "motion-dom@npm:11.14.1" + checksum: 5b0f88b6ffa1b8d299b98879594d9b3c723e9c19c8ed36c115fa09bfe7c8ee01c53116c914589dade4a4f9d3e0bc5843775f0f6ff0dac2c7cb6705ffd3a33b8b + languageName: node + linkType: hard + +"motion-utils@npm:^11.14.1": + version: 11.14.1 + resolution: "motion-utils@npm:11.14.1" + checksum: 0ac4cfc12761a0ceec85cc3d0fb99de269914c82cb2eaa7735deef22ecddfbd2a1bb206a66ffe997c530f818e2517419f3b69b3e1c14478384cb54e50b4a6331 + languageName: node + linkType: hard + "motion@npm:10.16.2": version: 10.16.2 resolution: "motion@npm:10.16.2" From 2bba897195dea65e1872bb4a0cadc2533f8ad460 Mon Sep 17 00:00:00 2001 From: midas-myth Date: Thu, 12 Dec 2024 19:54:31 +0100 Subject: [PATCH 24/35] No scroll ssticky tradebox --- .../Synthetics/TradeBox/Curtain.tsx | 119 ++++-------------- .../TradeBox/TradeBoxHeaderTabs.tsx | 4 +- 2 files changed, 28 insertions(+), 95 deletions(-) diff --git a/src/components/Synthetics/TradeBox/Curtain.tsx b/src/components/Synthetics/TradeBox/Curtain.tsx index ac65166ef7..95ec3dc952 100644 --- a/src/components/Synthetics/TradeBox/Curtain.tsx +++ b/src/components/Synthetics/TradeBox/Curtain.tsx @@ -1,123 +1,58 @@ import cx from "classnames"; -import { AnimationProps, DragHandlers, DraggableProps, PanInfo, motion, useDragControls } from "framer-motion"; -import { PropsWithChildren, useCallback, useMemo, useRef } from "react"; -import { useMedia } from "react-use"; +import Button from "components/Button/Button"; -const HEADER_HEIGHT = 86; +import { PropsWithChildren, useMemo, useRef, useState } from "react"; -const DRAG_TRANSITION: DraggableProps["dragTransition"] = { - power: 1, - timeConstant: 100, - modifyTarget: (target) => { - const half = (-window.innerHeight + HEADER_HEIGHT) / 2; +import LeftArrowIcon from "img/ic_arrowleft16.svg?react"; - return target > half ? -HEADER_HEIGHT : -window.innerHeight + HEADER_HEIGHT; - }, -}; - -const DRAG_CONSTRAINTS: DraggableProps["dragConstraints"] = { - bottom: -HEADER_HEIGHT, - top: -window.innerHeight + HEADER_HEIGHT, -}; -const CURTAIN_DRAG_ELASTIC: DraggableProps["dragElastic"] = { bottom: 0.5, top: 0 }; -const INNER_DRAG_ELASTIC: DraggableProps["dragElastic"] = { bottom: 0, top: 0.5 }; - -const INITIAL: AnimationProps["initial"] = { y: -HEADER_HEIGHT }; +const HEADER_HEIGHT = 52; export function Curtain({ children, header, dataQa, - // headerHeight = HEADER_HEIGHT, }: PropsWithChildren<{ header: React.ReactNode; dataQa?: string; - // headerHeight?: number; }>) { const curtainRef = useRef(null); const innerContainerRef = useRef(null); const innerRef = useRef(null); - const isMobile = useMedia("(max-width: 1100px)"); - - const curtainDragControls = useDragControls(); - const isDraggingCurtain = useRef(false); - - const handleCurtainPointerDown = useCallback( - (event: React.PointerEvent) => { - if (innerContainerRef.current?.contains(event.target as HTMLElement)) { - return; - } - - curtainDragControls.start(event); - }, - [curtainDragControls] - ); - - const handleInnerDragEnd = useCallback(() => { - isDraggingCurtain.current = false; - }, []); - const handleInnerDrag: DragHandlers["onDrag"] = useCallback( - (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => { - if (!innerRef.current || !innerContainerRef.current) return; - - const { y: containerY } = innerContainerRef.current.getBoundingClientRect(); - const { y: innerY } = innerRef.current.getBoundingClientRect(); - - const isAtTop = innerY >= containerY; - const isMovingDown = info.delta.y >= 0; - - if (isAtTop && isMovingDown && !isDraggingCurtain.current) { - isDraggingCurtain.current = true; - - curtainDragControls.start(event as any); - } - }, - [curtainDragControls, isDraggingCurtain] - ); + const [isOpen, setIsOpen] = useState(false); const curtainStyle = useMemo(() => { return { + top: `calc(100dvh - ${HEADER_HEIGHT}px)`, maxHeight: `calc(100dvh - ${HEADER_HEIGHT}px)`, + transform: `translateY(${isOpen ? `calc(-100% + ${HEADER_HEIGHT}px)` : 0})`, + transition: "transform 150ms ease-out", }; - }, []); + }, [isOpen]); return ( - - {header} - - - +
+ {header} + + +
+ +
+
{children} - - - +
+
+
); } diff --git a/src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx b/src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx index 95376867b0..e82ee707d3 100644 --- a/src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx +++ b/src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx @@ -44,15 +44,13 @@ export function TradeBoxHeaderTabs({ isInCurtain }: { isInCurtain?: boolean }) { ); return ( -
- {isInCurtain &&
} +
From cdf4e6cffed9664e4fe43a97c5251725230495f3 Mon Sep 17 00:00:00 2001 From: midas-myth Date: Thu, 12 Dec 2024 21:18:24 +0100 Subject: [PATCH 25/35] Tradebox curtain open on any click --- .../Synthetics/TradeBox/Curtain.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/src/components/Synthetics/TradeBox/Curtain.tsx b/src/components/Synthetics/TradeBox/Curtain.tsx index 95ec3dc952..03091bd0e8 100644 --- a/src/components/Synthetics/TradeBox/Curtain.tsx +++ b/src/components/Synthetics/TradeBox/Curtain.tsx @@ -1,7 +1,7 @@ import cx from "classnames"; import Button from "components/Button/Button"; -import { PropsWithChildren, useMemo, useRef, useState } from "react"; +import { PropsWithChildren, useCallback, useMemo, useRef, useState } from "react"; import LeftArrowIcon from "img/ic_arrowleft16.svg?react"; @@ -30,6 +30,14 @@ export function Curtain({ }; }, [isOpen]); + const headerClick = useCallback(() => { + setIsOpen(true); + }, []); + + const handleClick = useCallback(() => { + setIsOpen((prev) => !prev); + }, []); + return (
-
- {header} - - -
+ style={curtainStyle} + > +
+
+ {header} +
+ +
-
-
- {children} +
+
+ {children} +
+
-
-
+ + ); } From ae88fedfd064d85755064d70f7ebe92278a1cae7 Mon Sep 17 00:00:00 2001 From: midas-myth Date: Fri, 13 Dec 2024 14:13:20 +0100 Subject: [PATCH 27/35] Enhance instant tradebox curtain --- src/components/Synthetics/TradeBox/Curtain.tsx | 4 ++-- src/components/Tab/Tab.css | 15 +++++++++------ src/components/Tab/Tab.tsx | 16 ++-------------- 3 files changed, 13 insertions(+), 22 deletions(-) diff --git a/src/components/Synthetics/TradeBox/Curtain.tsx b/src/components/Synthetics/TradeBox/Curtain.tsx index 699c244019..1ba9764305 100644 --- a/src/components/Synthetics/TradeBox/Curtain.tsx +++ b/src/components/Synthetics/TradeBox/Curtain.tsx @@ -43,8 +43,8 @@ export function Curtain({ <>
diff --git a/src/components/Tab/Tab.css b/src/components/Tab/Tab.css index a6475e961f..f0928e7c43 100644 --- a/src/components/Tab/Tab.css +++ b/src/components/Tab/Tab.css @@ -4,8 +4,12 @@ font-size: var(--font-size-body-medium); border-radius: 3px; overflow: hidden; - color: var(--color-slate-100); - background: var(--color-cold-blue-900); + color: var(--color-gray-300); + background: linear-gradient( + 90deg, + var(--color-cold-blue-900) 0%, + color-mix(in srgb, var(--color-slate-500) 40%, transparent) 100% + ); box-shadow: inset 0px 0px 30px 5px rgba(255, 255, 255, 0.01); } @@ -29,7 +33,7 @@ .Tab.Tab__block .Tab-option.active { opacity: 1; pointer-events: none; - background: var(--color-cold-blue-500); + background: var(--primary-btn-bg); color: var(--color-white); } @@ -52,15 +56,14 @@ display: inline-block; margin-right: 1.5rem; font-size: var(--font-size-body-medium); - color: var(--color-slate-100); } .Tab.Tab__inline .Tab-option:not(.disabled):not(.active):hover { - color: var(--color-white); + opacity: 0.8; } .Tab.Tab__inline .Tab-option.active { - color: var(--color-white); + opacity: 1; pointer-events: none; } diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx index ce25fc5c13..58bfe23571 100644 --- a/src/components/Tab/Tab.tsx +++ b/src/components/Tab/Tab.tsx @@ -1,7 +1,7 @@ import cx from "classnames"; import { ReactNode } from "react"; -import "./Tab.scss"; +import "./Tab.css"; type Props = { options: (string | number)[]; @@ -11,13 +11,6 @@ type Props = { type?: "block" | "inline"; className?: string; optionLabels?: Record | string[]; - optionClassnames?: Record< - string | number, - { - active?: string; - regular?: string; - } - >; icons?: Record; qa?: string; }; @@ -36,15 +29,10 @@ export default function Tab(props: Props) { return (
{options.map((opt) => { - const className = props.optionClassnames && props.optionClassnames[opt]; const label = optionLabels && optionLabels[opt] ? optionLabels[opt] : opt; - - const optionClassName = opt === option ? className?.active : className?.regular; return (
onClick(opt)} key={opt} data-qa={`${qa}-tab-${opt}`} From b9b1de2f6b30946e6413262fea16e60892e2a0f1 Mon Sep 17 00:00:00 2001 From: midas-myth Date: Fri, 13 Dec 2024 14:16:18 +0100 Subject: [PATCH 28/35] Enhance instant tradebox curtain --- .../Synthetics/TradeBox/Curtain.tsx | 2 +- .../TradeBox/TradeBoxHeaderTabs.tsx | 1 - src/components/Tab/Tab.scss | 77 ------------------- 3 files changed, 1 insertion(+), 79 deletions(-) delete mode 100644 src/components/Tab/Tab.scss diff --git a/src/components/Synthetics/TradeBox/Curtain.tsx b/src/components/Synthetics/TradeBox/Curtain.tsx index 1ba9764305..6ace4f4176 100644 --- a/src/components/Synthetics/TradeBox/Curtain.tsx +++ b/src/components/Synthetics/TradeBox/Curtain.tsx @@ -59,7 +59,7 @@ export function Curtain({
{header}
-
); diff --git a/src/components/Tab/Tab.scss b/src/components/Tab/Tab.scss deleted file mode 100644 index 7d58203723..0000000000 --- a/src/components/Tab/Tab.scss +++ /dev/null @@ -1,77 +0,0 @@ -.Tab { - &.Tab__block { - display: grid; - grid-auto-flow: column; - font-size: var(--font-size-body-medium); - border-radius: 3px; - overflow: hidden; - background: linear-gradient( - 90deg, - var(--color-cold-blue-900) 0%, - color-mix(in srgb, var(--color-slate-500) 40%, transparent) 100% - ); - box-shadow: inset 0px 0px 30px 5px rgba(255, 255, 255, 0.01); - - .Tab-option { - text-align: center; - padding: 8px 15px; - - color: var(--color-gray-300); - - &.Tab-option-green { - border-bottom: 1px solid transparent; - } - - &.active { - color: var(--color-white); - background: var(--color-blue-600); - - &.Tab-option-green { - color: var(--color-green-500); - background-color: #1f3445; - border-bottom: 1px solid var(--color-green-500); - } - } - - &:not(.active):hover { - background: var(--color-cold-blue-700); - opacity: 0.8; - } - } - } - - &.Tab__inline { - overflow-x: scroll; - white-space: nowrap; - - @apply scrollbar-hide; - - .Tab-option { - margin-right: 15px; - - @apply text-body-medium; - - &.active { - color: var(--color-white); - } - - &:not(.active):hover { - opacity: 0.8; - } - } - } - - .Tab-option { - display: inline-flex; - cursor: pointer; - align-items: center; - justify-content: center; - gap: 8px; - - opacity: 0.7; - - &.active { - opacity: 1; - } - } -} From 6543770ed9ad3f27f2d13ce98dcea9d9f683cda2 Mon Sep 17 00:00:00 2001 From: midas-myth Date: Fri, 13 Dec 2024 14:23:31 +0100 Subject: [PATCH 29/35] Enhance instant tradebox curtain --- .../Synthetics/TradeBox/TradeBox.tsx | 2 +- .../TradeBox/TradeBoxHeaderTabs.tsx | 19 +++++++++---------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/Synthetics/TradeBox/TradeBox.tsx b/src/components/Synthetics/TradeBox/TradeBox.tsx index e27f825cdb..721cd44e97 100644 --- a/src/components/Synthetics/TradeBox/TradeBox.tsx +++ b/src/components/Synthetics/TradeBox/TradeBox.tsx @@ -1407,7 +1407,7 @@ export function TradeBox({ isInCurtain }: { isInCurtain?: boolean }) { - -
+ ); } From 4f42df5ebb5c43b040e980b0f94756f5337a53ec Mon Sep 17 00:00:00 2001 From: midas-myth Date: Fri, 13 Dec 2024 14:29:49 +0100 Subject: [PATCH 30/35] Enhance instant tradebox curtain --- package.json | 2 +- yarn.lock | 30 +++++++----------------------- 2 files changed, 8 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 53e5a264f3..2017da9610 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "eslint-config-recommended": "4.1.0", "eth-testing": "1.9.1", "ethers": "6.12.1", - "framer-motion": "11.14.1", + "framer-motion": "11.1.9", "graphql": "15.8.0", "hex-to-rgba": "2.0.1", "html-to-image": "^1.10.8", diff --git a/yarn.lock b/yarn.lock index d0b80b07d8..327d9a9947 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9561,17 +9561,15 @@ __metadata: languageName: node linkType: hard -"framer-motion@npm:11.14.1": - version: 11.14.1 - resolution: "framer-motion@npm:11.14.1" +"framer-motion@npm:11.1.9": + version: 11.1.9 + resolution: "framer-motion@npm:11.1.9" dependencies: - motion-dom: ^11.14.1 - motion-utils: ^11.14.1 tslib: ^2.4.0 peerDependencies: "@emotion/is-prop-valid": "*" - react: ^18.0.0 || ^19.0.0 - react-dom: ^18.0.0 || ^19.0.0 + react: ^18.0.0 + react-dom: ^18.0.0 peerDependenciesMeta: "@emotion/is-prop-valid": optional: true @@ -9579,7 +9577,7 @@ __metadata: optional: true react-dom: optional: true - checksum: 6a540564c8faf0239996517891fa4ad3ee950cf3a0628cc088b3d2a7f1f097e9f8e6e8575cb053a3185f47d26e1022a2fbf9ed97c300beabbd77d7b579ffd229 + checksum: a7dcd8bfa1780fe8364c7e039a6e37d94edcdec6ee618355d649aab99451cb666ee4c2b5b8b5d2bcd1ccdba44fbb2cdd57deed9325c503d544d3f9a34fdfce27 languageName: node linkType: hard @@ -9951,7 +9949,7 @@ __metadata: eslint-plugin-react-perf: 3.3.2 eth-testing: 1.9.1 ethers: 6.12.1 - framer-motion: 11.14.1 + framer-motion: 11.1.9 graphql: 15.8.0 happy-dom: 14.12.3 hex-to-rgba: 2.0.1 @@ -11933,20 +11931,6 @@ __metadata: languageName: node linkType: hard -"motion-dom@npm:^11.14.1": - version: 11.14.1 - resolution: "motion-dom@npm:11.14.1" - checksum: 5b0f88b6ffa1b8d299b98879594d9b3c723e9c19c8ed36c115fa09bfe7c8ee01c53116c914589dade4a4f9d3e0bc5843775f0f6ff0dac2c7cb6705ffd3a33b8b - languageName: node - linkType: hard - -"motion-utils@npm:^11.14.1": - version: 11.14.1 - resolution: "motion-utils@npm:11.14.1" - checksum: 0ac4cfc12761a0ceec85cc3d0fb99de269914c82cb2eaa7735deef22ecddfbd2a1bb206a66ffe997c530f818e2517419f3b69b3e1c14478384cb54e50b4a6331 - languageName: node - linkType: hard - "motion@npm:10.16.2": version: 10.16.2 resolution: "motion@npm:10.16.2" From a30aa03036a59171a4367b436fa29ba10db08c09 Mon Sep 17 00:00:00 2001 From: midas-myth Date: Fri, 13 Dec 2024 14:35:41 +0100 Subject: [PATCH 31/35] Enhance instant tradebox curtain --- src/components/Synthetics/TradeBox/Curtain.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Synthetics/TradeBox/Curtain.tsx b/src/components/Synthetics/TradeBox/Curtain.tsx index 6ace4f4176..7fc66c1fcc 100644 --- a/src/components/Synthetics/TradeBox/Curtain.tsx +++ b/src/components/Synthetics/TradeBox/Curtain.tsx @@ -55,7 +55,7 @@ export function Curtain({ shadow-[0px_-24px_48px_-8px_rgba(0,0,0,0.35)] will-change-transform" style={curtainStyle} > -
+
{header}
From bdc5075851d3ec6b468e505d4a7c1b06563df788 Mon Sep 17 00:00:00 2001 From: midas-myth Date: Thu, 19 Dec 2024 12:48:13 +0100 Subject: [PATCH 32/35] Instant curtain review fixes --- src/components/Footer/Footer.css | 4 ---- src/components/Footer/Footer.tsx | 2 +- src/components/Synthetics/TradeBox/Curtain.tsx | 4 ++-- src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx | 1 - 4 files changed, 3 insertions(+), 8 deletions(-) diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index b285083eba..cad6f37b6e 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -10,10 +10,6 @@ border-top: 1px solid var(--color-slate-700); } -.Footer-wrapper.mobile-trade-page { - padding-bottom: 52px; -} - .Footer-logo { margin-bottom: 2.4rem; display: flex; diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 8763ddb8b9..316595f009 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -28,7 +28,7 @@ export default function Footer({ showRedirectModal, redirectPopupTimestamp, isMo return ( <> -
+
MetaMask
diff --git a/src/components/Synthetics/TradeBox/Curtain.tsx b/src/components/Synthetics/TradeBox/Curtain.tsx index 7fc66c1fcc..5b7a86c178 100644 --- a/src/components/Synthetics/TradeBox/Curtain.tsx +++ b/src/components/Synthetics/TradeBox/Curtain.tsx @@ -33,11 +33,11 @@ export function Curtain({ const headerClick = useCallback(() => { setIsOpen(true); - }, []); + }, [setIsOpen]); const handleClick = useCallback(() => { setIsOpen((prev) => !prev); - }, []); + }, [setIsOpen]); return ( <> diff --git a/src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx b/src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx index 7ea76b1b79..e071fb742b 100644 --- a/src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx +++ b/src/components/Synthetics/TradeBox/TradeBoxHeaderTabs.tsx @@ -1,5 +1,4 @@ import { msg } from "@lingui/macro"; -import cx from "classnames"; import { useCallback } from "react"; import { useHistory } from "react-router-dom"; From d1d9d738f94de68a7177280d93a6864564240bf1 Mon Sep 17 00:00:00 2001 From: midas-myth Date: Fri, 20 Dec 2024 16:55:29 +0100 Subject: [PATCH 33/35] Rebase curtain tradebox to colors PR --- .../PositionEditor/PositionEditor.tsx | 3 +- .../Synthetics/TradeBox/Curtain.tsx | 2 +- .../Synthetics/TradeBox/TradeBox.scss | 4 --- .../Synthetics/TradeBox/TradeBox.tsx | 3 +- .../TradeBox/TradeBoxHeaderTabs.tsx | 22 ++------------ src/components/Tab/Tab.css | 19 ++++++------ src/components/Tab/Tab.tsx | 30 +++++++++++++++++-- 7 files changed, 44 insertions(+), 39 deletions(-) diff --git a/src/components/Synthetics/PositionEditor/PositionEditor.tsx b/src/components/Synthetics/PositionEditor/PositionEditor.tsx index 59ba358539..c15da47b51 100644 --- a/src/components/Synthetics/PositionEditor/PositionEditor.tsx +++ b/src/components/Synthetics/PositionEditor/PositionEditor.tsx @@ -551,7 +551,8 @@ export function PositionEditor(p: Props) { option={operation} options={Object.values(Operation)} optionLabels={localizedOperationLabels} - className="PositionEditor-tabs SwapBox-option-tabs" + className="PositionEditor-tabs" + size="l" qa="operation-tabs" /> {header}
-