feat: BONK redesign polish 3 (#17)

Author: godzidcrypto

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;
 }) => (
   <StyledSeparator
     className={className}
     orientation="vertical"
     decorative={decorative}
     $fullHeight={fullHeight}
+    $transparent={transparent}
   />
 );
 

src/layout/Header/HeaderDesktop.tsx

@@ -135,16 +135,16 @@ export const HeaderDesktop = () => {
         <LogoShortIcon />
       </$LogoLink>
 
-      <VerticalSeparator />
+      <VerticalSeparator transparent />
 
       <$NavBefore>
         <$LanguageSelector sideOffset={16}>
           <Icon iconName={IconName.Translate} size="1.25em" />
         </$LanguageSelector>
-        <VerticalSeparator />
+        <VerticalSeparator transparent />
       </$NavBefore>
 
-      <VerticalSeparator />
+      <VerticalSeparator transparent />
 
       <$NavigationScrollBar>
         <$NavigationMenu items={navItems} orientation="horizontal" dividerStyle="underline" />

src/pages/spot/SpotMarketsDropdown.tsx

@@ -152,7 +152,7 @@ export const SpotMarketsDropdown = ({
       }
       triggerType={TriggerType.MarketDropdown}
     >
-      <div tw="flex h-full flex-col">
+      <div tw="flex min-h-0 flex-col">
         <$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)`

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,

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)`

src/views/TradeSideTabs.tsx

@@ -43,21 +43,21 @@ export const TradeSideTabs = ({ sharedContent, className }: ElementProps & Style
 
   return (
     <$Container className={className}>
-      <$HeaderSection>
+      <$MarginModeSection>
         <MarginModeSelector />
-        <$TradeSideTabs
-          fullWidthTabs
-          dividerStyle="none"
-          activeTab={side}
-          value={side}
-          items={items}
-          onValueChange={(newSide: OrderSide) => {
-            dispatch(tradeFormActions.setSide(newSide));
-          }}
-          disabled={!allowChangingOrderType}
-          sharedContent={sharedContent}
-        />
-      </$HeaderSection>
+      </$MarginModeSection>
+      <$TradeSideTabs
+        fullWidthTabs
+        dividerStyle="none"
+        activeTab={side}
+        value={side}
+        items={items}
+        onValueChange={(newSide: OrderSide) => {
+          dispatch(tradeFormActions.setSide(newSide));
+        }}
+        disabled={!allowChangingOrderType}
+        sharedContent={sharedContent}
+      />
     </$Container>
   );
 };
@@ -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 */

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 &&

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;
+    }
   }
 `;