Consistent grid appearance

developer-preview/src/app/ContractInfo.tsx

@@ -1,28 +1,30 @@
-import { formatShortAddress } from "~/app/formatShortAddress";
 import { UI } from "~/ui/UI";
 import { type Deploymnent, type PreviewData } from "~/types/PreviewData";
+import { formatShortAddress } from "~/app/formatShortAddress";
 
 export const ContractInfo = ({ data }: { data: PreviewData }) => {
+  if (data.contract.deployments.length === 0) {
+    return <UI.Error>No deployments found</UI.Error>;
+  }
+
   return (
     <div>
-      <UI.Label>Contract</UI.Label>
-      <div>
-        {data.contract.name}
-        {data.contract.deployments.map(({ address }: Deploymnent) => (
-          <span key={address}>
-            {" "}
-            (
-            <UI.BlueLink
+      <UI.FauxInput>
+        <div className="flex items-center justify-between">
+          <UI.InputText>{data.contract.name}</UI.InputText>
+
+          {data.contract.deployments.map(({ address }: Deploymnent) => (
+            <UI.GreyLink
               href={`https://etherscan.io/address/${address}`}
+              key={address}
               title={address}
               target="_blank"
             >
               {formatShortAddress(address)}
-            </UI.BlueLink>
-            )
-          </span>
-        ))}
-      </div>
+            </UI.GreyLink>
+          ))}
+        </div>
+      </UI.FauxInput>
     </div>
   );
 };

developer-preview/src/app/PreviewTool.tsx

@@ -81,7 +81,7 @@ export default function PreviewTool({ jsonInRegistry }: Props) {
           <UI.Heading1>Open Clear Signing Format preview</UI.Heading1>
         </UI.Container>
 
-        <UI.Container className="grid grid-cols-3 grid-rows-2 gap-3">
+        <UI.Container className="grid grid-cols-3 gap-3">
           <SelectMetadataFile
             fileKey={fileKey}
             jsonInRegistry={jsonInRegistry}

developer-preview/src/ui/UI.tsx

@@ -9,16 +9,6 @@ import {
 } from "~/ui/select";
 
 export const UI = {
-  BlueLink: ({
-    children,
-    ...props
-  }: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "className"> & {
-    children: string;
-  }) => (
-    <a className="text-blue-500" {...props}>
-      {children}
-    </a>
-  ),
   Container: ({
     as = "div",
     children,
@@ -31,13 +21,29 @@ export const UI = {
     const El = as;
     return <El className={cn("p-4", className)}>{children}</El>;
   },
-  Label: ({ children }: { children: string }) => (
-    <div className="mb-2 text-[10px] leading-3 text-tool-neutral-70">
+  FauxInput: ({ children }: { children: ReactNode }) => (
+    <div className="border-tool-neutral-20 rounded-md border px-3 py-2 text-sm">
       {children}
     </div>
   ),
+  InputText: ({ children }: { children: string }) => (
+    <div className="font-medium">{children}</div>
+  ),
+  GreyLink: ({
+    children,
+    ...props
+  }: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "className"> & {
+    children: string;
+  }) => (
+    <a className="text-sm text-tool-neutral-70" {...props}>
+      {children}
+    </a>
+  ),
+  Label: ({ children }: { children: string }) => (
+    <div className="mb-2 text-sm text-tool-neutral-70">{children}</div>
+  ),
   Heading1: ({ children }: { children: string }) => (
-    <h1 className="text-sm font-medium">{children}</h1>
+    <h1 className="text-lg font-medium">{children}</h1>
   ),
   Error: ({ children }: { children: string }) => (
     <div className="inline-block bg-red-400 px-2 py-1">{children}</div>