Merge pull request #2190 from pyth-network/cprussin/reduce-ois-header-height

cprussin · web-flow · commit a65d6da2c966 · 2024-12-12T02:25:05.000Z
chore(staking): tighten up account summary bar
diff --git a/apps/staking/src/components/AccountSummary/index.tsx b/apps/staking/src/components/AccountSummary/index.tsx
@@ -76,14 +76,14 @@ export const AccountSummary = ({
       alt=""
       className="absolute -right-40 hidden h-full object-cover object-right [mask-image:linear-gradient(to_right,_transparent,_black_50%)] md:block"
     />
-    <div className="relative flex flex-col items-start justify-between gap-8 sm:px-6 sm:py-10 md:flex-row md:items-center md:gap-16 lg:px-12 lg:py-20">
+    <div className="relative flex flex-col items-start justify-between gap-8 sm:p-4 md:flex-row md:items-center md:gap-16 xl:px-8 xl:py-2">
       <div>
         <div className="mb-2 inline-block border border-neutral-600/50 bg-neutral-900 px-4 py-1 text-xs text-neutral-400 sm:mb-4">
           Total Balance
         </div>
         <div className="flex flex-row items-center gap-8">
           <span>
-            <Tokens className="text-4xl font-light sm:text-6xl">{total}</Tokens>
+            <Tokens className="text-4xl font-light">{total}</Tokens>
           </span>
           {lastSlash && (
             <p className="max-w-48 text-sm text-red-600">
@@ -402,20 +402,20 @@ const BalanceCategory = ({
 }: BalanceCategoryProps) => (
   <div
     className={clsx(
-      "flex w-full flex-col justify-between border border-neutral-600/50 bg-pythpurple-800/60 p-4 backdrop-blur sm:p-6 xl:w-80 2xl:w-96",
+      "flex w-full flex-col justify-between border border-neutral-600/50 bg-pythpurple-800/60 p-4 backdrop-blur sm:px-6 xl:w-80 2xl:w-96",
       className,
     )}
   >
     <div>
-      <div className="mb-4 inline-block border border-neutral-600/50 bg-neutral-900 px-4 py-1 text-xs text-neutral-400">
+      <div className="mb-2 inline-block border border-neutral-600/50 bg-neutral-900 px-4 py-1 text-xs text-neutral-400">
         {name}
       </div>
       <div>
         <Tokens className="text-xl font-light">{amount}</Tokens>
       </div>
-      <div className="mt-4 text-sm text-neutral-500">{description}</div>
+      <div className="mt-2 text-sm text-neutral-500">{description}</div>
     </div>
-    <div className="mt-4 flex flex-row items-center gap-4">
+    <div className="mt-2 flex flex-row items-center gap-4">
       {action}
       {warning && <div className="text-xs text-red-600">{warning}</div>}
     </div>
diff --git a/apps/staking/src/components/Dashboard/index.tsx b/apps/staking/src/components/Dashboard/index.tsx
@@ -139,7 +139,7 @@ export const Dashboard = ({
   return (
     <>
       <main
-        className={clsx("flex w-full flex-col gap-8 xl:px-4 xl:py-6", {
+        className={clsx("flex w-full flex-col gap-4 xl:px-4", {
           "sm:gap-0": !enableOis,
         })}
       >
@@ -168,7 +168,7 @@ export const Dashboard = ({
             className="group border-neutral-600/50 data-[empty]:my-[5dvh] data-[empty]:border data-[empty]:bg-white/10 data-[empty]:p-4 sm:p-4 data-[empty]:sm:my-0 data-[empty]:sm:border-0 data-[empty]:sm:bg-transparent data-[empty]:sm:p-0"
             {...(tab === TabIds.Empty && { "data-empty": true })}
           >
-            <h1 className="my-4 hidden text-center text-xl/tight font-light group-data-[empty]:mb-10 group-data-[empty]:block sm:mb-6 sm:text-3xl group-data-[empty]:sm:mb-6 lg:my-14 lg:text-5xl">
+            <h1 className="my-4 hidden text-center text-xl/tight font-light group-data-[empty]:mb-10 group-data-[empty]:block sm:mb-6 sm:text-3xl group-data-[empty]:sm:mb-6 lg:my-6 lg:text-5xl">
               Choose Your Journey
             </h1>
             <TabList className="sticky top-header-height z-10 flex flex-row items-stretch justify-center group-data-[empty]:mx-auto group-data-[empty]:max-w-7xl group-data-[empty]:flex-col group-data-[empty]:gap-8 group-data-[empty]:sm:flex-row group-data-[empty]:sm:gap-2">
diff --git a/apps/staking/src/components/Root/index.tsx b/apps/staking/src/components/Root/index.tsx
@@ -60,7 +60,7 @@ export const Root = ({ children }: Props) => (
     <body className="grid min-h-dvh grid-rows-[auto_auto_1fr_auto] text-pythpurple-100 [background:radial-gradient(20rem_50rem_at_50rem_10rem,_rgba(119,_49,_234,_0.20)_0%,_rgba(17,_15,_35,_0.00)_100rem),_#0A0814] selection:bg-pythpurple-600/60">
       <Header className="z-10" />
       <RestrictedRegionBanner />
-      <MaxWidth className="z-0 min-h-[calc(100dvh_-_var(--header-height))] py-8 sm:min-h-0">
+      <MaxWidth className="z-0 min-h-[calc(100dvh_-_var(--header-height))] py-4 sm:min-h-0">
         {children}
       </MaxWidth>
       <Footer className="z-10" />
