use bg colors from theme

apps/trading/components/navbar/index.tsx

@@ -2,7 +2,7 @@ import { useRouter } from 'next/router';
 import classNames from 'classnames';
 
 export const Navbar = () => {
-  const navClasses = classNames('border-black border-b');
+  const navClasses = classNames('border-neutral-200 border-b');
   return (
     <nav className={navClasses}>
       {[
@@ -23,7 +23,8 @@ interface NavLinkProps {
 const NavLink = ({ name, path }: NavLinkProps) => {
   const router = useRouter();
   const className = classNames('inline-block', 'p-8', {
-    'text-vega-pink': router.asPath === path,
+    // Handle direct math and child page matches
+    'text-vega-pink': router.asPath === path || router.asPath.startsWith(path),
   });
 
   return (

apps/trading/pages/markets/[marketId].page.tsx

@@ -66,7 +66,7 @@ interface TradeGridProps {
 
 const TradeGrid = ({ market }: TradeGridProps) => {
   return (
-    <div className="h-full max-h-full grid gap-[1px] bg-[#ddd] grid-cols-[1fr_325px_325px] grid-rows-[min-content_1fr_200px]">
+    <div className="h-full max-h-full grid gap-[1px] bg-neutral-200 grid-cols-[1fr_325px_325px] grid-rows-[min-content_1fr_200px]">
       <header className="col-start-1 col-end-2 row-start-1 row-end-1 bg-white p-8">
         <h1>Market: {market.name}</h1>
       </header>
@@ -134,14 +134,20 @@ const GridTabs = ({ children, group }: GridTabsProps) => {
   return (
     <div className="h-full grid grid-rows-[min-content_1fr]">
       {/* the tabs */}
-      <div className="flex gap-[2px] bg-[#ddd]" role="tablist">
+      <div className="flex gap-[2px] bg-neutral-200" role="tablist">
         {Children.map(children, (child) => {
           if (!isValidElement(child)) return null;
           const isActive = query[group] === child.props.name;
-          const buttonClass = classNames('py-4 px-12 capitalize', {
-            'text-vega-pink': isActive,
-            'bg-white': isActive,
-          });
+          const buttonClass = classNames(
+            'py-4',
+            'px-12',
+            'border-t border-neutral-200',
+            'capitalize',
+            {
+              'text-vega-pink': isActive,
+              'bg-white': isActive,
+            }
+          );
           return (
             <button
               className={buttonClass}
@@ -224,16 +230,28 @@ const TradePanels = ({ market }: TradePanelsProps) => {
           )}
         </AutoSizer>
       </div>
-      <div className="flex flex-nowrap gap-2 border-t overflow-x-auto">
-        {Object.keys(Views).map((key: View) => (
-          <button
-            onClick={() => setView(key)}
-            className="p-12 capitalize"
-            key={key}
-          >
-            {key}
-          </button>
-        ))}
+      <div className="flex flex-nowrap gap-2 bg-neutral-200 border-neutral-200 border-t overflow-x-auto">
+        {Object.keys(Views).map((key: View) => {
+          const className = classNames(
+            'p-8',
+            'border-t',
+            'border-neutral-200',
+            'capitalize',
+            {
+              'text-vega-pink': view === key,
+              'bg-white': view === key,
+            }
+          );
+          return (
+            <button
+              onClick={() => setView(key)}
+              className={className}
+              key={key}
+            >
+              {key}
+            </button>
+          );
+        })}
       </div>
     </div>
   );

libs/tailwindcss-config/src/theme.js

@@ -90,6 +90,7 @@ module.exports = {
     black: '#000',
     white: theme('colors.white'),
     danger: theme('colors.intent.background.danger'),
+    'neutral-200': theme('colors.neutral.200'),
   }),
   borderWidth: {
     DEFAULT: '1px',