Dashboard: Migrate Published Contract page from chakra to tailwind, UI improvements

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