Dashboard: Migrate contract/permissions page from chakra to tailwind, UI improvements (#7750)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `Permissions` component and related files by improving UI elements, restructuring code for clarity, and integrating better user feedback mechanisms such as alerts and toast notifications.

### Detailed summary
- Updated the `Permissions` component's return structure to include headings and descriptions.
- Refined the `alertVariants` in `alert.tsx` for better styling.
- Replaced `ButtonGroup` with a `div` for layout adjustments in the `Permissions` component.
- Enhanced error handling with toast notifications in `permissions-editor.tsx`.
- Improved form handling and cleaned up values before submission.
- Replaced `DelayedDisplay` with an `Alert` component in `permissions-editor.tsx`.
- Updated the `ContractPermission` component to utilize `Select` for role management instead of traditional dropdowns.
- Added conditional rendering for alerts based on role states in `ContractPermission`.
- Adjusted button styles and behavior for better user experience across components.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

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>
+  );
 }