chore(staking): tighten up account summary bar

This top bar was taking up a fair amount of space which made it hard for people
on smaller screens to realize they could scroll down.  This PR tightens things
up to hopefully avoid some of the support load from people not realizing that
they need to scroll down to interact with the programs

Author: cprussin

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>

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">

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" />