Dashboard: Migrate contract/permissions page from chakra to tailwind, UI improvements

Author: MananTank

apps/dashboard/src/@/components/misc/delayed-display.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "bg-card relative w-full rounded-lg border border-border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "bg-card relative w-full rounded-xl border border-border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
   {
     defaultVariants: {
       variant: "default",
@@ -38,7 +38,7 @@ const AlertTitle = React.forwardRef<
   React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
   <h5
-    className={cn("font-medium leading-tight tracking-tight", className)}
+    className={cn("font-medium leading-tight", className)}
     ref={ref}
     {...props}
   />
@@ -51,7 +51,7 @@ const AlertDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     className={cn(
-      "mt-1.5 text-muted-foreground text-sm [&_p]:leading-relaxed",
+      "mt-1 text-muted-foreground text-sm [&_p]:leading-relaxed",
       className,
     )}
     ref={ref}

apps/dashboard/src/@/components/ui/alert.tsx

@@ -56,5 +56,15 @@ export function ContractPermissionsPage({
     );
   }
 
-  return <Permissions contract={contract} isLoggedIn={isLoggedIn} />;
+  return (
+    <div>
+      <h2 className="text-2xl font-semibold tracking-tight mb-0.5">
+        Permissions
+      </h2>
+      <p className="text-muted-foreground mb-6">
+        View and manage the permissions for this contract
+      </p>
+      <Permissions contract={contract} isLoggedIn={isLoggedIn} />
+    </div>
+  );
 }