feat: BONK redesign polish 2

src/App.tsx

@@ -128,6 +128,9 @@ const Content = () => {
 
   const { dialogAreaRef } = useDialogArea() ?? {};
 
+  // Check if we're on the trade page
+  const isTradePage = matchPath(`${AppRoute.Trade}/*`, location.pathname) !== null;
+
   if (isSimpleUi) {
     const matchMarkets = matchPath(AppRoute.Markets, location.pathname);
     const backgroundColor =
@@ -191,7 +194,7 @@ const Content = () => {
   return (
     <>
       <GlobalStyle />
-      <$AppContainer>
+      <$AppContainer isTradePage={isTradePage}>
         <$Content
           isShowingHeader={isShowingHeader}
           isShowingFooter={isShowingFooter}
@@ -354,9 +357,16 @@ function shouldForwardProp(propName: string, target: WebTarget): boolean {
   return true;
 }
 
-const $AppContainer = styled.div`
+const $AppContainer = styled.div<{ isTradePage?: boolean }>`
   width: 100%;
-  max-width: 1600px;
+  ${({ isTradePage }) =>
+    isTradePage
+      ? css`
+          max-width: 1800px;
+        `
+      : css`
+          max-width: 1600px;
+        `}
   margin-left: auto;
   margin-right: auto;
 `;
@@ -417,15 +427,21 @@ const $Content = styled.div<{
   --stickyArea0-background: transparent;
   --stickyArea-background: transparent;
   --stickyArea0-topHeight: var(--page-currentHeaderHeight);
-  --stickyArea0-topGap: var(--border-width);
-  --stickyArea0-bottomGap: var(--border-width);
+  --stickyArea0-topGap: 0;
+  --stickyArea0-bottomGap: 0;
   --stickyArea0-bottomHeight: var(--page-currentFooterHeight);
 
   background: transparent;
 
   ${layoutMixins.withOuterAndInnerBorders}
   display: grid;
 
+  /* Remove borders from all grid children to prevent sticky borders */
+  > * {
+    --border-color: transparent;
+    box-shadow: none;
+  }
+
   ${({ showRestrictionWarning, isShowingHeader }) => css`
     grid-template:
       ${isShowingHeader ? css`'Header' calc(var(--page-currentHeaderHeight) + 4rem)` : ''}

src/components/Checkbox.tsx

@@ -44,8 +44,8 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   </div>
 );
 const $Root = styled(Root)`
-  --checkbox-backgroundColor: var(--color-layer-0);
-  --checkbox-borderColor: var(--color-accent-faded);
+  --checkbox-backgroundColor: var(--color-layer-2);
+  --checkbox-borderColor: var(--color-layer-7);
 
   min-width: 1.25rem;
   height: 1.25rem;
@@ -56,11 +56,13 @@ const $Root = styled(Root)`
 
   &[data-state='checked'] {
     --checkbox-backgroundColor: var(--color-accent);
+    --checkbox-borderColor: var(--color-accent);
   }
 
   &[data-disabled] {
     cursor: not-allowed;
     --checkbox-backgroundColor: var(--color-layer-1);
+    --checkbox-borderColor: var(--color-border-faded);
   }
 `;
 const $Label = styled.label<{ disabled?: boolean }>`

src/components/DropdownMenu.tsx

@@ -132,6 +132,7 @@ const $DropdownIcon = styled.span`
   font-size: 0.375em;
   transition: transform 0.3s var(--ease-out-expo);
   align-items: center;
+  color: var(--trigger-textColor, var(--color-text-2));
 
   ${$Trigger}[data-state='open'] & {
     transform: scaleY(-1);

src/components/GlobalBackground.tsx

@@ -18,13 +18,13 @@ const GlobalBackground: React.FC = () => {
   const g = parseInt(hex.slice(2, 4), 16);
   const b = parseInt(hex.slice(4, 6), 16);
 
-  const gradient = `linear-gradient(to bottom, rgba(${r}, ${g}, ${b}, 0), rgba(${r}, ${g}, ${b}, 0.5), rgba(${r}, ${g}, ${b}, 0))`;
+  const gradient = `linear-gradient(to bottom, rgba(${r}, ${g}, ${b}, 0.5), rgba(${r}, ${g}, ${b}, 0))`;
 
   return (
     <div
       className="pointer-events-none fixed left-0 right-0 z-0 h-[42rem] max-h-[60vh] w-full"
       style={{
-        top: '5rem',
+        top: '0',
         background: gradient,
       }}
     />

src/components/NavigationMenu.tsx

@@ -396,7 +396,7 @@ const $Group = styled.section`
 
   ${layoutMixins.column}
 
-  color: var(--color-text-0);
+  color: var(--color-text-2);
 `;
 
 const $GroupHeader = styled.header`
@@ -489,6 +489,7 @@ const $NavItem = styled(NavItem)<NavItemStyleProps>`
 
   --item-checked-textColor: var(--navigationMenu-item-checked-textColor);
   --item-highlighted-textColor: var(--navigationMenu-item-highlighted-textColor);
+  color: var(--color-text-2);
   ${layoutMixins.scrollSnapItem}
 
   min-height: var(--navigationMenu-item-height);
@@ -544,6 +545,7 @@ const $NavItem = styled(NavItem)<NavItemStyleProps>`
 const $Icon = styled(Icon)`
   font-size: 0.375em;
   transition: rotate 0.3s var(--ease-out-expo);
+  color: var(--color-text-2);
 
   ${$List}[data-orientation="menu"] & {
     rotate: -0.25turn;

src/constants/styles/base.ts

@@ -14,6 +14,8 @@ export enum ColorToken {
   LightGray9 = '#DBDBDB',
   LightGray10 = '#D5DADF',
   LightGray11 = '#D1D9E0',
+  LightGray12 = '#C8D0D8',
+  LightGray13 = '#BFC7CF',
 
   MediumGray0 = '#CACACE',
   MediumGray1 = '#C2CBD3',
@@ -38,6 +40,15 @@ export enum ColorToken {
   BONKPurple = '#1D0623',
   BONKPurple1 = '#17001C',
   BONKPurple2 = '#836EF9',
+  BONKPurple3 = '#22082A',
+  BONKPurple4 = '#270D31',
+  BONKPurple5 = '#2C1238',
+  BONKPurple6 = '#31173F',
+  BONKPurple7 = '#3A1F4A',
+  BONKPurple8 = '#4A2A5A',
+  BONKPurple9 = '#5A3A6A',
+  BONKPurple10 = '#2A0F35',
+  BONKPurple11 = '#351440',
 
   GrayBlue0 = '#464659',
   GrayBlue1 = '#38384D',

src/layout/Header/HeaderDesktop.tsx

@@ -217,11 +217,19 @@ const $Header = styled.header`
   height: var(--page-currentHeaderHeight);
   margin-top: 2rem;
   margin-bottom: 2rem;
-  margin-left: 1rem;
-  margin-right: 1rem;
+  width: 100%;
+  max-width: 1600px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
 
   grid-area: Header;
 
+  /* Override border from withOuterAndInnerBorders */
+  --border-color: transparent;
+  box-shadow: none;
+
   display: grid;
   align-items: stretch;
   grid-auto-flow: column;

src/pages/trade/MarketSelectorAndStats.tsx

@@ -64,6 +64,24 @@ const $Container = styled.div`
   justify-content: start;
   align-items: stretch;
   background-color: var(--color-layer-1) !important; // TODO: figure out why this is needed
-  border-radius: 0.75rem;
-  overflow: hidden; // quick/easy way to maintain the border radius
+
+  /* Completely override box-shadow border from withOuterAndInnerBorders */
+  --border-color: transparent !important;
+  box-shadow: none !important;
+
+  /* Apply rounded border using border property which respects border-radius */
+  border: var(--default-border-width, 1px) solid var(--color-border) !important;
+  border-radius: 0.75rem !important;
+  overflow: hidden; // Clip content and borders to rounded corners
+
+  /* Use isolation to create a new stacking context */
+  isolation: isolate;
+  position: relative;
+
+  /* Remove borders from all children to prevent hard edges */
+  > * {
+    --border-color: transparent !important;
+    box-shadow: none !important;
+    border: none !important;
+  }
 `;

src/pages/trade/Trade.tsx

@@ -95,9 +95,9 @@ const TradePage = () => {
       isHorizontalPanelOpen={isHorizontalPanelOpen}
       horizontalPanelHeightPx={horizontalPanelHeight}
     >
-      <header tw="[grid-area:Top]">
+      <$TopHeader>
         <MarketSelectorAndStats />
-      </header>
+      </$TopHeader>
 
       <$GridSection gridArea="Side" tw="grid-rows-[auto_minmax(0,1fr)]">
         <AccountInfo />
@@ -222,6 +222,18 @@ const $GridSection = styled.section<{ gridArea: string }>`
   gap: 0.5rem;
 `;
 
+const $TopHeader = styled.header`
+  grid-area: Top;
+
+  /* Remove box-shadow border from withOuterAndInnerBorders */
+  --border-color: transparent !important;
+  box-shadow: none !important;
+
+  /* Ensure rounded corners */
+  border-radius: 0.75rem;
+  overflow: hidden;
+`;
+
 const $CoverUpTradingView = styled.div`
   width: 100%;
   height: 100%;

src/styles/headerMixins.ts

@@ -3,29 +3,27 @@ import { css } from 'styled-components';
 export const headerMixins = {
   dropdownTrigger: css`
     --trigger-backgroundColor: transparent;
-    --trigger-textColor: var(--color-text-0);
+    --trigger-textColor: var(--color-text-2);
 
     --trigger-hover-backgroundColor: var(--color-layer-3);
     --trigger-hover-textColor: var(--color-text-2);
 
-    --trigger-open-backgroundColor: var(--color-layer-1);
+    --trigger-open-backgroundColor: transparent;
     --trigger-open-textColor: var(--color-text-2);
 
     &:hover:not(:disabled) {
-      --trigger-backgroundColor: var(--trigger-hover-backgroundColor);
       --trigger-textColor: var(--trigger-hover-textColor);
     }
   `,
 
   button: css`
     --button-backgroundColor: transparent;
-    --button-textColor: var(--color-text-0);
+    --button-textColor: var(--color-text-2);
 
     --button-hover-backgroundColor: var(--color-layer-4);
     --button-hover-textColor: var(--color-text-2);
 
     &:hover:not(:disabled) {
-      background-color: var(--button-hover-backgroundColor);
       color: var(--button-hover-textColor);
     }
   `,

src/styles/popoverMixins.ts

@@ -234,7 +234,6 @@ export const popoverMixins = {
       &[data-highlighted] // @radix-ui
       {
         filter: brightness(var(--hover-filter-base));
-        background-color: var(--item-highlighted-backgroundColor, var(--color-layer-2));
         color: var(--item-highlighted-textColor, var(--trigger-textColor, inherit)) !important;
         outline: none;
       }
@@ -243,10 +242,6 @@ export const popoverMixins = {
     &[data-state='checked'], // @radix-ui
     &[aria-current='page'] // <a>
     {
-      background-color: var(
-        --item-checked-backgroundColor,
-        var(--trigger-selected-color, var(--popover-backgroundColor, inherit))
-      );
       color: var(--item-checked-textColor, var(--trigger-textColor, inherit));
     }
   `,

src/styles/themes.ts

@@ -18,17 +18,17 @@ const DarkThemeBase: () => ThemeColorBase = () => ({
   baseLayer: ColorToken.BONKPurple,
   layer0: ColorToken.BONKPurple1,
   layer1: ColorToken.BONKPurple,
-  layer2: ColorToken.BONKPurple,
-  layer3: ColorToken.BONKPurple,
-  layer4: ColorToken.BONKPurple,
-  layer5: ColorToken.BONKPurple,
-  layer6: ColorToken.BONKPurple,
-  layer7: ColorToken.BONKPurple2,
-
-  borderDefault: 'transparent',
-  borderFaded: generateFadedColorVariant(ColorToken.DarkGray14, OpacityToken.Opacity50),
+  layer2: ColorToken.BONKPurple3,
+  layer3: ColorToken.BONKPurple10,
+  layer4: ColorToken.BONKPurple11,
+  layer5: ColorToken.BONKPurple6,
+  layer6: ColorToken.BONKPurple8,
+  layer7: ColorToken.BONKPurple9,
+
+  borderDefault: generateFadedColorVariant(ColorToken.BONKPurple9, OpacityToken.Opacity50),
+  borderFaded: generateFadedColorVariant(ColorToken.BONKPurple8, OpacityToken.Opacity50),
   borderDestructive: generateFadedColorVariant(ColorToken.Red2, OpacityToken.Opacity20),
-  borderButton: generateFadedColorVariant(ColorToken.White, OpacityToken.Opacity20), // maybe accent orange?
+  borderButton: generateFadedColorVariant(ColorToken.BONKPurple9, OpacityToken.Opacity50),
 
   textPrimary: ColorToken.White,
   textSecondary: ColorToken.MediumGray0,
@@ -70,7 +70,7 @@ const DarkThemeBase: () => ThemeColorBase = () => ({
   profileYellow: ColorToken.Yellow1,
   profileRed: ColorToken.Red2,
 
-  inputBackground: ColorToken.BONKPurple1,
+  inputBackground: ColorToken.BONKPurple7,
   popoverBackground: ColorToken.DarkGray8,
   toggleBackground: ColorToken.DarkGray6,
   tooltipBackground: ColorToken.DarkGray6,
@@ -94,17 +94,17 @@ const LightThemeBase: () => ThemeColorBase = () => ({
   baseLayer: '#FF5A0220',
   layer0: ColorToken.White,
   layer1: ColorToken.White,
-  layer2: ColorToken.White,
-  layer3: ColorToken.White,
-  layer4: ColorToken.White,
-  layer5: ColorToken.White,
-  layer6: ColorToken.White,
-  layer7: ColorToken.White,
-
-  borderDefault: 'transparent',
-  borderFaded: generateFadedColorVariant(ColorToken.LightGray1, OpacityToken.Opacity50),
+  layer2: ColorToken.LightGray1,
+  layer3: ColorToken.LightGray3,
+  layer4: ColorToken.LightGray4,
+  layer5: ColorToken.LightGray5,
+  layer6: ColorToken.LightGray12,
+  layer7: ColorToken.LightGray13,
+
+  borderDefault: generateFadedColorVariant(ColorToken.LightGray13, OpacityToken.Opacity50),
+  borderFaded: generateFadedColorVariant(ColorToken.LightGray12, OpacityToken.Opacity50),
   borderDestructive: generateFadedColorVariant(ColorToken.Red1, OpacityToken.Opacity20),
-  borderButton: generateFadedColorVariant(ColorToken.Black, OpacityToken.Opacity20),
+  borderButton: generateFadedColorVariant(ColorToken.LightGray13, OpacityToken.Opacity50),
 
   textPrimary: ColorToken.DarkGray15,
   textSecondary: ColorToken.DarkGray6,
@@ -146,7 +146,7 @@ const LightThemeBase: () => ThemeColorBase = () => ({
   profileYellow: ColorToken.Yellow1,
   profileRed: ColorToken.Red2,
 
-  inputBackground: ColorToken.LightGray3,
+  inputBackground: ColorToken.LightGray1,
   popoverBackground: ColorToken.LightGray9,
   toggleBackground: ColorToken.LightGray4,
   tooltipBackground: ColorToken.LightGray8,

src/views/MarketsDropdown.tsx

@@ -333,6 +333,7 @@ export const MarketsDropdown = memo(
         noBlur
         onOpenChange={setIsOpen}
         sideOffset={1}
+        align="start"
         slotTrigger={
           <>
             {triggerBackground}
@@ -412,10 +413,12 @@ const $Popover = styled(Popover)`
 
   width: var(--marketsDropdown-openWidth);
 
-  max-width: 100vw;
+  /* Constrain to app container max-width instead of viewport width */
+  /* Ensure popover respects the app container's max-width (1800px for trade pages) */
+  max-width: min(100vw, 1800px);
 
   box-shadow: 0 5px 15px 3px rgba(0, 0, 0, 0.2);
-  border-radius: 0;
+  border-radius: 0.75rem;
 
   &:focus-visible {
     outline: none;