UI adjustments

Author: MananTank

apps/dashboard/src/app/(app)/account/contracts/DeployedContractsPageHeader.tsx

@@ -29,10 +29,10 @@ export function DeployedContractsPageHeader(props: {
 
       <div className="container flex max-w-7xl flex-col gap-3 pt-10 pb-5 lg:flex-row lg:items-center lg:justify-between">
         <div>
-          <h1 className="font-semibold text-2xl tracking-tight lg:text-3xl">
+          <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:text-3xl">
             Contracts
           </h1>
-          <p className="text-muted-foreground">
+          <p className="text-muted-foreground text-sm">
             Deploy and manage contracts for your project
           </p>
         </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/AccountAbstractionPage.tsx

@@ -37,7 +37,7 @@ export function AccountAbstractionLayout(props: {
                 rel="noopener noreferrer"
                 target="_blank"
               >
-                Learn more about Account Abstraction
+                Learn more
               </UnderlineLink>
             </p>
           </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/webhooks/page.tsx

@@ -3,6 +3,8 @@ import { loginRedirect } from "@app/login/loginRedirect";
 import { redirect } from "next/navigation";
 import { getProject } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
+
 import { ContractsWebhooksPageContent } from "../../webhooks/contract-webhooks/contract-webhooks-page";
 
 export default async function Page(props: {
@@ -32,6 +34,23 @@ export default async function Page(props: {
 
   return (
     <div className="container flex max-w-7xl grow flex-col">
+      <div>
+        <h2 className="mb-0.5 font-semibold text-xl tracking-tight">
+          Webhooks
+        </h2>
+        <p className="text-muted-foreground text-sm">
+          Create and manage webhooks to get notified about blockchain events,
+          transactions and more.{" "}
+          <UnderlineLink
+            href="https://portal.thirdweb.com/insight/webhooks"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Learn more
+          </UnderlineLink>
+        </p>
+      </div>
+      <div className="h-4" />
       <ContractsWebhooksPageContent authToken={authToken} project={project} />
     </div>
   );

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

@@ -23,8 +23,8 @@ export default async function Layout(props: {
       <header className="pt-10 pb-6">
         <div className="container max-w-7xl">
           <div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
-            <div className="flex flex-col gap-2">
-              <h1 className="flex items-center gap-2 font-semibold text-3xl tracking-tight">
+            <div>
+              <h1 className="mb-1 flex items-center gap-2 font-semibold text-3xl tracking-tight">
                 Transactions{" "}
                 <Badge
                   className="flex items-center gap-2 text-sm"

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-instances-table.tsx

@@ -130,7 +130,7 @@ function DedicatedEngineSubscriptionButton(props: { team: Team }) {
   const isMobile = useIsMobile();
 
   const trigger = (
-    <Button>
+    <Button size="sm">
       <DatabaseIcon className="mr-2 size-4" />
       Deploy Dedicated Engine
     </Button>
@@ -225,8 +225,8 @@ export function EngineInstancesTableUI(props: {
   projectSlug: string;
 }) {
   return (
-    <div className="flex grow flex-col gap-2">
-      <div className="mb-4 flex flex-row items-center justify-between text-center">
+    <div className="flex grow flex-col gap-4">
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
         <h2 className="font-semibold text-2xl tracking-tight">
           Engine Instances
         </h2>

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

@@ -33,7 +33,7 @@ function TransactionsLayout(props: {
         <div className="container flex max-w-7xl flex-col gap-4">
           <div className="flex flex-row items-center justify-between">
             <div className="flex flex-col">
-              <h1 className="mb-0.5 flex items-center gap-2 font-semibold text-3xl tracking-tight">
+              <h1 className="mb-1 flex items-center gap-2 font-semibold text-3xl tracking-tight">
                 Transactions{" "}
                 <Badge
                   className="mt-0.5 flex items-center gap-2 text-sm"
@@ -44,10 +44,9 @@ function TransactionsLayout(props: {
               </h1>
               <div className="flex items-center gap-2">
                 <Link
-                  className="max-w-full truncate py-1 text-muted-foreground" // TODO: change this
+                  className="max-w-full truncate py-1 text-muted-foreground text-sm hover:text-foreground"
                   href={`${NEXT_PUBLIC_ENGINE_CLOUD_URL}/reference`}
                   rel="noopener noreferrer"
-                  target="_blank"
                 >
                   {NEXT_PUBLIC_ENGINE_CLOUD_URL}
                 </Link>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/_components/header.tsx

@@ -3,7 +3,7 @@ import { UnderlineLink } from "@/components/ui/UnderlineLink";
 export async function InAppWalletsHeader() {
   return (
     <div className="">
-      <h1 className="mb-2 font-semibold text-2xl tracking-tighter lg:text-3xl">
+      <h1 className="mb-1 font-semibold text-2xl tracking-tighter lg:text-3xl">
         Wallets
       </h1>
       <p className="max-w-2xl text-muted-foreground text-sm leading-relaxed">

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

@@ -27,7 +27,7 @@ export default async function Layout(props: {
         <div className="container max-w-7xl">
           <InAppWalletsHeader />
         </div>
-        <div className="h-3" />
+        <div className="h-4" />
         <TabPathLinks
           links={[
             {