From 1b09fa3f4f157d2ebef08470da0f11d1761de901 Mon Sep 17 00:00:00 2001 From: Grandschtroumpf Date: Wed, 5 Mar 2025 11:54:55 +0100 Subject: [PATCH 1/6] apply design changes --- src/components/activity/ActivityCountDown.tsx | 4 +- src/components/activity/ActivityLayout.tsx | 4 +- src/components/activity/ActivityTable.tsx | 2 +- src/components/common/tabs/TabsMenu.tsx | 4 +- .../simulator/input/BuySellBlockNew/index.tsx | 15 ++- .../simulator/input/SimInputRecurring.tsx | 1 + .../simulator/input/SimInputStrategyType.tsx | 5 +- .../input/SimInputTokenSelection.tsx | 20 +--- .../overlapping/CreateOverlappingStrategy.tsx | 10 +- .../strategies/common/TokenSelection.tsx | 26 +---- .../strategies/common/order.module.css | 26 +++++ .../strategies/create/CreateForm.tsx | 98 ++++++++++--------- .../strategies/create/CreateOrder.tsx | 11 +-- .../create/CreateOverlappingBudget.tsx | 4 +- .../create/CreateOverlappingPrice.tsx | 9 +- .../strategies/edit/EditOverlappingBudget.tsx | 6 +- .../strategies/edit/EditOverlappingPrice.tsx | 12 +-- .../strategies/edit/EditPriceFields.tsx | 12 ++- .../strategies/edit/EditPriceNav.tsx | 4 +- .../strategies/edit/EditStrategyForm.tsx | 81 +++++++-------- .../edit/EditStrategyOverlapTokens.tsx | 2 +- src/components/trade/TradeLayout.tsx | 2 +- src/components/trade/TradeNav.tsx | 4 +- src/pages/simulator/overlapping/index.tsx | 3 +- src/pages/simulator/recurring/index.tsx | 3 +- .../strategies/edit/prices/disposable.tsx | 40 ++++---- src/pages/strategy/index.tsx | 1 - src/pages/trade/market.tsx | 10 +- src/pages/trade/root.tsx | 2 +- 29 files changed, 203 insertions(+), 218 deletions(-) create mode 100644 src/components/strategies/common/order.module.css diff --git a/src/components/activity/ActivityCountDown.tsx b/src/components/activity/ActivityCountDown.tsx index 426fc6ab1..d34cc8eb1 100644 --- a/src/components/activity/ActivityCountDown.tsx +++ b/src/components/activity/ActivityCountDown.tsx @@ -107,8 +107,8 @@ export const ActivityCountDown: FC = ({ time }) => { return ( = (props) => { const { filters = [] } = props; return (
-
-

Activity

+
+

Activity

= ({ children }) => { - return ( -
{children}
- ); + return
{children}
; }; diff --git a/src/components/simulator/input/BuySellBlockNew/index.tsx b/src/components/simulator/input/BuySellBlockNew/index.tsx index 76dd2c975..17b2fb366 100644 --- a/src/components/simulator/input/BuySellBlockNew/index.tsx +++ b/src/components/simulator/input/BuySellBlockNew/index.tsx @@ -12,6 +12,8 @@ import { StrategyInputDispatch, StrategyInputOrder, } from 'hooks/useStrategyInput'; +import style from 'components/strategies/common/order.module.css'; +import { cn } from 'utils/helpers'; type Props = { base: Token; @@ -25,6 +27,7 @@ type Props = { isOrdersOverlap: boolean; isOrdersReversed: boolean; warningMsg?: string; + className?: string; }; export const BuySellBlock: FC = ({ @@ -39,6 +42,7 @@ export const BuySellBlock: FC = ({ isOrdersOverlap, isOrdersReversed, warningMsg, + className, }) => { const titleId = useId(); @@ -92,12 +96,13 @@ export const BuySellBlock: FC = ({ return (

diff --git a/src/components/simulator/input/SimInputRecurring.tsx b/src/components/simulator/input/SimInputRecurring.tsx index 17607a450..e4d3efe11 100644 --- a/src/components/simulator/input/SimInputRecurring.tsx +++ b/src/components/simulator/input/SimInputRecurring.tsx @@ -70,6 +70,7 @@ export const SimInputRecurring = ({ strategyType="recurring" isBudgetOptional={+state.buy.budget === 0 && +state.sell.budget > 0} warningMsg={warningMsg.buy} + className="rounded-ee rounded-es" /> ); diff --git a/src/components/simulator/input/SimInputStrategyType.tsx b/src/components/simulator/input/SimInputStrategyType.tsx index 37dae65f2..c543c2c4e 100644 --- a/src/components/simulator/input/SimInputStrategyType.tsx +++ b/src/components/simulator/input/SimInputStrategyType.tsx @@ -35,10 +35,7 @@ export const SimInputStrategyType = () => { ]; return ( -
+

Trading Strategy

diff --git a/src/components/simulator/input/SimInputTokenSelection.tsx b/src/components/simulator/input/SimInputTokenSelection.tsx index 84c5088fb..126b8ea81 100644 --- a/src/components/simulator/input/SimInputTokenSelection.tsx +++ b/src/components/simulator/input/SimInputTokenSelection.tsx @@ -6,7 +6,6 @@ import { ReactComponent as IconArrow } from 'assets/icons/arrowDown.svg'; import { useModal } from 'hooks/useModal'; import { Warning } from 'components/common/WarningMessageWithIcon'; import { cn } from 'utils/helpers'; -import { Tooltip } from 'components/common/tooltip/Tooltip'; interface Props { baseToken?: string; @@ -27,26 +26,9 @@ export const SimInputTokenSelection: FC = ({ return (
-
-

Token Pair

- - Selecting the tokens you would like to create a simulation for. -
- Buy or Sell token (also called Base token) is the - token you would like to buy or sell in the strategy. -
- With token (also called Quote token) is the token - you would denominate the rates in. -

- } - /> -
= (props) => { return ( <> -
+

Set Price Range  @@ -335,7 +335,7 @@ export const CreateOverlappingStrategy: FC = (props) => { setRangeError={setRangeError} />

-
+

Set Fee Tier

= (props) => { setSpread={setSpreadValue} />
-
+

Budget

= (props) => { />
{anchor && ( -
+

@@ -397,7 +397,7 @@ export const CreateOverlappingStrategy: FC = (props) => { {anchor && (

diff --git a/src/components/strategies/common/TokenSelection.tsx b/src/components/strategies/common/TokenSelection.tsx index 02a9b0e6b..f264ab422 100644 --- a/src/components/strategies/common/TokenSelection.tsx +++ b/src/components/strategies/common/TokenSelection.tsx @@ -8,28 +8,8 @@ import { useModal } from 'hooks/useModal'; import { ModalTokenListData } from 'libs/modals/modals/ModalTokenList'; import { useTradeCtx } from 'components/trade/TradeContext'; import { ReactComponent as WarningIcon } from 'assets/icons/warning.svg'; -import { Tooltip } from 'components/common/tooltip/Tooltip'; import { SuspiciousToken } from 'components/common/DisplayPair'; -export const TokenSelectionTooltip = () => { - return ( - - Selecting the tokens you would like to create a strategy for. -
- Buy or Sell token (also called Base token) is the token - you would like to buy or sell in the strategy. -
- With token (also called Quote token) is the token you - would denominate the rates in. -

- } - /> - ); -}; - export const TokenSelection = () => { const { base, quote } = useTradeCtx(); const navigate = useNavigate({ from: '/trade' }); @@ -93,11 +73,7 @@ export const TokenSelection = () => { }; return ( -
-
-

Token Pair

- -
+
= (props) => { return (
- {children} - +
{children}
+
+ - {user && ( - <> - {config.ui.showCart && ( + {user && ( + <> + {config.ui.showCart && ( + + )} - )} + + )} + {!user && ( - - )} - {!user && ( - - )} + )} +
); }; diff --git a/src/components/strategies/create/CreateOrder.tsx b/src/components/strategies/create/CreateOrder.tsx index 95ab07b9a..639f427cf 100644 --- a/src/components/strategies/create/CreateOrder.tsx +++ b/src/components/strategies/create/CreateOrder.tsx @@ -14,6 +14,7 @@ import { cn } from 'utils/helpers'; import { LogoImager } from 'components/common/imager/Imager'; import { getDefaultOrder } from './utils'; import { useMarketPrice } from 'hooks/useMarketPrice'; +import style from 'components/strategies/common/order.module.css'; interface Props { base: Token; @@ -101,17 +102,13 @@ export const CreateOrder: FC = ({ }; const headerProps = { titleId, order, base, buy, setSettings }; - const border = buy - ? 'border-buy/50 focus-within:border-buy' - : 'border-sell/50 focus-within:border-sell'; + return (
{settings} diff --git a/src/components/strategies/create/CreateOverlappingBudget.tsx b/src/components/strategies/create/CreateOverlappingBudget.tsx index 5e662cd17..cde7aec78 100644 --- a/src/components/strategies/create/CreateOverlappingBudget.tsx +++ b/src/components/strategies/create/CreateOverlappingBudget.tsx @@ -70,7 +70,7 @@ export const CreateOverlappingBudget: FC = (props) => { return ( -
+
= (props) => {

diff --git a/src/components/strategies/create/CreateOverlappingPrice.tsx b/src/components/strategies/create/CreateOverlappingPrice.tsx index f5cef41c0..19c43b78c 100644 --- a/src/components/strategies/create/CreateOverlappingPrice.tsx +++ b/src/components/strategies/create/CreateOverlappingPrice.tsx @@ -86,10 +86,7 @@ export const CreateOverlappingPrice: FC = (props) => { return ( -
+

Set Price Range  @@ -116,7 +113,7 @@ export const CreateOverlappingPrice: FC = (props) => { required />

-
+

Set Fee Tier

= (props) => { setSpread={setSpread} />
-
+

Budget diff --git a/src/components/strategies/edit/EditOverlappingBudget.tsx b/src/components/strategies/edit/EditOverlappingBudget.tsx index cf51361a6..17b6df73c 100644 --- a/src/components/strategies/edit/EditOverlappingBudget.tsx +++ b/src/components/strategies/edit/EditOverlappingBudget.tsx @@ -187,7 +187,7 @@ export const EditOverlappingBudget: FC = (props) => { />

)} -
+

Budget

= (props) => { />
{anchor && editType && ( -
+
= (props) => { {anchor && (

diff --git a/src/components/strategies/edit/EditOverlappingPrice.tsx b/src/components/strategies/edit/EditOverlappingPrice.tsx index 701ce711a..53cc62130 100644 --- a/src/components/strategies/edit/EditOverlappingPrice.tsx +++ b/src/components/strategies/edit/EditOverlappingPrice.tsx @@ -205,7 +205,7 @@ export const EditOverlappingPrice: FC = (props) => { {displayPrice && ( <> -
+

Edit Price Range  @@ -232,7 +232,7 @@ export const EditOverlappingPrice: FC = (props) => { required />

-
+

Edit Fee Tier

= (props) => { )} {!displayPrice && ( -
+
= (props) => { />
)} -
+

Budget

= (props) => { />
{anchor && ( -
+
= (props) => { {anchor && (

diff --git a/src/components/strategies/edit/EditPriceFields.tsx b/src/components/strategies/edit/EditPriceFields.tsx index a6b200849..4362d0add 100644 --- a/src/components/strategies/edit/EditPriceFields.tsx +++ b/src/components/strategies/edit/EditPriceFields.tsx @@ -15,6 +15,8 @@ import { OverlappingAction } from '../overlapping/OverlappingAction'; import { EditBudgetDistribution } from './EditStrategyAllocatedBudget'; import { isZero } from '../common/utils'; import { SafeDecimal } from 'libs/safedecimal'; +import style from 'components/strategies/common/order.module.css'; +import { cn } from 'utils/helpers'; interface Props { order: EditOrderBlock; @@ -108,12 +110,12 @@ export const EditStrategyPriceField: FC = ({ return (
{settings} diff --git a/src/components/strategies/edit/EditPriceNav.tsx b/src/components/strategies/edit/EditPriceNav.tsx index a11b26b9e..4086280a9 100644 --- a/src/components/strategies/edit/EditPriceNav.tsx +++ b/src/components/strategies/edit/EditPriceNav.tsx @@ -42,8 +42,8 @@ export const EditPriceNav = ({ editType }: { editType: EditTypes }) => { if (editType !== 'editPrices' && editType !== 'renew') return; return ( -
-

+
+

Trading Strategy