Page grid update (#206)

* Update page grid layout * Add borders * Review updates * Add missing border
penumbra-zone · Dec 12, 2024 · ff51f0b · ff51f0b
1 parent 3945960
commit ff51f0b
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 45 deletions.
diff --git a/src/pages/trade/ui/chart.tsx b/src/pages/trade/ui/chart.tsx
@@ -173,6 +173,17 @@ const ChartData = observer(({ candles }: { candles: OhlcData[] }) => {
     }
   }, [candles]);
 
+  // Handle window resize to re-fit content
+  useEffect(() => {
+    const handleResize = () => {
+      if (chartRef.current) {
+        chartRef.current.timeScale().fitContent();
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   return <div className='h-full w-full' ref={chartElRef} />;
 });
 

diff --git a/src/pages/trade/ui/form-tabs.tsx b/src/pages/trade/ui/form-tabs.tsx
@@ -16,7 +16,7 @@ export const FormTabs = () => {
   const [tab, setTab] = useState<FormTabsType>(FormTabsType.Market);
 
   return (
-    <div ref={parent} className='h-full flex flex-col'>
+    <div ref={parent} className='flex flex-col'>
       <div className='px-4 lg:pt-2 border-b border-b-other-solidStroke'>
         <Density compact>
           <Tabs

diff --git a/src/pages/trade/ui/page.tsx b/src/pages/trade/ui/page.tsx
@@ -8,49 +8,148 @@ import { TradesTabs } from './trades-tabs';
 import { HistoryTabs } from './history-tabs';
 import { FormTabs } from './form-tabs';
 
-export const TradePage = () => {
+const sharedStyle = 'w-full border-t border-t-other-solidStroke overflow-x-hidden';
+
+// extra large grid (>1600px)
+const XlLayout = () => {
+  return (
+    <div className={cn(sharedStyle, 'hidden xl:grid xl:grid-cols-[1fr,320px]')}>
+      <div className='flex flex-col'>
+        <div className='grid grid-cols-[1fr,1fr,320px]'>
+          <div className='col-span-2 grid grid-rows-[auto,1fr]'>
+            <div className='border-b border-b-other-solidStroke border-r border-r-other-solidStroke'>
+              <PairInfo />
+            </div>
+            <div className='border-r border-r-other-solidStroke'>
+              <Chart />
+            </div>
+          </div>
+          <RouteTabs />
+        </div>
+        <div className='border-t border-t-other-solidStroke'>
+          <HistoryTabs />
+        </div>
+      </div>
+      <div className='flex flex-col gap-4 border-l border-l-other-solidStroke'>
+        <FormTabs />
+        <div className='border-t border-t-other-solidStroke'>
+          <TradesTabs />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// large grid (>1200px)
+const LLayout = () => {
+  return (
+    <div className={cn(sharedStyle, 'hidden lg:grid xl:hidden lg:grid-cols-[1fr,320px]')}>
+      <div className='col-span-2 border-b border-b-other-solidStroke border-r border-r-other-solidStroke'>
+        <PairInfo />
+      </div>
+      <div className='flex flex-col gap-2'>
+        <div className='grid grid-cols-[1fr,1fr,320px]'>
+          <div className='col-span-2 border-r border-r-other-solidStroke'>
+            <Chart />
+          </div>
+          <RouteTabs />
+        </div>
+        <div className='border-t border-t-other-solidStroke'>
+          <HistoryTabs />
+        </div>
+      </div>
+      <div className='flex flex-col gap-4 border-l border-l-other-solidStroke'>
+        <FormTabs />
+        <div className='border-t border-t-other-solidStroke'>
+          <TradesTabs />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// desktop grid (>900px)
+const DesktopLayout = () => {
   return (
     <div
-      className={cn(
-        'grid w-full border-t border-t-other-solidStroke overflow-x-hidden',
-        // mobile grid
-        'grid-cols-[100%] grid-rows-[auto,auto,auto,auto,auto]',
-        // tablet grid (600px)
-        'tablet:grid-cols-[50%,50%] tablet:grid-rows-[auto,auto,auto,auto]',
-        // desktop grid (>900px)
-        'desktop:grid-cols-[1fr,1fr,300px] desktop:grid-rows-[auto,652px,auto,auto]',
-        // large grid (>1200px)
-        'lg:grid-cols-[1fr,320px,320px] lg:grid-rows-[auto,660px,auto]',
-        // extra large grid (>1600px)
-        'xl:grid-cols-[1fr,320px,320px] xl:grid-rows-[auto,660px,auto]',
-      )}
+      className={cn(sharedStyle, 'hidden desktop:grid lg:hidden desktop:grid-cols-[1fr,1fr,320px]')}
     >
-      <div className='row-start-1 tablet:col-span-2 desktop:col-span-3 xl:col-span-1 border-b border-b-other-solidStroke xl:border-r xl:border-r-other-solidStroke'>
+      <div className='col-span-3 border-b border-b-other-solidStroke border-r border-r-other-solidStroke'>
         <PairInfo />
       </div>
-
-      <div className='desktop:block desktop:row-start-2 desktop:col-span-2 lg:col-span-1 border-b border-b-other-solidStroke desktop:border-r desktop:border-r-other-solidStroke'>
-        <Chart />
+      <div className='flex flex-col gap-2 col-span-2'>
+        <div className='grid grid-cols-[1fr,1fr] grid-rows-[auto,1fr]'>
+          <div className='col-span-2 h-[650px] border-b border-b-other-solidStroke'>
+            <Chart />
+          </div>
+          <RouteTabs />
+          <div className='border-l border-l-other-solidStroke'>
+            <TradesTabs />
+          </div>
+        </div>
       </div>
-
-      <div className='row-start-3 tablet:col-start-2 desktop:row-start-2 desktop:col-start-3 desktop:row-span-2 lg:row-span-1 xl:row-span-2 border-b border-b-other-solidStroke desktop:border-l desktop:border-l-other-solidStroke'>
+      <div className='border-l border-l-other-solidStroke'>
         <FormTabs />
       </div>
-
-      <div className='row-start-4 tablet:row-start-3 lg:row-start-2 lg:col-start-2 xl:row-start-1 xl:row-span-2 border-b border-b-other-solidStroke tablet:border-r tablet:border-r-other-solidStroke lg:border-r-0'>
-        <RouteTabs />
+      <div className='col-span-3 border-t border-t-other-solidStroke'>
+        <HistoryTabs />
       </div>
+    </div>
+  );
+};
 
-      <div className='row-start-2 tablet:col-span-2 desktop:hidden border-b border-b-other-solidStroke'>
+// tablet grid (600px)
+const TabletLayout = () => {
+  return (
+    <div
+      className={cn(sharedStyle, 'hidden tablet:grid desktop:hidden tablet:grid-cols-[1fr,1fr]')}
+    >
+      <div className='col-span-2 border-b border-b-other-solidStroke'>
+        <PairInfo />
+      </div>
+      <div className='col-span-2 border-b border-b-other-solidStroke'>
         <TradesTabs withChart />
       </div>
-      <div className='hidden desktop:block desktop:row-start-3 desktop:col-start-2 lg:col-start-3 desktop:border-b desktop:border-b-other-solidStroke lg:border-l lg:border-l-other-solidStroke'>
-        <TradesTabs />
+      <RouteTabs />
+      <div className='border-l border-l-other-solidStroke'>
+        <FormTabs />
       </div>
-
-      <div className='row-start-5 tablet:row-start-4 tablet:col-span-2 desktop:col-span-3 lg:row-start-3 lg:col-start-1 lg:col-span-2 border-b border-b-other-solidStroke'>
+      <div className='col-span-2 border-t border-t-other-solidStroke'>
         <HistoryTabs />
       </div>
     </div>
   );
 };
+
+// mobile grid (<600px)
+const MobileLayout = () => {
+  return (
+    <div className={cn(sharedStyle, 'hidden mobile:grid tablet:hidden mobile:grid-cols-[1fr]')}>
+      <div className='border-b border-b-other-solidStroke'>
+        <PairInfo />
+      </div>
+      <div className='border-b border-b-other-solidStroke'>
+        <TradesTabs withChart />
+      </div>
+      <div className='border-b border-b-other-solidStroke'>
+        <FormTabs />
+      </div>
+      <div className='border-b border-b-other-solidStroke'>
+        <RouteTabs />
+      </div>
+      <HistoryTabs />
+    </div>
+  );
+};
+
+export const TradePage = () => {
+  return (
+    <>
+      <XlLayout />
+      <LLayout />
+      <DesktopLayout />
+      <TabletLayout />
+      <MobileLayout />
+    </>
+  );
+};
diff --git a/src/pages/trade/ui/route-book.tsx b/src/pages/trade/ui/route-book.tsx
@@ -9,7 +9,7 @@ import { Skeleton } from '@/shared/ui/skeleton';
 
 const SkeletonRow = (props: { isSpread: boolean }) =>
   props.isSpread ? (
-    <div className='border-y border-l-other-solidStroke'>
+    <div className='border-y border-y-text-muted'>
       <div className='flex items-center justify-center gap-2 px-3 py-3 text-xs'>
         <div className='w-[78px] h-[16px]'>
           <Skeleton />

diff --git a/src/pages/trade/ui/summary.tsx b/src/pages/trade/ui/summary.tsx
@@ -95,7 +95,7 @@ export const Summary = () => {
       </SummaryCard>
       <SummaryCard title='24h Volume' loading={isLoading}>
         {data && 'directVolume' in data ? (
-          <Density compact>
+          <Density slim>
             <ValueViewComponent valueView={data.directVolume} context='table' abbreviate />
           </Density>
         ) : (

diff --git a/src/widgets/header/ui/banner.tsx b/src/widgets/header/ui/banner.tsx
@@ -36,7 +36,7 @@ export const Banner = ({ type, title, content, className, ...props }: BannerProp
     )}
     {...props}
   >
-    <div className='m-auto max-w-prose p-2'>
+    <div className='m-auto p-3'>
       <p className={cn('text-base font-bold', titleColorMapping[type])}>{title}</p>
       <p className={cn('text-sm', contentColorMapping[type])}>{content}</p>
     </div>

diff --git a/src/widgets/header/ui/header.tsx b/src/widgets/header/ui/header.tsx
@@ -10,19 +10,26 @@ export const Header = () => {
   return (
     <>
       <AlphaDevelopmentBanner />
-      <header className='flex items-center justify-between p-4'>
-        <HeaderLogo />
-        <DesktopNav />
+      <header className='grid grid-cols-3 items-center p-4'>
+        <div className='flex items-center'>
+          <HeaderLogo />
+        </div>
 
-        <Density compact>
-          <div className='hidden gap-2 lg:flex'>
-            <StatusPopover />
-            <Connection />
-          </div>
-          <div className='block lg:hidden'>
-            <MobileNav />
-          </div>
-        </Density>
+        <div className='flex justify-center'>
+          <DesktopNav />
+        </div>
+
+        <div className='flex items-center justify-end gap-2'>
+          <Density compact>
+            <div className='hidden lg:flex items-center gap-2'>
+              <StatusPopover />
+              <Connection />
+            </div>
+            <div className='block lg:hidden'>
+              <MobileNav />
+            </div>
+          </Density>
+        </div>
       </header>
     </>
   );

diff --git a/src/widgets/header/ui/subaccount-selector.tsx b/src/widgets/header/ui/subaccount-selector.tsx
@@ -25,7 +25,7 @@ export const SubaccountSelector = observer(() => {
         <DropdownMenu.Trigger>
           <Button>
             {isLoading ? (
-              <div className='min-w-[170px] flex justify-center'>
+              <div className='min-w-[142px] flex justify-center'>
                 <SpinnerIcon className='animate-spin' />
               </div>
             ) : (