diff --git a/src/components/Separator.tsx b/src/components/Separator.tsx index caafbbf022..cb73f2861b 100644 --- a/src/components/Separator.tsx +++ b/src/components/Separator.tsx @@ -3,7 +3,7 @@ import { Fragment } from 'react'; import { Separator } from '@radix-ui/react-separator'; import styled, { css } from 'styled-components'; -const StyledSeparator = styled(Separator)<{ $fullHeight: boolean }>` +const StyledSeparator = styled(Separator)<{ $fullHeight: boolean; $transparent?: boolean }>` flex: 0 !important; z-index: -1; @@ -18,7 +18,8 @@ const StyledSeparator = styled(Separator)<{ $fullHeight: boolean }>` align-self: center; width: 0; margin: 0 !important; - border-right: solid var(--border-width, var(--default-border-width)) var(--color-border); + border-right: solid var(--border-width, var(--default-border-width)) + ${({ $transparent }) => ($transparent ? 'transparent' : 'var(--color-border)')}; ${({ $fullHeight }) => $fullHeight @@ -35,16 +36,19 @@ export const VerticalSeparator = ({ className, decorative = false, fullHeight = false, + transparent = false, }: { className?: string; decorative?: boolean; fullHeight?: boolean; + transparent?: boolean; }) => ( ); diff --git a/src/layout/Header/HeaderDesktop.tsx b/src/layout/Header/HeaderDesktop.tsx index b928640822..b24d07e894 100644 --- a/src/layout/Header/HeaderDesktop.tsx +++ b/src/layout/Header/HeaderDesktop.tsx @@ -135,16 +135,16 @@ export const HeaderDesktop = () => { - + <$NavBefore> <$LanguageSelector sideOffset={16}> - + - + <$NavigationScrollBar> <$NavigationMenu items={navItems} orientation="horizontal" dividerStyle="underline" /> diff --git a/src/pages/spot/SpotMarketsDropdown.tsx b/src/pages/spot/SpotMarketsDropdown.tsx index 9fdb2218b5..60f2f69a86 100644 --- a/src/pages/spot/SpotMarketsDropdown.tsx +++ b/src/pages/spot/SpotMarketsDropdown.tsx @@ -152,7 +152,7 @@ export const SpotMarketsDropdown = ({ } triggerType={TriggerType.MarketDropdown} > -
+
<$Toolbar> <$SearchInput placeholder="Search markets" @@ -226,10 +226,13 @@ const $Popover = styled(Popover)` display: flex; flex-direction: column; - height: calc( + /* Use max-height instead of height to allow the popover to be smaller if needed */ + /* Add buffer space (4rem) to ensure pagination controls and bottom rows are visible */ + max-height: calc( 100vh - var(--page-header-height) - var(--market-info-row-height) - var( --page-footer-height - ) - var(--restriction-warning-currentHeight) + ) - var(--restriction-warning-currentHeight) - + 4rem ); width: var(--spot-marketsDropdown-openWidth); @@ -249,7 +252,8 @@ const $Popover = styled(Popover)` const $ScrollArea = styled.div` overflow: scroll; position: relative; - height: 100%; + flex: 1; + min-height: 0; /* Allow flex item to shrink below content size */ `; const $Table = styled(Table)` diff --git a/src/pages/token/RewardsLeaderboardPanel.tsx b/src/pages/token/RewardsLeaderboardPanel.tsx index fd4a7265f7..d7a4f73fb6 100644 --- a/src/pages/token/RewardsLeaderboardPanel.tsx +++ b/src/pages/token/RewardsLeaderboardPanel.tsx @@ -64,7 +64,7 @@ export const RewardsLeaderboardPanel = () => { const onDownload = () => { if (!feeLeaderboard) return; - const csvRows = feeLeaderboard?.map((item) => ({ + const csvRows = feeLeaderboard.map((item) => ({ rank: item.rank, address: item.address, estimatedRewards: item.estimatedDydxRewards, diff --git a/src/views/MarketsDropdown.tsx b/src/views/MarketsDropdown.tsx index d435de2197..12bd840558 100644 --- a/src/views/MarketsDropdown.tsx +++ b/src/views/MarketsDropdown.tsx @@ -405,10 +405,13 @@ const $Popover = styled(Popover)` display: flex; flex-direction: column; - height: calc( + /* Use max-height instead of height to allow the popover to be smaller if needed */ + /* Add buffer space (4rem) to ensure pagination controls and bottom rows are visible */ + max-height: calc( 100vh - var(--page-header-height) - var(--market-info-row-height) - var( --page-footer-height - ) - var(--restriction-warning-currentHeight) + ) - var(--restriction-warning-currentHeight) - + 4rem ); width: var(--marketsDropdown-openWidth); @@ -476,7 +479,8 @@ const $TriggerFlag = styled.div` const $ScrollArea = styled.div` overflow: scroll; position: relative; - height: 100%; + flex: 1; + min-height: 0; /* Allow flex item to shrink below content size */ `; const $Table = styled(Table)` diff --git a/src/views/TradeSideTabs.tsx b/src/views/TradeSideTabs.tsx index 6298568ae6..479b4165bc 100644 --- a/src/views/TradeSideTabs.tsx +++ b/src/views/TradeSideTabs.tsx @@ -43,21 +43,21 @@ export const TradeSideTabs = ({ sharedContent, className }: ElementProps & Style return ( <$Container className={className}> - <$HeaderSection> + <$MarginModeSection> - <$TradeSideTabs - fullWidthTabs - dividerStyle="none" - activeTab={side} - value={side} - items={items} - onValueChange={(newSide: OrderSide) => { - dispatch(tradeFormActions.setSide(newSide)); - }} - disabled={!allowChangingOrderType} - sharedContent={sharedContent} - /> - + + <$TradeSideTabs + fullWidthTabs + dividerStyle="none" + activeTab={side} + value={side} + items={items} + onValueChange={(newSide: OrderSide) => { + dispatch(tradeFormActions.setSide(newSide)); + }} + disabled={!allowChangingOrderType} + sharedContent={sharedContent} + /> ); }; @@ -73,23 +73,21 @@ const $Container = styled.div` flex-direction: column; `; -const $HeaderSection = styled.div` - display: flex; - flex-direction: column; - gap: 0.5rem; - padding: 0.5rem; +const $MarginModeSection = styled.div` + flex-shrink: 0; + padding: 0.5rem 0.5rem 0 0.5rem; background-color: var(--color-layer-1); border-top-right-radius: 0.75rem; border-top-left-radius: 0.75rem; - flex: 1; - min-height: 0; `; const $TradeSideTabs = styled(Tabs)<{ activeTab: OrderSide }>` --tabs-height: 2.625rem; overflow: visible; - padding: 0; + padding: 0.5rem 0.5rem 0.5rem 0.5rem; gap: 0.5rem; + flex: 1; + min-height: 0; /* Base styles for all tabs */ --trigger-backgroundColor: #12121280; /* #121212 at 50% opacity */ diff --git a/src/views/charts/TradingView/BaseTvChart.tsx b/src/views/charts/TradingView/BaseTvChart.tsx index 01b265e9eb..91a7c9681a 100644 --- a/src/views/charts/TradingView/BaseTvChart.tsx +++ b/src/views/charts/TradingView/BaseTvChart.tsx @@ -81,6 +81,12 @@ const $PriceChart = styled.div<{ isChartReady?: boolean }>` height: 100%; + ${({ isChartReady }) => + !isChartReady && + css` + background-color: var(--color-layer-1); + `} + #tv-price-chart { ${({ isChartReady }) => !isChartReady && diff --git a/src/views/dialogs/SetMarketLeverageDialog.tsx b/src/views/dialogs/SetMarketLeverageDialog.tsx index 317afaac99..3423410489 100644 --- a/src/views/dialogs/SetMarketLeverageDialog.tsx +++ b/src/views/dialogs/SetMarketLeverageDialog.tsx @@ -326,10 +326,21 @@ const $LeverageSlider = styled(Slider)` `; const $SaveButton = styled(Button)` - --button-textColor: var(--color-white) !important; --button-padding: 0.5rem 1.5rem; + /* White text when enabled */ + --button-textColor: var(--color-white); + span { - color: var(--color-white) !important; + color: var(--color-white); + } + + /* Darker, visible text when disabled */ + &:disabled { + --button-textColor: var(--color-text-1) !important; + + span { + color: var(--color-text-1) !important; + } } `;