From 0fc700f00ff0b36816b91c736642fedbc17f77f1 Mon Sep 17 00:00:00 2001 From: Tyler Date: Tue, 23 Jul 2024 17:46:55 -0400 Subject: [PATCH] test --- .ladle/components.tsx | 12 +- package.json | 6 + pnpm-lock.yaml | 121 ++++++++++++++++++ src/App.tsx | 8 +- src/components/AssetIcon.tsx | 14 +- src/components/Checkbox.tsx | 13 +- src/components/Collapsible.tsx | 11 +- src/components/CollapsibleNavigationMenu.tsx | 9 +- src/components/ComboboxMenu.tsx | 10 +- src/components/DetailsDialog.tsx | 7 +- src/components/Dialog.tsx | 17 +-- src/components/DropdownHeaderMenu.tsx | 14 +- src/components/DropdownMenu.tsx | 8 +- src/components/GreenCheckCircle.tsx | 12 +- src/components/Loading/LoadingSpinner.tsx | 12 +- src/components/MarginUsageRing.stories.tsx | 6 +- src/components/Notification.tsx | 55 ++------ src/components/NumberValue.tsx | 8 +- src/components/Output.tsx | 13 +- .../PageMenu/PageMenuNavigationItem.tsx | 6 +- .../PageMenu/PageMenuRadioGroup.tsx | 16 +-- src/components/Panel.tsx | 8 +- src/components/PortfolioCard.tsx | 14 +- src/components/PotentialPositionCard.tsx | 20 +-- src/components/RadioButtonCards.tsx | 21 ++- src/components/SearchInput.tsx | 9 +- src/components/SearchSelectMenu.stories.tsx | 8 +- src/components/SelectMenu.tsx | 8 +- src/components/Separator.tsx | 14 +- src/components/Switch.stories.tsx | 8 +- src/components/Table.tsx | 11 +- src/components/Table/ActionsTableCell.tsx | 9 +- src/components/Table/AssetTableCell.tsx | 8 +- src/components/Table/MarketTableCell.tsx | 17 +-- src/components/Table/TablePaginationRow.tsx | 7 +- src/components/ValidatorFaviconIcon.tsx | 11 +- src/components/WithHovercard.tsx | 7 +- src/components/WithLabel.tsx | 11 +- src/components/WithTooltip.tsx | 6 +- src/components/visx/TimeSeriesChart.tsx | 13 +- src/hooks/useComplianceState.tsx | 6 +- src/hooks/useNotificationTypes.tsx | 10 +- src/layout/Footer/FooterDesktop.tsx | 12 +- src/layout/Footer/FooterMobile.tsx | 5 +- src/layout/Header/HeaderDesktop.tsx | 17 +-- src/pages/Profile.tsx | 75 +++-------- src/pages/markets/NewMarket.tsx | 76 ++--------- .../portfolio/AccountDetailsAndHistory.tsx | 26 +--- src/pages/portfolio/EquityTiers.tsx | 12 +- src/pages/portfolio/Fees.tsx | 32 ++--- src/pages/portfolio/History.tsx | 7 +- src/pages/portfolio/Overview.tsx | 17 +-- src/pages/portfolio/Portfolio.tsx | 9 +- src/pages/portfolio/Positions.tsx | 17 +-- src/pages/settings/SettingsHeader.tsx | 7 +- src/pages/token/GeoblockedPanel.tsx | 6 +- src/pages/token/LaunchIncentivesPanel.tsx | 81 +++--------- src/pages/token/MigratePanel.tsx | 50 ++------ src/pages/token/NewMarketsPanel.tsx | 7 +- src/pages/token/RewardHistoryPanel.tsx | 53 ++------ src/pages/token/RewardsNavPanel.tsx | 44 ++----- src/pages/token/RewardsPage.tsx | 32 +---- src/pages/token/StakingPanel.tsx | 19 ++- src/pages/token/StakingRewardPanel.tsx | 21 +-- src/pages/token/TradingRewardsChartPanel.tsx | 24 +--- .../token/TradingRewardsSummaryPanel.tsx | 6 +- src/pages/token/UnbondingPanels.tsx | 20 +-- src/pages/trade/HorizontalPanel.tsx | 20 +-- src/pages/trade/MobileTopPanel.tsx | 7 +- src/pages/trade/Trade.tsx | 17 +-- src/pages/trade/TradeDialogTrigger.tsx | 21 ++- src/pages/trade/TradeHeaderMobile.tsx | 7 +- src/pages/trade/UnopenedIsolatedPositions.tsx | 13 +- src/pages/vaults/VaultDepositWithdrawForm.tsx | 85 +++--------- src/pages/vaults/VaultInfoSections.tsx | 60 ++------- src/pages/vaults/VaultPage.tsx | 17 +-- src/pages/vaults/VaultPnlChart.tsx | 14 +- src/pages/vaults/VaultPositions.tsx | 16 +-- src/pages/vaults/VaultPositionsTable.tsx | 13 +- src/pages/vaults/VaultTransactions.tsx | 51 ++------ .../AccountInfo/AccountInfoConnectedState.tsx | 24 +--- src/views/CanvasOrderbook/CanvasOrderbook.tsx | 48 ++----- .../CanvasOrderbook/OrderbookControls.tsx | 25 +--- src/views/CanvasOrderbook/OrderbookRow.tsx | 15 +-- src/views/ExchangeBillboards.tsx | 11 +- src/views/ExportHistoryDropdown.tsx | 9 +- src/views/MarketDetails.tsx | 10 +- src/views/MarketsStats.tsx | 22 +--- src/views/MobileDownloadLinks.tsx | 19 +-- src/views/PositionInfo.tsx | 9 +- src/views/PositionTile.tsx | 12 +- src/views/TradeBoxOrderView.tsx | 13 +- src/views/charts/DepthChart/Tooltip.tsx | 7 +- src/views/charts/DepthChart/index.tsx | 8 +- src/views/charts/FundingChart/Tooltip.tsx | 7 +- src/views/charts/FundingChart/index.tsx | 24 ++-- src/views/charts/PnlChart.tsx | 11 +- src/views/charts/TradingRewardsChart.tsx | 10 +- src/views/dialogs/AcknowledgeTermsDialog.tsx | 5 +- .../dialogs/AdjustIsolatedMarginDialog.tsx | 9 +- src/views/dialogs/ClosePositionDialog.tsx | 20 +-- .../DetailsDialog/FillDetailsDialog.tsx | 5 +- .../DetailsDialog/OrderDetailsDialog.tsx | 14 +- src/views/dialogs/DisplaySettingsDialog.tsx | 16 +-- src/views/dialogs/ExternalNavKeplrDialog.tsx | 6 +- src/views/dialogs/ExternalNavStrideDialog.tsx | 16 +-- src/views/dialogs/GeoComplianceDialog.tsx | 26 +--- src/views/dialogs/HelpDialog.tsx | 13 +- src/views/dialogs/ManageFundsDialog.tsx | 9 +- src/views/dialogs/MnemonicExportDialog.tsx | 40 ++---- .../dialogs/NewMarketAgreementDialog.tsx | 21 +-- .../dialogs/NewMarketMessageDetailsDialog.tsx | 73 +++-------- src/views/dialogs/OnboardingDialog.tsx | 7 +- .../dialogs/OnboardingDialog/ChooseWallet.tsx | 13 +- .../dialogs/OnboardingDialog/GenerateKeys.tsx | 52 ++------ src/views/dialogs/PreferencesDialog.tsx | 17 +-- src/views/dialogs/RateLimitDialog.tsx | 6 +- src/views/dialogs/RestrictedGeoDialog.tsx | 6 +- src/views/dialogs/RestrictedWalletDialog.tsx | 6 +- src/views/dialogs/SharePNLAnalyticsDialog.tsx | 60 ++------- src/views/dialogs/StakeDialog.tsx | 28 ++-- src/views/dialogs/StakingRewardDialog.tsx | 64 +++------ src/views/dialogs/TradeDialog.tsx | 46 ++----- src/views/dialogs/TransferDialog.tsx | 12 +- src/views/dialogs/UnstakeDialog.tsx | 17 +-- .../dialogs/VaultDepositWithdrawDialog.tsx | 8 +- src/views/dialogs/WithdrawalGateDialog.tsx | 19 +-- .../AccountManagementForms/DepositForm.tsx | 31 ++--- .../DepositForm/DepositButtonAndReceipt.tsx | 12 +- .../AccountManagementForms/LowestFeesText.tsx | 17 +-- .../AccountManagementForms/SlippageEditor.tsx | 11 +- .../SourceSelectMenu.tsx | 7 +- .../TokenSelectMenu.tsx | 7 +- .../AccountManagementForms/WithdrawForm.tsx | 52 +++----- .../WithdrawForm/WithdrawButtonAndReceipt.tsx | 19 +-- src/views/forms/AdjustIsolatedMarginForm.tsx | 13 +- .../forms/CancelAllOrdersInMarketForm.tsx | 16 +-- src/views/forms/ClosePositionForm.tsx | 15 +-- .../NewMarketForm/NewMarketPreviewStep.tsx | 43 ++----- .../NewMarketForm/NewMarketSelectionStep.tsx | 58 ++------- src/views/forms/NewMarketForm/index.tsx | 5 +- src/views/forms/NobleDeposit.tsx | 19 +-- src/views/forms/SelectMarginModeForm.tsx | 6 +- .../StakeForm/StakeFormInputContents.tsx | 12 +- .../StakeForm/StakeFormPreviewContents.tsx | 23 ++-- .../StakeForm/ValidatorDropdown.tsx | 29 +---- .../UnstakeForm/UnstakeFormInputContents.tsx | 31 ++--- .../UnstakeFormPreviewContents.tsx | 22 ++-- .../shared/StakeConfirmationButtonRow.tsx | 28 ++-- .../shared/StakePreviewContents.tsx | 34 +---- .../shared/StakeRewardButtonAndReceipt.tsx | 28 ++-- .../StakingForms/shared/ValidatorName.tsx | 10 +- src/views/forms/TradeForm.tsx | 11 +- .../forms/TradeForm/AdvancedTradeOptions.tsx | 10 +- src/views/forms/TradeForm/LeverageSlider.tsx | 8 +- .../forms/TradeForm/MarginModeSelector.tsx | 26 +--- .../forms/TradeForm/MarketLeverageInput.tsx | 9 +- .../TradeForm/PlaceOrderButtonAndReceipt.tsx | 16 +-- src/views/forms/TradeForm/TradeSizeInputs.tsx | 5 +- src/views/forms/TransferForm.tsx | 28 ++-- .../TriggersForm/AdvancedTriggersOptions.tsx | 9 +- .../forms/TriggersForm/OrderSizeInput.tsx | 16 +-- .../forms/TriggersForm/OrderSizeSlider.tsx | 7 +- .../forms/TriggersForm/TriggerOrderInputs.tsx | 14 +- src/views/forms/TriggersForm/TriggersForm.tsx | 26 ++-- src/views/menus/AccountMenu.tsx | 60 ++------- src/views/menus/NotificationsMenu.tsx | 13 +- .../BlockRewardNotification/index.tsx | 9 +- ...ncentiveSeasonDistributionNotification.tsx | 9 +- .../notifications/OrderCancelNotification.tsx | 34 ++--- .../notifications/OrderStatusNotification.tsx | 31 +---- .../notifications/StakingLiveNotification.tsx | 42 ++---- .../notifications/TradeNotification/index.tsx | 16 +-- .../TransferStatusSteps.tsx | 9 +- .../TransferStatusNotification/index.tsx | 22 +--- src/views/tables/FillsTable.tsx | 43 ++----- src/views/tables/LiveTrades.tsx | 30 ++--- src/views/tables/MarketsCompactTable.tsx | 27 +--- src/views/tables/MarketsTable.tsx | 29 +---- src/views/tables/OrdersTable.tsx | 30 +---- src/views/tables/PositionsTable.tsx | 13 +- .../PositionsTable/PositionsTriggersCell.tsx | 7 +- .../tables/TradingRewardHistoryTable.tsx | 32 +---- src/views/tables/TransferHistoryTable.tsx | 19 ++- 184 files changed, 1026 insertions(+), 2720 deletions(-) diff --git a/.ladle/components.tsx b/.ladle/components.tsx index 81a562bdc..fb5a8421d 100644 --- a/.ladle/components.tsx +++ b/.ladle/components.tsx @@ -87,7 +87,7 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children return ( - +

Active Theme:

{[ @@ -126,20 +126,12 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children ))} - +
{content} ); }; - -const StoryHeader = styled.div` - display: flex; - flex-direction: row; - align-items: center; - gap: 8px; -`; - const StoryContent = styled.div` --default-border-width: 1px; --border-width: var(--default-border-width); diff --git a/package.json b/package.json index 94296dee1..927d74bd3 100644 --- a/package.json +++ b/package.json @@ -220,5 +220,11 @@ "preset": "styled-components", "includeClassNames": true } + }, + "optionalDependencies": { + "css-to-tailwindcss": "^1.0.5", + "postcss-safe-parser": "^7.0.0", + "postcss-styled": "^0.34.0", + "postcss-styled-syntax": "^0.6.4" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cc6921a9f..3d314931c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -291,6 +291,20 @@ dependencies: specifier: ^2.10.7 version: 2.10.9(@tanstack/react-query@5.37.1)(@types/react@18.3.3)(react-dom@18.2.0)(react-native@0.74.3)(react@18.2.0)(rollup@2.79.1)(typescript@5.1.3)(viem@2.16.2) +optionalDependencies: + css-to-tailwindcss: + specifier: ^1.0.5 + version: 1.0.5(ts-node@10.9.2) + postcss-safe-parser: + specifier: ^7.0.0 + version: 7.0.0(postcss@8.4.39) + postcss-styled: + specifier: ^0.34.0 + version: 0.34.0(postcss-syntax@0.36.2)(postcss@8.4.39) + postcss-styled-syntax: + specifier: ^0.6.4 + version: 0.6.4(postcss@8.4.39) + devDependencies: '@babel/core': specifier: ^7.23.9 @@ -13179,6 +13193,12 @@ packages: color-string: 1.9.1 dev: false + /colord@2.9.3: + resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==} + requiresBuild: true + dev: false + optional: true + /colorette@1.4.0: resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==} dev: false @@ -13560,11 +13580,33 @@ packages: css-color-keywords: 1.0.0 postcss-value-parser: 4.2.0 + /css-to-tailwindcss@1.0.5(ts-node@10.9.2): + resolution: {integrity: sha512-at47sdqOBP7kljX9dnCwNdZvIMm+XdMNR9/gYiNnZN6uMfsqRoq3bO1HpdAnSn53QklaHqTWv1b+2yWE9Fa0Yw==} + engines: {node: '>=12.0'} + requiresBuild: true + dependencies: + colord: 2.9.3 + css-what: 6.1.0 + postcss: 8.4.39 + postcss-safe-parser: 6.0.0(postcss@8.4.39) + tailwindcss: 3.4.6(ts-node@10.9.2) + transitivePeerDependencies: + - ts-node + dev: false + optional: true + /css-value@0.0.1: resolution: {integrity: sha512-FUV3xaJ63buRLgHrLQVlVgQnQdR4yqdLGaDu7g8CQcWjInDfM9plBTPI9FRfpahju1UBSaMckeb2/46ApS/V1Q==} requiresBuild: true dev: true + /css-what@6.1.0: + resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} + engines: {node: '>= 6'} + requiresBuild: true + dev: false + optional: true + /cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} @@ -20572,6 +20614,28 @@ packages: postcss: 8.4.39 postcss-selector-parser: 6.1.1 + /postcss-safe-parser@6.0.0(postcss@8.4.39): + resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==} + engines: {node: '>=12.0'} + requiresBuild: true + peerDependencies: + postcss: ^8.3.3 + dependencies: + postcss: 8.4.39 + dev: false + optional: true + + /postcss-safe-parser@7.0.0(postcss@8.4.39): + resolution: {integrity: sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==} + engines: {node: '>=18.0'} + requiresBuild: true + peerDependencies: + postcss: ^8.4.31 + dependencies: + postcss: 8.4.39 + dev: false + optional: true + /postcss-selector-parser@6.1.1: resolution: {integrity: sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==} engines: {node: '>=4'} @@ -20579,6 +20643,55 @@ packages: cssesc: 3.0.0 util-deprecate: 1.0.2 + /postcss-styled-syntax@0.6.4(postcss@8.4.39): + resolution: {integrity: sha512-uWiLn+9rKgIghUYmTHvXMR6MnyPULMe9Gv3bV537Fg4FH6CA6cn21WMjKss2Qb98LUhT847tKfnRGG3FhSOgUQ==} + engines: {node: '>=14.17'} + requiresBuild: true + peerDependencies: + postcss: ^8.4.21 + dependencies: + postcss: 8.4.39 + typescript: 5.5.4 + dev: false + optional: true + + /postcss-styled@0.34.0(postcss-syntax@0.36.2)(postcss@8.4.39): + resolution: {integrity: sha512-Uaeetr/xOiQWGJgzPFOr32/Bwykpfh9TVE26OpmwDb8eEN205TS/gqkt9ri+C6otQzQKXqbMfeZNbKYi7QpeNA==} + requiresBuild: true + peerDependencies: + postcss: '>=5.0.0' + postcss-syntax: '>=0.34.0' + dependencies: + postcss: 8.4.39 + postcss-syntax: 0.36.2(postcss@8.4.39) + dev: false + optional: true + + /postcss-syntax@0.36.2(postcss@8.4.39): + resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==} + peerDependencies: + postcss: '>=5.0.0' + postcss-html: '*' + postcss-jsx: '*' + postcss-less: '*' + postcss-markdown: '*' + postcss-scss: '*' + peerDependenciesMeta: + postcss-html: + optional: true + postcss-jsx: + optional: true + postcss-less: + optional: true + postcss-markdown: + optional: true + postcss-scss: + optional: true + dependencies: + postcss: 8.4.39 + dev: false + optional: true + /postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} @@ -23380,6 +23493,14 @@ packages: engines: {node: '>=14.17'} hasBin: true + /typescript@5.5.4: + resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==} + engines: {node: '>=14.17'} + hasBin: true + requiresBuild: true + dev: false + optional: true + /ua-parser-js@1.0.37: resolution: {integrity: sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==} dev: false diff --git a/src/App.tsx b/src/App.tsx index 41c2af008..c188addbe 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -131,7 +131,7 @@ const Content = () => { {isTablet ? : } - <$NotificationsToastArea /> + <$DialogArea ref={dialogAreaRef}> @@ -243,12 +243,6 @@ const $Main = styled.main` position: relative; `; - -const $NotificationsToastArea = styled(NotificationsToastArea)` - grid-area: Main; - z-index: 2; -`; - const $DialogArea = styled.aside` position: fixed; height: 100%; diff --git a/src/components/AssetIcon.tsx b/src/components/AssetIcon.tsx index ba200e786..55ea9d262 100644 --- a/src/components/AssetIcon.tsx +++ b/src/components/AssetIcon.tsx @@ -678,17 +678,15 @@ export const AssetIcon = ({ className?: string; }) => isAssetSymbol(symbol) ? ( - <$Img src={assetIcons[symbol]} className={className} alt={symbol} /> + {symbol} ) : ( ); - -const $Img = styled.img` - width: auto; - height: 1em; - border-radius: 50%; -`; - const $Placeholder = styled.div` background-color: var(--color-layer-5); width: 1em; diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx index 123ac5180..2d32da484 100644 --- a/src/components/Checkbox.tsx +++ b/src/components/Checkbox.tsx @@ -34,9 +34,9 @@ export const Checkbox: React.FC = ({ onCheckedChange={onCheckedChange} id={id} > - <$Indicator> + - + {label && ( <$Label disabled={disabled} htmlFor={id}> @@ -71,15 +71,6 @@ const $Root = styled(Root)` --checkbox-backgroundColor: var(--color-layer-1); } `; - -const $Indicator = styled(Indicator)` - display: flex; - align-items: center; - justify-content: center; - - color: var(--color-text-button); -`; - const $Label = styled.label<{ disabled?: boolean }>` cursor: pointer; color: var(--color-text-2); diff --git a/src/components/Collapsible.tsx b/src/components/Collapsible.tsx index 6d4f7c429..8db8b8747 100644 --- a/src/components/Collapsible.tsx +++ b/src/components/Collapsible.tsx @@ -45,13 +45,13 @@ export const Collapsible = ({ withTrigger = true, }: CollapsibleProps) => { const trigger = slotTrigger ? ( - <$TriggerSlot> +
{triggerIconSide === 'right' && label} {slotTrigger} {triggerIconSide === 'left' && label} - +
) : ( <$Trigger className={className} disabled={disabled}> {triggerIconSide === 'right' && ( @@ -93,13 +93,6 @@ const $Trigger = styled(Trigger)` --trigger-icon-width: 0.75em; --trigger-icon-color: inherit; `; - -const $TriggerSlot = styled.div` - display: flex; - align-items: center; - gap: 0.5em; -`; - const $TriggerIcon = styled.span` width: var(--trigger-icon-width); diff --git a/src/components/CollapsibleNavigationMenu.tsx b/src/components/CollapsibleNavigationMenu.tsx index d4639bd41..040585b69 100644 --- a/src/components/CollapsibleNavigationMenu.tsx +++ b/src/components/CollapsibleNavigationMenu.tsx @@ -59,7 +59,7 @@ export const CollapsibleNavigationMenu = ({ return ( - <$List> + {items.map((item) => !item.subitems ? ( <$NavItem key={item.value} onSelect={onSelectItem} {...item} /> @@ -81,7 +81,7 @@ export const CollapsibleNavigationMenu = ({ ) )} - + ); }; @@ -92,11 +92,6 @@ const navItemStyle = css` --item-checked-backgroundColor: var(--color-layer-1); --item-checked-textColor: var(--color-text-0); `; - -const $List = styled(List)` - gap: 0.5rem; -`; - const $CollapsibleItem = styled(Item)` ${navItemStyle} --item-padding: 0; diff --git a/src/components/ComboboxMenu.tsx b/src/components/ComboboxMenu.tsx index 54b1ed95d..fdca99dba 100644 --- a/src/components/ComboboxMenu.tsx +++ b/src/components/ComboboxMenu.tsx @@ -170,7 +170,9 @@ export const ComboboxMenu = < ))} ))} - {slotEmpty && searchValue.trim() !== '' && <$Empty>{slotEmpty}} + {slotEmpty && searchValue.trim() !== '' && ( + {slotEmpty} + )} ); @@ -339,9 +341,3 @@ const $ItemLabel = styled.div` min-width: 0; `; - -const $Empty = styled(Command.Empty)` - color: var(--color-text-0); - padding: 1rem; - height: 100%; -`; diff --git a/src/components/DetailsDialog.tsx b/src/components/DetailsDialog.tsx index 115e0e3e6..28fae925e 100644 --- a/src/components/DetailsDialog.tsx +++ b/src/components/DetailsDialog.tsx @@ -27,7 +27,7 @@ export const DetailsDialog = ({ slotIcon, title, items, slotFooter, setIsOpen }: placement={isTablet ? DialogPlacement.Default : DialogPlacement.Sidebar} > <$Content> - <$Details withSeparators justifyItems="end" items={items} /> +
<$Footer>{slotFooter} @@ -40,11 +40,6 @@ const $Content = styled.div` --stickyFooterBackdrop-outsetY: var(--dialog-content-paddingBottom); gap: 1rem; `; - -const $Details = styled(Details)` - font: var(--font-small-book); -`; - const $Footer = styled.footer` ${layoutMixins.gridEqualColumns} gap: 0.66rem; diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx index eabb330eb..c96620dc3 100644 --- a/src/components/Dialog.tsx +++ b/src/components/Dialog.tsx @@ -12,6 +12,7 @@ import { Trigger, } from '@radix-ui/react-dialog'; import styled, { css, keyframes } from 'styled-components'; +import tw from 'twin.macro'; import { useDialogArea } from '@/hooks/useDialogArea'; @@ -515,21 +516,9 @@ const $BackButton = styled(BackButton)` top: var(--dialog-header-paddingTop); `; -const $Title = styled(Title)` - flex: 1; - - font: var(--font-large-medium); - color: var(--color-text-2); - - overflow: hidden; - text-overflow: ellipsis; -`; +const $Title = tw(Title)`flex-1 font-large-medium text-text-2 overflow-hidden text-ellipsis `; -const $Description = styled(Description)` - margin-top: 0.5rem; - color: var(--color-text-0); - font: var(--font-base-book); -`; +const $Description = tw(Description)`mt-0.5 text-text-0 font-base-book `; const $Footer = styled.footer` display: grid; diff --git a/src/components/DropdownHeaderMenu.tsx b/src/components/DropdownHeaderMenu.tsx index 6dd3c352c..8322c7dfb 100644 --- a/src/components/DropdownHeaderMenu.tsx +++ b/src/components/DropdownHeaderMenu.tsx @@ -54,8 +54,8 @@ export const DropdownHeaderMenu = ({ onSelect={() => (onSelect ?? onValueChange)?.(value)} disabled={disabled} > - <$ItemLabel>{label} - <$Description>{description} + {label} + {description} ))} @@ -122,13 +122,3 @@ const $Item = styled(Item)` ${layoutMixins.column} gap: 0.5rem; `; - -const $ItemLabel = styled.span` - color: var(--color-text-2); - font: var(--font-medium-book); -`; - -const $Description = styled.span` - color: var(--color-text-0); - font: var(--font-small-book); -`; diff --git a/src/components/DropdownMenu.tsx b/src/components/DropdownMenu.tsx index 36ac183bc..2169524a4 100644 --- a/src/components/DropdownMenu.tsx +++ b/src/components/DropdownMenu.tsx @@ -84,7 +84,7 @@ export const DropdownMenu = forwardRefFn( {item.icon} {item.label} - {item.separator && <$Separator />} + {item.separator && } ))} {slotBottomContent} @@ -94,12 +94,6 @@ export const DropdownMenu = forwardRefFn( ); } ); - -const $Separator = styled(Separator)` - border-bottom: solid var(--border-width) var(--color-border); - margin: 0.25rem 1rem; -`; - const $Item = styled(Item)<{ $highlightColor?: 'accent' | 'create' | 'destroy' }>` ${popoverMixins.item} --item-font-size: var(--dropdownMenu-item-font-size); diff --git a/src/components/GreenCheckCircle.tsx b/src/components/GreenCheckCircle.tsx index 9830ff226..9cab6cc89 100644 --- a/src/components/GreenCheckCircle.tsx +++ b/src/components/GreenCheckCircle.tsx @@ -3,11 +3,9 @@ import styled from 'styled-components'; import { Icon, IconName } from '@/components/Icon'; export const GreenCheckCircle = ({ className }: { className?: string }) => ( - <$Icon className={className} iconName={IconName.CheckCircle} /> + ); -const $Icon = styled(Icon)` - --icon-size: 1.25rem; - - width: var(--icon-size); - height: var(--icon-size); -`; diff --git a/src/components/Loading/LoadingSpinner.tsx b/src/components/Loading/LoadingSpinner.tsx index b27bd1276..efec7dc90 100644 --- a/src/components/Loading/LoadingSpinner.tsx +++ b/src/components/Loading/LoadingSpinner.tsx @@ -15,7 +15,7 @@ export const LoadingSpinner: React.FC = ({ disabled = false, }: LoadingSpinnerProps) => { return ( - <$Spinner className={className}> +
<$LoadingSpinnerSvg id={id} width="38" @@ -41,7 +41,7 @@ export const LoadingSpinner: React.FC = ({ /> )} - +
); }; @@ -54,14 +54,6 @@ export const LoadingSpace: React.FC = ({ className, id }: Loa const $LoadingSpaceContainer = styled.div` ${layoutMixins.centered} `; - -const $Spinner = styled.div` - --spinner-width: auto; - - line-height: 0; - color: var(--color-text-0); -`; - const $LoadingSpinnerSvg = styled.svg` width: var(--spinner-width); height: auto; diff --git a/src/components/MarginUsageRing.stories.tsx b/src/components/MarginUsageRing.stories.tsx index 2ac5cc70d..fc8b2c6ad 100644 --- a/src/components/MarginUsageRing.stories.tsx +++ b/src/components/MarginUsageRing.stories.tsx @@ -25,7 +25,7 @@ export const MarginUsageRingStyled: Story<{ value: number }> = ({ value }: { val return ( <$Container> - <$MarginUsageRing value={value / 100} /> + ); @@ -34,10 +34,6 @@ export const MarginUsageRingStyled: Story<{ value: number }> = ({ value }: { val MarginUsageRingStyled.args = { value: 0, }; -const $MarginUsageRing = styled(MarginUsageRing)` - color: var(--color-accent); -`; - const $Container = styled.section` background: var(--color-layer-3); diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx index bb502d5ad..acb253ec5 100644 --- a/src/components/Notification.tsx +++ b/src/components/Notification.tsx @@ -59,16 +59,21 @@ export const Notification = ({ <$Container className={className} isToast={isToast} onClick={onClick}> <$Header> {slotTitleLeft ?? (slotIcon && <$Icon>{slotIcon})} - <$Title>{slotTitle} +
+ {slotTitle} +
{slotTitleRight} {withClose && !isToast && ( <$ActionItems> - <$Output + - {notification.status < NotificationStatus.Seen ? <$UnreadIndicator /> : null} + {notification.status < NotificationStatus.Seen ? ( +
+ ) : null} {notification.status < NotificationStatus.Cleared ? ( <$IconButton @@ -89,8 +94,12 @@ export const Notification = ({ )} - {slotContentOrDescription && <$Description>{slotContentOrDescription}} - {slotAction && <$Action>{slotAction}} + {slotContentOrDescription && ( +
+ {slotContentOrDescription} +
+ )} + {slotAction &&
{slotAction}
} ); }; @@ -140,29 +149,6 @@ const $Icon = styled.div` height: 1.5rem; } `; - -const $Title = styled.div` - flex: 1; - - font: var(--font-base-medium); - color: var(--color-text-2); - - overflow: hidden; - text-overflow: ellipsis; -`; - -const $Description = styled.div` - margin-top: 0.5rem; - color: var(--color-text-0); - font: var(--font-small-book); - white-space: break-spaces; -`; - -const $Action = styled.div` - margin-top: 0.5rem; - font: var(--font-small-book); -`; - const $ActionItems = styled.div` min-width: fit-content; padding-left: 0.5rem; @@ -185,19 +171,6 @@ const $ActionItems = styled.div` display: flex; } `; - -const $UnreadIndicator = styled.div` - width: 0.5rem; - height: 0.5rem; - border-radius: 50%; - background-color: var(--color-accent); - border: 1px solid var(--color-layer-2); -`; - -const $Output = styled(Output)` - color: var(--color-text-0); -`; - const $IconButton = styled(IconButton)` --button-border: none; --button-textColor: var(--color-text-0); diff --git a/src/components/NumberValue.tsx b/src/components/NumberValue.tsx index 62b6135b9..079623068 100644 --- a/src/components/NumberValue.tsx +++ b/src/components/NumberValue.tsx @@ -20,7 +20,10 @@ export const NumberValue = ({ className, value, withSubscript }: NumberValueProp {punctuationSymbol} {Boolean(zeros) && ( <> - 0<$Sub title={value}>{zeros} + 0 + + {zeros} + )} {decimalDigits} @@ -30,6 +33,3 @@ export const NumberValue = ({ className, value, withSubscript }: NumberValueProp return value; }; -const $Sub = styled.sub` - font-size: 0.85em; -`; diff --git a/src/components/Output.tsx b/src/components/Output.tsx index 513f34a46..ad350d472 100644 --- a/src/components/Output.tsx +++ b/src/components/Output.tsx @@ -445,10 +445,10 @@ export const Output = ({ withBaseFont={withBaseFont} > {slotLeft} - {sign && <$Sign>{sign}} + {sign && {sign}} {hasValue && renderedNumber} {slotRight} - {tag && <$Tag>{tag}} + {tag && {tag}} ); } @@ -489,15 +489,6 @@ const $Text = styled.output<{ withParentheses?: boolean }>` --output-afterString: ')'; `} `; - -const $Tag = styled(Tag)` - margin-left: 0.5ch; -`; - -const $Sign = styled.span` - color: var(--output-sign-color); -`; - const $Number = styled($Text)<{ withBaseFont?: boolean }>` ${({ withBaseFont }) => !withBaseFont && diff --git a/src/components/PageMenu/PageMenuNavigationItem.tsx b/src/components/PageMenu/PageMenuNavigationItem.tsx index d13d92c2b..5bf5cd105 100644 --- a/src/components/PageMenu/PageMenuNavigationItem.tsx +++ b/src/components/PageMenu/PageMenuNavigationItem.tsx @@ -21,7 +21,7 @@ export const PageMenuNavigationItem = <
{label}
<$RightRow> {labelRight && {labelRight}} - <$Icon iconName={IconName.ChevronRight} /> + @@ -42,7 +42,3 @@ const $RightRow = styled.div` font: var(--font-base-book); color: var(--color-text-0); `; - -const $Icon = styled(Icon)` - color: var(--color-text-0); -`; diff --git a/src/components/PageMenu/PageMenuRadioGroup.tsx b/src/components/PageMenu/PageMenuRadioGroup.tsx index 09bdab405..24348220c 100644 --- a/src/components/PageMenu/PageMenuRadioGroup.tsx +++ b/src/components/PageMenu/PageMenuRadioGroup.tsx @@ -24,7 +24,11 @@ export const PageMenuRadioGroupItem = < {slotBefore} {label}
- {value === curentValue ? <$CheckIcon iconName={IconName.Check} /> : <$EmptyIcon />} + {value === curentValue ? ( + + ) : ( + <$EmptyIcon /> + )} ))} @@ -43,16 +47,6 @@ const $MenuItem = styled(Item)` --item-padding: 1.25rem 1.625rem; --item-checked-backgroundColor: var(--color-layer-0); `; - -const $CheckIcon = styled(Icon)` - padding: 4px; - - border-radius: 50%; - - color: var(--color-text-1); - background-color: var(--color-accent); -`; - const $EmptyIcon = styled.div` width: 0.9em; height: 0.9em; diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx index 0bde636e6..e94760329 100644 --- a/src/components/Panel.tsx +++ b/src/components/Panel.tsx @@ -41,7 +41,7 @@ export const Panel = ({ {slotHeader ?? ( <$Header role="button" onClick={onHeaderClick} hasSeparator={hasSeparator}> {slotHeaderContent} - <$Icon iconName={IconName.ChevronRight} /> + )} @@ -106,12 +106,6 @@ const $Header = styled.header<{ hasSeparator?: boolean }>` box-shadow: 0 var(--border-width) var(--border-color); `} `; - -const $Icon = styled(Icon)` - color: var(--color-text-0); - font-size: 0.625rem; -`; - const $Content = styled.div` ${layoutMixins.scrollArea} ${layoutMixins.stickyArea0} diff --git a/src/components/PortfolioCard.tsx b/src/components/PortfolioCard.tsx index 86f35a83e..9af41f85a 100644 --- a/src/components/PortfolioCard.tsx +++ b/src/components/PortfolioCard.tsx @@ -31,8 +31,8 @@ export const PortfolioCard = ({ {assetName} <$MarginRow> - <$MarginLabel>{detailLabel} - <$MarginValue>{detailValue} + {detailLabel} + {detailValue} <$ActionRow>{actionSlot} @@ -66,16 +66,6 @@ const $MarginRow = styled.div` padding: 0 0.625rem; margin-top: 0.5rem; `; - -const $MarginLabel = styled.span` - color: var(--color-text-0); - font: var(--font-mini-book); -`; - -const $MarginValue = styled.span` - font: var(--font-small-book); -`; - const $ActionRow = styled.div` ${layoutMixins.spacedRow} border-top: var(--border); diff --git a/src/components/PotentialPositionCard.tsx b/src/components/PotentialPositionCard.tsx index 7fc9eb51e..de4002b17 100644 --- a/src/components/PotentialPositionCard.tsx +++ b/src/components/PotentialPositionCard.tsx @@ -46,24 +46,18 @@ export const PotentialPositionCard = ({ detailValue={} actionSlot={ <> - <$Link onClick={() => onViewOrders(marketId)} isAccent> + onViewOrders(marketId)} isAccent tw="font-small-book"> {stringGetter({ key: orderCount > 1 ? STRING_KEYS.VIEW_ORDERS : STRING_KEYS.VIEW })}{' '} - - <$CancelLink onClick={() => onCancelOrders(marketId)}> + + onCancelOrders(marketId)} + tw="font-small-book [--link-color:var(--color-risk-high)]" + > {stringGetter({ key: orderCount > 1 ? STRING_KEYS.CANCEL_ORDERS : STRING_KEYS.CANCEL })}{' '} - + } /> ); }; - -const $Link = styled(Link)` - font: var(--font-small-book); -`; - -const $CancelLink = styled(Link)` - --link-color: var(--color-risk-high); - font: var(--font-small-book); -`; diff --git a/src/components/RadioButtonCards.tsx b/src/components/RadioButtonCards.tsx index ca5eb7ae3..913730a78 100644 --- a/src/components/RadioButtonCards.tsx +++ b/src/components/RadioButtonCards.tsx @@ -34,7 +34,14 @@ export const RadioButtonCards = ({ <$RadioButtonCard key={item.value} value={item.value} disabled={item.disabled}> <$CardHeader> {item.label} - {value === item.value ? <$CheckIcon iconName={IconName.Check} /> : <$EmptyIcon />} + {value === item.value ? ( + + ) : ( + <$EmptyIcon /> + )} {item.body} @@ -89,18 +96,6 @@ const $CardHeader = styled.div` justify-content: space-between; gap: 1rem; `; - -const $CheckIcon = styled(Icon)` - width: 1rem; - height: 1rem; - padding: 0.25rem; - - border-radius: 50%; - - color: var(--color-text-1); - background-color: var(--color-accent); -`; - const $EmptyIcon = styled.div` width: 1rem; height: 1rem; diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx index 00f3214a9..a8f893f34 100644 --- a/src/components/SearchInput.tsx +++ b/src/components/SearchInput.tsx @@ -21,7 +21,7 @@ export const SearchInput = ({ placeholder, onTextChange }: SearchInputProps) => return ( <$Search> <$Icon iconName={IconName.Search} /> - <$Input + onTextChange?.(e.target.value); }} placeholder={placeholder} + tw="max-w-full rounded-0" /> {value.length > 0 && ( <$IconButton @@ -55,12 +56,6 @@ const $Search = styled.div` gap: 0.375rem; justify-content: end; `; - -const $Input = styled(Input)` - max-width: 100%; - border-radius: 0; -`; - const $IconButton = styled(IconButton)` --button-icon-size: 0.5rem; --button-border: none; diff --git a/src/components/SearchSelectMenu.stories.tsx b/src/components/SearchSelectMenu.stories.tsx index e180f0b3b..d3e696fd1 100644 --- a/src/components/SearchSelectMenu.stories.tsx +++ b/src/components/SearchSelectMenu.stories.tsx @@ -24,11 +24,11 @@ export const SearchSelectMenuStory: Story[0] return ( - +
{!selectedItem ? Search and Select : {selectedItem}} - +
); }; @@ -38,7 +38,3 @@ SearchSelectMenuStory.args = { }; SearchSelectMenuStory.argTypes = {}; - -const Container = styled.div` - width: 400px; -`; diff --git a/src/components/SelectMenu.tsx b/src/components/SelectMenu.tsx index 9fe82c11b..20c9536df 100644 --- a/src/components/SelectMenu.tsx +++ b/src/components/SelectMenu.tsx @@ -47,7 +47,7 @@ export const SelectMenu = ({ )} {React.Children.toArray(children).length > 1 && ( - <$TriggerIcon iconName={IconName.Triangle} /> + )} @@ -113,9 +113,3 @@ const $WithLabel = styled(WithLabel)` ${formMixins.inputLabel} border-radius: 0; `; - -const $TriggerIcon = styled(Icon)` - width: 0.625rem; - height: 0.375rem; - color: var(--color-text-0); -`; diff --git a/src/components/Separator.tsx b/src/components/Separator.tsx index f0f80c449..355f49ccf 100644 --- a/src/components/Separator.tsx +++ b/src/components/Separator.tsx @@ -62,13 +62,11 @@ export const WithSeparators = ({ )) : children; - -const StyledHorizontalSeparatorFiller = styled(Separator)` - flex: 1; - height: var(--border-width); - background-color: var(--color-border); -`; - export const HorizontalSeparatorFiller = ({ className }: { className?: string }) => ( - + ); diff --git a/src/components/Switch.stories.tsx b/src/components/Switch.stories.tsx index ea87e6e54..8165110d5 100644 --- a/src/components/Switch.stories.tsx +++ b/src/components/Switch.stories.tsx @@ -12,16 +12,10 @@ export const SwitchStory: Story[0]> = (args) => { return ( - + ); }; - -const StyledSwitch = styled(Switch)` - font-size: 2em; - margin-left: 1em; -`; - SwitchStory.args = { disabled: false, }; diff --git a/src/components/Table.tsx b/src/components/Table.tsx index 975438699..b3242402e 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -460,7 +460,10 @@ const TableRoot = (prop {paginationRow && ( <$Tfoot> - <$PaginationTr key="pagination"> + e.preventDefault()} @@ -468,7 +471,7 @@ const TableRoot = (prop > {paginationRow} - + )} @@ -1016,7 +1019,3 @@ const $Row = styled.div` ${layoutMixins.inlineRow} padding: var(--tableCell-padding); `; - -const $PaginationTr = styled.tr` - box-shadow: 0 calc(-1 * var(--border-width)) 0 0 var(--border-color); -`; diff --git a/src/components/Table/ActionsTableCell.tsx b/src/components/Table/ActionsTableCell.tsx index 69236d4a8..aa0bf6c1b 100644 --- a/src/components/Table/ActionsTableCell.tsx +++ b/src/components/Table/ActionsTableCell.tsx @@ -9,15 +9,10 @@ type ElementProps = { }; export const ActionsTableCell = ({ children }: ElementProps) => ( - <$ActionsCell> +
<$Toolbar $numChildren={React.Children.toArray(children).length}>{children} - +
); -const $ActionsCell = styled.div` - display: flex; - justify-content: flex-end; -`; - const $Toolbar = styled(Toolbar)<{ $numChildren: number }>` ${({ $numChildren }) => $numChildren && diff --git a/src/components/Table/AssetTableCell.tsx b/src/components/Table/AssetTableCell.tsx index c252c5a6e..3310d7a99 100644 --- a/src/components/Table/AssetTableCell.tsx +++ b/src/components/Table/AssetTableCell.tsx @@ -46,7 +46,7 @@ export const AssetTableCell = (props: AssetTableCellProps) => { <$Asset stacked={stacked}>{asset?.name} {maxLeverage} - {stacked ? <$AssetID>{asset?.id} : undefined} + {stacked ? {asset?.id} : undefined} ); @@ -71,12 +71,6 @@ const $AssetIcon = styled(AssetIcon)<{ stacked?: boolean }>` font-size: ${({ stacked }) => (stacked ? '1.5rem' : '2.25rem')}; } `; - -const $AssetID = styled.span` - color: var(--color-text-0); - font: var(--font-mini-medium); -`; - const $Asset = styled.span<{ stacked?: boolean }>` color: var(--color-text-1); font: ${({ stacked }) => (stacked ? 'var(--font-small-medium)' : 'var(--font-medium-medium)')}; diff --git a/src/components/Table/MarketTableCell.tsx b/src/components/Table/MarketTableCell.tsx index c86f1933b..499724dfe 100644 --- a/src/components/Table/MarketTableCell.tsx +++ b/src/components/Table/MarketTableCell.tsx @@ -32,7 +32,7 @@ export const MarketTableCell = ({ slotLeft={ <> {showFavorite && } - <$AssetIcon symbol={asset?.id} /> + } > @@ -43,22 +43,9 @@ export const MarketTableCell = ({ ) : ( <> - <$Asset>{asset?.name} + {asset?.name} {marketId} )} ); -const $AssetIcon = styled(AssetIcon)` - font-size: 1.25rem; - - @media ${breakpoints.tablet} { - font-size: 2.25rem; - } -`; - -const $Asset = styled.span` - @media ${breakpoints.tablet} { - color: var(--color-text-2); - } -`; diff --git a/src/components/Table/TablePaginationRow.tsx b/src/components/Table/TablePaginationRow.tsx index cead8faa4..d275f3f2e 100644 --- a/src/components/Table/TablePaginationRow.tsx +++ b/src/components/Table/TablePaginationRow.tsx @@ -77,13 +77,14 @@ export const TablePaginationRow = ({ key: STRING_KEYS.SHOW, params: { NUMBER: ( - <$DropdownSelectMenu + ({ label: String(size), value: String(size), }))} onValueChange={(value: String) => setPageSize(Number(value) as PageSize)} + tw="[--dropdownSelectMenu-item-font-size:var(--fontSize-mini)]" /> ), }, @@ -122,7 +123,3 @@ const $ToggleGroup = styled(ToggleGroup)` background-color: transparent; } `; - -const $DropdownSelectMenu = styled(DropdownSelectMenu)` - --dropdownSelectMenu-item-font-size: var(--fontSize-mini); -`; diff --git a/src/components/ValidatorFaviconIcon.tsx b/src/components/ValidatorFaviconIcon.tsx index 3cb4785cc..ac139cba6 100644 --- a/src/components/ValidatorFaviconIcon.tsx +++ b/src/components/ValidatorFaviconIcon.tsx @@ -24,11 +24,12 @@ export const ValidatorFaviconIcon = ({ const baseUrl = `${parsedUrl.protocol}//${parsedUrl.hostname}`; return ( - <$Img + validator favicon setIconFail(true)} + tw="mr-[0.25em] h-[1.5em] w-[1.5em] rounded-[50%] object-cover" /> ); } catch (error) { @@ -51,11 +52,3 @@ const $IconContainer = styled.div` color: var(--color-text-1); margin-right: 0.25em; `; - -const $Img = styled.img` - width: 1.5em; - height: 1.5em; - border-radius: 50%; - object-fit: cover; - margin-right: 0.25em; -`; diff --git a/src/components/WithHovercard.tsx b/src/components/WithHovercard.tsx index 978fd3c06..df010446a 100644 --- a/src/components/WithHovercard.tsx +++ b/src/components/WithHovercard.tsx @@ -52,7 +52,7 @@ export const WithHovercard = ({ {slotTrigger && {slotTrigger}} <$Content className={className} align={align} alignOffset={-16} side={side} sideOffset={8}> - {hovercardTitle && <$Title>{hovercardTitle}} + {hovercardTitle &&

{hovercardTitle}

} {hovercardBody &&

{hovercardBody}

} {slotButton} @@ -75,8 +75,3 @@ const $Content = styled(Content)` font-size: 0.8125em; border-radius: 0.33rem; `; - -const $Title = styled.h3` - font: var(--font-small-bold); - color: var(--color-text-2); -`; diff --git a/src/components/WithLabel.tsx b/src/components/WithLabel.tsx index 96d0ef012..ce25cf68d 100644 --- a/src/components/WithLabel.tsx +++ b/src/components/WithLabel.tsx @@ -13,18 +13,11 @@ type StyleProps = { }; export const WithLabel = ({ label, inputID, children, className }: ElementProps & StyleProps) => ( - <$WithLabel className={className}> +
<$Label htmlFor={inputID}>{label} {children} - +
); -const $WithLabel = styled.div` - --label-textColor: var(--color-text-1); - - display: grid; - gap: 0.5rem; -`; - const $Label = styled.label` ${layoutMixins.inlineRow} font: var(--font-mini-book); diff --git a/src/components/WithTooltip.tsx b/src/components/WithTooltip.tsx index 244175ae2..9e4d7177d 100644 --- a/src/components/WithTooltip.tsx +++ b/src/components/WithTooltip.tsx @@ -73,7 +73,7 @@ export const WithTooltip = ({ <$Abbr> {children} - {withIcon && <$Icon iconName={IconName.HelpCircle} />} + {withIcon && } @@ -152,7 +152,3 @@ const $Arrow = styled(Arrow)` fill: var(--tooltip-backgroundColor); } `; - -const $Icon = styled(Icon)` - color: var(--color-text-0); -`; diff --git a/src/components/visx/TimeSeriesChart.tsx b/src/components/visx/TimeSeriesChart.tsx index 487edf42b..ab18e94ad 100644 --- a/src/components/visx/TimeSeriesChart.tsx +++ b/src/components/visx/TimeSeriesChart.tsx @@ -275,7 +275,7 @@ export const TimeSeriesChart = ({ }} > - <$ParentSize> + {/* eslint-disable-next-line react/no-unused-prop-types */} {({ width, height }: { width: number; height: number }) => { const numTicksX = @@ -436,7 +436,7 @@ export const TimeSeriesChart = ({ ); }} - + ) : ( @@ -486,15 +486,6 @@ const $Container = styled.div` } } `; - -const $ParentSize = styled(ParentSize)` - min-height: 0; - display: grid; - - overflow: auto; - overscroll-behavior: contain; -`; - const $YAxisBackground = styled.foreignObject` background: var(--stickyArea-background); diff --git a/src/hooks/useComplianceState.tsx b/src/hooks/useComplianceState.tsx index fc240c57d..19e31f47c 100644 --- a/src/hooks/useComplianceState.tsx +++ b/src/hooks/useComplianceState.tsx @@ -81,7 +81,7 @@ export const useComplianceState = () => { complianceMessage = stringGetter({ key: STRING_KEYS.BLOCKED_MESSAGE, params: { - TERMS_OF_USE_LINK: <$TermsOfUseLink isInline />, + TERMS_OF_USE_LINK: , }, }); } @@ -93,7 +93,3 @@ export const useComplianceState = () => { complianceMessage, }; }; - -const $TermsOfUseLink = styled(TermsOfUseLink)` - text-decoration: underline; -`; diff --git a/src/hooks/useNotificationTypes.tsx b/src/hooks/useNotificationTypes.tsx index 20bbda39f..33893eda6 100644 --- a/src/hooks/useNotificationTypes.tsx +++ b/src/hooks/useNotificationTypes.tsx @@ -4,6 +4,7 @@ import { groupBy, isEqual } from 'lodash'; import { shallowEqual } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { ComplianceStatus } from '@/constants/abacus'; import { ComplianceStates } from '@/constants/compliance'; @@ -665,11 +666,6 @@ export const notificationTypes: NotificationTypeConfig[] = [ }, ]; -const $Icon = styled.img` - height: 1.5rem; - width: 1.5rem; -`; +const $Icon = tw.img`h-1.5 w-1.5`; -const $WarningIcon = styled(Icon)` - color: var(--color-warning); -`; +const $WarningIcon = tw(Icon)`text-warning `; diff --git a/src/layout/Footer/FooterDesktop.tsx b/src/layout/Footer/FooterDesktop.tsx index a5e94451f..13a8f90e4 100644 --- a/src/layout/Footer/FooterDesktop.tsx +++ b/src/layout/Footer/FooterDesktop.tsx @@ -100,7 +100,12 @@ export const FooterDesktop = () => { key: FooterItems.IndexerHeight.toString(), label: 'Indexer Block Height', value: ( - <$WarningOutput useGrouping type={OutputType.Number} value={indexerHeight} /> + ), } : undefined, @@ -157,11 +162,6 @@ const $FooterButton = styled(Button)` cursor: default; } `; - -const $WarningOutput = styled(Output)` - color: var(--color-warning); -`; - const $Details = styled(Details)` ${layoutMixins.scrollArea} font: var(--font-tiny-book); diff --git a/src/layout/Footer/FooterMobile.tsx b/src/layout/Footer/FooterMobile.tsx index f4ecaed81..cf2921d8b 100644 --- a/src/layout/Footer/FooterMobile.tsx +++ b/src/layout/Footer/FooterMobile.tsx @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import tw from 'twin.macro'; import { DialogTypes } from '@/constants/dialogs'; import { STRING_KEYS } from '@/constants/localization'; @@ -154,9 +155,7 @@ const $NavigationMenu = styled(NavigationMenu)` } `; -const $Icon = styled(Icon)` - font-size: 1.5rem; -`; +const $Icon = tw(Icon)`text-[1.5rem] `; const $StartIcon = styled.div` display: inline-flex; diff --git a/src/layout/Header/HeaderDesktop.tsx b/src/layout/Header/HeaderDesktop.tsx index 9b2780807..b3ec99ced 100644 --- a/src/layout/Header/HeaderDesktop.tsx +++ b/src/layout/Header/HeaderDesktop.tsx @@ -67,7 +67,7 @@ export const HeaderDesktop = () => { label: ( <> {stringGetter({ key: STRING_KEYS.VAULT })}{' '} - <$NewTag>{stringGetter({ key: STRING_KEYS.NEW })} + {stringGetter({ key: STRING_KEYS.NEW })} ), href: AppRoute.Vault, @@ -76,7 +76,9 @@ export const HeaderDesktop = () => { value: chainTokenLabel, label: chainTokenLabel, href: `/${chainTokenLabel}`, - slotAfter: !hasSeenLaunchIncentives && <$UnreadIndicator />, + slotAfter: !hasSeenLaunchIncentives && ( +
+ ), }, { value: 'MORE', @@ -267,14 +269,3 @@ const $IconButton = styled(IconButton)<{ size?: string }>` --button-icon-size: 1rem; --button-padding: 0 0.5em; `; - -const $UnreadIndicator = styled.div` - width: 0.4375rem; - height: 0.4375rem; - border-radius: 50%; - background-color: var(--color-accent); -`; -const $NewTag = styled(Tag)` - color: var(--color-accent); - background-color: var(--color-accent-faded); -`; diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index a7b44a9b0..2c57ada63 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -1,5 +1,6 @@ import { Link, useNavigate } from 'react-router-dom'; import styled, { css } from 'styled-components'; +import tw from 'twin.macro'; import { useEnsName } from 'wagmi'; import { TransferType } from '@/constants/abacus'; @@ -137,7 +138,9 @@ const Profile = () => { <$Header> <$ProfileIcon />
- <$Address>{isConnected ? ensName ?? truncateAddress(dydxAddress) : '-'} +

+ {isConnected ? ensName ?? truncateAddress(dydxAddress) : '-'} +

{isConnected && walletType ? ( <$SubHeader> <$ConnectedIcon /> @@ -168,7 +171,7 @@ const Profile = () => { })} - <$SettingsButton + <$PanelButton slotHeader={ <$InlineRow> @@ -176,8 +179,9 @@ const Profile = () => { } onClick={() => navigate(AppRoute.Settings)} + tw="[grid-area:settings]" /> - <$HelpButton + <$PanelButton slotHeader={ <$InlineRow> @@ -185,11 +189,12 @@ const Profile = () => { } onClick={() => dispatch(openDialog(DialogTypes.Help()))} + tw="[grid-area:help]" /> - <$MigratePanel /> + - <$StakingPanel /> + <$RewardsPanel slotHeaderContent={stringGetter({ key: STRING_KEYS.TRADING_REWARDS })} @@ -203,7 +208,7 @@ const Profile = () => { label: stringGetter({ key: STRING_KEYS.THIS_WEEK }), value: ( } + slotRight={} type={OutputType.Asset} value={currentWeekTradingReward?.amount} /> @@ -213,10 +218,11 @@ const Profile = () => { layout="grid" /> - <$FeesPanel + <$Details items={[ @@ -226,7 +232,7 @@ const Profile = () => { ]} layout="grid" /> - + <$HistoryPanel slotHeaderContent={stringGetter({ key: STRING_KEYS.HISTORY })} @@ -244,9 +250,9 @@ const Profile = () => { initialPageSize={5} /> - <$LaunchIncentivesPanel /> - <$GovernancePanel /> - <$NewMarketsPanel /> + + + ); }; @@ -329,11 +335,6 @@ const $ConnectedIcon = styled.div` border-radius: 50%; box-shadow: 0 0 0 0.2rem var(--color-gradient-success); `; - -const $Address = styled.h1` - font: var(--font-extra-medium); -`; - const $Actions = styled(Toolbar)` ${layoutMixins.spacedRow} --stickyArea-topHeight: 5rem; @@ -368,10 +369,7 @@ const $ActionButton = styled(IconButton)<{ iconName?: IconName }>` `} `; -const $Details = styled(Details)` - font: var(--font-small-book); - --details-value-font: var(--font-medium-book); -`; +const $Details = tw(Details)`font-small-book [--details-value-font:var(--font-medium-book)] `; const $RewardsPanel = styled(Panel)` grid-area: rewards; @@ -385,11 +383,6 @@ const $RewardsPanel = styled(Panel)` --details-grid-numColumns: 1; } `; - -const $FeesPanel = styled(Panel)` - grid-area: fees; -`; - const $HistoryPanel = styled(Panel)` grid-area: history; --panel-content-paddingY: 0; @@ -429,35 +422,3 @@ const $InlineRow = styled.div` const $PanelButton = styled(Panel)` --panel-paddingY: 0 --panel-paddingX: 0; `; - -const $SettingsButton = styled($PanelButton)` - grid-area: settings; -`; - -const $HelpButton = styled($PanelButton)` - grid-area: help; -`; - -const $MigratePanel = styled(MigratePanel)` - grid-area: migrate; -`; - -const $StakingPanel = styled(StakingPanel)` - grid-area: staking; -`; - -const $GovernancePanel = styled(GovernancePanel)` - grid-area: governance; -`; - -const $LaunchIncentivesPanel = styled(LaunchIncentivesPanel)` - grid-area: incentives; -`; - -const $NewMarketsPanel = styled(NewMarketsPanel)` - grid-area: newMarkets; -`; - -const $AssetIcon = styled(AssetIcon)` - margin-left: 0.5ch; -`; diff --git a/src/pages/markets/NewMarket.tsx b/src/pages/markets/NewMarket.tsx index cad43ef6a..927a1cbf8 100644 --- a/src/pages/markets/NewMarket.tsx +++ b/src/pages/markets/NewMarket.tsx @@ -34,13 +34,13 @@ const StepItem = ({ subtitle: React.ReactNode; title: string; }) => ( - <$StepItem> +
<$StepNumber>{step} - <$Column> - <$Title>{title} - <$Subtitle>{subtitle} - - +
+ {title} + {subtitle} +
+
); const NewMarket = () => { @@ -101,10 +101,12 @@ const NewMarket = () => { subtitle={isNotTablet && stringGetter({ key: STRING_KEYS.LISTINGS_DESCRIPTION })} /> - <$Content> +
{displaySteps && ( <> - <$StepsTitle>{stringGetter({ key: STRING_KEYS.STEPS_TO_CREATE })} +

+ {stringGetter({ key: STRING_KEYS.STEPS_TO_CREATE })} +

{steps.map((item) => ( { <$FormContainer> - +
); }; @@ -176,43 +180,6 @@ const $HeaderSection = styled.section` margin-bottom: 0.5rem; } `; - -const $Content = styled.div` - display: flex; - flex-direction: row; - gap: 2rem; - margin: 0 auto; - - @media ${breakpoints.tablet} { - display: flex; - flex-direction: column; - gap: 1rem; - margin: 0 auto; - } -`; - -const $StepsTitle = styled.h2` - font: var(--font-large-medium); - color: var(--color-text-2); - margin: 1rem; - - @media ${breakpoints.tablet} { - margin: 1rem 0; - } -`; - -const $Icon = styled(Icon)` - margin-right: 0.5ch; -`; - -const $StepItem = styled.div` - display: flex; - flex-direction: row; - gap: 1rem; - align-items: center; - margin-bottom: 1rem; -`; - const $StepNumber = styled.div` width: 2.5rem; height: 2.5rem; @@ -225,21 +192,6 @@ const $StepNumber = styled.div` justify-content: center; color: var(--color-text-2); `; - -const $Column = styled.div` - display: flex; - flex-direction: column; -`; - -const $Title = styled.span` - color: var(--color-text-2); - font: var(--font-medium-book); -`; - -const $Subtitle = styled.span` - color: var(--color-text-0); -`; - const $FormContainer = styled.div` min-width: 31.25rem; height: fit-content; diff --git a/src/pages/portfolio/AccountDetailsAndHistory.tsx b/src/pages/portfolio/AccountDetailsAndHistory.tsx index 4f30c62e1..d696e5813 100644 --- a/src/pages/portfolio/AccountDetailsAndHistory.tsx +++ b/src/pages/portfolio/AccountDetailsAndHistory.tsx @@ -147,14 +147,14 @@ export const AccountDetailsAndHistory = () => { <$AccountDetailsAndHistory> <$AccountValue> <$WithLabel label={accountValueLabel}> - <$AccountEquity> +
- +
<$PnlDiff isPositive={MustBigNumber(pnlDiff).gte(0)}> {pnlDiff && } @@ -179,13 +179,13 @@ export const AccountDetailsAndHistory = () => { onVisibleDataChange={setVisibleData} selectedLocale={selectedLocale} slotEmpty={ - <$EmptyChart> +
{complianceState === ComplianceStates.READ_ONLY ? ( <$Card> {stringGetter({ key: STRING_KEYS.BLOCKED_MESSAGE, params: { - TERMS_OF_USE_LINK: <$TermsOfUseLink isInline />, + TERMS_OF_USE_LINK: , }, })} @@ -202,7 +202,7 @@ export const AccountDetailsAndHistory = () => { ) : null} - +
} /> @@ -247,12 +247,6 @@ const $AccountValue = styled.div` margin-bottom: 0.875rem; } `; - -const $AccountEquity = styled.div` - font: var(--font-extra-book); - color: var(--color-text-2); -`; - const $PnlDiff = styled.div<{ isPositive: boolean }>` color: var(--color-negative); display: flex; @@ -295,12 +289,6 @@ const $PnlChart = styled(PnlChart)<{ pnlDiffSign: NumberSign }>` [NumberSign.Neutral]: 'var(--color-text-1)', })[pnlDiffSign]}; `; - -const $EmptyChart = styled.div` - display: grid; - cursor: default; -`; - const $Card = styled.div` padding: 1.25rem; margin: auto; @@ -321,7 +309,3 @@ const $EmptyCard = styled($Card)` width: fit-content; } `; - -const $TermsOfUseLink = styled(TermsOfUseLink)` - text-decoration: underline; -`; diff --git a/src/pages/portfolio/EquityTiers.tsx b/src/pages/portfolio/EquityTiers.tsx index 9512c140b..476fe4a40 100644 --- a/src/pages/portfolio/EquityTiers.tsx +++ b/src/pages/portfolio/EquityTiers.tsx @@ -1,5 +1,6 @@ import { shallowEqual } from 'react-redux'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { EquityTier } from '@/constants/abacus'; import { STRING_KEYS } from '@/constants/localization'; @@ -71,7 +72,7 @@ export const EquityTiers = () => { {requiredTotalNetCollateralUSD > 0 && nextLevelRequiredTotalNetCollateralUSD && ( - <$AndText>{stringGetter({ key: STRING_KEYS.AND })} + {stringGetter({ key: STRING_KEYS.AND })} )} {nextLevelRequiredTotalNetCollateralUSD && ( @@ -128,18 +129,11 @@ const $Table = styled(Table)` } ` as typeof Table; -const $HighlightOutput = styled(Output)` - color: var(--color-text-1); -`; +const $HighlightOutput = tw(Output)`text-text-1 `; const $NetCollateralValue = styled.span` ${layoutMixins.inlineRow} `; - -const $AndText = styled.span` - color: var(--color-text-0); -`; - const $Description = styled.div` color: var(--color-text-0); padding: 0 1rem; diff --git a/src/pages/portfolio/Fees.tsx b/src/pages/portfolio/Fees.tsx index 21e49c520..1cce1db44 100644 --- a/src/pages/portfolio/Fees.tsx +++ b/src/pages/portfolio/Fees.tsx @@ -3,6 +3,7 @@ import { useCallback, useMemo } from 'react'; import { Nullable } from '@dydxprotocol/v4-abacus'; import { shallowEqual } from 'react-redux'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { FeeTier } from '@/constants/abacus'; import { STRING_KEYS } from '@/constants/localization'; @@ -112,14 +113,14 @@ export const Fees = () => { label: stringGetter({ key: STRING_KEYS.TIER }), allowsSorting: false, renderCell: ({ tier }) => ( - <$Tier> - <$Output type={OutputType.Text} value={tier} /> + <$TextRow tw="gap-0.5"> + {tier === userFeeTier && ( - <$YouTag size={TagSize.Medium}> + {stringGetter({ key: STRING_KEYS.YOU })} - + )} - + ), }, { @@ -292,23 +293,6 @@ const $FeeTable = styled(Table)` --tableStickyRow-backgroundColor: var(--color-layer-1); } ` as typeof Table; +const $Highlighted = tw.strong`text-text-1`; -const $Output = styled(Output)` - color: var(--color-text-0); -`; - -const $Highlighted = styled.strong` - color: var(--color-text-1); -`; - -const $HighlightOutput = styled(Output)` - color: var(--color-text-1); -`; - -const $Tier = styled($TextRow)` - gap: 0.5rem; -`; - -const $YouTag = styled(Tag)` - color: var(--color-text-1); -`; +const $HighlightOutput = tw(Output)`text-text-1 `; diff --git a/src/pages/portfolio/History.tsx b/src/pages/portfolio/History.tsx index af3175aa7..248a4cb5c 100644 --- a/src/pages/portfolio/History.tsx +++ b/src/pages/portfolio/History.tsx @@ -22,7 +22,7 @@ export const History = () => { {isNotTablet && ( <$NavigationMenu orientation="horizontal" - slotAfter={<$ExportButton />} + slotAfter={} items={[ { group: 'navigation', @@ -54,11 +54,6 @@ export const History = () => { ); }; - -const $ExportButton = styled(ExportHistoryDropdown)` - margin-left: auto; -`; - const $NavigationMenu = styled(NavigationMenu)` --header-horizontal-padding: 1rem; diff --git a/src/pages/portfolio/Overview.tsx b/src/pages/portfolio/Overview.tsx index ae6708186..be5d41f31 100644 --- a/src/pages/portfolio/Overview.tsx +++ b/src/pages/portfolio/Overview.tsx @@ -53,7 +53,7 @@ export const Overview = () => { - <$AttachedExpandingSection> + { showClosePositionAction={shouldRenderActions} withOuterBorder /> - + <$MaybeUnopenedIsolatedPositionsPanel header={ @@ -103,10 +103,10 @@ export const Overview = () => { title={stringGetter({ key: STRING_KEYS.VAULT })} slotRight={ isTablet && ( - <$Link onClick={handleViewVault} isAccent> + {stringGetter({ key: STRING_KEYS.VIEW_VAULT })}{' '} - + ) } /> @@ -117,11 +117,6 @@ export const Overview = () => {
); }; - -const $AttachedExpandingSection = styled(AttachedExpandingSection)` - margin-top: 1rem; -`; - const $MaybeUnopenedIsolatedPositionsPanel = styled(MaybeUnopenedIsolatedPositionsPanel)` margin-top: 1rem; margin-bottom: 1rem; @@ -139,7 +134,3 @@ const $MaybeVaultPositionsPanel = styled(MaybeVaultPositionsPanel)` padding-left: 1rem; } `; - -const $Link = styled(Link)` - font: var(--font-small-book); -`; diff --git a/src/pages/portfolio/Portfolio.tsx b/src/pages/portfolio/Portfolio.tsx index 8285941b2..761bdc36e 100644 --- a/src/pages/portfolio/Portfolio.tsx +++ b/src/pages/portfolio/Portfolio.tsx @@ -140,7 +140,7 @@ const PortfolioPage = () => { sidebar={ isTablet ? null : ( <$SideBar> - <$NavigationMenu + { ], }, ]} + tw="p-0.5 pt-0" /> {onboardingState === OnboardingState.AccountConnected && ( <$Footer> @@ -289,12 +290,6 @@ const $Footer = styled.div` flex-grow: 1; } `; - -const $NavigationMenu = styled(NavigationMenu)` - padding: 0.5rem; - padding-top: 0; -`; - const $IconContainer = styled.div` width: 1.5rem; height: 1.5rem; diff --git a/src/pages/portfolio/Positions.tsx b/src/pages/portfolio/Positions.tsx index cf8a7051f..ca437cf82 100644 --- a/src/pages/portfolio/Positions.tsx +++ b/src/pages/portfolio/Positions.tsx @@ -48,7 +48,7 @@ export const Positions = () => { return ( <> - <$AttachedExpandingSection> + {isNotTablet && ( )} @@ -83,7 +83,7 @@ export const Positions = () => { }) } /> - + <$MaybeUnopenedIsolatedPositionsPanel @@ -102,10 +102,10 @@ export const Positions = () => { title={stringGetter({ key: STRING_KEYS.VAULT })} slotRight={ isTablet && ( - <$Link onClick={handleViewVault} isAccent> + {stringGetter({ key: STRING_KEYS.VIEW_VAULT })}{' '} - + ) } /> @@ -116,11 +116,6 @@ export const Positions = () => { ); }; - -const $AttachedExpandingSection = styled(AttachedExpandingSection)` - margin-bottom: 1rem; -`; - const $MaybeUnopenedIsolatedPositionsPanel = styled(MaybeUnopenedIsolatedPositionsPanel)` margin-top: 1rem; margin-bottom: 1rem; @@ -138,7 +133,3 @@ const $MaybeVaultPositionsPanel = styled(MaybeVaultPositionsPanel)` padding-left: 1rem; } `; - -const $Link = styled(Link)` - font: var(--font-small-book); -`; diff --git a/src/pages/settings/SettingsHeader.tsx b/src/pages/settings/SettingsHeader.tsx index 294feafd7..5b8b5d56e 100644 --- a/src/pages/settings/SettingsHeader.tsx +++ b/src/pages/settings/SettingsHeader.tsx @@ -42,7 +42,7 @@ export const SettingsHeader = ({ return ( <$SettingsHeader> - <$Label>{currentRoute?.label} +

{currentRoute?.label}

); }; @@ -56,8 +56,3 @@ const $SettingsHeader = styled.header` padding: 0 1rem; background-color: var(--color-layer-2); `; - -const $Label = styled.h1` - padding: 0.5rem; - font: var(--font-extra-medium); -`; diff --git a/src/pages/token/GeoblockedPanel.tsx b/src/pages/token/GeoblockedPanel.tsx index 750722232..7141e8219 100644 --- a/src/pages/token/GeoblockedPanel.tsx +++ b/src/pages/token/GeoblockedPanel.tsx @@ -15,13 +15,9 @@ export const GeoblockedPanel = () => { {stringGetter({ key: STRING_KEYS.TRADING_REWARDS_UNAVAILABLE_IN_US, params: { - TERMS_OF_USE_LINK: <$TermsOfUseLink isInline />, + TERMS_OF_USE_LINK: , }, })} ); }; - -const $TermsOfUseLink = styled(TermsOfUseLink)` - text-decoration: underline; -`; diff --git a/src/pages/token/LaunchIncentivesPanel.tsx b/src/pages/token/LaunchIncentivesPanel.tsx index 805bd329e..ccbcc7aa0 100644 --- a/src/pages/token/LaunchIncentivesPanel.tsx +++ b/src/pages/token/LaunchIncentivesPanel.tsx @@ -2,6 +2,7 @@ import { useEffect } from 'react'; import { useQuery } from '@tanstack/react-query'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { ButtonAction } from '@/constants/buttons'; import { DialogTypes } from '@/constants/dialogs'; @@ -63,10 +64,12 @@ const LaunchIncentivesTitle = () => { {stringGetter({ key: STRING_KEYS.LAUNCH_INCENTIVES_TITLE, params: { - FOR_V4: <$ForV4>{stringGetter({ key: STRING_KEYS.FOR_V4 })}, + FOR_V4: {stringGetter({ key: STRING_KEYS.FOR_V4 })}, }, })} - <$NewTag size={TagSize.Medium}>{stringGetter({ key: STRING_KEYS.NEW })} + + {stringGetter({ key: STRING_KEYS.NEW })} + ); }; @@ -113,12 +116,12 @@ const EstimatedRewards = () => {
{stringGetter({ key: STRING_KEYS.ESTIMATED_REWARDS })} {seasonNumber !== undefined && ( - <$Season> + {stringGetter({ key: STRING_KEYS.LAUNCH_INCENTIVES_SEASON_NUM, params: { SEASON_NUMBER: seasonNumber }, })} - + )}
@@ -133,7 +136,7 @@ const EstimatedRewards = () => { - <$Image src="/rewards-stars.svg" /> + ); }; @@ -144,14 +147,14 @@ const LaunchIncentivesContent = () => { return ( <$Column> - <$Description> +
{stringGetter({ key: STRING_KEYS.LAUNCH_INCENTIVES_DESCRIPTION })}{' '} - - <$ChaosLabsLogo> +
+ {stringGetter({ key: STRING_KEYS.POWERED_BY_ALL_CAPS })} - + <$ButtonRow> - <$AboutButton + <$Button action={ButtonAction.Secondary} onClick={() => { dispatch( @@ -161,10 +164,11 @@ const LaunchIncentivesContent = () => { ); }} slotRight={} + tw="grow" > {stringGetter({ key: STRING_KEYS.ABOUT })} - - <$LeaderboardButton + + <$Button action={ButtonAction.Secondary} onClick={() => { dispatch( @@ -177,22 +181,15 @@ const LaunchIncentivesContent = () => { }} slotRight={} slotLeft={} + tw="grow-[2]" > {stringGetter({ key: STRING_KEYS.LEADERBOARD })} - + ); }; -const $Panel = styled(Panel)` - background-color: var(--color-layer-3); - width: 100%; -`; - -const $ForV4 = styled.span` - color: var(--color-text-0); -`; - +const $Panel = tw(Panel)`bg-layer-3 w-full `; const $Title = styled.h3` ${layoutMixins.inlineRow} font: var(--font-medium-book); @@ -202,11 +199,6 @@ const $Title = styled.h3` padding: var(--panel-paddingY) var(--panel-paddingX) 0; } `; - -const $Description = styled.div` - color: var(--color-text-0); -`; - const $ButtonRow = styled.div` ${layoutMixins.inlineRow} gap: 0.75rem; @@ -224,15 +216,6 @@ const $Button = styled(Button)` --button-backgroundColor: var(--color-layer-6); --button-border: solid var(--border-width) var(--color-layer-7); `; - -const $AboutButton = styled($Button)` - flex-grow: 1; -`; - -const $LeaderboardButton = styled($Button)` - flex-grow: 2; -`; - const $Column = styled.div` ${layoutMixins.flexColumn} gap: 0.5rem; @@ -274,12 +257,6 @@ const $EstimatedRewardsCardContent = styled.div` } } `; - -const $Season = styled.span` - font: var(--font-small-book); - color: var(--color-text-1); -`; - const $Points = styled.span` ${layoutMixins.inlineRow} gap: 0.25rem; @@ -290,23 +267,3 @@ const $Points = styled.span` color: var(--color-text-2); } `; - -const $Image = styled.img` - position: relative; - float: right; - - width: 5.25rem; - height: auto; -`; - -const $ChaosLabsLogo = styled.span` - display: flex; - align-items: center; - gap: 0.5em; - font: var(--font-tiny-medium); -`; - -const $NewTag = styled(Tag)` - color: var(--color-accent); - background-color: var(--color-accent-faded); -`; diff --git a/src/pages/token/MigratePanel.tsx b/src/pages/token/MigratePanel.tsx index 683bbda42..717e0176e 100644 --- a/src/pages/token/MigratePanel.tsx +++ b/src/pages/token/MigratePanel.tsx @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import tw from 'twin.macro'; import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons'; import { STRING_KEYS } from '@/constants/localization'; @@ -48,7 +49,7 @@ export const MigratePanel = ({ className }: { className?: string }) => { <$MigrateAction>
{stringGetter({ key: STRING_KEYS.AVAILABLE_TO_MIGRATE })}
- <$Token type={OutputType.Asset} value={tokenBalance} /> +
{import.meta.env.VITE_TOKEN_MIGRATION_URI && ( )} - + <$InlineRow> {stringGetter({ key: STRING_KEYS.WANT_TO_LEARN })} @@ -129,13 +132,7 @@ export const MigratePanel = ({ className }: { className?: string }) => { ); }; -const $MigratePanel = styled(Panel)` - width: 100%; - - background-image: url('/dots-background.svg'); - background-position: right; - background-repeat: no-repeat; -`; +const $MigratePanel = tw(Panel)`w-full bg-[url('/dots-background.svg')] bg-right bg-no-repeat `; const $Title = styled.h3` font: var(--font-medium-book); @@ -157,20 +154,6 @@ const $MigrateAction = styled.div` border: solid var(--border-width) var(--color-border); border-radius: 0.75rem; `; - -const $Token = styled(Output)` - font: var(--font-large-book); - color: var(--color-text-2); -`; - -const $Description = styled.div` - color: var(--color-text-0); -`; - -const $Link = styled(Link)` - margin-left: 0.5ch; -`; - const $Column = styled.div` ${layoutMixins.flexColumn} gap: 1rem; @@ -213,15 +196,6 @@ const $VerticalSeparator = styled(VerticalSeparator)` height: 1.5rem; } `; - -const $Details = styled(Details)` - padding: 0.5rem 1rem; -`; - -const $WithReceipt = styled(WithReceipt)` - width: 100%; -`; - const $InlineRow = styled.div` ${layoutMixins.inlineRow} color: var(--color-text-0); diff --git a/src/pages/token/NewMarketsPanel.tsx b/src/pages/token/NewMarketsPanel.tsx index a4a63277a..a79896ea5 100644 --- a/src/pages/token/NewMarketsPanel.tsx +++ b/src/pages/token/NewMarketsPanel.tsx @@ -41,11 +41,12 @@ export const NewMarketsPanel = ({ className }: { className?: string }) => { key: STRING_KEYS.ADD_NEW_MARKET_DETAILS, params: { AMOUNT: ( - <$Output + ), NATIVE_TOKEN_DENOM: chainTokenLabel, @@ -63,7 +64,3 @@ export const NewMarketsPanel = ({ className }: { className?: string }) => { /> ); }; - -const $Output = styled(Output)` - display: inline-block; -`; diff --git a/src/pages/token/RewardHistoryPanel.tsx b/src/pages/token/RewardHistoryPanel.tsx index 1fee3a2ea..0f3bc2058 100644 --- a/src/pages/token/RewardHistoryPanel.tsx +++ b/src/pages/token/RewardHistoryPanel.tsx @@ -16,56 +16,29 @@ export const RewardHistoryPanel = () => { const rewardsHistoryStartDate = useEnvConfig('rewardsHistoryStartDateMs'); return ( - <$RewardHistoryContainer> - <$Title>{stringGetter({ key: STRING_KEYS.TRADING_REWARD_HISTORY })} - <$TradingRewardHistoryTable period={HistoricalTradingRewardsPeriod.DAILY} /> - <$Description> +
+
+ {stringGetter({ key: STRING_KEYS.TRADING_REWARD_HISTORY })} +
+ + {stringGetter({ key: STRING_KEYS.REWARD_HISTORY_DESCRIPTION, params: { REWARDS_HISTORY_START_DATE: ( - <$Output + ), }, })} - - + +
); }; - -const $RewardHistoryContainer = styled.div` - display: flex; - flex-direction: column; - gap: 1rem; -`; - -const $Title = styled.div` - font: var(--font-large-book); - color: var(--color-text-2); - padding: 0 0.5rem; -`; - -const $TradingRewardHistoryTable = styled(TradingRewardHistoryTable)` - --computed-radius: 0.875rem; -`; - -const $Output = styled(Output)` - display: inline; -`; - -const $Description = styled.span` - font: var(--font-mini-book); - color: var(--color-text-0); - - padding: 0 8rem; - text-align: center; - - @media ${breakpoints.tablet} { - text-align: start; - padding: 0; - } -`; diff --git a/src/pages/token/RewardsNavPanel.tsx b/src/pages/token/RewardsNavPanel.tsx index 78d392762..e36db8c79 100644 --- a/src/pages/token/RewardsNavPanel.tsx +++ b/src/pages/token/RewardsNavPanel.tsx @@ -42,28 +42,34 @@ export const RewardsNavPanel = ({ className={className} slotHeaderContent={ <$Title> - {title} {titleTag && <$Tag>{titleTag}} + {title} {titleTag && {titleTag}} } slotRight={ - <$Arrow> - <$IconButton +
+ - +
} onClick={onNav} > - <$Description> +
{description} {learnMore && ( - <$Link href={learnMore} isInline onClick={(e: React.MouseEvent) => e.stopPropagation()}> + e.stopPropagation()} + tw="ml-[0.5ch]" + > {stringGetter({ key: STRING_KEYS.LEARN_MORE_ARROW })} - + )} - +
); }; @@ -74,25 +80,3 @@ const $Title = styled.h3` margin-bottom: -1.5rem; color: var(--color-text-1); `; - -const $Tag = styled(Tag)` - color: var(--color-accent); - background-color: var(--color-accent-faded); -`; - -const $Arrow = styled.div` - padding-right: 1.5rem; -`; - -const $IconButton = styled(IconButton)` - --color-border: var(--color-layer-6); - color: var(--color-text-0); -`; - -const $Description = styled.div` - color: var(--color-text-0); -`; - -const $Link = styled(Link)` - margin-left: 0.5ch; -`; diff --git a/src/pages/token/RewardsPage.tsx b/src/pages/token/RewardsPage.tsx index d2fcdae1a..450fd32e7 100644 --- a/src/pages/token/RewardsPage.tsx +++ b/src/pages/token/RewardsPage.tsx @@ -3,6 +3,7 @@ import { useEffect } from 'react'; import { shallowEqual } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { formatUnits } from 'viem'; import { HistoricalTradingRewardsPeriod } from '@/constants/abacus'; @@ -84,14 +85,14 @@ const RewardsPage = () => { /> ); const legalDisclaimer = ( - <$LegalDisclaimer> +
{stringGetter({ key: STRING_KEYS.TRADING_REWARDS_LEGAL_DISCLAIMER, params: { TERMS_OF_USE_LINK: , }, })} - +
); useEffect(() => { @@ -124,7 +125,7 @@ const RewardsPage = () => { ) : ( <$DetachedSection> {showMigratePanel && } - <$DoubleColumnView> +
<$LeftColumn> @@ -140,7 +141,7 @@ const RewardsPage = () => { {legalDisclaimer} - +
)} ; @@ -154,23 +155,7 @@ const $Page = styled.div` ${layoutMixins.contentContainerPage} `; -const $DetachedSection = styled(DetachedSection)` - display: flex; - flex-direction: column; - gap: 1.5rem; - padding: 1rem; - max-width: 80rem; - - @media ${breakpoints.tablet} { - width: 100vw; - } -`; - -const $DoubleColumnView = styled.div` - display: flex; - gap: 1.5rem; -`; - +const $DetachedSection = tw(DetachedSection)`flex flex-col gap-1.5 p-1 max-w-7xl tablet:(w-screen)`; const $LeftColumn = styled.div` ${layoutMixins.flexColumn} gap: 1.5rem; @@ -182,8 +167,3 @@ const $RightColumn = styled.div` gap: 1.5rem; flex: 1; `; - -const $LegalDisclaimer = styled.div` - font: var(--font-mini-book); - color: var(--color-text-0); -`; diff --git a/src/pages/token/StakingPanel.tsx b/src/pages/token/StakingPanel.tsx index b1d22499a..cb8a48279 100644 --- a/src/pages/token/StakingPanel.tsx +++ b/src/pages/token/StakingPanel.tsx @@ -61,7 +61,9 @@ export const StakingPanel = ({ className }: { className?: string }) => { const aprText = stringGetter({ key: STRING_KEYS.EST_APR, - params: { PERCENTAGE: <$Output type={OutputType.Percent} value={stakingApr} /> }, + params: { + PERCENTAGE: , + }, }); return ( @@ -126,7 +128,11 @@ export const StakingPanel = ({ className }: { className?: string }) => { key: STRING_KEYS.STAKED, })} - {stakingApr && <$Tag sign={TagSign.Positive}>{aprText}} + {stakingApr && ( + + {aprText} + + )} <$BalanceOutput type={OutputType.Asset} @@ -196,15 +202,6 @@ const $Content = styled.div` ${layoutMixins.flexColumn} gap: 0.75rem; `; - -const $Tag = styled(Tag)` - display: inline-block; -`; - -const $Output = styled(Output)` - display: inline-block; -`; - const $TotalBalance = styled(Details)` div { --scrollArea-height: auto; diff --git a/src/pages/token/StakingRewardPanel.tsx b/src/pages/token/StakingRewardPanel.tsx index 0c8924d08..c0367e97f 100644 --- a/src/pages/token/StakingRewardPanel.tsx +++ b/src/pages/token/StakingRewardPanel.tsx @@ -59,22 +59,24 @@ export const StakingRewardPanel = ({ usdcRewards }: ElementProps) => { } slotRight={ canAccountTrade && ( - <$Button + ) } > <$InlineRow> - <$PositiveOutput + @@ -111,12 +113,6 @@ const $Panel = styled(Panel)<{ backgroundImagePath: string }>` mask-image: linear-gradient(270deg, transparent, var(--gradient-start-color) 60%); } `; - -const $Button = styled(Button)` - margin-right: var(--panel-paddingX); - z-index: 1; -`; - const $InlineRow = styled.span` ${layoutMixins.inlineRow} @@ -126,10 +122,3 @@ const $InlineRow = styled.span` font-size: 1.3rem; } `; - -const $PositiveOutput = styled(Output)` - --output-sign-color: var(--color-positive); - - color: var(--color-text-2); - font: var(--font-large-book); -`; diff --git a/src/pages/token/TradingRewardsChartPanel.tsx b/src/pages/token/TradingRewardsChartPanel.tsx index c5d2e8dd1..d5d5bfc1d 100644 --- a/src/pages/token/TradingRewardsChartPanel.tsx +++ b/src/pages/token/TradingRewardsChartPanel.tsx @@ -21,10 +21,10 @@ export const TradingRewardsChartPanel = () => { return ( - <$TradingRewardsChart + +
<$EmptyCard> {onboardingState !== OnboardingState.AccountConnected ? ( <> @@ -40,30 +40,20 @@ export const TradingRewardsChartPanel = () => { ) : ( <> - <$EmptyIcon iconName={IconName.OrderPending} /> + {stringGetter({ key: STRING_KEYS.TRADING_REWARD_CHART_EMPTY_STATE, })} )} - +
} + tw="h-20 [--trading-rewards-line-color:var(--color-positive)]" /> ); }; - -const $TradingRewardsChart = styled(TradingRewardsChart)` - --trading-rewards-line-color: var(--color-positive); - height: 20rem; -`; - -const $EmptyChart = styled.div` - display: grid; - cursor: default; -`; - const $EmptyCard = styled.div` width: 16.75rem; @@ -77,7 +67,3 @@ const $EmptyCard = styled.div` font: var(--font-base-book); color: var(--color-text-0); `; - -const $EmptyIcon = styled(Icon)` - font-size: 3em; -`; diff --git a/src/pages/token/TradingRewardsSummaryPanel.tsx b/src/pages/token/TradingRewardsSummaryPanel.tsx index c22ef0e44..0f8b80bf4 100644 --- a/src/pages/token/TradingRewardsSummaryPanel.tsx +++ b/src/pages/token/TradingRewardsSummaryPanel.tsx @@ -54,7 +54,7 @@ export const TradingRewardsSummaryPanel = () => { value: ( <$Column> } + slotRight={} type={OutputType.Asset} value={currentWeekTradingReward.amount} /> @@ -135,7 +135,3 @@ const $Column = styled.div` ${layoutMixins.flexColumn} gap: 0.33rem; `; - -const $AssetIcon = styled(AssetIcon)` - margin-left: 0.5ch; -`; diff --git a/src/pages/token/UnbondingPanels.tsx b/src/pages/token/UnbondingPanels.tsx index 6e4122de1..99f5bf01c 100644 --- a/src/pages/token/UnbondingPanels.tsx +++ b/src/pages/token/UnbondingPanels.tsx @@ -95,12 +95,13 @@ export const UnbondingPanels = () => { } > <$Content> - <$Balance + } + slotRight={} + tw="text-text-2 font-large-book" /> - <$Footer>{availableInText} +
{availableInText}
); @@ -131,16 +132,3 @@ const $Content = styled.div` ${layoutMixins.flexColumn} gap: 1rem; `; - -const $Balance = styled(Output)` - font: var(--font-large-book); - color: var(--color-text-2); -`; - -const $AssetIcon = styled(AssetIcon)` - margin-left: 0.5rem; -`; - -const $Footer = styled.div` - color: var(--color-text-0); -`; diff --git a/src/pages/trade/HorizontalPanel.tsx b/src/pages/trade/HorizontalPanel.tsx index 165a4d08b..63243a1bb 100644 --- a/src/pages/trade/HorizontalPanel.tsx +++ b/src/pages/trade/HorizontalPanel.tsx @@ -167,7 +167,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => { label: stringGetter({ key: STRING_KEYS.ORDERS }), slotRight: isWaitingForOrderToIndex ? ( - <$LoadingSpinner /> + ) : ( ordersTagNumber && ( @@ -270,7 +270,9 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => { ); const slotBottom = { - [InfoSection.Position]: <$UnopenedIsolatedPositions onViewOrders={onViewOrders} />, + [InfoSection.Position]: ( + + ), [InfoSection.Orders]: null, [InfoSection.Fills]: null, [InfoSection.Payments]: null, @@ -298,7 +300,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => { value: PanelView.CurrentMarket, ...(currentMarketAssetId ? { - slotBefore: <$AssetIcon symbol={currentMarketAssetId} />, + slotBefore: , label: currentMarketAssetId, } : { label: stringGetter({ key: STRING_KEYS.MARKET }) }), @@ -350,10 +352,6 @@ const $VerticalSeparator = styled(VerticalSeparator)` height: 1em; } `; - -const $AssetIcon = styled(AssetIcon)` - font-size: 1.5em; -`; const collapsibleTabsType = getSimpleStyledOutputType(CollapsibleTabs); const $CollapsibleTabs = styled(CollapsibleTabs)` @@ -363,14 +361,6 @@ const $CollapsibleTabs = styled(CollapsibleTabs)` background-color: var(--color-layer-2); } ` as typeof collapsibleTabsType; - -const $LoadingSpinner = styled(LoadingSpinner)` - --spinner-width: 1rem; -`; -const $UnopenedIsolatedPositions = styled(MaybeUnopenedIsolatedPositionsDrawer)` - margin-top: auto; -`; - const $SelectMenu = styled(SelectMenu)` ${formMixins.inputInnerSelectMenu} --trigger-height: 1.75rem; diff --git a/src/pages/trade/MobileTopPanel.tsx b/src/pages/trade/MobileTopPanel.tsx index 430425b04..541d7b62d 100644 --- a/src/pages/trade/MobileTopPanel.tsx +++ b/src/pages/trade/MobileTopPanel.tsx @@ -49,7 +49,7 @@ export const MobileTopPanel = () => { const items = [ { - content: <$AccountInfo />, + content: , label: stringGetter({ key: STRING_KEYS.WALLET }), value: Tab.Account, icon: IconName.Coins, @@ -153,11 +153,6 @@ const $TabButton = styled(ToggleButton)` height: 1.375rem; } `; - -const $AccountInfo = styled(AccountInfo)` - --account-info-section-height: var(--tabContent-height); -`; - const $ScrollableTableContainer = styled.div` ${layoutMixins.scrollArea} --scrollArea-height: var(--tabContent-height); diff --git a/src/pages/trade/Trade.tsx b/src/pages/trade/Trade.tsx index dfb8e76b8..fd580d836 100644 --- a/src/pages/trade/Trade.tsx +++ b/src/pages/trade/Trade.tsx @@ -68,14 +68,14 @@ const TradePage = () => { tradeLayout={tradeLayout} isHorizontalPanelOpen={isHorizontalPanelOpen} > - <$Top> +
- +
- <$SideSection gridArea="Side"> + <$GridSection gridArea="Side" tw="grid-rows-[auto_minmax(0,1fr)]"> - + <$GridSection gridArea="Vertical"> @@ -202,15 +202,6 @@ const $TradeLayoutMobile = styled.article` justify-content: start; } `; - -const $Top = styled.header` - grid-area: Top; -`; - const $GridSection = styled.section<{ gridArea: string }>` grid-area: ${({ gridArea }) => gridArea}; `; - -const $SideSection = styled($GridSection)` - grid-template-rows: auto minmax(0, 1fr); -`; diff --git a/src/pages/trade/TradeDialogTrigger.tsx b/src/pages/trade/TradeDialogTrigger.tsx index 1cdc0f0da..3193818ea 100644 --- a/src/pages/trade/TradeDialogTrigger.tsx +++ b/src/pages/trade/TradeDialogTrigger.tsx @@ -49,12 +49,18 @@ export const TradeDialogTrigger = () => { - <$Output type={OutputType.Fiat} value={total} showSign={ShowSign.None} useGrouping /> + ) : ( stringGetter({ key: STRING_KEYS.TAP_TO_TRADE }) )} - <$Icon iconName={IconName.Caret} /> + } /> @@ -83,14 +89,3 @@ const $TradeSummary = styled.div` const $TradeType = styled.div` ${layoutMixins.inlineRow} `; - -const $Output = styled(Output)` - color: var(--color-text-2); - font: var(--font-large-book); -`; - -const $Icon = styled(Icon)` - rotate: 0.5turn; - width: 1.5rem; - height: 1.5rem; -`; diff --git a/src/pages/trade/TradeHeaderMobile.tsx b/src/pages/trade/TradeHeaderMobile.tsx index eea439ea2..8a1e956b6 100644 --- a/src/pages/trade/TradeHeaderMobile.tsx +++ b/src/pages/trade/TradeHeaderMobile.tsx @@ -28,7 +28,7 @@ export const TradeHeaderMobile = () => { <$Header> navigate(AppRoute.Markets)} /> <$MarketName> - <$AssetIcon symbol={id} /> + <$Name>

{name}

{market} @@ -66,11 +66,6 @@ const $MarketName = styled.div` ${layoutMixins.inlineRow} gap: 1ch; `; - -const $AssetIcon = styled(AssetIcon)` - font-size: 2.5rem; -`; - const $Name = styled.div` ${layoutMixins.rowColumn} diff --git a/src/pages/trade/UnopenedIsolatedPositions.tsx b/src/pages/trade/UnopenedIsolatedPositions.tsx index dacb838f0..7f0f519c1 100644 --- a/src/pages/trade/UnopenedIsolatedPositions.tsx +++ b/src/pages/trade/UnopenedIsolatedPositions.tsx @@ -46,16 +46,16 @@ export const MaybeUnopenedIsolatedPositionsDrawer = ({ <$UnopenedIsolatedPositionsDrawerContainer className={className} isOpen={isOpen}> <$Button onClick={() => setIsOpen(!isOpen)}> {stringGetter({ key: STRING_KEYS.UNOPENED_ISOLATED_POSITIONS })} - <$DropdownIcon iconName={IconName.Caret} isOpen={isOpen} /> + {isOpen && ( - <$CardsContainer> +
- +
)} ); @@ -134,10 +134,3 @@ const $Cards = styled.div` gap: 1rem; scroll-snap-align: none; `; -const $CardsContainer = styled.div` - padding: 0 1rem 1rem; -`; - -const $DropdownIcon = styled(DropdownIcon)` - font-size: 0.5em; -`; diff --git a/src/pages/vaults/VaultDepositWithdrawForm.tsx b/src/pages/vaults/VaultDepositWithdrawForm.tsx index 34ef5cde4..9c966eb85 100644 --- a/src/pages/vaults/VaultDepositWithdrawForm.tsx +++ b/src/pages/vaults/VaultDepositWithdrawForm.tsx @@ -2,6 +2,7 @@ import { FormEvent, useCallback, useMemo, useState } from 'react'; import { NumberFormatValues } from 'react-number-format'; import styled, { css } from 'styled-components'; +import tw from 'twin.macro'; import { AlertType } from '@/constants/alerts'; import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons'; @@ -397,11 +398,11 @@ export const VaultDepositWithdrawForm = ({ onSubmitConfirmForm(); }} > - <$GridContainer> +
<$SourceLabel>{inputFormConfig.formLabel} <$TargetLabel>{stringGetter({ key: STRING_KEYS.DESTINATION })} <$SourceBox> - <$AssetIcon symbol="USDC" /> + <$Arrow> @@ -410,13 +411,13 @@ export const VaultDepositWithdrawForm = ({ <$TargetBox> {inputFormConfig.transactionTarget.icon === 'cross' ? ( - <$CrossIcon>C +
C
) : ( - <$VaultImg src="/dydx-chain.png" /> + )}
{inputFormConfig.transactionTarget.label}
- +
{renderedErrors} @@ -444,14 +445,15 @@ export const VaultDepositWithdrawForm = ({ /> )} - <$ConfirmButtonGroup> - <$EditButton +
+ - +
); - return <$Container>{currentForm === 'input' ? inputForm : confirmForm}; + return
{currentForm === 'input' ? inputForm : confirmForm}
; }; - -const $Container = styled.div` - padding: 1.5rem; -`; - const $HeaderRow = styled.div` ${layoutMixins.row} gap: .5rem; @@ -511,34 +508,7 @@ const $FloatingDetails = styled(Details)` font-size: var(--details-item-fontSize, 0.8125em); `; - -const $ConfirmButtonGroup = styled.div` - grid-template-columns: min-content 1fr; - display: grid; - gap: 1rem; -`; - -const $EditButton = styled(Button)` - padding-left: 1rem; - padding-right: 1rem; -`; - -const $Icon = styled(Icon)` - color: var(--color-text-0); -`; - -const $AssetIcon = styled(AssetIcon)` - width: 2rem; - height: 2rem; -`; -const $GridContainer = styled.div` - display: grid; - grid-template-rows: auto auto; - grid-template-columns: 1fr auto 1fr; - row-gap: 0.5rem; - column-gap: 0.25rem; -`; - +const $Icon = tw(Icon)`text-text-0 `; const labels = css` font: var(--font-small-book); color: var(--color-text-0); @@ -597,31 +567,8 @@ const $TargetBox = styled.div` ${boxes} grid-area: 2 / 3; `; +const $WarningIcon = tw(Icon)`text-warning `; -const $VaultImg = styled.img` - width: 2rem; - height: 2rem; -`; - -const $CrossIcon = styled.div` - width: 2rem; - height: 2rem; - display: grid; - align-items: center; - justify-content: center; - border-radius: 1rem; - background-color: var(--color-layer-6); -`; - -const $WarningIcon = styled(Icon)` - color: var(--color-warning); -`; +const $InlineOutput = tw(Output)`inline `; -const $InlineOutput = styled(Output)` - display: inline; -`; - -const $FlexFill = styled.div` - flex: 1; - margin-top: calc(var(--form-input-gap) * -1); -`; +const $FlexFill = tw.div`mt-[calc(var(--form-input-gap)_*_-1)] flex-1`; diff --git a/src/pages/vaults/VaultInfoSections.tsx b/src/pages/vaults/VaultInfoSections.tsx index 3fe5665f7..1119d289c 100644 --- a/src/pages/vaults/VaultInfoSections.tsx +++ b/src/pages/vaults/VaultInfoSections.tsx @@ -25,11 +25,7 @@ import { getNumberSign } from '@/lib/numbers'; import { VaultPositionsTable } from './VaultPositionsTable'; -const EmptyValue = () => <$EmptyValue>—; -const $EmptyValue = styled.span` - color: var(--color-text-0); -`; - +const EmptyValue = () => —; export const YourVaultDetailsCards = ({ className }: { className?: string }) => { const myVaultMetadata = useAppSelector(getUserVault); const stringGetter = useStringGetter(); @@ -72,8 +68,8 @@ export const YourVaultDetailsCards = ({ className }: { className?: string }) => <$CardsContainer className={className}> {items.map((item) => ( <$DetailCard key={item.key}> - <$CardHeader>{item.label} - <$CardValue>{item.value} +
{item.label}
+
{item.value}
))} @@ -93,32 +89,18 @@ const $DetailCard = styled.div` ${layoutMixins.column}; `; -const $CardHeader = styled.div` - color: var(--color-text-0); -`; const $OutputRow = styled.div` ${layoutMixins.row} gap: .5rem; `; -const $CardValue = styled.div` - font: var(--font-medium-book); - color: var(--color-text-2); - line-height: 1.2rem; -`; - export const VaultDescription = ({ className }: { className?: string }) => { const stringGetter = useStringGetter(); return ( - <$DescriptionContainer className={className}> +
{stringGetter({ key: STRING_KEYS.VAULT_DESCRIPTION })} - +
); }; -const $DescriptionContainer = styled.div` - font: var(--font-small-medium); - color: var(--color-text-0); -`; - export const VaultPositionsSection = ({ className }: { className?: string }) => { const stringGetter = useStringGetter(); const numPositions = useAppSelector(getVaultDetails)?.positions?.length ?? 0; @@ -171,14 +153,14 @@ export const VaultHeader = ({ className }: { className?: string }) => { return ( <$HeaderRow className={className}> {isTablet && ( - <$BackContainer> +
navigate(AppRoute.Portfolio)} /> - +
)} <$MarketTitle> - <$VaultImg src="/dydx-chain.png" /> +
- <$MarketTitleText>{stringGetter({ key: STRING_KEYS.VAULT })} +

{stringGetter({ key: STRING_KEYS.VAULT })}

<$DetailItems> @@ -186,7 +168,7 @@ export const VaultHeader = ({ className }: { className?: string }) => { <$VerticalSeparator /> <$DetailItem key={item.key}> - <$DetailLabel>{item.label} +
{item.label}
<$DetailValue>{item.value} @@ -203,11 +185,6 @@ const $DetailItems = styled.div` gap: 0.75rem; } `; -const $BackContainer = styled.div` - display: flex; - align-items: center; -`; - const $ColoredReturn = styled.div<{ $sign: NumberSign }>` display: flex; ${({ $sign }) => @@ -230,22 +207,10 @@ const $HeaderRow = styled.div` gap: 0.75rem; } `; - -const $MarketTitleText = styled.h3` - font: var(--font-extra-medium); - color: var(--color-text-2); -`; - const $MarketTitle = styled.div` ${layoutMixins.row} gap: 1.25rem; `; - -const $VaultImg = styled.img` - width: 3.5rem; - height: 3.5rem; -`; - const $VerticalSeparator = styled(VerticalSeparator)` &&& { height: 2rem; @@ -258,11 +223,6 @@ const $DetailItem = styled.div` padding: 0.25rem 0.5rem; gap: 0.375rem; `; - -const $DetailLabel = styled.div` - color: var(--color-text-0); -`; - const $DetailValue = styled.div` font: var(--font-extra-book); font-size: 1.563rem; // we need an in-beween for large and extra diff --git a/src/pages/vaults/VaultPage.tsx b/src/pages/vaults/VaultPage.tsx index 92ae4c34f..0fca66679 100644 --- a/src/pages/vaults/VaultPage.tsx +++ b/src/pages/vaults/VaultPage.tsx @@ -1,4 +1,5 @@ import styled, { css } from 'styled-components'; +import tw from 'twin.macro'; import { ButtonAction, ButtonType } from '@/constants/buttons'; import { DialogTypes } from '@/constants/dialogs'; @@ -97,9 +98,9 @@ const VaultPage = () => { <$VaultDepositWithdrawFormColumn> <$YourVaultDetailsCards /> <$DepositFormContainer> - <$PlaceholderBox> +
- +
<$VaultTransactionsCardContainer> @@ -177,17 +178,7 @@ const $DepositFormContainer = styled.div` const $VaultDescription = styled(VaultDescription)` ${xPaddingWhenSmall} `; - -const $PlaceholderBox = styled.div` - border-radius: 0.7rem; - background-color: var(--color-layer-3); -`; - -const $HorizontalSeparatorFiller = styled(HorizontalSeparatorFiller)` - display: flex; - min-height: 1px; - max-height: 1px; -`; +const $HorizontalSeparatorFiller = tw(HorizontalSeparatorFiller)`flex min-h-px max-h-px `; const $PnlRow = styled.div``; const $PnlChart = styled(VaultPnlChart)``; diff --git a/src/pages/vaults/VaultPnlChart.tsx b/src/pages/vaults/VaultPnlChart.tsx index 74c2bd4ae..b313d2e09 100644 --- a/src/pages/vaults/VaultPnlChart.tsx +++ b/src/pages/vaults/VaultPnlChart.tsx @@ -187,12 +187,12 @@ export const VaultPnlChart = ({ className }: VaultPnlChartProps) => { <$ChartBackground chartBackground={chartDotsBackground} /> <$NumbersContainer> {hoveredTime != null && ( - <$Time> +
- +
)} <$PnlNumbers> - <$MainOutput value={pnlAbsolute} type={OutputType.Fiat} /> + {pnlDiff != null && ( <$DiffNumbers> @@ -274,14 +274,6 @@ const $ChartBackground = styled.div<{ chartBackground: string }>` mask-image: radial-gradient(ellipse closest-side, black 40%, transparent 100%); pointer-events: none; `; - -const $Time = styled.div` - font: var(--font-small-book); - color: var(--color-text-0); -`; -const $MainOutput = styled(Output)` - font: var(--font-medium-medium); -`; const $PnlNumbers = styled.div` ${layoutMixins.row} font: var(--font-base-medium); diff --git a/src/pages/vaults/VaultPositions.tsx b/src/pages/vaults/VaultPositions.tsx index 6beadef8f..41e350150 100644 --- a/src/pages/vaults/VaultPositions.tsx +++ b/src/pages/vaults/VaultPositions.tsx @@ -75,27 +75,17 @@ export const VaultPositionCard = ({ onViewVault, vault }: VaultPositionCardProps return ( } + assetIcon={} detailLabel={stringGetter({ key: STRING_KEYS.YOUR_VAULT_BALANCE })} detailValue={} actionSlot={ - <$Link onClick={onViewVault} isAccent> + {stringGetter({ key: STRING_KEYS.VIEW_VAULT })} - + } /> ); }; - -const $VaultImg = styled.img` - width: 1.5rem; - height: 1.5rem; -`; - -const $Link = styled(Link)` - font: var(--font-small-book); -`; - const $Cards = styled.div` ${layoutMixins.flexWrap} gap: 1rem; diff --git a/src/pages/vaults/VaultPositionsTable.tsx b/src/pages/vaults/VaultPositionsTable.tsx index 7de4eefee..9fdf8bfe7 100644 --- a/src/pages/vaults/VaultPositionsTable.tsx +++ b/src/pages/vaults/VaultPositionsTable.tsx @@ -44,7 +44,7 @@ export const VaultPositionsTable = ({ className }: { className?: string }) => { getCellValue: (row) => row.asset?.id, label: stringGetter({ key: STRING_KEYS.MARKET }), renderCell: ({ asset, currentLeverageMultiple, currentPosition }) => ( - }> + }> {asset.name} <$CellRow> <$OutputSigned @@ -86,7 +86,7 @@ export const VaultPositionsTable = ({ className }: { className?: string }) => { +
({ x: index + 1, @@ -96,7 +96,7 @@ export const VaultPositionsTable = ({ className }: { className?: string }) => { yAccessor={(datum) => datum.y} positive={thirtyDayPnl.absolute > 0} /> - +
} > <$OutputSigned @@ -168,14 +168,7 @@ const $OutputSigned = styled(Output)<{ sign: NumberSign }>` [NumberSign.Neutral]: `var(--color-text-2)`, })[sign]}; `; - -const $AssetIcon = styled(AssetIcon)` - height: 2.5em; -`; const $CellRow = styled.div` ${layoutMixins.row} gap: 0.25rem; `; -const $Sparklines = styled.div` - margin-left: 0.5rem; -`; diff --git a/src/pages/vaults/VaultTransactions.tsx b/src/pages/vaults/VaultTransactions.tsx index 56730c153..749200f67 100644 --- a/src/pages/vaults/VaultTransactions.tsx +++ b/src/pages/vaults/VaultTransactions.tsx @@ -26,14 +26,14 @@ export const VaultTransactionsCard = ({ className }: { className?: string }) => const transactions = useAppSelector(getUserVault)?.transactionHistory ?? EMPTY_ARR; return ( - <$HistoryCard className={className}> +
{transactions.length > 0 ? ( <> - <$HistoryTitle> - <$HistoryTitleText> +
+

{stringGetter({ key: STRING_KEYS.YOUR_DEPOSITS_AND_WITHDRAWALS })} - <$HistoryCount>{transactions.length} - + {transactions.length} +

<$ShowHideHistoryButton size={ButtonSize.XSmall} shape={ButtonShape.Pill} @@ -43,18 +43,18 @@ export const VaultTransactionsCard = ({ className }: { className?: string }) => ? stringGetter({ key: STRING_KEYS.HIDE }) : stringGetter({ key: STRING_KEYS.VIEW })} - +
{showHistory && } ) : ( <$Empty>
- <$Icon iconName={IconName.OrderPending} /> +
{stringGetter({ key: STRING_KEYS.YOU_HAVE_NO_VAULT_DEPOSITS })}
)} - +
); }; @@ -65,32 +65,7 @@ const $Empty = styled.div` justify-items: center; align-content: center; `; - -const $Icon = styled(Icon)` - width: 2rem; - height: 2rem; - margin-bottom: 0.75rem; -`; -const $HistoryCard = styled.div` - border-radius: 0.7rem; - border: 1px solid var(--color-border); -`; -const $HistoryCount = styled.span` - margin-left: 0.5rem; - color: var(--color-text-0); -`; const $ShowHideHistoryButton = styled(Button)``; - -const $HistoryTitle = styled.div` - display: flex; - justify-content: space-between; - padding: 0.625rem 1rem; -`; -const $HistoryTitleText = styled.h3` - font: var(--font-base-medium); - line-height: 1.75rem; -`; - const VaultTransactionsTable = ({ className }: { className?: string }) => { const stringGetter = useStringGetter(); const transactions = useAppSelector(getUserVault)?.transactionHistory ?? EMPTY_ARR; @@ -109,9 +84,9 @@ const VaultTransactionsTable = ({ className }: { className?: string }) => { type={OutputType.Date} dateOptions={{ format: 'medium' }} /> - <$TimeText> +
- +
), }, @@ -165,9 +140,3 @@ const $Table = styled(Table)` const $Stack = styled.div` ${layoutMixins.column} `; - -const $TimeText = styled.div` - font-size: 0.75rem; - line-height: 0.7rem; - color: var(--color-text-0); -`; diff --git a/src/views/AccountInfo/AccountInfoConnectedState.tsx b/src/views/AccountInfo/AccountInfoConnectedState.tsx index a978fb128..a7135d3d4 100644 --- a/src/views/AccountInfo/AccountInfoConnectedState.tsx +++ b/src/views/AccountInfo/AccountInfoConnectedState.tsx @@ -115,9 +115,9 @@ export const AccountInfoConnectedState = () => { state={{ isDisabled: !dydxAccounts }} onClick={() => dispatch(openDialog(DialogTypes.Deposit()))} > - <$CircleContainer> +
- +
)} <$Details @@ -166,7 +166,11 @@ export const AccountInfoConnectedState = () => { <$WithUsage> {label} - {hasError ? <$CautionIcon iconName={IconName.CautionCircle} /> : slotRight} + {hasError ? ( + + ) : ( + slotRight + )} ), @@ -208,20 +212,6 @@ const $CornerButton = styled(Button)` display: none; } `; - -const $CircleContainer = styled.div` - display: inline-flex; - align-items: center; - - background-color: var(--color-layer-3); - padding: 0.5em; - border-radius: 50%; -`; - -const $CautionIcon = styled(Icon)` - color: var(--color-error); -`; - const $WithUsage = styled.div` ${layoutMixins.row} diff --git a/src/views/CanvasOrderbook/CanvasOrderbook.tsx b/src/views/CanvasOrderbook/CanvasOrderbook.tsx index 5d71baef8..42c132b72 100644 --- a/src/views/CanvasOrderbook/CanvasOrderbook.tsx +++ b/src/views/CanvasOrderbook/CanvasOrderbook.tsx @@ -2,6 +2,7 @@ import { forwardRef, useCallback, useMemo, useRef, useState } from 'react'; import { shallowEqual } from 'react-redux'; import styled, { css } from 'styled-components'; +import tw from 'twin.macro'; import { AbacusInputTypes, Nullable, type PerpetualMarketOrderbookLevel } from '@/constants/abacus'; import { STRING_KEYS } from '@/constants/localization'; @@ -199,7 +200,7 @@ export const CanvasOrderbook = forwardRef( ); return ( - <$OrderbookContainer ref={ref}> +
<$OrderbookContent $isLoading={!hasOrderbook}> {!hideHeader && ( )} {!hideHeader && ( - <$Header> + {stringGetter({ key: STRING_KEYS.PRICE })} {usdTag} @@ -222,7 +223,7 @@ export const CanvasOrderbook = forwardRef( {stringGetter({ key: STRING_KEYS.TOTAL })}{' '} {displayUnit === 'fiat' ? usdTag : assetTag} - + )} {(displaySide === 'top' || layout === 'horizontal') && ( @@ -234,38 +235,30 @@ export const CanvasOrderbook = forwardRef( )} {layout === 'vertical' ? ( <> - <$OrderbookWrapper ref={orderbookRef}> +
{asksOrderbook} {bidsOrderbook} - +
{displaySide === 'bottom' && ( <$OrderbookMiddleRow side="bottom" tickSizeDecimals={tickSizeDecimals} /> )} ) : ( - <$HorizontalOrderbook> +
{asksOrderbook} {bidsOrderbook} - +
)} {!hasOrderbook && } - +
); } ); - -const $OrderbookContainer = styled.div` - display: flex; - flex: 1 1 0%; - flex-direction: column; - overflow: hidden; -`; - const $OrderbookContent = styled.div<{ $isLoading?: boolean }>` max-height: 100%; display: flex; @@ -273,25 +266,6 @@ const $OrderbookContent = styled.div<{ $isLoading?: boolean }>` position: relative; ${({ $isLoading }) => $isLoading && 'flex: 1;'} `; - -const $Header = styled(OrderbookRow)` - height: 1.75rem; - color: var(--color-text-0); -`; - -const $OrderbookWrapper = styled.div` - overflow-y: auto; - display: flex; - flex-direction: column; - flex: 1 1 0%; -`; - -const $HorizontalOrderbook = styled.div` - display: grid; - grid-template-columns: 1fr 1fr; - overflow-y: auto; -`; - const $OrderbookSideContainer = styled.div<{ $side: 'bids' | 'asks'; $rows: number }>` ${({ $rows }) => css` min-height: calc(${$rows} * ${ORDERBOOK_ROW_HEIGHT}px); @@ -335,6 +309,4 @@ const $Row = styled(OrderbookRow)<{ onClick?: () => void }>` `} `; -const $OrderbookMiddleRow = styled(OrderbookMiddleRow)` - position: absolute; -`; +const $OrderbookMiddleRow = tw(OrderbookMiddleRow)`absolute `; diff --git a/src/views/CanvasOrderbook/OrderbookControls.tsx b/src/views/CanvasOrderbook/OrderbookControls.tsx index 048f68296..51e33bbd6 100644 --- a/src/views/CanvasOrderbook/OrderbookControls.tsx +++ b/src/views/CanvasOrderbook/OrderbookControls.tsx @@ -47,15 +47,15 @@ export const OrderbookControls = ({ return ( <$OrderbookControlsContainer className={className}> - <$OrderbookUnitControl> - <$ZoomControls> +
+
<$ButtonGroup>
- +
); }; @@ -98,11 +98,6 @@ const $OrderbookControlsContainer = styled.div` padding-bottom: 0.3rem; } `; -const $ZoomControls = styled.div` - display: flex; - gap: 0.5rem; -`; - const $ButtonGroup = styled.div` display: flex; gap: 0.25rem; @@ -110,13 +105,3 @@ const $ButtonGroup = styled.div` --button-font: var(--font-medium-book); } `; - -const $OrderbookUnitControl = styled.div` - display: flex; - justify-content: space-between; - gap: 0.5rem; -`; - -const $MinusSymbolCenter = styled.span` - margin-top: -0.125rem; -`; diff --git a/src/views/CanvasOrderbook/OrderbookRow.tsx b/src/views/CanvasOrderbook/OrderbookRow.tsx index c25f64676..fcfbe1434 100644 --- a/src/views/CanvasOrderbook/OrderbookRow.tsx +++ b/src/views/CanvasOrderbook/OrderbookRow.tsx @@ -60,13 +60,14 @@ export const OrderbookMiddleRow = forwardRef {stringGetter({ key: STRING_KEYS.PRICE })} - <$PriceOutputSpan> - <$Output + + - + {/* Empty cell */} ); @@ -90,11 +91,3 @@ const $OrderbookMiddleRow = styled(OrderbookRow)<{ side?: 'top' | 'bottom' }>` `; // matching the output height and styling with price span -const $PriceOutputSpan = styled.span` - display: flex; - flex-direction: column; -`; - -const $Output = styled(Output)` - justify-content: right; -`; diff --git a/src/views/ExchangeBillboards.tsx b/src/views/ExchangeBillboards.tsx index 06d8b6da0..70feecc11 100644 --- a/src/views/ExchangeBillboards.tsx +++ b/src/views/ExchangeBillboards.tsx @@ -72,12 +72,13 @@ export const ExchangeBillboards: React.FC = () => { ) : null} - <$Output + @@ -126,11 +127,3 @@ const $BillboardStat = styled.div` font: var(--font-large-medium); } `; -const $Output = styled(Output)` - font: var(--font-extra-book); - color: var(--color-text-2); - - @media ${breakpoints.tablet} { - font: var(--font-base-book); - } -`; diff --git a/src/views/ExportHistoryDropdown.tsx b/src/views/ExportHistoryDropdown.tsx index 0c0c87e9a..992c3bec6 100644 --- a/src/views/ExportHistoryDropdown.tsx +++ b/src/views/ExportHistoryDropdown.tsx @@ -281,16 +281,17 @@ export const ExportHistoryDropdown = (props: ExportHistoryDropdownProps) => { }, { label: ( - <$Button + ), value: 'download', onSelect: exportData, @@ -306,7 +307,3 @@ export const ExportHistoryDropdown = (props: ExportHistoryDropdownProps) => { ); }; - -const $Button = styled(Button)` - width: 100%; -`; diff --git a/src/views/MarketDetails.tsx b/src/views/MarketDetails.tsx index 00f01231b..2fc8da1de 100644 --- a/src/views/MarketDetails.tsx +++ b/src/views/MarketDetails.tsx @@ -163,7 +163,7 @@ export const MarketDetails: React.FC = () => { {name} - {isTablet && <$MarketLinks />} + {isTablet && } <$MarketDescription> @@ -212,7 +212,7 @@ export const MarketDetails: React.FC = () => { )} - <$Details items={items} withSeparators /> +
); }; @@ -257,9 +257,6 @@ const $MarketTitle = styled.h3` height: 2.25rem; } `; -const $MarketLinks = styled(MarketLinks)` - place-self: start end; -`; const $MarketDescription = styled.div` ${layoutMixins.column} gap: 0.5em; @@ -279,6 +276,3 @@ const $Buttons = styled.div` overflow-x: auto; `; -const $Details = styled(Details)` - font: var(--font-mini-book); -`; diff --git a/src/views/MarketsStats.tsx b/src/views/MarketsStats.tsx index 45206b171..47c648922 100644 --- a/src/views/MarketsStats.tsx +++ b/src/views/MarketsStats.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { STRING_KEYS } from '@/constants/localization'; import { MarketSorting } from '@/constants/markets'; @@ -30,10 +31,10 @@ export const MarketsStats = (props: MarketsStatsProps) => { <$Section> <$SectionHeader> - <$RecentlyListed> +

{stringGetter({ key: STRING_KEYS.RECENTLY_LISTED })} <$NewTag>{stringGetter({ key: STRING_KEYS.NEW })} - +

@@ -79,21 +80,8 @@ const $MarketsStats = styled.section` ${layoutMixins.column} } `; -const $Section = styled.div` - background: var(--color-layer-3); - border-radius: 0.625rem; - display: grid; - grid-template-rows: auto 1fr; -`; -const $RecentlyListed = styled.h4` - display: flex; - align-items: center; - gap: 0.375rem; -`; -const $NewTag = styled(Tag)` - background-color: var(--color-accent-faded); - color: var(--color-accent); -`; +const $Section = tw.div`grid grid-rows-[auto_1fr] rounded-0.625 bg-layer-3`; +const $NewTag = tw(Tag)`bg-accent-faded text-accent `; const $ToggleGroupContainer = styled.div` ${layoutMixins.row} position: absolute; diff --git a/src/views/MobileDownloadLinks.tsx b/src/views/MobileDownloadLinks.tsx index 68870b634..5d30cda4f 100644 --- a/src/views/MobileDownloadLinks.tsx +++ b/src/views/MobileDownloadLinks.tsx @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import tw from 'twin.macro'; import { ButtonShape, ButtonType } from '@/constants/buttons'; import { STRING_KEYS } from '@/constants/localization'; @@ -37,7 +38,7 @@ export const MobileDownloadLinks = ({ withBadges }: { withBadges?: boolean }) => return ( <> - <$DownloadLinks> +
<$Download>{stringGetter({ key: STRING_KEYS.DOWNLOAD })} {googlePlayStoreUrl && ( <$AppLink @@ -55,7 +56,7 @@ export const MobileDownloadLinks = ({ withBadges }: { withBadges?: boolean }) => iconName={IconName.Apple} /> )} - +
@@ -77,19 +78,7 @@ const $DownloadLinksInDropdown = styled.div` width: 7.5rem; } `; - -const $DownloadLinks = styled.div` - display: flex; - flex-direction: row; - align-items: center; - gap: 0.5rem; -`; - -const $Download = styled.span` - grid-area: label; - font: var(--font-small-medium); - color: var(--color-text-0); -`; +const $Download = tw.span`text-text-0 font-small-medium [grid-area:label]`; const $AppLink = styled(IconButton)` --button-icon-size: 1rem; diff --git a/src/views/PositionInfo.tsx b/src/views/PositionInfo.tsx index 6d6b6e158..26d3c6096 100644 --- a/src/views/PositionInfo.tsx +++ b/src/views/PositionInfo.tsx @@ -380,11 +380,12 @@ export const PositionInfo = ({ showNarrowVariation }: { showNarrowVariation?: bo
- <$SecondaryDetails +
{!hasNoPositionInMarket && actions} @@ -416,12 +417,6 @@ const $PrimaryDetails = styled(Details)` align-items: flex-start; } `; - -const $SecondaryDetails = styled(Details)` - font: var(--font-mini-book); - --details-value-font: var(--font-small-book); -`; - const $MobileDetails = styled(Details)` font: var(--font-small-book); --details-value-font: var(--font-medium-medium); diff --git a/src/views/PositionTile.tsx b/src/views/PositionTile.tsx index 8da7f8302..fe3a1d06f 100644 --- a/src/views/PositionTile.tsx +++ b/src/views/PositionTile.tsx @@ -57,7 +57,7 @@ export const PositionTile = ({ showNarrowVariation={showNarrowVariation} >
- {showNarrowVariation && <$AssetIcon symbol={symbol} />} + {showNarrowVariation && } <$PositionTags> {hasSizeDiff && newPositionSide && currentPositionSide !== newPositionSide && ( @@ -109,7 +109,7 @@ export const PositionTile = ({ )} )} - {isLoading && <$LoadingSpinner />} + {isLoading && } ); }; @@ -229,11 +229,3 @@ const $PositionTile = styled.div<{ const $PostOrderSizeRow = styled.div` ${layoutMixins.inlineRow} `; - -const $AssetIcon = styled(AssetIcon)` - font-size: 2.25rem; -`; - -const $LoadingSpinner = styled(LoadingSpinner)` - color: var(--color-text-0); -`; diff --git a/src/views/TradeBoxOrderView.tsx b/src/views/TradeBoxOrderView.tsx index dff13ee4b..9a005337a 100644 --- a/src/views/TradeBoxOrderView.tsx +++ b/src/views/TradeBoxOrderView.tsx @@ -36,7 +36,7 @@ export const TradeBoxOrderView = () => { const allowChangingOrderType = onboardingState === OnboardingState.AccountConnected; return ( - <$TradeBoxOrderViewContainer> +
<$TopActionsRow> <$MarginAndLeverageButtons> @@ -58,18 +58,9 @@ export const TradeBoxOrderView = () => { } withUnderline /> - +
); }; - -const $TradeBoxOrderViewContainer = styled.div` - display: flex; - flex-direction: column; - gap: 0.25rem; - padding-top: 0.875rem; - min-height: 100%; -`; - const $Container = styled.div` ${layoutMixins.scrollArea} border-top: var(--border-width) solid var(--border-color); diff --git a/src/views/charts/DepthChart/Tooltip.tsx b/src/views/charts/DepthChart/Tooltip.tsx index 6c83960a6..075a4d402 100644 --- a/src/views/charts/DepthChart/Tooltip.tsx +++ b/src/views/charts/DepthChart/Tooltip.tsx @@ -86,7 +86,7 @@ export const DepthChartTooltipContent = ({ }[nearestDatum.key]} - <$Details +
); }; - -const $Details = styled(Details)` - --details-item-vertical-padding: 0.2rem; -`; diff --git a/src/views/charts/DepthChart/index.tsx b/src/views/charts/DepthChart/index.tsx index 0320bb46a..4dd689723 100644 --- a/src/views/charts/DepthChart/index.tsx +++ b/src/views/charts/DepthChart/index.tsx @@ -312,7 +312,7 @@ export const DepthChart = ({ verticalCrosshairStyle={{ strokeWidth: 1, strokeDasharray: '5 5', opacity: 0.7 }} snapCrosshairToDatumX={!isEditingOrder} renderXAxisLabel={({ tooltipData }) => ( - <$XAxisLabelOutput + )} showHorizontalCrosshair @@ -423,11 +424,6 @@ const $Container = styled.div` } } `; - -const $XAxisLabelOutput = styled(AxisLabelOutput)` - box-shadow: 0 0 0.5rem var(--color-layer-2); -`; - const $YAxisLabelOutput = styled(AxisLabelOutput)` --axisLabel-offset: 0.5rem; diff --git a/src/views/charts/FundingChart/Tooltip.tsx b/src/views/charts/FundingChart/Tooltip.tsx index ba947cc63..3442935f1 100644 --- a/src/views/charts/FundingChart/Tooltip.tsx +++ b/src/views/charts/FundingChart/Tooltip.tsx @@ -43,7 +43,7 @@ export const FundingChartTooltipContent = ({ : stringGetter({ key: STRING_KEYS.HISTORICAL_FUNDING_RATE })} - <$Details +
} + tw="[--details-item-vertical-padding:0.2rem]" /> ); }; - -const $Details = styled(Details)` - --details-item-vertical-padding: 0.2rem; -`; diff --git a/src/views/charts/FundingChart/index.tsx b/src/views/charts/FundingChart/index.tsx index 0164a0e91..c037fb165 100644 --- a/src/views/charts/FundingChart/index.tsx +++ b/src/views/charts/FundingChart/index.tsx @@ -94,7 +94,13 @@ export const FundingChart = ({ selectedLocale }: ElementProps) => { renderXAxisLabel={({ tooltipData }) => { const tooltipDatum = tooltipData!.nearestDatum?.datum ?? latestDatum; - return <$XAxisLabelOutput type={OutputType.DateTime} value={tooltipDatum.time} />; + return ( + + ); }} renderYAxisLabel={({ tooltipData }) => { const tooltipDatum = tooltipData!.nearestDatum?.datum ?? latestDatum; @@ -125,7 +131,7 @@ export const FundingChart = ({ selectedLocale }: ElementProps) => { numGridLines={1} slotEmpty={} > - <$FundingRateToggle> +
({ value: rate as FundingRateResolution, @@ -146,7 +152,7 @@ export const FundingChart = ({ selectedLocale }: ElementProps) => { onValueChange={setFundingRateView} size={ButtonSize.XSmall} /> - +
<$CurrentFundingRate isShowing={!tooltipContext?.tooltipOpen}>

@@ -174,13 +180,6 @@ export const FundingChart = ({ selectedLocale }: ElementProps) => { ); }; -const $FundingRateToggle = styled.div` - place-self: start end; - isolation: isolate; - - margin: 1rem; -`; - const $CurrentFundingRate = styled.div<{ isShowing?: boolean }>` place-self: start center; padding: clamp(1.5rem, 9rem - 15%, 4rem); @@ -216,11 +215,6 @@ const $CurrentFundingRate = styled.div<{ isShowing?: boolean }>` const $Output = styled(Output)<{ isNegative?: boolean }>` color: ${({ isNegative }) => (isNegative ? `var(--color-negative)` : `var(--color-positive)`)}; `; - -const $XAxisLabelOutput = styled(AxisLabelOutput)` - box-shadow: 0 0 0.5rem var(--color-layer-2); -`; - const $YAxisLabelOutput = styled(AxisLabelOutput)` --axisLabel-offset: 0.5rem; diff --git a/src/views/charts/PnlChart.tsx b/src/views/charts/PnlChart.tsx index d4a18ee41..f8f39fb38 100644 --- a/src/views/charts/PnlChart.tsx +++ b/src/views/charts/PnlChart.tsx @@ -284,7 +284,7 @@ export const PnlChart = ({ tickSpacingX={210} tickSpacingY={75} > - <$PeriodToggle> +
({ value: period.name, @@ -298,7 +298,7 @@ export const PnlChart = ({ onValueChange={onSelectPeriod} onInteraction={onToggleInteract} /> - +
); @@ -308,10 +308,3 @@ const $Container = styled.div<{ chartBackground: string }>` position: relative; background: url(${({ chartBackground }) => chartBackground}) no-repeat center center; `; - -const $PeriodToggle = styled.div` - place-self: start end; - isolation: isolate; - - margin: 1rem; -`; diff --git a/src/views/charts/TradingRewardsChart.tsx b/src/views/charts/TradingRewardsChart.tsx index 3b28f93a0..e8b27a346 100644 --- a/src/views/charts/TradingRewardsChart.tsx +++ b/src/views/charts/TradingRewardsChart.tsx @@ -236,11 +236,11 @@ export const TradingRewardsChart = ({ <> {rewardsData.length === 0 ? undefined : ( <$TitleContainer> - <$Title> + {stringGetter({ key: STRING_KEYS.TRADING_REWARDS, })} - + setIsOpen?.(false), [setIsOpen]); return ( - <$Dialog + } title={stringGetter({ key: STRING_KEYS.ADJUST_ISOLATED_MARGIN })} + tw="[--dialog-width:25rem]" > <$Content> - + ); }; - -const $Dialog = styled(Dialog)` - --dialog-width: 25rem; -`; const $Content = styled.div` ${layoutMixins.column} gap: 1rem; diff --git a/src/views/dialogs/ClosePositionDialog.tsx b/src/views/dialogs/ClosePositionDialog.tsx index 633d37b82..2b6cc3cd1 100644 --- a/src/views/dialogs/ClosePositionDialog.tsx +++ b/src/views/dialogs/ClosePositionDialog.tsx @@ -59,17 +59,17 @@ export const ClosePositionDialog = ({ setIsOpen }: DialogProps, + slotIcon: , }, [MobilePlaceOrderSteps.PlaceOrderFailed]: { title: stringGetter({ key: STRING_KEYS.PLACE_ORDER_FAILED }), description: stringGetter({ key: STRING_KEYS.PLACE_ORDER_FAILED_DESCRIPTION }), - slotIcon: <$WarningIcon iconName={IconName.Warning} />, + slotIcon: , }, [MobilePlaceOrderSteps.Confirmation]: { title: stringGetter({ key: STRING_KEYS.CONFIRMED_TITLE }), description: stringGetter({ key: STRING_KEYS.CONFIRMED_DESCRIPTION }), - slotIcon: <$GreenCheckCircle />, + slotIcon: , }, }; @@ -130,15 +130,6 @@ const $Dialog = styled(Dialog)<{ currentStep: MobilePlaceOrderSteps }>` --dialog-icon-size: 2.5rem; `} `; - -const $Ring = styled(Ring)` - --ring-color: var(--color-accent); -`; - -const $GreenCheckCircle = styled(GreenCheckCircle)` - --icon-size: 2rem; -`; - const $CloseOrderHeader = styled.div` ${layoutMixins.spacedRow} `; @@ -170,8 +161,3 @@ const $PreviewTitle = styled.div` ${layoutMixins.inlineRow} height: var(--dialog-icon-size); `; - -const $WarningIcon = styled(Icon)` - color: var(--color-warning); - font-size: 1.5rem; -`; diff --git a/src/views/dialogs/DetailsDialog/FillDetailsDialog.tsx b/src/views/dialogs/DetailsDialog/FillDetailsDialog.tsx index 7433e362e..4e5c81ac8 100644 --- a/src/views/dialogs/DetailsDialog/FillDetailsDialog.tsx +++ b/src/views/dialogs/DetailsDialog/FillDetailsDialog.tsx @@ -83,13 +83,10 @@ export const FillDetailsDialog = ({ fillId, setIsOpen }: DialogProps} + slotIcon={} title={resources.typeStringKey && stringGetter({ key: resources.typeStringKey })} items={detailItems} setIsOpen={setIsOpen} /> ); }; -const $AssetIcon = styled(AssetIcon)` - font-size: 1em; -`; diff --git a/src/views/dialogs/DetailsDialog/OrderDetailsDialog.tsx b/src/views/dialogs/DetailsDialog/OrderDetailsDialog.tsx index bcd2d59af..f95ad452c 100644 --- a/src/views/dialogs/DetailsDialog/OrderDetailsDialog.tsx +++ b/src/views/dialogs/DetailsDialog/OrderDetailsDialog.tsx @@ -123,9 +123,9 @@ export const OrderDetailsDialog = ({ value: ( <$Row> - <$Status> + {resources.statusStringKey && stringGetter({ key: resources.statusStringKey })} - + ), }, @@ -220,7 +220,7 @@ export const OrderDetailsDialog = ({ return ( } + slotIcon={} title={!resources.typeStringKey ? '' : stringGetter({ key: resources.typeStringKey })} slotFooter={ isAccountViewOnly ? null : isOrderStatusClearable(status) ? ( @@ -246,11 +246,3 @@ export const OrderDetailsDialog = ({ const $Row = styled.div` ${layoutMixins.inlineRow} `; - -const $Status = styled.span` - font: var(--font-small-medium); -`; - -const $AssetIcon = styled(AssetIcon)` - font-size: 1em; -`; diff --git a/src/views/dialogs/DisplaySettingsDialog.tsx b/src/views/dialogs/DisplaySettingsDialog.tsx index 48cf76d81..0de1bc260 100644 --- a/src/views/dialogs/DisplaySettingsDialog.tsx +++ b/src/views/dialogs/DisplaySettingsDialog.tsx @@ -85,9 +85,9 @@ export const DisplaySettingsDialog = ({ setIsOpen }: DialogProps {stringGetter({ key: label })} - <$Image src="/chart-bars.svg" /> + <$CheckIndicator> - <$CheckIcon iconName={IconName.Check} /> + ); @@ -242,13 +242,6 @@ const $AppThemeHeader = styled.h3<{ textcolor: string }>` `} z-index: 1; `; - -const $Image = styled.img` - width: 100%; - height: auto; - z-index: 1; -`; - const $ColorPreferenceLabel = styled.div` ${layoutMixins.inlineRow}; gap: 1ch; @@ -333,8 +326,3 @@ const $CheckIndicator = styled(Indicator)` background-color: var(--color-accent); color: var(--color-text-button); `; - -const $CheckIcon = styled(Icon)` - width: var(--icon-size); - height: var(--icon-size); -`; diff --git a/src/views/dialogs/ExternalNavKeplrDialog.tsx b/src/views/dialogs/ExternalNavKeplrDialog.tsx index 3f85efb97..b754da30f 100644 --- a/src/views/dialogs/ExternalNavKeplrDialog.tsx +++ b/src/views/dialogs/ExternalNavKeplrDialog.tsx @@ -1,6 +1,7 @@ import { useCallback } from 'react'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons'; import { DialogProps, DialogTypes, ExternalNavKeplrDialogProps } from '@/constants/dialogs'; @@ -110,7 +111,4 @@ const $Button = styled(Button)` justify-content: space-between; `; -const $IconButton = styled(IconButton)` - color: var(--color-text-0); - --color-border: var(--color-layer-6); -`; +const $IconButton = tw(IconButton)`text-text-0 [--color-border:var(--color-layer-6)] `; diff --git a/src/views/dialogs/ExternalNavStrideDialog.tsx b/src/views/dialogs/ExternalNavStrideDialog.tsx index b3db7ae4b..d2a1139d4 100644 --- a/src/views/dialogs/ExternalNavStrideDialog.tsx +++ b/src/views/dialogs/ExternalNavStrideDialog.tsx @@ -1,6 +1,7 @@ import { useCallback } from 'react'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons'; import { DialogProps, DialogTypes, ExternalNavStrideDialogProps } from '@/constants/dialogs'; @@ -34,10 +35,10 @@ export const ExternalNavStrideDialog = ({ forceOpenDialog( DialogTypes.ExternalLink({ buttonText: ( - <$Span> + {stringGetter({ key: STRING_KEYS.LIQUID_STAKE_ON_STRIDE })} - + ), link: strideZoneApp, title: stringGetter({ key: STRING_KEYS.LIQUID_STAKING_AND_LEAVING }), @@ -117,13 +118,4 @@ const $Button = styled(Button)` justify-content: space-between; `; -const $IconButton = styled(IconButton)` - color: var(--color-text-0); - --color-border: var(--color-layer-6); -`; - -const $Span = styled.span` - display: flex; - align-items: center; - gap: 0.5ch; -`; +const $IconButton = tw(IconButton)`text-text-0 [--color-border:var(--color-layer-6)] `; diff --git a/src/views/dialogs/GeoComplianceDialog.tsx b/src/views/dialogs/GeoComplianceDialog.tsx index b689c146d..d855d17f7 100644 --- a/src/views/dialogs/GeoComplianceDialog.tsx +++ b/src/views/dialogs/GeoComplianceDialog.tsx @@ -52,9 +52,9 @@ const CountrySelector = ({ label={label} withSearch > - <$SelectedCountry> +
{selectedCountry || stringGetter({ key: STRING_KEYS.SELECT_A_COUNTRY })} - +
); }; @@ -98,9 +98,9 @@ export const GeoComplianceDialog = ({ setIsOpen }: DialogProps - <$WithReceipt + +
- +
} + tw="[--withReceipt-backgroundColor:var(--color-layer-2)]" > - + ) : ( <$Form> @@ -139,16 +140,3 @@ export const GeoComplianceDialog = ({ setIsOpen }: DialogProps) => { items={HELP_ITEMS} slotFooter={ latestCommit || latestVersion ? ( - <$Footer> +
{latestCommit && ( Release - {`${latestCommit.substring(0, 7)}`} @@ -89,7 +89,7 @@ export const HelpDialog = ({ setIsOpen }: DialogProps) => { {`${latestVersion.split(`release/v`).at(-1)}`} )} - +
) : undefined } /> @@ -104,12 +104,3 @@ const $ComboboxDialogMenu = styled(ComboboxDialogMenu)` --dialog-width: var(--dialog-small-width); } `; - -const $Footer = styled.div` - display: flex; - flex-direction: column; - - color: var(--color-text-0); - cursor: default; - user-select: text; -`; diff --git a/src/views/dialogs/ManageFundsDialog.tsx b/src/views/dialogs/ManageFundsDialog.tsx index 59cd9dcac..9f50d4cc3 100644 --- a/src/views/dialogs/ManageFundsDialog.tsx +++ b/src/views/dialogs/ManageFundsDialog.tsx @@ -49,7 +49,7 @@ export const ManageFundsDialog = ({ }; return ( - <$Dialog + } hasHeaderBorder + tw="[--dialog-content-paddingTop:1.5rem]" > {transferTypeConfig[currentType].component} - + ); }; -const $Dialog = styled(Dialog)` - --dialog-content-paddingTop: 1.5rem; -`; - const $ToggleGroup = styled(ToggleGroup)` overflow-x: auto; diff --git a/src/views/dialogs/MnemonicExportDialog.tsx b/src/views/dialogs/MnemonicExportDialog.tsx index 574a4562d..5cfa2f52f 100644 --- a/src/views/dialogs/MnemonicExportDialog.tsx +++ b/src/views/dialogs/MnemonicExportDialog.tsx @@ -52,9 +52,9 @@ export const MnemonicExportDialog = ({ setIsOpen }: DialogProps{stringGetter({ key: STRING_KEYS.SECRET_PHRASE_RISK })}

- <$WithReceipt + +
- +
} + tw="[--withReceipt-backgroundColor:var(--color-layer-2)]" > {stringGetter({ key: STRING_KEYS.REVEAL_SECRET_PHRASE })} - + ), [MnemonicExportStep.DisplayMnemonic]: ( <> - <$AlertMessage type={AlertType.Error}> + {stringGetter({ key: STRING_KEYS.NEVER_SHARE_PHRASE })} - + <$RevealControls> {stringGetter({ key: isShowing ? STRING_KEYS.NOT_READY : STRING_KEYS.READY })} @@ -123,14 +124,15 @@ export const MnemonicExportDialog = ({ setIsOpen }: DialogProps <$Content>{content} - + ); }; const $WaitingSpan = styled.span` @@ -161,21 +163,6 @@ const $CautionIconContainer = styled.div` background-color: var(--color-gradient-error); } `; - -const $WithReceipt = styled(WithReceipt)` - --withReceipt-backgroundColor: var(--color-layer-2); -`; - -const $CheckboxContainer = styled.div` - padding: 1rem; - color: var(--color-text-0); -`; - -const $AlertMessage = styled(AlertMessage)` - font: var(--font-base-book); - margin: 0; -`; - const $RevealControls = styled.div` ${layoutMixins.spacedRow} @@ -243,13 +230,6 @@ const $Word = styled.li` margin-right: 0.25rem; } `; - -const $Dialog = styled(Dialog)` - @media ${breakpoints.notMobile} { - --dialog-width: 30rem; - } -`; - const $Content = styled.div` ${layoutMixins.column} gap: 1rem; diff --git a/src/views/dialogs/NewMarketAgreementDialog.tsx b/src/views/dialogs/NewMarketAgreementDialog.tsx index a17f949c9..f8c510d0d 100644 --- a/src/views/dialogs/NewMarketAgreementDialog.tsx +++ b/src/views/dialogs/NewMarketAgreementDialog.tsx @@ -26,10 +26,11 @@ export const NewMarketAgreementDialog = ({ const stringGetter = useStringGetter(); return ( - <$Dialog + <$Content>

@@ -57,7 +58,7 @@ export const NewMarketAgreementDialog = ({ id="acknowledgement-checkbox" label={stringGetter({ key: STRING_KEYS.I_HAVE_READ_AND_AGREE })} /> - <$ButtonRow> +

@@ -71,17 +72,11 @@ export const NewMarketAgreementDialog = ({ > {stringGetter({ key: STRING_KEYS.CONTINUE })} - +
- + ); }; -const $Dialog = styled(Dialog)` - @media ${breakpoints.notMobile} { - --dialog-width: 30rem; - } -`; - const $Content = styled.div` ${layoutMixins.column} gap: 1rem; @@ -92,9 +87,3 @@ const $Content = styled.div` background-color: var(--color-layer-1); } `; - -const $ButtonRow = styled.div` - display: grid; - grid-template-columns: 1fr 2fr; - gap: 1rem; -`; diff --git a/src/views/dialogs/NewMarketMessageDetailsDialog.tsx b/src/views/dialogs/NewMarketMessageDetailsDialog.tsx index a9a07be88..175f88ccf 100644 --- a/src/views/dialogs/NewMarketMessageDetailsDialog.tsx +++ b/src/views/dialogs/NewMarketMessageDetailsDialog.tsx @@ -2,6 +2,7 @@ import { useMemo, useState } from 'react'; import { utils } from '@dydxprotocol/v4-client-js'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { DialogProps, NewMarketMessageDetailsDialogProps } from '@/constants/dialogs'; import { STRING_KEYS } from '@/constants/localization'; @@ -89,7 +90,7 @@ export const NewMarketMessageDetailsDialog = ({ setIsOpen={setIsOpen} title={stringGetter({ key: STRING_KEYS.MESSAGE_DETAILS })} > - <$ProposedMessageDetails> +
<$Tabs items={toggleGroupItems} value={codeToggleGroup} @@ -124,30 +125,35 @@ export const NewMarketMessageDetailsDialog = ({ }, ]} /> - <$ExchangeConfigs> - <$Text0> +
+ exchange_config_json - {exchangeConfig && <$Tag type={TagType.Number}>{exchangeConfig.length}} - + {exchangeConfig && ( + + {exchangeConfig.length} + + )} + [ {exchangeConfig?.map((exchange) => { return ( - <$ExchangeObject +
{'{'} {Object.keys(exchange).map((key) => ( - <$Line key={key}> + 
                             {key}: {exchange[key as keyof typeof exchange]}
-                          
+
))} {'},'} - +
); })} ] - +
), [CodeToggleGroup.MSG_CREATE_PERPETUAL]: ( @@ -316,9 +322,9 @@ export const NewMarketMessageDetailsDialog = ({ key: 'summary', label: 'summary', value: ( - <$Summary> +

{utils.getGovAddNewMarketSummary(ticker, newMarketProposal.delayBlocks)} - +

), }, ]} @@ -327,41 +333,15 @@ export const NewMarketMessageDetailsDialog = ({ ), }[codeToggleGroup] } - +
); }; - -const $ProposedMessageDetails = styled.div` - display: flex; - flex-direction: column; - gap: 1rem; - width: 100%; - background-color: var(--color-layer-3); - margin-top: 1rem; - border-radius: 10px; -`; - const $Tabs = styled(ToggleGroup)` overflow-x: auto; ` as typeof ToggleGroup; -const $Details = styled(Details)` - --details-item-height: 1.5rem; -`; - -const $ExchangeConfigs = styled.div` - margin-top: 0.5rem; -`; - -const $Text0 = styled.span` - color: var(--color-text-0); -`; - -const $Tag = styled(Tag)` - margin: 0 0.5ch; -`; - +const $Details = tw(Details)`[--details-item-height:1.5rem] `; const $Code = styled.div` height: 16.25rem; overflow: auto; @@ -374,16 +354,3 @@ const $Code = styled.div` margin-top: 1rem; gap: 0rem; `; - -const $ExchangeObject = styled.div` - padding: 1rem; -`; - -const $Line = styled.pre` - margin-left: 1rem; -`; - -const $Summary = styled.p` - text-align: justify; - margin-left: 0.5rem; -`; diff --git a/src/views/dialogs/OnboardingDialog.tsx b/src/views/dialogs/OnboardingDialog.tsx index fce3cb683..5238a605a 100644 --- a/src/views/dialogs/OnboardingDialog.tsx +++ b/src/views/dialogs/OnboardingDialog.tsx @@ -1,6 +1,7 @@ import { useEffect, useState, type ElementType } from 'react'; import styled, { css } from 'styled-components'; +import tw from 'twin.macro'; import { EvmDerivedAccountStatus, OnboardingSteps } from '@/constants/account'; import { AnalyticsEvents } from '@/constants/analytics'; @@ -132,8 +133,4 @@ const $Dialog = styled(Dialog)<{ width?: string }>` --dialog-icon-size: 1.25rem; `; -const $Ring = styled(Ring)` - width: 1.25rem; - height: 1.25rem; - --ring-color: var(--color-accent); -`; +const $Ring = tw(Ring)`w-1.25 h-1.25 [--ring-color:var(--color-accent)] `; diff --git a/src/views/dialogs/OnboardingDialog/ChooseWallet.tsx b/src/views/dialogs/OnboardingDialog/ChooseWallet.tsx index cf5a77880..cccf8b07d 100644 --- a/src/views/dialogs/OnboardingDialog/ChooseWallet.tsx +++ b/src/views/dialogs/OnboardingDialog/ChooseWallet.tsx @@ -56,7 +56,12 @@ export const ChooseWallet = ({ action={ButtonAction.Base} key={walletType} onClick={() => onChooseWallet(walletType)} - slotLeft={<$Icon iconComponent={wallets[walletType].icon as ElementType} />} + slotLeft={ + + } size={ButtonSize.Small} > {stringGetter({ key: wallets[walletType].stringKey })} @@ -109,12 +114,6 @@ const $WalletButton = styled(Button)` } } `; - -const $Icon = styled(Icon)` - width: 1.5em; - height: 1.5em; -`; - const $Footer = styled.footer` ${layoutMixins.spacedRow} justify-content: center; diff --git a/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx b/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx index 7976f924f..eb201d28e 100644 --- a/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx +++ b/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx @@ -169,7 +169,7 @@ export const GenerateKeys = ({ status, setStatus, onKeysDerived = () => {} }: El return ( <> - <$StatusCardsContainer> +
{[ { status: EvmDerivedAccountStatus.Deriving, @@ -190,7 +190,7 @@ export const GenerateKeys = ({ status, setStatus, onKeysDerived = () => {} }: El ) : status === step.status ? ( ) : ( - <$GreenCheckCircle /> + )}

{step.title}

@@ -198,7 +198,7 @@ export const GenerateKeys = ({ status, setStatus, onKeysDerived = () => {} }: El
))} - +
<$Footer> <$RememberMe htmlFor="remember-me"> @@ -214,23 +214,24 @@ export const GenerateKeys = ({ status, setStatus, onKeysDerived = () => {} }: El /> {error && {error}} - <$WithReceipt + +
{stringGetter({ key: STRING_KEYS.FREE_SIGNING, params: { FREE: ( - <$Green> + {stringGetter({ key: STRING_KEYS.FREE_TRADING_TITLE_ASTERISK_FREE })} - + ), }, })} - +
} + tw="[--withReceipt-backgroundColor:var(--color-layer-2)]" > {!isMatchingNetwork ? ( )} - - <$Disclaimer>{stringGetter({ key: STRING_KEYS.CHECK_WALLET_FOR_REQUEST })} + + + {stringGetter({ key: STRING_KEYS.CHECK_WALLET_FOR_REQUEST })} + ); }; -const $StatusCardsContainer = styled.div` - display: grid; - gap: 1rem; -`; - const $StatusCard = styled.div<{ active?: boolean }>` ${layoutMixins.row} gap: 1rem; @@ -310,27 +308,3 @@ const $RememberMe = styled.label` ${layoutMixins.spacedRow} font: var(--font-base-book); `; - -const $WithReceipt = styled(WithReceipt)` - --withReceipt-backgroundColor: var(--color-layer-2); -`; - -const $ReceiptArea = styled.div` - padding: 1rem; - font: var(--font-small-book); - color: var(--color-text-0); -`; - -const $Green = styled.span` - color: var(--color-green); -`; - -const $GreenCheckCircle = styled(GreenCheckCircle)` - --icon-size: 2.375rem; -`; - -const $Disclaimer = styled.span` - text-align: center; - color: var(--color-text-0); - font: var(--font-base-book); -`; diff --git a/src/views/dialogs/PreferencesDialog.tsx b/src/views/dialogs/PreferencesDialog.tsx index 6b74d5ac7..5d3560646 100644 --- a/src/views/dialogs/PreferencesDialog.tsx +++ b/src/views/dialogs/PreferencesDialog.tsx @@ -1,10 +1,10 @@ import { useEffect, useMemo, useState } from 'react'; import { SelectedGasDenom } from '@dydxprotocol/v4-client-js'; -import styled from 'styled-components'; import { DialogProps, PreferencesDialogProps } from '@/constants/dialogs'; import { STRING_KEYS } from '@/constants/localization'; +import { MenuConfig } from '@/constants/menus'; import { isDev } from '@/constants/networks'; import { NotificationCategoryPreferences } from '@/constants/notifications'; @@ -21,7 +21,10 @@ import { getDefaultToAllMarketsInPositionsOrdersFills } from '@/state/configsSel import { isTruthy } from '@/lib/isTruthy'; -const usePreferenceMenu = () => { +const usePreferenceMenu = (): MenuConfig< + OtherPreference | NotificationCategoryPreferences, + 'Other' | 'Notifications' +> => { const dispatch = useAppDispatch(); const stringGetter = useStringGetter(); @@ -63,7 +66,7 @@ const usePreferenceMenu = () => { const notificationSection = useMemo( () => ({ - group: 'Notifications', + group: 'Notifications' as const, groupLabel: stringGetter({ key: STRING_KEYS.NOTIFICATIONS }), items: [ { @@ -89,7 +92,7 @@ const usePreferenceMenu = () => { const otherSection = useMemo( () => ({ - group: 'Other', + group: 'Other' as const, groupLabel: stringGetter({ key: STRING_KEYS.OTHER }), items: [ { @@ -137,14 +140,12 @@ export const PreferencesDialog = ({ setIsOpen }: DialogProps ); }; -const $ComboboxDialogMenu = styled(ComboboxDialogMenu)` - --dialog-content-paddingBottom: 0.5rem; -`; diff --git a/src/views/dialogs/RateLimitDialog.tsx b/src/views/dialogs/RateLimitDialog.tsx index f2e9abdfe..8395b7402 100644 --- a/src/views/dialogs/RateLimitDialog.tsx +++ b/src/views/dialogs/RateLimitDialog.tsx @@ -19,16 +19,12 @@ export const RateLimitDialog = ({ preventClose, setIsOpen }: DialogProps} + slotIcon={} > <$Content>{stringGetter({ key: STRING_KEYS.RATE_LIMIT_REACHED_ERROR_MESSAGE })} ); }; -const $Icon = styled(Icon)` - color: var(--color-warning); -`; - const $Content = styled.div` ${layoutMixins.column} gap: 1rem; diff --git a/src/views/dialogs/RestrictedGeoDialog.tsx b/src/views/dialogs/RestrictedGeoDialog.tsx index 132509e22..36c89c37f 100644 --- a/src/views/dialogs/RestrictedGeoDialog.tsx +++ b/src/views/dialogs/RestrictedGeoDialog.tsx @@ -24,7 +24,7 @@ export const RestrictedGeoDialog = ({ preventClose={preventClose} setIsOpen={setIsOpen} title={stringGetter({ key: STRING_KEYS.REGION_NOT_PERMITTED_TITLE })} - slotIcon={<$Icon iconName={IconName.Warning} />} + slotIcon={} > <$Content> {stringGetter({ key: STRING_KEYS.REGION_NOT_PERMITTED_SUBTITLE })} @@ -33,10 +33,6 @@ export const RestrictedGeoDialog = ({ ); }; -const $Icon = styled(Icon)` - color: var(--color-warning); -`; - const $Content = styled.div` ${layoutMixins.column} gap: 1rem; diff --git a/src/views/dialogs/RestrictedWalletDialog.tsx b/src/views/dialogs/RestrictedWalletDialog.tsx index a9ae8a5c2..4d65d6b76 100644 --- a/src/views/dialogs/RestrictedWalletDialog.tsx +++ b/src/views/dialogs/RestrictedWalletDialog.tsx @@ -24,7 +24,7 @@ export const RestrictedWalletDialog = ({ preventClose={preventClose} setIsOpen={setIsOpen} title={stringGetter({ key: STRING_KEYS.WALLET_RESTRICTED_ERROR_TITLE })} - slotIcon={<$Icon iconName={IconName.Warning} />} + slotIcon={} > <$Content> {stringGetter({ key: STRING_KEYS.REGION_NOT_PERMITTED_SUBTITLE })} @@ -33,10 +33,6 @@ export const RestrictedWalletDialog = ({ ); }; -const $Icon = styled(Icon)` - color: var(--color-warning); -`; - const $Content = styled.div` ${layoutMixins.column} gap: 1rem; diff --git a/src/views/dialogs/SharePNLAnalyticsDialog.tsx b/src/views/dialogs/SharePNLAnalyticsDialog.tsx index a8aee7f32..f181adbe3 100644 --- a/src/views/dialogs/SharePNLAnalyticsDialog.tsx +++ b/src/views/dialogs/SharePNLAnalyticsDialog.tsx @@ -2,6 +2,7 @@ import { useMemo } from 'react'; import { useToBlob } from '@hugocxl/react-to-image'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { AnalyticsEvents } from '@/constants/analytics'; import { ButtonAction } from '@/constants/buttons'; @@ -103,10 +104,10 @@ export const SharePNLAnalyticsDialog = ({ > <$ShareableCardSide> <$ShareableCardTitle> - <$AssetIcon symbol={assetId} /> + - <$ShareableCardTitleAsset>{assetLeft}/{assetRight} + {assetLeft}/{assetRight} {sideLabel} @@ -119,11 +120,11 @@ export const SharePNLAnalyticsDialog = ({ showSign={ShowSign.Both} /> - <$Logo /> +
- <$ShareableCardStats> +
<$ShareableCardStatLabel> {stringGetter({ key: STRING_KEYS.ENTRY })} @@ -143,7 +144,7 @@ export const SharePNLAnalyticsDialog = ({ value={leverage} showSign={ShowSign.None} /> - +
<$QrCode size={68} @@ -161,7 +162,7 @@ export const SharePNLAnalyticsDialog = ({
- <$Actions> +
<$Action action={ButtonAction.Secondary} slotLeft={} @@ -188,19 +189,11 @@ export const SharePNLAnalyticsDialog = ({ > {stringGetter({ key: STRING_KEYS.SHARE })} - +
); }; - -const $Actions = styled.div` - display: flex; - gap: 1rem; -`; - -const $Action = styled(Button)` - flex: 1; -`; +const $Action = tw(Button)`flex-1 `; const $ShareableCard = styled.div` ${layoutMixins.row} @@ -223,34 +216,9 @@ const $ShareableCardTitle = styled.div` gap: 0.5rem; margin-bottom: 0.75rem; `; +const $ShareableCardStatLabel = tw.div`text-right text-text-0 font-base-bold`; -const $ShareableCardTitleAsset = styled.span` - font: var(--font-base-bold); - color: var(--color-text-2); -`; - -const $ShareableCardStats = styled.div` - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 1.125rem; - row-gap: 0.5rem; -`; - -const $ShareableCardStatLabel = styled.div` - font: var(--font-base-bold); - text-align: right; - color: var(--color-text-0); -`; - -const $ShareableCardStatOutput = styled(Output)` - font: var(--font-base-bold); - color: var(--color-text-2); -`; - -const $AssetIcon = styled(AssetIcon)` - height: 1.625rem; -`; - +const $ShareableCardStatOutput = tw(Output)`font-base-bold text-text-2 `; const $QrCode = styled(QrCode)` width: 5.25rem; height: 5.25rem; @@ -275,9 +243,3 @@ const $HighlightOutput = styled(Output)<{ isNegative?: boolean }>` : `var(--color-positive)` : `var(--color-text-1)`}; `; - -const $Logo = styled(LogoIcon)` - width: 5.125rem; - margin-top: auto; - height: auto; -`; diff --git a/src/views/dialogs/StakeDialog.tsx b/src/views/dialogs/StakeDialog.tsx index 185cc97dc..6e9cfad2c 100644 --- a/src/views/dialogs/StakeDialog.tsx +++ b/src/views/dialogs/StakeDialog.tsx @@ -59,12 +59,16 @@ export const StakeDialog = ({ setIsOpen }: DialogProps) => { <$Title> {dialogProps[currentStep].title} {stakingApr && ( - <$Tag sign={TagSign.Positive}> + {stringGetter({ key: STRING_KEYS.EST_APR, - params: { PERCENTAGE: <$Output type={OutputType.Percent} value={stakingApr} /> }, + params: { + PERCENTAGE: ( + + ), + }, })} - + )} } @@ -83,7 +87,7 @@ const LegalDisclaimer = () => { const openStrideDialog = () => dispatch(forceOpenDialog(DialogTypes.ExternalNavStride())); return ( - <$LegalDisclaimer> +
{stringGetter({ key: STRING_KEYS.STAKING_LEGAL_DISCLAIMER_WITH_DEFAULT, params: { @@ -99,7 +103,7 @@ const LegalDisclaimer = () => { ), }, })} - +
); }; @@ -111,17 +115,3 @@ const $Dialog = styled(Dialog)` const $Title = styled.span` ${layoutMixins.inlineRow} `; - -const $Tag = styled(Tag)` - display: inline-block; -`; - -const $Output = styled(Output)` - display: inline-block; -`; - -const $LegalDisclaimer = styled.div` - text-align: center; - color: var(--color-text-0); - font: var(--font-mini-book); -`; diff --git a/src/views/dialogs/StakingRewardDialog.tsx b/src/views/dialogs/StakingRewardDialog.tsx index ded3d0f3b..9565cba5e 100644 --- a/src/views/dialogs/StakingRewardDialog.tsx +++ b/src/views/dialogs/StakingRewardDialog.tsx @@ -142,23 +142,31 @@ export const StakingRewardDialog = ({ }, [validators, withdrawReward, setIsOpen, usdcRewards]); return ( - <$Dialog isOpen setIsOpen={setIsOpen} hasHeaderBlur={false}> + <$Container backgroundImagePath={chartDotsBackground}> - <$AssetContainer> +
<$Pill> - <$PositiveOutput + {usdcLabel} - <$AssetIcon symbol="USDC" /> - - <$Heading>{stringGetter({ key: STRING_KEYS.YOU_EARNED })} + +
+

+ {stringGetter({ key: STRING_KEYS.YOU_EARNED })} +

- <$StakeRewardButtonAndReceipt + ), }, @@ -183,17 +192,12 @@ export const StakingRewardDialog = ({ isLoading={isLoading} isForm={false} onClick={claimRewards} + tw="z-[1]" /> - + ); }; - -const $Dialog = styled(Dialog)` - --dialog-header-paddingBottom: 0rem; - --dialog-width: 25rem; -`; - const $Container = styled.div<{ backgroundImagePath: string }>` display: flex; flex-direction: column; @@ -219,14 +223,6 @@ const $Container = styled.div<{ backgroundImagePath: string }>` const $RowItem = styled.div` ${layoutMixins.inlineRow}; `; - -const $AssetContainer = styled.div` - position: relative; - display: flex; - align-items: center; - flex-direction: column; -`; - const $Pill = styled.div` border-radius: 1rem; display: inline-flex; @@ -239,25 +235,3 @@ const $Pill = styled.div` margin-bottom: -0.5rem; z-index: 1; `; - -const $AssetIcon = styled(AssetIcon)` - font-size: 5rem; -`; - -const $Heading = styled.h3` - font: var(--font-extra-bold); - color: var(--color-text-2); - z-index: 1; -`; - -const $StakeRewardButtonAndReceipt = styled(StakeRewardButtonAndReceipt)` - z-index: 1; -`; - -const $AmountOutput = styled(Output)` - display: inline; -`; - -const $PositiveOutput = styled(Output)` - --output-sign-color: var(--color-positive); -`; diff --git a/src/views/dialogs/TradeDialog.tsx b/src/views/dialogs/TradeDialog.tsx index b8406f0bc..72c51049b 100644 --- a/src/views/dialogs/TradeDialog.tsx +++ b/src/views/dialogs/TradeDialog.tsx @@ -44,14 +44,14 @@ export const TradeDialog = ({ isOpen, setIsOpen, slotTrigger }: DialogProps - <$MarginControls> - <$MarginModeSelector openInTradeBox={false} /> +
+
+ <$TargetLeverageButton /> - +
- +
), }, [MobilePlaceOrderSteps.PreviewOrder]: { @@ -63,17 +63,17 @@ export const TradeDialog = ({ isOpen, setIsOpen, slotTrigger }: DialogProps, + slotIcon: , }, [MobilePlaceOrderSteps.PlaceOrderFailed]: { title: stringGetter({ key: STRING_KEYS.PLACE_ORDER_FAILED }), description: stringGetter({ key: STRING_KEYS.PLACE_ORDER_FAILED_DESCRIPTION }), - slotIcon: <$WarningIcon iconName={IconName.Warning} />, + slotIcon: , }, [MobilePlaceOrderSteps.Confirmation]: { title: stringGetter({ key: STRING_KEYS.CONFIRMED_TITLE }), description: stringGetter({ key: STRING_KEYS.CONFIRMED_DESCRIPTION }), - slotIcon: <$GreenCheckCircle />, + slotIcon: , }, }[currentStep]} > @@ -102,22 +102,6 @@ const $Dialog = styled(Dialog)<{ currentStep: MobilePlaceOrderSteps }>` --dialog-icon-size: 2.5rem; `} `; - -const $EditTradeHeader = styled.div` - display: grid; - grid-template-columns: 1fr 2fr; - gap: 0.5rem; -`; - -const $MarginControls = styled.div` - display: flex; - gap: 0.5rem; -`; - -const $MarginModeSelector = styled(MarginModeSelector)` - flex: 1; -`; - const $TargetLeverageButton = styled(TargetLeverageButton)` flex: 1; @@ -132,20 +116,6 @@ const $TradeForm = styled(TradeForm)` --tradeBox-content-paddingBottom: 1.5rem; --tradeBox-content-paddingLeft: 1.5rem; `; - -const $Ring = styled(Ring)` - --ring-color: var(--color-accent); -`; - -const $GreenCheckCircle = styled(GreenCheckCircle)` - --icon-size: 2rem; -`; - -const $WarningIcon = styled(Icon)` - color: var(--color-warning); - font-size: 1.5rem; -`; - const $PreviewTitle = styled.div` ${layoutMixins.inlineRow} height: var(--dialog-icon-size); diff --git a/src/views/dialogs/TransferDialog.tsx b/src/views/dialogs/TransferDialog.tsx index 57ac78920..5355e9a58 100644 --- a/src/views/dialogs/TransferDialog.tsx +++ b/src/views/dialogs/TransferDialog.tsx @@ -12,11 +12,13 @@ export const TransferDialog = ({ selectedAsset, setIsOpen }: DialogProps + setIsOpen?.(false)} /> - + ); }; -const $Dialog = styled(Dialog)` - --dialog-content-paddingTop: var(--default-border-width); -`; diff --git a/src/views/dialogs/UnstakeDialog.tsx b/src/views/dialogs/UnstakeDialog.tsx index e0e0f6eae..35ca54da2 100644 --- a/src/views/dialogs/UnstakeDialog.tsx +++ b/src/views/dialogs/UnstakeDialog.tsx @@ -46,8 +46,9 @@ export const UnstakeDialog = ({ setIsOpen }: DialogProps) => key: STRING_KEYS.CURRENTLY_STAKING_WITH, params: { VALIDATOR: ( - <$ValidatorName + ), }, @@ -74,22 +75,18 @@ export const UnstakeDialog = ({ setIsOpen }: DialogProps) => }; return ( - <$Dialog + - + ); }; - -const $Dialog = styled(Dialog)` - --dialog-content-paddingTop: var(--default-border-width); -`; - const $Description = styled.div` ${layoutMixins.inlineRow} `; @@ -98,7 +95,3 @@ const $StakedAmount = styled.span` ${layoutMixins.inlineRow} color: var(--color-text-1); `; - -const $ValidatorName = styled(ValidatorName)` - display: inline-flex; -`; diff --git a/src/views/dialogs/VaultDepositWithdrawDialog.tsx b/src/views/dialogs/VaultDepositWithdrawDialog.tsx index 119ef465f..5aefbfdd3 100644 --- a/src/views/dialogs/VaultDepositWithdrawDialog.tsx +++ b/src/views/dialogs/VaultDepositWithdrawDialog.tsx @@ -35,7 +35,7 @@ export const VaultDepositWithdrawDialog = ({ placement={isMobile ? DialogPlacement.FullScreen : DialogPlacement.Default} title={ <$VaultDialogTitle> - <$VaultImg src="/dydx-chain.png" /> + {stringGetter({ key: STRING_KEYS.VAULT })} } @@ -51,12 +51,6 @@ const $Dialog = styled(Dialog)` --dialog-content-paddingBottom: 0; --dialog-content-paddingLeft: 0; `; - -const $VaultImg = styled.img` - width: 2.5rem; - height: 2.5rem; -`; - const $VaultDialogTitle = styled.div` ${layoutMixins.row} gap: 1rem; diff --git a/src/views/dialogs/WithdrawalGateDialog.tsx b/src/views/dialogs/WithdrawalGateDialog.tsx index ad291479f..472a613e0 100644 --- a/src/views/dialogs/WithdrawalGateDialog.tsx +++ b/src/views/dialogs/WithdrawalGateDialog.tsx @@ -35,11 +35,11 @@ export const WithdrawalGateDialog = ({ } slotIcon={ <$IconContainer> - <$Icon iconName={IconName.Warning} /> + } slotFooter={ - <$ButtonRow> +
- +
} > <$Content> @@ -77,20 +77,7 @@ const $IconContainer = styled.div` min-height: 4.5rem; background-color: var(--color-gradient-warning); `; - -const $Icon = styled(Icon)` - color: var(--color-warning); - font-size: 2.5rem; - margin-bottom: 0.125rem; -`; - const $Content = styled.div` ${layoutMixins.column} gap: 1rem; `; - -const $ButtonRow = styled.div` - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; -`; diff --git a/src/views/forms/AccountManagementForms/DepositForm.tsx b/src/views/forms/AccountManagementForms/DepositForm.tsx index 327119e6c..271b17849 100644 --- a/src/views/forms/AccountManagementForms/DepositForm.tsx +++ b/src/views/forms/AccountManagementForms/DepositForm.tsx @@ -453,7 +453,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => { } return ( <$Form onSubmit={onSubmit}> - <$Subheader> +
{stringGetter({ key: STRING_KEYS.LOWEST_FEE_DEPOSITS, params: { @@ -466,7 +466,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => { ), }, })} - +
{ ) : ( <> - <$WithDetailsReceipt side="bottom" detailItems={amountInputReceipt}> + { /> } /> - + {errorMessage && {errorMessage}} {requireUserActionInWallet && ( @@ -513,7 +517,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => { setError={setError} /> {!hasAcknowledgedTerms && ( - <$Terms> +
{stringGetter({ key: STRING_KEYS.DEPOSIT_ACKNOWLEDGEMENT, params: { @@ -539,7 +543,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => { ), }, })} - +
)} @@ -550,22 +554,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => { const $Form = styled.form` ${formMixins.transfersForm} `; - -const $Subheader = styled.div` - color: var(--color-text-0); -`; - const $Footer = styled.footer` ${formMixins.footer} --stickyFooterBackdrop-outsetY: var(--dialog-content-paddingBottom); `; - -const $WithDetailsReceipt = styled(WithDetailsReceipt)` - --withReceipt-backgroundColor: var(--color-layer-2); -`; - -const $Terms = styled.div` - margin-top: 1rem; - color: var(--color-text-0); - font: var(--font-small-book); -`; diff --git a/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx b/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx index 5e66feb4f..05cd815ed 100644 --- a/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx +++ b/src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx @@ -254,7 +254,10 @@ export const DepositButtonAndReceipt = ({ !isDisabled && !isEditingSlippage && connectionError !== ConnectionErrorType.CHAIN_DISRUPTION; return ( - <$WithReceipt slotReceipt={<$Details items={submitButtonReceipt} />}> + } + tw="[--withReceipt-backgroundColor:var(--color-layer-2)]" + > {!canAccountTrade ? ( ) : !isConnectedWagmi ? ( @@ -285,18 +288,13 @@ export const DepositButtonAndReceipt = ({ })} )} - + ); }; const $ExchangeRate = styled.span` ${layoutMixins.row} gap: 0.5ch; `; - -const $WithReceipt = styled(WithReceipt)` - --withReceipt-backgroundColor: var(--color-layer-2); -`; - const $Details = styled(Details)` --details-item-vertical-padding: 0.33rem; padding: var(--form-input-paddingY) var(--form-input-paddingX); diff --git a/src/views/forms/AccountManagementForms/LowestFeesText.tsx b/src/views/forms/AccountManagementForms/LowestFeesText.tsx index dc4e65cb1..6914708cd 100644 --- a/src/views/forms/AccountManagementForms/LowestFeesText.tsx +++ b/src/views/forms/AccountManagementForms/LowestFeesText.tsx @@ -7,26 +7,17 @@ import { useStringGetter } from '@/hooks/useStringGetter'; export const LowestFeesDecoratorText = () => { const stringGetter = useStringGetter(); return ( - <$Text> +
{stringGetter({ key: STRING_KEYS.LOWEST_FEES_WITH_USDC, params: { LOWEST_FEES_HIGHLIGHT_TEXT: ( - <$GreenHighlight> + {stringGetter({ key: STRING_KEYS.LOWEST_FEES_HIGHLIGHT_TEXT })} - + ), }, })} - +
); }; - -const $Text = styled.div` - font: var(--font-small-regular); - color: var(--color-text-0); -`; - -const $GreenHighlight = styled.span` - color: var(--color-green); -`; diff --git a/src/views/forms/AccountManagementForms/SlippageEditor.tsx b/src/views/forms/AccountManagementForms/SlippageEditor.tsx index 86c01ff8c..65ebac05d 100644 --- a/src/views/forms/AccountManagementForms/SlippageEditor.tsx +++ b/src/views/forms/AccountManagementForms/SlippageEditor.tsx @@ -93,7 +93,7 @@ export const SlippageEditor = ({ } return ( - <$WithConfirmationPopover + } + tw="w-10 text-[0.625rem]" > { { @@ -138,7 +139,7 @@ export const SlippageEditor = ({ ), }[editorState] } - + ); }; const $SlippageOutput = styled.button` @@ -146,12 +147,6 @@ const $SlippageOutput = styled.button` text-decoration: underline; gap: 0.5ch; `; - -const $WithConfirmationPopover = styled(WithConfirmationPopover)` - font-size: 0.625rem; - width: 10rem; -`; - const $SlippageInput = styled.div` ${layoutMixins.inlineRow} diff --git a/src/views/forms/AccountManagementForms/SourceSelectMenu.tsx b/src/views/forms/AccountManagementForms/SourceSelectMenu.tsx index 4517e8936..31eaf006e 100644 --- a/src/views/forms/AccountManagementForms/SourceSelectMenu.tsx +++ b/src/views/forms/AccountManagementForms/SourceSelectMenu.tsx @@ -3,6 +3,7 @@ import { useMemo } from 'react'; import { StatSigFlags } from '@/types/statsig'; import { shallowEqual } from 'react-redux'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { TransferType } from '@/constants/abacus'; import { cctpTokensByChainId, getMapOfLowestFeeTokensByChainId } from '@/constants/cctp'; @@ -142,11 +143,7 @@ export const SourceSelectMenu = ({ ); }; -const $Img = styled.img` - width: 1.25rem; - height: 1.25rem; - border-radius: 50%; -`; +const $Img = tw.img`h-1.25 w-1.25 rounded-[50%]`; const $ChainRow = styled.div` ${layoutMixins.row} diff --git a/src/views/forms/AccountManagementForms/TokenSelectMenu.tsx b/src/views/forms/AccountManagementForms/TokenSelectMenu.tsx index 918ac7d5e..a67b51484 100644 --- a/src/views/forms/AccountManagementForms/TokenSelectMenu.tsx +++ b/src/views/forms/AccountManagementForms/TokenSelectMenu.tsx @@ -3,6 +3,7 @@ import { useMemo } from 'react'; import { StatSigFlags } from '@/types/statsig'; import { shallowEqual } from 'react-redux'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { TransferInputTokenResource, TransferType } from '@/constants/abacus'; import { cctpTokensByDenom, getMapOfLowestFeeTokensByDenom } from '@/constants/cctp'; @@ -128,8 +129,4 @@ const $AssetRow = styled.div` font: var(--font-base-book); `; -const $Img = styled.img` - width: 1.25rem; - height: 1.25rem; - border-radius: 50%; -`; +const $Img = tw.img`h-1.25 w-1.25 rounded-[50%]`; diff --git a/src/views/forms/AccountManagementForms/WithdrawForm.tsx b/src/views/forms/AccountManagementForms/WithdrawForm.tsx index bdbcba32a..e6f45ae00 100644 --- a/src/views/forms/AccountManagementForms/WithdrawForm.tsx +++ b/src/views/forms/AccountManagementForms/WithdrawForm.tsx @@ -338,7 +338,7 @@ export const WithdrawForm = () => { ), value: ( - <$DiffOutput + { withDiff={ Boolean(withdrawAmount) && !debouncedAmountBN.isNaN() && !debouncedAmountBN.isZero() } + tw="[--diffOutput-valueWithDiff-fontSize:1em]" /> ), }, @@ -466,7 +467,7 @@ export const WithdrawForm = () => { selectedLocale, fractionDigits: TOKEN_DECIMALS, })} - <$Tag>{usdcLabel} + {usdcLabel} ), }, @@ -508,7 +509,7 @@ export const WithdrawForm = () => { return ( <$Form onSubmit={onSubmit}> - <$Subheader> +
{stringGetter({ key: skipEnabled ? STRING_KEYS.LOWEST_FEE_WITHDRAWALS_SKIP @@ -523,7 +524,7 @@ export const WithdrawForm = () => { ), }, })} - +
<$DestinationRow> { label={ {stringGetter({ key: STRING_KEYS.DESTINATION })}{' '} - {isValidAddress ? <$CheckIcon iconName={IconName.Check} /> : null} + {isValidAddress ? ( + + ) : null} } /> @@ -553,7 +556,11 @@ export const WithdrawForm = () => { onSelectToken={onSelectToken} isExchange={Boolean(exchange)} /> - <$WithDetailsReceipt side="bottom" detailItems={amountInputReceipt}> + { /> } /> - + {errorMessage && ( - <$AlertMessage type={alertType ?? AlertType.Error}>{errorMessage} + + {errorMessage} + )} <$Footer> { ); }; -const $Subheader = styled.div` - color: var(--color-text-0); -`; - -const $Tag = styled(Tag)` - margin-left: 0.5ch; -`; - -const $DiffOutput = styled(DiffOutput)` - --diffOutput-valueWithDiff-fontSize: 1em; -`; - const $Form = styled.form` ${formMixins.transfersForm} `; @@ -613,18 +610,3 @@ const $DestinationRow = styled.div` grid-template-columns: 1fr 1fr; gap: 1rem; `; - -const $AlertMessage = styled(AlertMessage)` - display: inline; -`; - -const $WithDetailsReceipt = styled(WithDetailsReceipt)` - --withReceipt-backgroundColor: var(--color-layer-2); -`; - -const $CheckIcon = styled(Icon)` - margin: 0 1ch; - - color: var(--color-success); - font-size: 0.625rem; -`; diff --git a/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx b/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx index e73a35553..993bd935c 100644 --- a/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx +++ b/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx @@ -175,7 +175,7 @@ export const WithdrawButtonAndReceipt = ({ key: 'leverage', label: {stringGetter({ key: STRING_KEYS.ACCOUNT_LEVERAGE })}, value: ( - <$DiffOutput + ), }, @@ -192,7 +193,10 @@ export const WithdrawButtonAndReceipt = ({ !isDisabled && !isEditingSlippage && connectionError !== ConnectionErrorType.CHAIN_DISRUPTION; return ( - <$WithReceipt slotReceipt={<$Details items={submitButtonReceipt} />}> + } + tw="[--withReceipt-backgroundColor:var(--color-layer-2)]" + > {!canAccountTrade ? ( ) : ( @@ -207,22 +211,13 @@ export const WithdrawButtonAndReceipt = ({ {stringGetter({ key: STRING_KEYS.WITHDRAW })} )} - + ); }; -const $DiffOutput = styled(DiffOutput)` - --diffOutput-valueWithDiff-fontSize: 1em; -`; - const $RowWithGap = styled.span` ${layoutMixins.row} gap: 0.5ch; `; - -const $WithReceipt = styled(WithReceipt)` - --withReceipt-backgroundColor: var(--color-layer-2); -`; - const $Details = styled(Details)` --details-item-vertical-padding: 0.33rem; padding: var(--form-input-paddingY) var(--form-input-paddingX); diff --git a/src/views/forms/AdjustIsolatedMarginForm.tsx b/src/views/forms/AdjustIsolatedMarginForm.tsx index e5a761db1..0136f1a9a 100644 --- a/src/views/forms/AdjustIsolatedMarginForm.tsx +++ b/src/views/forms/AdjustIsolatedMarginForm.tsx @@ -365,7 +365,7 @@ export const AdjustIsolatedMarginForm = ({ ) : ( <$GradientCard fromColor="neutral" toColor={gradientToColor}> <$Column> - <$TertiarySpan>{stringGetter({ key: STRING_KEYS.ESTIMATED })} + {stringGetter({ key: STRING_KEYS.ESTIMATED })} {stringGetter({ key: STRING_KEYS.LIQUIDATION_PRICE })}
@@ -444,7 +444,9 @@ export const AdjustIsolatedMarginForm = ({ ? ButtonState.Disabled : ButtonState.Default } - slotLeft={ctaErrorAction ? <$WarningIcon iconName={IconName.Warning} /> : undefined} + slotLeft={ + ctaErrorAction ? : undefined + } > {ctaErrorAction ?? formConfig.buttonLabel} @@ -475,10 +477,3 @@ const $Column = styled.div` ${layoutMixins.column} font: var(--font-small-medium); `; -const $TertiarySpan = styled.span` - color: var(--color-text-0); -`; - -const $WarningIcon = styled(Icon)` - color: var(--color-warning); -`; diff --git a/src/views/forms/CancelAllOrdersInMarketForm.tsx b/src/views/forms/CancelAllOrdersInMarketForm.tsx index 38890387c..d27bb34f8 100644 --- a/src/views/forms/CancelAllOrdersInMarketForm.tsx +++ b/src/views/forms/CancelAllOrdersInMarketForm.tsx @@ -150,10 +150,11 @@ export const CancelAllOrdersInMarketForm = ({ const submitButtonWithReceipt = ( - <$Button + ); return (
- <$ConfirmationText> +
{stringGetter({ key: STRING_KEYS.CANCEL_ORDERS_CONFIRMATION, params: { @@ -183,15 +184,8 @@ export const CancelAllOrdersInMarketForm = ({ MARKET: marketId, }, })} - +
{submitButtonWithReceipt}
); }; - -const $ConfirmationText = styled.div` - margin-bottom: 1rem; -`; -const $Button = styled(Button)` - width: 100%; -`; diff --git a/src/views/forms/ClosePositionForm.tsx b/src/views/forms/ClosePositionForm.tsx index c56ec3f28..f04e422d8 100644 --- a/src/views/forms/ClosePositionForm.tsx +++ b/src/views/forms/ClosePositionForm.tsx @@ -233,7 +233,7 @@ export const ClosePositionForm = ({ const inputs = ( <$InputsColumn> - <$FormInput + @@ -246,6 +246,7 @@ export const ClosePositionForm = ({ type={InputType.Number} value={size ?? ''} max={currentSize !== null ? currentSizeBN.toNumber() : undefined} + tw="w-full" /> <$ToggleGroup @@ -274,7 +275,7 @@ export const ClosePositionForm = ({ ) : ( <$MobileLayout> <$OrderbookContainer> - <$Orderbook hideHeader /> + <$Right> @@ -369,11 +370,6 @@ const $OrderbookContainer = styled.div` padding-top: var(--dialog-content-paddingTop); padding-bottom: var(--form-rowGap); `; - -const $Orderbook = styled(CanvasOrderbook)` - min-height: 100%; -`; - const $Right = styled.div` height: 0; min-height: 100%; @@ -386,11 +382,6 @@ const $Right = styled.div` padding-bottom: var(--form-rowGap); gap: 1rem; `; - -const $FormInput = styled(FormInput)` - width: 100%; -`; - const $ToggleGroup = styled(ToggleGroup)` ${formMixins.inputToggleGroup} diff --git a/src/views/forms/NewMarketForm/NewMarketPreviewStep.tsx b/src/views/forms/NewMarketForm/NewMarketPreviewStep.tsx index 97a22a297..df45995e4 100644 --- a/src/views/forms/NewMarketForm/NewMarketPreviewStep.tsx +++ b/src/views/forms/NewMarketForm/NewMarketPreviewStep.tsx @@ -5,6 +5,7 @@ import { encodeJson } from '@dydxprotocol/v4-client-js'; import { PerpetualMarketType } from '@dydxprotocol/v4-client-js/build/node_modules/@dydxprotocol/v4-proto/src/codegen/dydxprotocol/perpetuals/perpetual'; import Long from 'long'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { AlertType } from '@/constants/alerts'; import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons'; @@ -193,7 +194,7 @@ export const NewMarketPreviewStep = ({ type={OutputType.Number} value={nativeTokenBalance} fractionDigits={TOKEN_DECIMALS} - slotRight={<$Tag>{chainTokenLabel}} + slotRight={{chainTokenLabel}} />

@@ -259,7 +260,7 @@ export const NewMarketPreviewStep = ({ key: 'message-details', label: stringGetter({ key: STRING_KEYS.MESSAGE_DETAILS }), value: ( - <$Button + ), }, { @@ -332,7 +334,7 @@ export const NewMarketPreviewStep = ({ {alertMessage && ( {alertMessage.message} )} - <$ButtonRow> +
+
<$Disclaimer> {stringGetter({ key: STRING_KEYS.PROPOSAL_DISCLAIMER_1, @@ -359,7 +361,7 @@ export const NewMarketPreviewStep = ({ }, })} - +
); }; @@ -386,11 +388,6 @@ const $Balance = styled.span` margin-left: 0.5ch; } `; - -const $Tag = styled(Tag)` - margin-left: 0.5ch; -`; - const $FormInput = styled(FormInput)` input { font-size: 1rem; @@ -403,15 +400,7 @@ const $Icon = styled(Icon)<{ $hasError?: boolean }>` ${({ $hasError }) => ($hasError ? 'color: var(--color-error);' : 'color: var(--color-success);')} `; -const $WithDetailsReceipt = styled(WithDetailsReceipt)` - --details-item-fontSize: 1rem; -`; - -const $DisclaimerContainer = styled.div` - min-width: 100%; - width: min-content; -`; - +const $WithDetailsReceipt = tw(WithDetailsReceipt)`[--details-item-fontSize:1rem] `; const $Disclaimer = styled.div<{ textAlign?: string }>` font: var(--font-small-book); color: var(--color-text-0); @@ -420,15 +409,3 @@ const $Disclaimer = styled.div<{ textAlign?: string }>` ${({ textAlign }) => textAlign && `text-align: ${textAlign};`} `; - -const $ButtonRow = styled.div` - display: grid; - grid-template-columns: 1fr 2fr; - gap: 1rem; - width: 100%; -`; - -const $Button = styled(Button)` - --button-padding: 0; - --button-height: auto; -`; diff --git a/src/views/forms/NewMarketForm/NewMarketSelectionStep.tsx b/src/views/forms/NewMarketForm/NewMarketSelectionStep.tsx index 5b0944640..9ddd8c242 100644 --- a/src/views/forms/NewMarketForm/NewMarketSelectionStep.tsx +++ b/src/views/forms/NewMarketForm/NewMarketSelectionStep.tsx @@ -3,6 +3,7 @@ import { FormEvent, useEffect, useMemo, useState } from 'react'; import { Item, Root } from '@radix-ui/react-radio-group'; import { shallowEqual } from 'react-redux'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { OnboardingState } from '@/constants/account'; import { AlertType } from '@/constants/alerts'; @@ -140,7 +141,7 @@ export const NewMarketSelectionStep = ({ type={OutputType.Number} value={nativeTokenBalance} fractionDigits={TOKEN_DECIMALS} - slotRight={<$Tag>{chainTokenLabel}} + slotRight={{chainTokenLabel}} /> @@ -166,9 +167,9 @@ export const NewMarketSelectionStep = ({ label={stringGetter({ key: STRING_KEYS.MARKETS })} > {assetToAdd ? ( - <$SelectedAsset> + {assetToAdd.meta.assetName} {assetToAdd.params.ticker} - + ) : ( `${stringGetter({ key: STRING_KEYS.EG })} "BTC-USD"` )} @@ -247,7 +248,7 @@ export const NewMarketSelectionStep = ({ )} @@ -279,9 +280,10 @@ export const NewMarketSelectionStep = ({ ) ) } + tw="[--button-height:auto] [--button-padding:0]" > {stringGetter({ key: STRING_KEYS.VIEW_DETAILS })} → - + ), }, { @@ -293,24 +295,26 @@ export const NewMarketSelectionStep = ({ ), value: ( - <$Disclaimer> +
{stringGetter({ key: STRING_KEYS.OR_MORE, params: { NUMBER: ( - <$Output + ), }, })} - +
), }, ].filter(isTruthy)} + tw="px-0.75 pb-0.25 pt-0.375" /> } > @@ -352,28 +356,7 @@ const $Balance = styled.span` margin-left: 0.5ch; } `; - -const $Tag = styled(Tag)` - margin-left: 0.5ch; -`; - -const $SelectedAsset = styled.span` - color: var(--color-text-2); -`; - -const $Disclaimer = styled.div` - color: var(--color-text-0); - margin-left: 0.5ch; -`; - -const $Header = styled.div` - display: flex; - flex: 1; - align-items: center; - color: var(--color-text-2); - font: var(--font-base-medium); - justify-content: space-between; -`; +const $Header = tw.div`flex flex-1 items-center justify-between text-text-2 font-base-medium`; const $Root = styled(Root)` display: flex; @@ -416,16 +399,3 @@ const $Details = styled(Details)` } } `; - -const $ReceiptDetails = styled(Details)` - padding: 0.375rem 0.75rem 0.25rem; -`; - -const $Output = styled(Output)` - display: inline-block; -`; - -const $Button = styled(Button)` - --button-padding: 0; - --button-height: auto; -`; diff --git a/src/views/forms/NewMarketForm/index.tsx b/src/views/forms/NewMarketForm/index.tsx index 4b3d4a451..17d008108 100644 --- a/src/views/forms/NewMarketForm/index.tsx +++ b/src/views/forms/NewMarketForm/index.tsx @@ -38,7 +38,7 @@ export const NewMarketForm = () => { }, [assetToAdd]); if (!hasPotentialMarketsData) { - return <$LoadingSpace id="new-market-form" />; + return ; } if (NewMarketFormStep.SUCCESS === step && proposalTxHash) { @@ -76,6 +76,3 @@ export const NewMarketForm = () => { /> ); }; -const $LoadingSpace = styled(LoadingSpace)` - min-height: 18.75rem; -`; diff --git a/src/views/forms/NobleDeposit.tsx b/src/views/forms/NobleDeposit.tsx index 29d9ae5f6..bc4aa321e 100644 --- a/src/views/forms/NobleDeposit.tsx +++ b/src/views/forms/NobleDeposit.tsx @@ -43,9 +43,9 @@ export const NobleDeposit = () => { /> - <$WithReceipt + +
{ key: STRING_KEYS.NOBLE_ACKNOWLEDGEMENT, })} /> - +
} + tw="[--withReceipt-backgroundColor:var(--color-layer-2)]" > { } /> - + ); }; - -const $WithReceipt = styled(WithReceipt)` - --withReceipt-backgroundColor: var(--color-layer-2); -`; - const $QrCode = styled(QrCode)<{ blurred: boolean }>` border-radius: 0.5em; @@ -84,8 +80,3 @@ const $QrCode = styled(QrCode)<{ blurred: boolean }>` filter: blur(8px); `} `; - -const $CheckboxContainer = styled.div` - padding: 1rem; - color: var(--color-text-0); -`; diff --git a/src/views/forms/SelectMarginModeForm.tsx b/src/views/forms/SelectMarginModeForm.tsx index 0b9dcd7de..c963d337e 100644 --- a/src/views/forms/SelectMarginModeForm.tsx +++ b/src/views/forms/SelectMarginModeForm.tsx @@ -1,5 +1,6 @@ import { shallowEqual } from 'react-redux'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { AbacusMarginMode, MARGIN_MODE_STRINGS, TradeInputField } from '@/constants/abacus'; import { STRING_KEYS } from '@/constants/localization'; @@ -72,7 +73,4 @@ const $RadioButtonCards = styled(RadioButtonCards)` --radio-button-cards-item-checked-backgroundColor: var(--color-layer-1); --radio-button-cards-item-header-font: var(--font-medium-medium); `; -const $TertiarySpan = styled.span` - color: var(--color-text-0); - font: var(--font-base-medium); -`; +const $TertiarySpan = tw.span`text-text-0 font-base-medium`; diff --git a/src/views/forms/StakingForms/StakeForm/StakeFormInputContents.tsx b/src/views/forms/StakingForms/StakeForm/StakeFormInputContents.tsx index c26c23cad..2fd8e704a 100644 --- a/src/views/forms/StakingForms/StakeForm/StakeFormInputContents.tsx +++ b/src/views/forms/StakingForms/StakeForm/StakeFormInputContents.tsx @@ -107,7 +107,11 @@ export const StakeFormInputContents = ({ return ( <> - <$WithDetailsReceipt side="bottom" detailItems={amountDetailItems}> + - + ); }; - -const $WithDetailsReceipt = styled(WithDetailsReceipt)` - --withReceipt-backgroundColor: var(--color-layer-2); -`; diff --git a/src/views/forms/StakingForms/StakeForm/StakeFormPreviewContents.tsx b/src/views/forms/StakingForms/StakeForm/StakeFormPreviewContents.tsx index b81127046..e1aa10aea 100644 --- a/src/views/forms/StakingForms/StakeForm/StakeFormPreviewContents.tsx +++ b/src/views/forms/StakingForms/StakeForm/StakeFormPreviewContents.tsx @@ -43,13 +43,20 @@ export const StakeFormPreviewContents = ({ slotRightHeading={stringGetter({ key: STRING_KEYS.VALIDATOR })} slotLeft={ <> - <$AssetIcon symbol={chainTokenLabel} /> + } slotRight={ <> - <$ValidatorIcon url={website} fallbackText={moniker} /> + {moniker} } @@ -58,15 +65,3 @@ export const StakeFormPreviewContents = ({ /> ); }; - -const $AssetIcon = styled(AssetIcon)` - --icon-size: 2.25rem; - font-size: var(--icon-size); -`; - -const $ValidatorIcon = styled(ValidatorFaviconIcon)` - --icon-size: 2.25rem; - - height: var(--icon-size); - width: var(--icon-size); -`; diff --git a/src/views/forms/StakingForms/StakeForm/ValidatorDropdown.tsx b/src/views/forms/StakingForms/StakeForm/ValidatorDropdown.tsx index 91a4229e6..c461df57d 100644 --- a/src/views/forms/StakingForms/StakeForm/ValidatorDropdown.tsx +++ b/src/views/forms/StakingForms/StakeForm/ValidatorDropdown.tsx @@ -61,7 +61,7 @@ const ValidatorsDropdownContent = ({ key: STRING_KEYS.COMMISSION_PERCENTAGE, params: { PERCENTAGE: ( - <$CommissionOutput type={OutputType.Percent} value={commissionRate} /> + ), }, })} @@ -148,7 +148,7 @@ export const ValidatorDropdown = memo( const [isOpen, setIsOpen] = useState(false); const output = ( - <$Output + } + tw="text-text-1" /> ); @@ -173,10 +174,10 @@ export const ValidatorDropdown = memo( open={isOpen} onOpenChange={setIsOpen} slotTrigger={ - <$Trigger> + {slotTrigger} - <$DropdownIcon iconName={IconName.Caret} isOpen={isOpen} /> - + + } triggerType={TriggerType.MarketDropdown} align="end" @@ -198,11 +199,6 @@ const $ScrollArea = styled.div` max-height: 20rem; `; - -const $DropdownIcon = styled(DropdownIcon)` - margin-left: 0.5rem; -`; - const $Popover = styled(Popover)` ${popoverMixins.popover} `; @@ -211,16 +207,3 @@ const $Table = styled(Table)` --tableRow-backgroundColor: var(--color-layer-4); --tableCell-padding: 0.5rem 1rem; ` as typeof Table; - -const $Trigger = styled.span` - display: flex; - align-items: center; -`; - -const $Output = styled(Output)` - color: var(--color-text-1); -`; - -const $CommissionOutput = styled(Output)` - display: inline; -`; diff --git a/src/views/forms/StakingForms/UnstakeForm/UnstakeFormInputContents.tsx b/src/views/forms/StakingForms/UnstakeForm/UnstakeFormInputContents.tsx index efd1a7ec6..f77aa40fd 100644 --- a/src/views/forms/StakingForms/UnstakeForm/UnstakeFormInputContents.tsx +++ b/src/views/forms/StakingForms/UnstakeForm/UnstakeFormInputContents.tsx @@ -97,7 +97,7 @@ export const UnstakeFormInputContents = ({ return ( <> {currentDelegations?.length === 1 ? ( - <$WithDetailsReceipt + } /> - + ) : (currentDelegations?.length ?? 0) > 1 ? ( - <$GridLayout> +
{stringGetter({ key: STRING_KEYS.VALIDATOR, @@ -170,9 +171,12 @@ export const UnstakeFormInputContents = ({ {stringGetter({ key: STRING_KEYS.CLEAR })} ) : ( - <$AllButton onClick={setAllUnstakeAmountsToMax}> + <$Button + onClick={setAllUnstakeAmountsToMax} + tw="[--button-textColor:var(--color-accent)]" + > {stringGetter({ key: STRING_KEYS.ALL })} - + )} {stakingValidators && @@ -203,7 +207,7 @@ export const UnstakeFormInputContents = ({ ); })} - +
) : null} ); }; - -const $GridLayout = styled.div` - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; -`; - -const $WithDetailsReceipt = styled(WithDetailsReceipt)` - --withReceipt-backgroundColor: var(--color-layer-2); -`; - const $InlineRow = styled.span` ${layoutMixins.inlineRow} `; @@ -244,7 +237,3 @@ const $Button = styled(Button)` --button-height: auto; --button-hover-filter: none; `; - -const $AllButton = styled($Button)` - --button-textColor: var(--color-accent); -`; diff --git a/src/views/forms/StakingForms/UnstakeForm/UnstakeFormPreviewContents.tsx b/src/views/forms/StakingForms/UnstakeForm/UnstakeFormPreviewContents.tsx index f026cc28e..70384d51a 100644 --- a/src/views/forms/StakingForms/UnstakeForm/UnstakeFormPreviewContents.tsx +++ b/src/views/forms/StakingForms/UnstakeForm/UnstakeFormPreviewContents.tsx @@ -56,7 +56,11 @@ export const UnstakeFormPreviewContents = ({ })} slotLeft={ <> - <$ValidatorIcons numToShow={3} validators={unstakingValidators} /> + <$ValidatorsLabel> {unstakingValidators.map((validator) => validator.description?.moniker).join(', ')} @@ -64,7 +68,10 @@ export const UnstakeFormPreviewContents = ({ } slotRight={ <> - <$AssetIcon symbol={chainTokenLabel} /> + sum + (amounts[delegation.validator] ?? 0), @@ -80,17 +87,6 @@ export const UnstakeFormPreviewContents = ({ /> ); }; - -const $ValidatorIcons = styled(ValidatorIcons)` - --icon-size: 2.25rem; - --border-color: var(--color-layer-4); -`; - const $ValidatorsLabel = styled.div` ${layoutMixins.textLineClamp} `; - -const $AssetIcon = styled(AssetIcon)` - --icon-size: 2.25rem; - font-size: var(--icon-size); -`; diff --git a/src/views/forms/StakingForms/shared/StakeConfirmationButtonRow.tsx b/src/views/forms/StakingForms/shared/StakeConfirmationButtonRow.tsx index b906f7cdf..f028f1847 100644 --- a/src/views/forms/StakingForms/shared/StakeConfirmationButtonRow.tsx +++ b/src/views/forms/StakingForms/shared/StakeConfirmationButtonRow.tsx @@ -33,18 +33,24 @@ export const StakeConfirmationButtonRow = ({ return canAccountTrade ? ( <$Row> - <$EditButton + + ) : ( - <$OnboardingTriggerButton size={ButtonSize.Base} /> + ); }; @@ -53,15 +59,3 @@ const $Row = styled.div` gap: 1rem; width: 100%; `; - -const $EditButton = styled(Button)` - flex-grow: 1; -`; - -const $SubmitButton = styled(Button)` - flex-grow: 3; -`; - -const $OnboardingTriggerButton = styled(OnboardingTriggerButton)` - width: 100%; -`; diff --git a/src/views/forms/StakingForms/shared/StakePreviewContents.tsx b/src/views/forms/StakingForms/shared/StakePreviewContents.tsx index 9146ad19a..b95baabb4 100644 --- a/src/views/forms/StakingForms/shared/StakePreviewContents.tsx +++ b/src/views/forms/StakingForms/shared/StakePreviewContents.tsx @@ -1,6 +1,7 @@ import React, { Dispatch, SetStateAction } from 'react'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { StakeFormSteps } from '@/constants/stakingForms'; @@ -32,17 +33,17 @@ export const StakePreviewContents = ({ }: ElementProps) => { return ( <> - <$Rows> +
<$Row> <$Heading>{slotLeftHeading} <$Heading>{slotRightHeading} <$Row> <$StakeBox> {slotLeft} - <$ArrowIcon iconName={IconName.FastForward} /> + <$StakeBox> {slotRight} - +
<$Details items={detailItems} /> ); }; +const $Row = tw.div`flex items-center justify-between gap-0.5 text-center`; -const $Rows = styled.div` - display: grid; - gap: 0.5rem; -`; - -const $Row = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - text-align: center; - gap: 0.5rem; -`; - -const $Heading = styled.h3` - color: var(--color-text-0); - font: var(--font-small-medium); - - flex-basis: 50%; -`; +const $Heading = tw.h3`basis-6/12 text-text-0 font-small-medium`; const $StakeBox = styled.div` background-color: var(--color-layer-4); @@ -89,12 +73,6 @@ const $StakeBox = styled.div` gap: 0.5rem; padding: 1rem 0.5rem; `; - -const $ArrowIcon = styled(Icon)` - width: 2.25rem; - height: 2.25rem; -`; - const $Details = styled(Details)` --details-item-vertical-padding: 0.33rem; diff --git a/src/views/forms/StakingForms/shared/StakeRewardButtonAndReceipt.tsx b/src/views/forms/StakingForms/shared/StakeRewardButtonAndReceipt.tsx index 812161920..0f1705b34 100644 --- a/src/views/forms/StakingForms/shared/StakeRewardButtonAndReceipt.tsx +++ b/src/views/forms/StakingForms/shared/StakeRewardButtonAndReceipt.tsx @@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from 'react'; import { SelectedGasDenom } from '@dydxprotocol/v4-client-js'; import { shallowEqual } from 'react-redux'; import styled, { css } from 'styled-components'; +import tw from 'twin.macro'; import { AlertType } from '@/constants/alerts'; import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons'; @@ -128,14 +129,17 @@ export const StakeRewardButtonAndReceipt = ({ return ( <> {errorToDisplay && ( - <$AlertMessage type={errorToDisplay.type}> {errorToDisplay.message} + + {' '} + {errorToDisplay.message}{' '} + )} <$WithDetailsReceipt detailItems={detailItems} isForm={isForm} className={className}> {!canAccountTrade ? ( - <$OnboardingTriggerButton size={buttonSize} /> + ) : ( errorToDisplay?.slotButton ?? ( <$Button @@ -145,7 +149,7 @@ export const StakeRewardButtonAndReceipt = ({ onClick={onClick} slotLeft={ shouldDisplayErrorAsWarning() ? ( - <$WarningIcon iconName={IconName.Warning} /> + ) : undefined } state={{ @@ -162,11 +166,6 @@ export const StakeRewardButtonAndReceipt = ({ ); }; - -const $AlertMessage = styled(AlertMessage)` - width: 100%; -`; - const $WithDetailsReceipt = styled(WithDetailsReceipt)<{ isForm: boolean }>` --withReceipt-backgroundColor: var(--color-layer-2); width: 100%; @@ -179,15 +178,4 @@ const $WithDetailsReceipt = styled(WithDetailsReceipt)<{ isForm: boolean }>` } `} `; - -const $OnboardingTriggerButton = styled(OnboardingTriggerButton)` - width: 100%; -`; - -const $Button = styled(Button)` - width: 100%; -`; - -const $WarningIcon = styled(Icon)` - color: var(--color-warning); -`; +const $Button = tw(Button)`w-full `; diff --git a/src/views/forms/StakingForms/shared/ValidatorName.tsx b/src/views/forms/StakingForms/shared/ValidatorName.tsx index 518743946..36afa5791 100644 --- a/src/views/forms/StakingForms/shared/ValidatorName.tsx +++ b/src/views/forms/StakingForms/shared/ValidatorName.tsx @@ -14,7 +14,7 @@ export const ValidatorName = ({ className?: string; }) => { return ( - <$ValidatorName className={className}> +
{validator?.description?.moniker} )} - +
); }; - -const $ValidatorName = styled.div` - display: flex; - align-items: center; -`; - const $TruncatedText = styled.div` ${layoutMixins.textTruncate} color: var(--color-text-1); diff --git a/src/views/forms/TradeForm.tsx b/src/views/forms/TradeForm.tsx index b61de5cac..c8c91bad7 100644 --- a/src/views/forms/TradeForm.tsx +++ b/src/views/forms/TradeForm.tsx @@ -240,7 +240,9 @@ export const TradeForm = ({ const orderbookAndInputs = ( <$OrderbookAndInputs showOrderbook={showOrderbook}> - {isTablet && showOrderbook && <$Orderbook maxRowsPerSide={5} hideHeader />} + {isTablet && showOrderbook && ( + + )} <$InputsColumn> @@ -425,13 +427,6 @@ const $OrderbookAndInputs = styled.div<{ showOrderbook: boolean }>` `} } `; -const $Orderbook = styled(CanvasOrderbook)` - width: 100%; - - @media ${breakpoints.notTablet} { - display: none; - } -`; const $ToggleGroup = styled(ToggleGroup)` overflow-x: auto; diff --git a/src/views/forms/TradeForm/AdvancedTradeOptions.tsx b/src/views/forms/TradeForm/AdvancedTradeOptions.tsx index 68281d5a1..9aefa726a 100644 --- a/src/views/forms/TradeForm/AdvancedTradeOptions.tsx +++ b/src/views/forms/TradeForm/AdvancedTradeOptions.tsx @@ -80,7 +80,7 @@ export const AdvancedTradeOptions = () => { triggerIconSide="right" fullWidth > - <$AdvancedInputsContainer> +
{needsTimeRow && ( <$AdvancedInputsRow> {hasTimeInForce && timeInForce != null && ( @@ -221,7 +221,7 @@ export const AdvancedTradeOptions = () => { )} )} - +
); }; @@ -237,12 +237,6 @@ const $Collapsible = styled(Collapsible)` margin: -0.5rem 0; `; - -const $AdvancedInputsContainer = styled.div` - display: grid; - gap: var(--form-input-gap); -`; - const $SelectMenu = styled(SelectMenu)` ${formMixins.inputSelectMenu} `; diff --git a/src/views/forms/TradeForm/LeverageSlider.tsx b/src/views/forms/TradeForm/LeverageSlider.tsx index 418d59e2a..3987edc11 100644 --- a/src/views/forms/TradeForm/LeverageSlider.tsx +++ b/src/views/forms/TradeForm/LeverageSlider.tsx @@ -104,7 +104,7 @@ export const LeverageSlider = ({ }; return ( - <$SliderContainer className={className}> +
<$Slider label="MarketLeverage" min={min} @@ -116,7 +116,7 @@ export const LeverageSlider = ({ midpoint={midpoint} orderSide={orderSide} /> - +
); }; const $Slider = styled(Slider)<{ midpoint?: number; orderSide: OrderSide }>` @@ -132,7 +132,3 @@ const $Slider = styled(Slider)<{ midpoint?: number; orderSide: OrderSide }>` ); `} `; - -const $SliderContainer = styled.div` - height: 1.375rem; -`; diff --git a/src/views/forms/TradeForm/MarginModeSelector.tsx b/src/views/forms/TradeForm/MarginModeSelector.tsx index 0b38c756f..a5a18bc43 100644 --- a/src/views/forms/TradeForm/MarginModeSelector.tsx +++ b/src/views/forms/TradeForm/MarginModeSelector.tsx @@ -47,21 +47,21 @@ export const MarginModeSelector = ({ stringGetter({ key: MARGIN_MODE_STRINGS[marginMode.rawValue], })} - <$TriangleIcon iconName={IconName.Triangle} /> + ) : ( <$WarningTooltip className={className} slotTooltip={ - <$WarningTooltipContent> - <$CautionIcon iconName={IconName.Warning} /> +
+ {stringGetter({ key: STRING_KEYS.UNABLE_TO_CHANGE_MARGIN_MODE, params: { MARKET: currentAssetId, }, })} - +
} > ); return ( @@ -316,10 +319,3 @@ export const PlaceOrderButtonAndReceipt = ({ ); }; -const $Button = styled(Button)` - width: 100%; -`; - -const $WarningIcon = styled(Icon)` - color: var(--color-warning); -`; diff --git a/src/views/forms/TradeForm/TradeSizeInputs.tsx b/src/views/forms/TradeForm/TradeSizeInputs.tsx index 5e9eb8f99..5a6e64a56 100644 --- a/src/views/forms/TradeForm/TradeSizeInputs.tsx +++ b/src/views/forms/TradeForm/TradeSizeInputs.tsx @@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react'; import { shallowEqual } from 'react-redux'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { TradeInputField } from '@/constants/abacus'; import { AnalyticsEvents } from '@/constants/analytics'; @@ -231,6 +232,4 @@ const $ToggleButton = styled(ToggleButton)` } `; -const $Tooltip = styled.div` - display: inline-flex; -`; +const $Tooltip = tw.div`inline-flex`; diff --git a/src/views/forms/TransferForm.tsx b/src/views/forms/TransferForm.tsx index babf0cf1d..f5579df9d 100644 --- a/src/views/forms/TransferForm.tsx +++ b/src/views/forms/TransferForm.tsx @@ -339,7 +339,7 @@ export const TransferForm = ({ label={ <$DestinationInputLabel> {stringGetter({ key: STRING_KEYS.DESTINATION })} - {isAddressValid && <$CheckIcon iconName={IconName.Check} />} + {isAddressValid && } } type={InputType.Text} @@ -365,14 +365,14 @@ export const TransferForm = ({ {recipientAddress && !isAddressValid && ( - <$AddressValidationAlertMessage type={AlertType.Error}> + {stringGetter({ key: dydxAddress === recipientAddress ? STRING_KEYS.TRANSFER_TO_YOURSELF : STRING_KEYS.TRANSFER_INVALID_DYDX_ADDRESS, })} - + )} <$SelectMenu @@ -385,7 +385,11 @@ export const TransferForm = ({ ))} - <$WithDetailsReceipt side="bottom" detailItems={amountDetailItems}> + - + {showMemoField && ( - <$Content> +
)} - +
); }; @@ -82,8 +82,3 @@ const $Header = styled.h3` margin-bottom: 0.5rem; `; - -const $Content = styled.div` - display: grid; - gap: 0.5em; -`; diff --git a/src/views/forms/TriggersForm/OrderSizeInput.tsx b/src/views/forms/TriggersForm/OrderSizeInput.tsx index 2004a4deb..7ff31c558 100644 --- a/src/views/forms/TriggersForm/OrderSizeInput.tsx +++ b/src/views/forms/TriggersForm/OrderSizeInput.tsx @@ -101,14 +101,15 @@ export const OrderSizeInput = ({ } open={shouldShowCustomAmount} > - <$SizeInputRow> - <$OrderSizeSlider +
+ setAbacusSize(parseFloat(sizeString))} setOrderSizeInput={(sizeString: string) => setOrderSize(parseFloat(sizeString))} size={orderSize} positionSize={positionSize ?? undefined} stepSizeDecimals={stepSizeDecimals ?? TOKEN_DECIMALS} className={className} + tw="w-full" /> {symbol}} onInput={onSizeInput} /> - +
); }; -const $OrderSizeSlider = styled(OrderSizeSlider)` - width: 100%; -`; - -const $SizeInputRow = styled.div` - display: flex; - align-items: center; - gap: 0.25rem; -`; diff --git a/src/views/forms/TriggersForm/OrderSizeSlider.tsx b/src/views/forms/TriggersForm/OrderSizeSlider.tsx index 38e61f0e5..84de28b01 100644 --- a/src/views/forms/TriggersForm/OrderSizeSlider.tsx +++ b/src/views/forms/TriggersForm/OrderSizeSlider.tsx @@ -52,7 +52,7 @@ export const OrderSizeSlider = ({ }; return ( - <$SliderContainer className={className}> +
<$Slider label="PositionSize" min={0} @@ -62,12 +62,9 @@ export const OrderSizeSlider = ({ onValueCommit={onValueCommit} value={Math.min(currSize, maxSize)} /> - +
); }; -const $SliderContainer = styled.div` - height: 1.375rem; -`; const $Slider = styled(Slider)` --slider-track-backgroundColor: var(--color-layer-4); --slider-track-background: linear-gradient( diff --git a/src/views/forms/TriggersForm/TriggerOrderInputs.tsx b/src/views/forms/TriggersForm/TriggerOrderInputs.tsx index 02567a2ba..25e9d1769 100644 --- a/src/views/forms/TriggersForm/TriggerOrderInputs.tsx +++ b/src/views/forms/TriggersForm/TriggerOrderInputs.tsx @@ -244,10 +244,10 @@ export const TriggerOrderInputs = ({ const multipleOrdersButton = () => ( <$MultipleOrdersContainer> {stringGetter({ key: STRING_KEYS.MULTIPLE_ORDERS_FOUND })} - <$ViewAllButton action={ButtonAction.Navigation} onClick={onViewOrdersClick}> + ); @@ -364,11 +364,3 @@ const $MultipleOrdersContainer = styled.div` color: var(--color-text-2); `; - -const $ViewAllButton = styled(Button)` - color: var(--color-accent); -`; - -const $ArrowIcon = styled(Icon)` - stroke-width: 2; -`; diff --git a/src/views/forms/TriggersForm/TriggersForm.tsx b/src/views/forms/TriggersForm/TriggersForm.tsx index 81e147417..cf502ebe6 100644 --- a/src/views/forms/TriggersForm/TriggersForm.tsx +++ b/src/views/forms/TriggersForm/TriggersForm.tsx @@ -1,6 +1,7 @@ import { FormEvent } from 'react'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { ErrorType, ValidationError, type SubaccountOrder } from '@/constants/abacus'; import { ButtonAction, ButtonType } from '@/constants/buttons'; @@ -133,11 +134,14 @@ export const TriggersForm = ({ tickSizeDecimals={tickSizeDecimals} /> - <$Button + )} @@ -172,18 +176,6 @@ const $PriceRow = styled.div` ${layoutMixins.spacedRow}; `; -const $PriceLabel = styled.h3` - color: var(--color-text-0); -`; - -const $Price = styled(Output)` - color: var(--color-text-2); -`; +const $PriceLabel = tw.h3`text-text-0`; -const $Button = styled(Button)` - width: 100%; -`; - -const $WarningIcon = styled(Icon)` - color: var(--color-warning); -`; +const $Price = tw(Output)`text-text-2 `; diff --git a/src/views/menus/AccountMenu.tsx b/src/views/menus/AccountMenu.tsx index 7af084e69..11176b0a2 100644 --- a/src/views/menus/AccountMenu.tsx +++ b/src/views/menus/AccountMenu.tsx @@ -4,6 +4,7 @@ import { useMfaEnrollment, usePrivy } from '@privy-io/react-auth'; import type { Dispatch } from '@reduxjs/toolkit'; import { shallowEqual } from 'react-redux'; import styled, { css } from 'styled-components'; +import tw from 'twin.macro'; import { OnboardingState } from '@/constants/account'; import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons'; @@ -81,7 +82,7 @@ export const AccountMenu = () => { let walletIcon; if (onboardingState === OnboardingState.WalletConnected) { - walletIcon = <$WarningIcon iconName={IconName.Warning} />; + walletIcon = ; } else if ( onboardingState === OnboardingState.AccountConnected && walletType === WalletType.Privy @@ -107,7 +108,7 @@ export const AccountMenu = () => { onboardingState === OnboardingState.AccountConnected && ( <$AccountInfo> <$AddressRow> - <$AssetIcon symbol="DYDX" /> + <$Column> { {walletType && walletType !== WalletType.Privy && ( <$AddressRow> - <$SourceIcon> - <$ConnectorIcon iconName={IconName.AddressConnector} /> +
+ - +
<$Column> <$label>{stringGetter({ key: STRING_KEYS.SOURCE_ADDRESS })} <$Address>{truncateAddress(evmAddress, '0x')} @@ -360,9 +361,10 @@ const AssetActions = memo( ] .filter(isTruthy) .map(({ iconName, tooltipStringKey, dialog }) => ( - <$WithTooltip + <$IconButton key={dialog.type} @@ -371,7 +373,7 @@ const AssetActions = memo( iconName={iconName} onClick={() => dispatch(openDialog(dialog))} /> - + ))} ) @@ -401,31 +403,6 @@ const $AddressRow = styled.div` margin-right: 0.5rem; } `; - -const $AssetIcon = styled(AssetIcon)` - z-index: 2; - - font-size: 1.75rem; -`; - -const $SourceIcon = styled.div` - padding: 0.375rem; - position: relative; - z-index: 1; - - font-size: 1rem; - - line-height: 0; - border-radius: 50%; - background-color: #303045; -`; - -const $ConnectorIcon = styled(Icon)` - position: absolute; - top: -1.625rem; - height: 1.75rem; -`; - const $label = styled.div` ${layoutMixins.row} @@ -459,9 +436,7 @@ const $Balances = styled.div` } `; -const $BalanceOutput = styled(Output)` - font-size: var(--fontSize-medium); -`; +const $BalanceOutput = tw(Output)`text-medium `; const $DropdownMenu = styled(DropdownMenu)` ${headerMixins.dropdownTrigger} @@ -469,16 +444,7 @@ const $DropdownMenu = styled(DropdownMenu)` --dropdownMenu-item-font-size: 0.875rem; --popover-padding: 0 0 0.5rem 0; ` as typeof DropdownMenu; - -const $WarningIcon = styled(Icon)` - font-size: 1.25rem; - color: var(--color-warning); -`; - -const $Address = styled.span` - font: var(--font-base-book); - font-feature-settings: var(--fontFeature-monoNumbers); -`; +const $Address = tw.span`font-base-book [font-feature-settings:var(--fontFeature-monoNumbers)]`; const $ConnectToChain = styled($Column)` max-width: 12em; @@ -507,7 +473,3 @@ const $CopyButton = styled(CopyButton)` --button-padding: 0 0.25rem; --button-border: solid var(--border-width) var(--color-layer-6); `; - -const $WithTooltip = styled(WithTooltip)` - --tooltip-backgroundColor: var(--color-layer-5); -`; diff --git a/src/views/menus/NotificationsMenu.tsx b/src/views/menus/NotificationsMenu.tsx index aa27420f0..ffeb3f426 100644 --- a/src/views/menus/NotificationsMenu.tsx +++ b/src/views/menus/NotificationsMenu.tsx @@ -122,7 +122,9 @@ export const NotificationsMenu = ({ slotTrigger={ <$TriggerContainer> {slotTrigger} - {hasUnreadNotifications && <$TriggerUnreadIndicator />} + {hasUnreadNotifications && ( + <$UnreadIndicator tw="relative right-[-0.2rem] top-[-0.325rem] place-self-center" /> + )} } slotFooter={ @@ -180,15 +182,6 @@ const $UnreadIndicator = styled.div` const $TriggerContainer = styled.div` ${layoutMixins.stack} `; - -const $TriggerUnreadIndicator = styled($UnreadIndicator)` - place-self: center; - - position: relative; - right: -0.2rem; - top: -0.325rem; -`; - const $FooterToolbar = styled(Toolbar)` display: flex; flex-wrap: wrap; diff --git a/src/views/notifications/BlockRewardNotification/index.tsx b/src/views/notifications/BlockRewardNotification/index.tsx index 6900fc7e0..f04d840de 100644 --- a/src/views/notifications/BlockRewardNotification/index.tsx +++ b/src/views/notifications/BlockRewardNotification/index.tsx @@ -30,7 +30,7 @@ export const BlockRewardNotification = ({ const { BLOCK_REWARD_AMOUNT, TOKEN_NAME } = data; return ( - <$Notification + } @@ -48,6 +48,7 @@ export const BlockRewardNotification = ({ ]} /> } + tw="bg-[url('/dots-background-2.svg')] bg-cover" /> ); }; @@ -58,12 +59,6 @@ const $Details = styled(Details)` color: var(--color-text-2); } `; - -const $Notification = styled(Notification)` - background-image: url('/dots-background-2.svg'); - background-size: cover; -`; - const $Output = styled(Output)` &:before { content: '+'; diff --git a/src/views/notifications/IncentiveSeasonDistributionNotification.tsx b/src/views/notifications/IncentiveSeasonDistributionNotification.tsx index bd4e49e5a..0a9610f7e 100644 --- a/src/views/notifications/IncentiveSeasonDistributionNotification.tsx +++ b/src/views/notifications/IncentiveSeasonDistributionNotification.tsx @@ -29,7 +29,7 @@ export const IncentiveSeasonDistributionNotification = ({ const { chainTokenLabel, points } = data; return ( - <$Notification + } @@ -51,6 +51,7 @@ export const IncentiveSeasonDistributionNotification = ({ ]} /> } + tw="bg-[url('/dots-background-2.svg')] bg-cover" /> ); }; @@ -61,12 +62,6 @@ const $Details = styled(Details)` color: var(--color-text-2); } `; - -const $Notification = styled(Notification)` - background-image: url('/dots-background-2.svg'); - background-size: cover; -`; - const $Output = styled(Output)` &:before { content: '+'; diff --git a/src/views/notifications/OrderCancelNotification.tsx b/src/views/notifications/OrderCancelNotification.tsx index 5efdf7d53..e4b7462df 100644 --- a/src/views/notifications/OrderCancelNotification.tsx +++ b/src/views/notifications/OrderCancelNotification.tsx @@ -43,7 +43,7 @@ export const OrderCancelNotification = ({ const cancelStatus = localCancel.submissionStatus; let orderStatusStringKey = STRING_KEYS.CANCELING; - let orderStatusIcon = <$LoadingSpinner />; + let orderStatusIcon = ; let customContent = null; // show Canceled if either canceled confirmation happens (node / indexer) @@ -56,12 +56,17 @@ export const OrderCancelNotification = ({ orderStatusStringKey = isPartiallyCanceled ? STRING_KEYS.PARTIALLY_FILLED : STRING_KEYS.CANCELED; - orderStatusIcon = <$OrderStatusIcon status={AbacusOrderStatus.Canceled.rawValue} />; + orderStatusIcon = ( + + ); } if (localCancel.errorParams) { orderStatusStringKey = STRING_KEYS.ERROR; - orderStatusIcon = <$WarningIcon iconName={IconName.Warning} />; + orderStatusIcon = ; customContent = ( {stringGetter({ @@ -79,10 +84,10 @@ export const OrderCancelNotification = ({ slotIcon={} slotTitle={orderTypeKey && stringGetter({ key: orderTypeKey })} slotTitleRight={ - <$OrderStatus> + <$Label tw="text-text-0 font-small-book"> {stringGetter({ key: orderStatusStringKey })} {orderStatusIcon} - + } slotCustomContent={customContent} /> @@ -92,22 +97,3 @@ const $Label = styled.span` ${layoutMixins.row} gap: 0.5ch; `; - -const $OrderStatus = styled($Label)` - color: var(--color-text-0); - font: var(--font-small-book); -`; - -const $LoadingSpinner = styled(LoadingSpinner)` - --spinner-width: 0.9375rem; - color: var(--color-accent); -`; - -const $WarningIcon = styled(Icon)` - color: var(--color-warning); -`; - -const $OrderStatusIcon = styled(OrderStatusIcon)` - width: 0.9375rem; - height: 0.9375rem; -`; diff --git a/src/views/notifications/OrderStatusNotification.tsx b/src/views/notifications/OrderStatusNotification.tsx index a073bf5f8..572269585 100644 --- a/src/views/notifications/OrderStatusNotification.tsx +++ b/src/views/notifications/OrderStatusNotification.tsx @@ -61,7 +61,7 @@ export const OrderStatusNotification = ({ const submissionStatus = localOrder.submissionStatus; let orderStatusStringKey = STRING_KEYS.SUBMITTING; - let orderStatusIcon = <$LoadingSpinner />; + let orderStatusIcon = ; let customContent = null; switch (submissionStatus) { @@ -73,7 +73,9 @@ export const OrderStatusNotification = ({ if (indexedOrderStatus === AbacusOrderStatus.Pending.rawValue) break; orderStatusStringKey = ORDER_STATUS_STRINGS[indexedOrderStatus]; - orderStatusIcon = <$OrderStatusIcon status={indexedOrderStatus} />; + orderStatusIcon = ( + + ); if (order && fill) { customContent = ( @@ -99,7 +101,7 @@ export const OrderStatusNotification = ({ case PlaceOrderStatuses.Submitted: if (localOrder.errorParams) { orderStatusStringKey = STRING_KEYS.ERROR; - orderStatusIcon = <$WarningIcon iconName={IconName.Warning} />; + orderStatusIcon = ; customContent = ( {stringGetter({ @@ -128,10 +130,10 @@ export const OrderStatusNotification = ({ slotIcon={} slotTitle={titleKey && stringGetter({ key: titleKey })} slotTitleRight={ - <$OrderStatus> + <$Label tw="text-text-0 font-small-book"> {stringGetter({ key: orderStatusStringKey })} {orderStatusIcon} - + } slotCustomContent={customContent} /> @@ -142,22 +144,3 @@ const $Label = styled.span` ${layoutMixins.row} gap: 0.5ch; `; - -const $OrderStatus = styled($Label)` - color: var(--color-text-0); - font: var(--font-small-book); -`; - -const $LoadingSpinner = styled(LoadingSpinner)` - --spinner-width: 0.9375rem; - color: var(--color-accent); -`; - -const $WarningIcon = styled(Icon)` - color: var(--color-warning); -`; - -const $OrderStatusIcon = styled(OrderStatusIcon)` - width: 0.9375rem; - height: 0.9375rem; -`; diff --git a/src/views/notifications/StakingLiveNotification.tsx b/src/views/notifications/StakingLiveNotification.tsx index 50d6fef9d..b4702db02 100644 --- a/src/views/notifications/StakingLiveNotification.tsx +++ b/src/views/notifications/StakingLiveNotification.tsx @@ -24,19 +24,24 @@ export const StakingLiveNotification = ({ isToast, notification }: NotificationP notification={notification} slotTitle={stringGetter({ key: NOTIFICATIONS_STRING_KEYS.IN_APP_STAKING_LIVE_TITLE })} slotCustomContent={ - <$Container> - <$LeftColumn> +
+
{stringGetter({ key: NOTIFICATIONS_STRING_KEYS.IN_APP_STAKING_LIVE_BODY })} - <$Button + +
+ {stringGetter({ +
} /> ); @@ -47,26 +52,3 @@ const $Notification = styled(Notification)` background: linear-gradient(to right, var(--color-layer-3) 33%, var(--color-positive-dark) 100%); `; - -const $Container = styled.div` - display: flex; - justify-content: space-between; -`; - -const $LeftColumn = styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 0.5rem; -`; - -const $Button = styled(Button)` - width: min-content; -`; - -const $Img = styled.img` - width: 5rem; - height: 5rem; - - align-self: center; -`; diff --git a/src/views/notifications/TradeNotification/index.tsx b/src/views/notifications/TradeNotification/index.tsx index 8e6d6a9bf..49f87e197 100644 --- a/src/views/notifications/TradeNotification/index.tsx +++ b/src/views/notifications/TradeNotification/index.tsx @@ -61,10 +61,10 @@ export const TradeNotification = ({ isToast, data, notification }: TradeNotifica slotIcon={} slotTitle={titleKey && stringGetter({ key: titleKey })} slotTitleRight={ - <$OrderStatus> + <$Label tw="text-text-0 font-small-book"> {stringGetter({ key: ORDER_STATUS_STRINGS[orderStatus] })} - <$OrderStatusIcon status={orderStatus} /> - + + } slotCustomContent={ {step.step === currentStep ? ( <$Icon> - <$Spinner /> + ) : step.step < currentStep ? ( <$Icon state="complete"> @@ -195,13 +195,6 @@ const $Icon = styled.div<{ state?: 'complete' | 'default' }>` `, }[state]} `; - -const $Spinner = styled(LoadingSpinner)` - --spinner-width: 1.25rem; - - color: var(--color-accent); -`; - const $Label = styled($row)<{ highlighted?: boolean }>` ${({ highlighted }) => highlighted diff --git a/src/views/notifications/TransferStatusNotification/index.tsx b/src/views/notifications/TransferStatusNotification/index.tsx index d7e9fc81a..f0d5e3c51 100644 --- a/src/views/notifications/TransferStatusNotification/index.tsx +++ b/src/views/notifications/TransferStatusNotification/index.tsx @@ -1,6 +1,7 @@ import { MouseEvent, useCallback, useState } from 'react'; import styled, { css } from 'styled-components'; +import tw from 'twin.macro'; import { AlertType } from '@/constants/alerts'; import { STRING_KEYS } from '@/constants/localization'; @@ -128,7 +129,7 @@ export const TransferStatusNotification = ({ <$BridgingStatus> {content} {!isToast && !isComplete && !hasError && ( - <$TransferStatusSteps status={status} type={type} /> + )} ) @@ -160,9 +161,9 @@ export const TransferStatusNotification = ({ side="bottom" slotReceipt={ - <$Receipt> +
- +
} > @@ -188,16 +189,7 @@ const $Status = styled.div<{ withMarginBottom?: boolean }>` `} `; -const $InlineOutput = styled(Output)` - display: inline-block; - - color: var(--color-text-1); -`; - -const $TransferStatusSteps = styled(TransferStatusSteps)` - padding: 0.5rem 0 0; -`; - +const $InlineOutput = tw(Output)`inline-block text-text-1 `; const $Trigger = styled.button<{ isOpen?: boolean }>` display: flex; align-items: center; @@ -224,7 +216,3 @@ const $Trigger = styled.button<{ isOpen?: boolean }>` } `} `; - -const $Receipt = styled.div` - padding: 0 1rem; -`; diff --git a/src/views/tables/FillsTable.tsx b/src/views/tables/FillsTable.tsx index 7f5afc555..38bed0fe5 100644 --- a/src/views/tables/FillsTable.tsx +++ b/src/views/tables/FillsTable.tsx @@ -91,7 +91,7 @@ const getFillsTableColumnDef = ({ ), renderCell: ({ resources, size, stepSizeDecimals, asset }) => ( - }> + }> {resources.typeStringKey ? stringGetter({ key: resources.typeStringKey }) : null} @@ -119,15 +119,15 @@ const getFillsTableColumnDef = ({ <$Side side={orderSide}> {resources.sideStringKey ? stringGetter({ key: resources.sideStringKey }) : null} - <$SecondaryColor>@ + @ <$InlineRow> - <$BaseColor> + {resources.liquidityStringKey ? stringGetter({ key: resources.liquidityStringKey }) : null} - + @@ -138,10 +138,11 @@ const getFillsTableColumnDef = ({ getCellValue: (row) => row.createdAtMilliseconds, label: stringGetter({ key: STRING_KEYS.TIME }), renderCell: ({ createdAtMilliseconds }) => ( - <$TimeOutput + ), }, @@ -158,7 +159,7 @@ const getFillsTableColumnDef = ({ getCellValue: (row) => row.marketId, label: stringGetter({ key: STRING_KEYS.ACTION }), renderCell: ({ asset, orderSide }) => ( - <$TableCell> + {orderSide && ( <$Side side={orderSide}> {stringGetter({ @@ -170,7 +171,7 @@ const getFillsTableColumnDef = ({ )} - + ), }, [FillsTableColumnKey.Liquidity]: { @@ -362,7 +363,7 @@ export const FillsTable = ({ )} slotEmpty={ <> - <$Icon iconName={IconName.History} /> +

{stringGetter({ key: STRING_KEYS.TRADES_EMPTY_STATE })}

} @@ -378,35 +379,9 @@ export const FillsTable = ({ const $Table = styled(Table)` ${tradeViewMixins.horizontalTable} ` as typeof Table; - -const $TableCell = styled(TableCell)` - gap: 0.25rem; -`; - const $InlineRow = styled.div` ${layoutMixins.inlineRow} `; - -const $Icon = styled(Icon)` - font-size: 3em; -`; - -const $AssetIcon = styled(AssetIcon)` - font-size: 2.25rem; -`; - -const $SecondaryColor = styled.span` - color: var(--color-text-0); -`; - -const $BaseColor = styled.span` - color: var(--color-text-1); -`; - -const $TimeOutput = styled(Output)` - color: var(--color-text-0); -`; - const $Side = styled.span<{ side: Nullable }>` ${({ side }) => side && diff --git a/src/views/tables/LiveTrades.tsx b/src/views/tables/LiveTrades.tsx index e772d83af..3d7689093 100644 --- a/src/views/tables/LiveTrades.tsx +++ b/src/views/tables/LiveTrades.tsx @@ -76,7 +76,11 @@ export const LiveTrades = ({ className, histogramSide = 'left' }: StyleProps) => getCellValue: (row: RowData) => row.createdAtMilliseconds, label: stringGetter({ key: STRING_KEYS.TIME }), renderCell: (row: RowData) => ( - <$TimeOutput type={OutputType.Time} value={row.createdAtMilliseconds} /> + ), }; return [ @@ -86,11 +90,12 @@ export const LiveTrades = ({ className, histogramSide = 'left' }: StyleProps) => getCellValue: (row: RowData) => row.size, label: stringGetter({ key: STRING_KEYS.SIDE }), renderCell: (row: RowData) => ( - <$SideOutput + ), }, @@ -100,7 +105,7 @@ export const LiveTrades = ({ className, histogramSide = 'left' }: StyleProps) => label: stringGetter({ key: STRING_KEYS.SIZE }), tag: id, renderCell: (row: RowData) => ( - <$SizeOutput + stepSize: stepSize ?? 10 ** (-1 * TOKEN_DECIMALS), stepSizeDecimals: stepSizeDecimals ?? TOKEN_DECIMALS, })} - histogramSide={histogramSide} + tw="tablet:(text-text-1) text-[color:var(--accent-color)]" /> ), }, @@ -158,23 +163,6 @@ export const LiveTrades = ({ className, histogramSide = 'left' }: StyleProps) => /> ); }; -const $TimeOutput = styled(OrderbookTradesOutput)` - color: var(--color-text-0); - font-feature-settings: var(--fontFeature-monoNumbers); -`; - -const $SideOutput = styled(Output)` - color: var(--accent-color); -`; - -const $SizeOutput = styled(Output)` - color: var(--accent-color); - - @media ${breakpoints.tablet} { - color: var(--color-text-1); - } -`; - const liveTradesTableType = getSimpleStyledOutputType(OrderbookTradesTable, {} as StyleProps); const $LiveTradesTable = styled(OrderbookTradesTable)` background: var(--color-layer-2); diff --git a/src/views/tables/MarketsCompactTable.tsx b/src/views/tables/MarketsCompactTable.tsx index 8cf96ee21..bdf0fdbf5 100644 --- a/src/views/tables/MarketsCompactTable.tsx +++ b/src/views/tables/MarketsCompactTable.tsx @@ -69,12 +69,13 @@ export const MarketsCompactTable = ({ tickSizeDecimals, }) => ( - <$TabletOutput + <$TabletPriceChange> {!priceChange24H ? ( @@ -105,7 +106,9 @@ export const MarketsCompactTable = ({ <$DetailsCell> {isNew && ( <$RecentlyListed> - <$NewTag>{stringGetter({ key: STRING_KEYS.NEW })} + + {stringGetter({ key: STRING_KEYS.NEW })} + )} @@ -120,10 +123,11 @@ export const MarketsCompactTable = ({ <$DetailsCell> <$RecentlyListed> - <$InterestOutput + @@ -251,12 +255,6 @@ const $Table = styled(Table)` } } ` as typeof Table; - -const $TabletOutput = styled(Output)` - font: var(--font-small-medium); - color: var(--color-text-1); -`; - const $TabletPriceChange = styled.div` ${layoutMixins.inlineRow} @@ -311,14 +309,3 @@ const $RecentlyListed = styled.div` justify-content: flex-end; } `; - -const $InterestOutput = styled(Output)` - color: var(--color-text-0); - font: var(--font-mini-medium); -`; - -const $NewTag = styled(Tag)` - background-color: var(--color-accent-faded); - color: var(--color-accent); - text-transform: uppercase; -`; diff --git a/src/views/tables/MarketsTable.tsx b/src/views/tables/MarketsTable.tsx index f21724742..28bb6d3a4 100644 --- a/src/views/tables/MarketsTable.tsx +++ b/src/views/tables/MarketsTable.tsx @@ -2,6 +2,7 @@ import { Key, useMemo, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; +import tw from 'twin.macro'; import { ButtonSize } from '@/constants/buttons'; import { STRING_KEYS } from '@/constants/localization'; @@ -78,7 +79,7 @@ export const MarketsTable = ({ className }: { className?: string }) => { fractionDigits={tickSizeDecimals} withBaseFont /> - <$TabletPriceChange> + <$InlineRow tw="font-small-book"> {!priceChange24H ? ( ) : ( @@ -94,7 +95,7 @@ export const MarketsTable = ({ className }: { className?: string }) => { /> )} - + ), }, @@ -127,7 +128,7 @@ export const MarketsTable = ({ className }: { className?: string }) => { columnKey: 'priceChange24HChart', label: stringGetter({ key: STRING_KEYS.LAST_24H }), renderCell: ({ line, priceChange24HPercent }) => ( - <$SparklineChartContainer> +
({ x: index + 1, @@ -137,7 +138,7 @@ export const MarketsTable = ({ className }: { className?: string }) => { yAccessor={(datum) => datum.y} positive={MustBigNumber(priceChange24HPercent).gt(0)} /> - +
), allowsSorting: false, }, @@ -311,23 +312,12 @@ const $Table = styled(Table)` } ` as typeof Table; -const $TabletOutput = styled(Output)` - font: var(--font-medium-book); - color: var(--color-text-2); -`; +const $TabletOutput = tw(Output)`font-medium-book text-text-2 `; const $InlineRow = styled.div` ${layoutMixins.inlineRow} `; - -const $TabletPriceChange = styled($InlineRow)` - font: var(--font-small-book); -`; - -const $NumberOutput = styled(Output)` - font: var(--font-base-medium); - color: var(--color-text-2); -`; +const $NumberOutput = tw(Output)`font-base-medium text-text-2 `; const $Output = styled(Output)<{ isNegative?: boolean; isPositive?: boolean }>` color: ${({ isNegative, isPositive }) => @@ -352,8 +342,3 @@ const $MarketNotFound = styled.div` font-weight: 500; } `; - -const $SparklineChartContainer = styled.div` - width: 3rem; - height: 2rem; -`; diff --git a/src/views/tables/OrdersTable.tsx b/src/views/tables/OrdersTable.tsx index cbb5326a6..d1987e14d 100644 --- a/src/views/tables/OrdersTable.tsx +++ b/src/views/tables/OrdersTable.tsx @@ -114,16 +114,17 @@ const getOrdersTableColumnDef = ({ renderCell: ({ status, resources }) => { return ( - <$WithTooltip + - + {resources.typeStringKey && stringGetter({ key: resources.typeStringKey })} ); @@ -243,10 +244,11 @@ const getOrdersTableColumnDef = ({ stacked slotLeft={ <> - <$TimeOutput + <$AssetIconWithStatus> <$AssetIcon symbol={asset?.id} /> @@ -291,7 +293,7 @@ const getOrdersTableColumnDef = ({ <$Side side={orderSide}> {resources.sideStringKey ? stringGetter({ key: resources.sideStringKey }) : null} - <$SecondaryColor>@ + @ @@ -404,7 +406,7 @@ export const OrdersTable = ({ )} slotEmpty={ <> - <$EmptyIcon iconName={IconName.OrderPending} /> +

{stringGetter({ key: STRING_KEYS.ORDERS_EMPTY_STATE })}

} @@ -438,15 +440,6 @@ const $AssetIcon = styled(AssetIcon)` font-size: 2.25rem; } `; - -const $TimeOutput = styled(Output)` - color: var(--color-text-0); -`; - -const $SecondaryColor = styled.span` - color: var(--color-text-0); -`; - const $Side = styled.span<{ side?: OrderSide | null }>` ${({ side }) => side && @@ -459,11 +452,6 @@ const $Side = styled.span<{ side?: OrderSide | null }>` `, }[side]}; `; - -const $EmptyIcon = styled(Icon)` - font-size: 3em; -`; - const $AssetIconWithStatus = styled.div` ${layoutMixins.stack} @@ -481,7 +469,3 @@ const $StatusDot = styled.div<{ color: string }>` background-color: ${({ color }) => color}; `; - -const $WithTooltip = styled(WithTooltip)` - --tooltip-backgroundColor: var(--color-layer-5); -`; diff --git a/src/views/tables/PositionsTable.tsx b/src/views/tables/PositionsTable.tsx index b6ce04181..42b37b624 100644 --- a/src/views/tables/PositionsTable.tsx +++ b/src/views/tables/PositionsTable.tsx @@ -115,7 +115,7 @@ const getPositionsTableColumnDef = ({ {resources.sideStringKey?.current && stringGetter({ key: resources.sideStringKey?.current })} - <$SecondaryColor>@ + @ <$HighlightOutput type={OutputType.Multiple} value={leverage?.current} @@ -514,7 +514,7 @@ export const PositionsTable = ({ })} slotEmpty={ <> - <$Icon iconName={IconName.Positions} /> +

{stringGetter({ key: STRING_KEYS.POSITIONS_EMPTY_STATE })}

} @@ -562,11 +562,6 @@ const $AssetIcon = styled(AssetIcon)` min-width: unset; font-size: 2.25rem; `; - -const $SecondaryColor = styled.span` - color: var(--color-text-0); -`; - const $OutputSigned = styled(Output)<{ sign: NumberSign }>` color: ${({ sign }) => ({ @@ -592,7 +587,3 @@ const $PositionSide = styled.span` color: var(--side-color); } `; - -const $Icon = styled(Icon)` - font-size: 3em; -`; diff --git a/src/views/tables/PositionsTable/PositionsTriggersCell.tsx b/src/views/tables/PositionsTable/PositionsTriggersCell.tsx index 00a8f8b10..26e4eede2 100644 --- a/src/views/tables/PositionsTable/PositionsTriggersCell.tsx +++ b/src/views/tables/PositionsTable/PositionsTriggersCell.tsx @@ -100,7 +100,7 @@ export const PositionsTriggersCell = ({ disabled={isDisabled} > {stringGetter({ key: STRING_KEYS.VIEW_ORDERS })} - <$ArrowIcon iconName={IconName.Arrow} /> + ); @@ -293,11 +293,6 @@ const $ActionButton = styled(Button)` --button-backgroundColor: transparent; --button-border: none; `; - -const $ArrowIcon = styled(Icon)` - stroke-width: 2; -`; - const $PartialFillIcon = styled.span` svg { display: block; diff --git a/src/views/tables/TradingRewardHistoryTable.tsx b/src/views/tables/TradingRewardHistoryTable.tsx index ffc955128..3a3ebbfcd 100644 --- a/src/views/tables/TradingRewardHistoryTable.tsx +++ b/src/views/tables/TradingRewardHistoryTable.tsx @@ -50,7 +50,7 @@ const getTradingRewardHistoryTableColumnDef = ({ label: stringGetter({ key: STRING_KEYS.EVENT }), renderCell: ({ startedAtInMilliseconds, endedAtInMilliseconds }) => ( - <$Rewarded>{stringGetter({ key: STRING_KEYS.REWARDED })} + {stringGetter({ key: STRING_KEYS.REWARDED })} <$TimePeriod> {stringGetter({ key: STRING_KEYS.FOR_TRADING, @@ -81,11 +81,12 @@ const getTradingRewardHistoryTableColumnDef = ({ getCellValue: (row) => row.amount, label: stringGetter({ key: STRING_KEYS.EARNED }), renderCell: ({ amount }) => ( - <$PositiveOutput + } + tw="gap-[0.5ch] [--output-sign-color:var(--color-positive)]" /> ), }, @@ -139,10 +140,10 @@ export const TradingRewardHistoryTable = ({ getRowKey={getRowKey} columns={columns} slotEmpty={ - <$Column> - <$EmptyIcon iconName={IconName.OrderPending} /> +
+ {stringGetter({ key: STRING_KEYS.TRADING_REWARD_TABLE_EMPTY_STATE })} - +
} selectionBehavior="replace" withOuterBorder={isNotTablet || rewardsData.length === 0} @@ -162,11 +163,6 @@ const $Table = styled(Table)` font: var(--font-small-book); } ` as typeof Table; - -const $Rewarded = styled.span` - color: var(--color-text-2); -`; - const $TimePeriod = styled.div` ${layoutMixins.inlineRow} @@ -180,19 +176,3 @@ const $TimePeriod = styled.div` font: var(--font-base-book); } `; - -const $Column = styled.div` - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; -`; - -const $EmptyIcon = styled(Icon)` - font-size: 3em; -`; - -const $PositiveOutput = styled(Output)` - --output-sign-color: var(--color-positive); - gap: 0.5ch; -`; diff --git a/src/views/tables/TransferHistoryTable.tsx b/src/views/tables/TransferHistoryTable.tsx index 02b629815..0557e4ad4 100644 --- a/src/views/tables/TransferHistoryTable.tsx +++ b/src/views/tables/TransferHistoryTable.tsx @@ -56,10 +56,11 @@ const getTransferHistoryTableColumnDef = ({ getCellValue: (row) => row.updatedAtMilliseconds, label: stringGetter({ key: STRING_KEYS.TIME }), renderCell: ({ updatedAtMilliseconds }) => ( - <$TimeOutput + ), }, @@ -102,9 +103,13 @@ const getTransferHistoryTableColumnDef = ({ label: stringGetter({ key: STRING_KEYS.TRANSACTION }), renderCell: ({ transactionHash }) => transactionHash ? ( - <$TxHash withIcon href={`${mintscanTxUrl?.replace('{tx_hash}', transactionHash)}`}> + {truncateAddress(transactionHash, '')} - + ) : ( '-' ), @@ -179,11 +184,3 @@ export const TransferHistoryTable = ({ const $Table = styled(Table)` ${tradeViewMixins.horizontalTable} ` as typeof Table; - -const $TimeOutput = styled(Output)` - color: var(--color-text-0); -`; - -const $TxHash = styled(Link)` - justify-content: flex-end; -`;