From da37ecf72d293b52f602d0ea8610ee667ee1e845 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= <bglownia@gmail.com>
Date: Wed, 9 Mar 2022 17:59:48 +0100
Subject: [PATCH] Improve market page and tabs look and feel

---
 apps/trading/pages/markets/grid-tabs.tsx  | 22 ++++++++++-----------
 apps/trading/pages/markets/trade-grid.tsx | 24 +++++++++++------------
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/apps/trading/pages/markets/grid-tabs.tsx b/apps/trading/pages/markets/grid-tabs.tsx
index 661cb6335..1a549c297 100644
--- a/apps/trading/pages/markets/grid-tabs.tsx
+++ b/apps/trading/pages/markets/grid-tabs.tsx
@@ -44,26 +44,26 @@ export const GridTabs = ({ children, group }: GridTabsProps) => {
       className="h-full grid grid-rows-[min-content_1fr]"
       onValueChange={(value) => setActiveTab(value)}
     >
-      <Tabs.List className="flex gap-[2px] bg-neutral-200" role="tablist">
+      <Tabs.List
+        className="flex flex-nowrap gap-4 overflow-x-auto my-4"
+        role="tablist"
+      >
         {Children.map(children, (child) => {
           if (!isValidElement(child)) return null;
           const isActive = child.props.name === activeTab;
-          const triggerClass = classNames(
-            'py-4',
-            'px-12',
-            'border-t border-neutral-200',
-            'capitalize',
-            {
-              'text-vega-pink': isActive,
-              'bg-white': isActive,
-            }
-          );
+          const triggerClass = classNames('py-4', 'px-12', 'capitalize', {
+            'text-black dark:text-vega-yellow': isActive,
+            'bg-white dark:bg-black': isActive,
+            'text-black dark:text-white': !isActive,
+            'bg-black-10 dark:bg-white-10': !isActive,
+          });
           return (
             <Tabs.Trigger value={child.props.name} className={triggerClass}>
               {child.props.name}
             </Tabs.Trigger>
           );
         })}
+        <div className="bg-black-10 dark:bg-white-10 grow"></div>
       </Tabs.List>
       <div className="h-full overflow-auto">
         {Children.map(children, (child) => {
diff --git a/apps/trading/pages/markets/trade-grid.tsx b/apps/trading/pages/markets/trade-grid.tsx
index aa793fce4..4afee7f22 100644
--- a/apps/trading/pages/markets/trade-grid.tsx
+++ b/apps/trading/pages/markets/trade-grid.tsx
@@ -18,7 +18,7 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
   );
   return (
     <div className={wrapperClasses}>
-      <header className="col-start-1 col-end-2 row-start-1 row-end-1 bg-white p-8">
+      <header className="col-start-1 col-end-2 row-start-1 row-end-1 p-8">
         <h1>Market: {market.name}</h1>
       </header>
       <TradeGridChild className="col-start-1 col-end-2">
@@ -93,7 +93,7 @@ export const TradePanels = ({ market }: TradePanelsProps) => {
 
   return (
     <div className="h-full grid grid-rows-[min-content_1fr_min-content]">
-      <header className="bg-white p-8">
+      <header className="p-8">
         <h1>Market: {market.name}</h1>
       </header>
       <div className="h-full">
@@ -103,18 +103,15 @@ export const TradePanels = ({ market }: TradePanelsProps) => {
           )}
         </AutoSizer>
       </div>
-      <div className="flex flex-nowrap gap-2 bg-neutral-200 border-neutral-200 border-t overflow-x-auto">
+      <div className="flex flex-nowrap gap-4 overflow-x-auto my-4">
         {Object.keys(TradingViews).map((key: TradingView) => {
-          const className = classNames(
-            'p-8',
-            'border-t',
-            'border-neutral-200',
-            'capitalize',
-            {
-              'text-vega-pink': view === key,
-              'bg-white': view === key,
-            }
-          );
+          const isActive = view === key;
+          const className = classNames('py-4', 'px-12', 'capitalize', {
+            'text-black dark:text-vega-yellow': isActive,
+            'bg-white dark:bg-black': isActive,
+            'text-black dark:text-white': !isActive,
+            'bg-black-10 dark:bg-white-10': !isActive,
+          });
           return (
             <button
               onClick={() => setView(key)}
@@ -125,6 +122,7 @@ export const TradePanels = ({ market }: TradePanelsProps) => {
             </button>
           );
         })}
+        <div className="bg-black-10 dark:bg-white-10 grow"></div>
       </div>
     </div>
   );