Dashboard: Migrate Published Contract page from chakra to tailwind, UI improvements (#7728)

<!--

## 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 improving the UI components and structure of the published contract pages in the dashboard. It enhances layouts, updates component props, and modifies styles for better user experience and consistency.

### Detailed summary
- Updated `version-selector` styles.
- Modified `PublishedContractBreadcrumbs` to accept `className` prop.
- Simplified `PublishedContractLayout` by returning only `props.children`.
- Refactored `DeployFormForUri` to remove `ChakraProviderSetup`.
- Enhanced `ExplorePage` layout and styles.
- Changed icons in `PublishedActions` and updated button structure.
- Improved `DeployContractInfo` layout and styles.
- Updated `MarkdownRenderer` styles for better spacing and alignment.
- Refactored `PublishedContract` to use `className` prop for styling.
- Added `PublishedContractBreadcrumbs` to multiple pages for better navigation.
- Improved `PublisherHeader` layout and styling.
- Removed unused imports and cleaned up code.

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

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **New Features**
  * Added breadcrumb navigation to published contract and deploy pages for improved navigation clarity.

* **Refactor**
  * Replaced Chakra UI components with Tailwind CSS for more consistent styling and layout across published contract pages.
  * Simplified and reorganized contract detail and publisher header layouts for better readability and usability.
  * Updated contract info display to use an enhanced image component with fallback support.

* **Style**
  * Adjusted spacing, borders, and typography for headings, lists, and paragraphs in Markdown rendering.
  * Refined button and icon styles for contract actions and links.
  * Improved overall page structure and container consistency.

* **Bug Fixes**
  * Enhanced fallback behavior for contract images when unavailable.

* **Chores**
  * Removed unused sharing utility and related "Share" button from contract actions.
  * Cleaned up unused Chakra UI imports and wrappers.

* **Documentation**
  * No user-facing documentation changes included.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/src/@/components/blocks/markdown-renderer.tsx

@@ -94,7 +94,7 @@ export const MarkdownRenderer: React.FC<{
             <h2
               className={cn(
                 commonHeadingClassName,
-                "mb-3 border-border border-b pb-2 text-xl md:text-2xl",
+                "mb-3 border-dashed border-b pb-2 text-xl md:text-2xl",
               )}
               {...cleanedProps(props)}
             />
@@ -105,7 +105,7 @@ export const MarkdownRenderer: React.FC<{
               {...cleanedProps(props)}
               className={cn(
                 commonHeadingClassName,
-                "mt-8 mb-3 border-border border-b pb-2 text-lg md:text-xl",
+                "mt-8 mb-3 border-dashed border-b pb-2 text-lg md:text-xl",
               )}
             />
           ),
@@ -147,7 +147,7 @@ export const MarkdownRenderer: React.FC<{
           li: ({ children: c, ...props }) => (
             <li
               className={cn(
-                "mb-1.5 text-muted-foreground leading-loose [&>p]:m-0",
+                "text-muted-foreground leading-relaxed [&>p]:m-0",
                 markdownProps.li?.className,
               )}
               {...cleanedProps(props)}
@@ -157,15 +157,15 @@ export const MarkdownRenderer: React.FC<{
           ),
           ol: (props) => (
             <ol
-              className="mb-4 list-outside list-decimal pl-5 [&_ol_li:first-of-type]:mt-1.5 [&_ul_li:first-of-type]:mt-1.5"
+              className="mb-4 list-outside list-decimal pl-4 space-y-2 [&>li]:first:mt-2"
               {...cleanedProps(props)}
             />
           ),
 
           p: (props) => (
             <p
               className={cn(
-                "mb-4 text-muted-foreground leading-loose",
+                "mb-3 text-muted-foreground leading-7",
                 markdownProps.p?.className,
               )}
               {...cleanedProps(props)}
@@ -201,7 +201,7 @@ export const MarkdownRenderer: React.FC<{
           ul: (props) => {
             return (
               <ul
-                className="mb-4 list-outside list-disc pl-5 [&_ol_li:first-of-type]:mt-1.5 [&_ul_li:first-of-type]:mt-1.5"
+                className="mb-4 list-outside list-disc pl-4 space-y-2 [&>li]:first:mt-2"
                 {...cleanedProps(props)}
               />
             );

apps/dashboard/src/@/components/contract-components/publisher/publisher-header.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
 import { type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
 import {
@@ -9,7 +10,6 @@ import {
   AccountName,
   AccountProvider,
 } from "thirdweb/react";
-import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useEns } from "@/hooks/contract-hooks";
 import { replaceDeployerAddress } from "@/lib/publisher-utils";
@@ -29,57 +29,63 @@ export const PublisherHeader: React.FC<PublisherHeaderProps> = ({
   });
 
   return (
-    <div className="flex w-full flex-col gap-4">
-      <h4 className="font-semibold text-lg tracking-tight">Published by</h4>
-
+    <div>
+      <h4 className="font-medium text-base mb-3">Published by</h4>
       <AccountProvider
         // passing zero address during loading time to prevent the component from crashing
         address={ensQuery.data?.address || ZERO_ADDRESS}
         client={client}
       >
-        <div className="relative flex items-center gap-3">
-          <AccountAvatar
-            className="size-10 rounded-full border border-border border-solid object-cover"
-            fallbackComponent={
-              <AccountBlobbie className="size-10 rounded-full" />
-            }
-            loadingComponent={<Skeleton className="size-10 rounded-full" />}
-          />
-
-          <Link
-            className="before:absolute before:inset-0 hover:underline"
-            href={replaceDeployerAddress(
-              `/${ensQuery.data?.ensName || wallet}`,
-            )}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <AccountName
-              className="font-medium"
+        <div className="flex items-center gap-3 relative">
+          <div className="translate-y-0.5">
+            <AccountAvatar
+              className="size-[34px] rounded-full border border-border border-solid object-cover"
               fallbackComponent={
-                // When social profile API support other TLDs as well - we can remove this condition
-                ensQuery.data?.ensName ? (
-                  <span> {ensQuery.data?.ensName} </span>
-                ) : (
-                  <AccountAddress
-                    formatFn={(addr) =>
-                      shortenIfAddress(replaceDeployerAddress(addr))
-                    }
-                  />
-                )
+                <AccountBlobbie className="size-[34px] rounded-full" />
+              }
+              loadingComponent={
+                <Skeleton className="size-[34px] rounded-full" />
               }
-              formatFn={(name) => replaceDeployerAddress(name)}
-              loadingComponent={<Skeleton className="h-8 w-40" />}
             />
-          </Link>
+          </div>
+
+          <div className="space-y-1">
+            <Link
+              className="hover:underline leading-none before:absolute before:inset-0"
+              href={replaceDeployerAddress(
+                `/${ensQuery.data?.ensName || wallet}`,
+              )}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <AccountName
+                className="text-base leading-none font-medium"
+                fallbackComponent={
+                  // When social profile API support other TLDs as well - we can remove this condition
+                  ensQuery.data?.ensName ? (
+                    <span className="text-base leading-none font-medium">
+                      {ensQuery.data?.ensName}
+                    </span>
+                  ) : (
+                    <AccountAddress
+                      formatFn={(addr) =>
+                        shortenIfAddress(replaceDeployerAddress(addr))
+                      }
+                    />
+                  )
+                }
+                formatFn={(name) => replaceDeployerAddress(name)}
+                loadingComponent={<Skeleton className="h-6 w-40" />}
+              />
+            </Link>
+
+            <span className="text-sm text-muted-foreground flex items-center gap-1.5 leading-none">
+              View all published contracts{" "}
+              <ExternalLinkIcon className="size-3 text-muted-foreground" />
+            </span>
+          </div>
         </div>
       </AccountProvider>
-
-      <Button asChild className="bg-card" variant="outline">
-        <Link href={replaceDeployerAddress(`/${wallet}`)}>
-          View all contracts
-        </Link>
-      </Button>
     </div>
   );
 };