UI tweaks

Author: MananTank

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/insight/components/InsightAnalytics.tsx

@@ -121,7 +121,7 @@ export async function InsightAnalytics(props: {
 
   if (!hasVolume) {
     return (
-      <div className="container flex max-w-7xl grow flex-col">
+      <div className="flex grow flex-col">
         <InsightFTUX clientId={props.projectClientId} />
       </div>
     );
@@ -134,22 +134,18 @@ export async function InsightAnalytics(props: {
       </div>
       <ResponsiveSuspense
         fallback={
-          <div className="flex flex-col gap-10 lg:gap-6">
+          <div className="flex flex-col gap-6">
             <div className="grid grid-cols-2 gap-4 lg:gap-6">
-              <Skeleton className="h-[120px] border rounded-xl" />
-              <Skeleton className="h-[120px] border rounded-xl" />
-            </div>
-            <Skeleton className="h-[350px] border rounded-xl" />
-            <div className="relative grid grid-cols-1 gap-6 rounded-xl border border-border bg-card p-4 lg:gap-12 xl:grid-cols-2 xl:p-6">
-              <Skeleton className="h-[350px] border rounded-xl" />
-              <Skeleton className="h-[350px] border rounded-xl" />
-              <div className="absolute top-6 bottom-6 left-[50%] hidden w-[1px] bg-border xl:block" />
+              <Skeleton className="h-[88px] border rounded-xl" />
+              <Skeleton className="h-[88px] border rounded-xl" />
             </div>
+            <Skeleton className="h-[480px] border rounded-xl" />
+            <Skeleton className="h-[376px] border rounded-xl" />
           </div>
         }
         searchParamsUsed={["from", "to", "interval"]}
       >
-        <div className="flex flex-col gap-10 lg:gap-6">
+        <div className="flex flex-col gap-6">
           <div className="grid grid-cols-2 gap-4 lg:gap-6">
             <StatCard
               icon={ActivityIcon}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/insight/layout.tsx

@@ -19,7 +19,7 @@ export default async function Layout(props: {
 
   return (
     <div className="flex grow flex-col">
-      <div className="pt-4 lg:pt-6">
+      <div className="py-8 border-b">
         <div className="container max-w-7xl">
           <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:text-3xl">
             Insight
@@ -36,8 +36,6 @@ export default async function Layout(props: {
             </UnderlineLink>
           </p>
         </div>
-
-        <div className="h-4" />
       </div>
 
       <div className="h-6" />

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/rpc/components/RpcAnalytics.tsx

@@ -69,18 +69,16 @@ export async function RPCAnalytics(props: {
       </div>
       <ResponsiveSuspense
         fallback={
-          <div className="flex flex-col gap-10 lg:gap-6">
-            <div className="flex flex-col gap-4 lg:gap-6">
-              <Skeleton className="h-20 border rounded-xl" />
-            </div>
-            <Skeleton className="h-[350px] border rounded-xl" />
-            <Skeleton className="h-[500px] border rounded-xl" />
+          <div className="flex flex-col gap-6">
+            <Skeleton className="h-[88px] border rounded-xl" />
+            <Skeleton className="h-[425px] border rounded-xl" />
+            <Skeleton className="h-[360px] border rounded-xl" />
           </div>
         }
         searchParamsUsed={["from", "to", "interval"]}
       >
-        <div className="flex flex-col gap-10 lg:gap-6">
-          <div className="flex flex-col gap-4 lg:gap-6">
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-6">
             <StatCard
               icon={ActivityIcon}
               isPending={false}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/rpc/layout.tsx

@@ -18,7 +18,7 @@ export default async function Layout(props: {
 
   return (
     <div className="flex grow flex-col">
-      <div className="pt-4 lg:pt-6">
+      <div className="py-8 border-b">
         <div className="container max-w-7xl">
           <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:text-3xl">
             RPC
@@ -35,8 +35,6 @@ export default async function Layout(props: {
             </UnderlineLink>
           </p>
         </div>
-
-        <div className="h-4" />
       </div>
 
       <div className="h-6" />