Fix style issues in Contract detail page

packages/nextjs/components/scaffold-eth/Contract/ContractInput.tsx

@@ -32,7 +32,8 @@ export const ContractInput = ({ setForm, form, stateObjectKey, paramType }: Cont
   const renderInput = () => {
     switch (paramType.type) {
       case "address":
-        return <AddressInput {...inputProps} />;
+        const addressInputProps = { ...inputProps, placeholder: "address or ENS" };
+        return <AddressInput {...addressInputProps} />;
       case "bytes32":
         return <Bytes32Input {...inputProps} />;
       case "bytes":
@@ -49,7 +50,7 @@ export const ContractInput = ({ setForm, form, stateObjectKey, paramType }: Cont
   };
 
   return (
-    <div className="flex flex-col gap-1 w-full pl-2">
+    <div className="flex flex-col gap-1 w-full">
       <div className="flex items-center">
         {paramType.name && <span className="text-xs font-medium mr-2">{paramType.name}</span>}
         <span className="block text-xs font-extralight">{paramType.type}</span>

packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx

@@ -31,21 +31,29 @@ export const ContractReadMethods = ({
     .sort((a, b) => (b.inheritedFrom ? b.inheritedFrom.localeCompare(a.inheritedFrom) : 1));
 
   if (!functionsToDisplay.length) {
-    return <span className="font-light text-gray-500">Please select read methods from the sidebar.</span>;
+    return (
+      <div className="py-5">
+        <span className="font-light text-gray-500 my-5">Please select read methods from the sidebar.</span>
+      </div>
+    );
   }
 
   return (
     <>
       {functionsToDisplay.map(({ fn, inheritedFrom }) => (
-        <div key={fn.name} className="relative mb-4">
+        <div key={fn.name} className="relative mb-4 pt-5">
           <ReadOnlyFunctionForm
             abi={deployedContractData.abi as Abi}
             contractAddress={deployedContractData.address}
             abiFunction={fn}
             inheritedFrom={inheritedFrom}
           />
-          <button onClick={() => removeMethod(fn.name)} className="absolute top-1 right-0 btn btn-ghost btn-xs">
-            <XMarkIcon className="h-4 w-4" />
+          <button
+            onClick={() => removeMethod(fn.name)}
+            className="absolute top-0 right-0 btn btn-ghost btn-xs mt-[21px]"
+            aria-label="Remove method"
+          >
+            <XMarkIcon className="h-5 w-5" />
           </button>
         </div>
       ))}

packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx

@@ -148,7 +148,7 @@ export const ContractUI = ({ className = "", initialContractData }: ContractUIPr
                       <p className="my-0 text-sm font-bold">Read</p>
                     </div>
                   </div>
-                  <div className="divide-y divide-base-300 p-5">
+                  <div className="divide-y divide-base-300 px-5">
                     <ContractReadMethods
                       deployedContractData={{ address: initialContractData.address, abi }}
                       removeMethod={removeMethod}
@@ -163,7 +163,7 @@ export const ContractUI = ({ className = "", initialContractData }: ContractUIPr
                       <p className="my-0 text-sm font-bold">Write</p>
                     </div>
                   </div>
-                  <div className="divide-y divide-base-300 p-5">
+                  <div className="divide-y divide-base-300 px-5">
                     <ContractWriteMethods
                       deployedContractData={{ address: initialContractData.address, abi }}
                       onChange={triggerRefreshDisplayVariables}

packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx

@@ -32,13 +32,17 @@ export const ContractWriteMethods = ({
     .sort((a, b) => (b.inheritedFrom ? b.inheritedFrom.localeCompare(a.inheritedFrom) : 1));
 
   if (!functionsToDisplay.length) {
-    return <span className="font-light text-gray-500">Please select write methods from the sidebar.</span>;
+    return (
+      <div className="py-5">
+        <span className="font-light text-gray-500">Please select write methods from the sidebar.</span>
+      </div>
+    );
   }
 
   return (
     <>
       {functionsToDisplay.map(({ fn, inheritedFrom }, idx) => (
-        <div key={`${fn.name}-${idx}`} className="relative mb-4">
+        <div key={`${fn.name}-${idx}`} className="relative mb-4 pt-5">
           <WriteOnlyFunctionForm
             abi={deployedContractData.abi as Abi}
             abiFunction={fn}
@@ -48,7 +52,7 @@ export const ContractWriteMethods = ({
           />
           <button
             onClick={() => removeMethod(fn.name)}
-            className="absolute top-0 right-0 p-1 rounded-full text-sm focus:outline-none text-gray-500 hover:text-gray-700"
+            className="absolute top-0 right-0 btn btn-ghost btn-xs mt-[21px]"
             aria-label="Remove method"
           >
             <XMarkIcon className="h-5 w-5" />

packages/nextjs/components/scaffold-eth/Contract/DisplayVariable.tsx

@@ -49,7 +49,7 @@ export const DisplayVariable = ({
     <div className="space-y-1 pb-2">
       <div className="flex items-center">
         <h3 className="font-medium text-sm mb-0 break-all">{abiFunction.name}</h3>
-        <button className="btn btn-ghost btn-xs" onClick={async () => await refetch()}>
+        <button className="btn btn-ghost btn-xs ml-2" onClick={async () => await refetch()}>
           {isFetching ? (
             <span className="loading loading-spinner loading-xs"></span>
           ) : (

packages/nextjs/components/scaffold-eth/Contract/MethodSelector.tsx

@@ -39,7 +39,7 @@ export const MethodSelector = ({
     <div className="overflow-auto h-[80vh]">
       <input id="sidebar" type="checkbox" className="drawer-toggle" />
       <label htmlFor="sidebar" className="cursor-pointer block sm:hidden">
-        <XMarkIcon className="h-5 w-5 mb-5" />
+        <XMarkIcon className="h-5 w-5 mb-5 hover:opacity-70" />
       </label>
       <div>
         <h3

packages/nextjs/components/scaffold-eth/Contract/ReadOnlyFunctionForm.tsx

@@ -67,10 +67,10 @@ export const ReadOnlyFunctionForm = ({
         <InheritanceTooltip inheritedFrom={inheritedFrom} />
       </p>
       {inputElements}
-      <div className="flex justify-end flex-wrap w-full">
+      <div className="flex justify-end w-full gap-5">
         <div className="flex-grow w-4/5">
           {result !== null && result !== undefined && (
-            <div className="bg-secondary rounded-3xl text-sm px-4 py-1.5 break-words">
+            <div className="bg-secondary rounded-xl text-sm px-4 py-1.5 break-words">
               <p className="font-bold m-0 mb-1">Result:</p>
               <pre className="whitespace-pre-wrap break-words">{displayTxResult(result)}</pre>
             </div>

packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx

@@ -94,7 +94,7 @@ export const WriteOnlyFunctionForm = ({
 
   return (
     <div className="py-5 space-y-3 first:pt-0 last:pb-1">
-      <div className={`flex gap-3 ${zeroInputs ? "flex-row justify-between items-center" : "flex-col"}`}>
+      <div className={`flex gap-3 ${zeroInputs ? "flex-row justify-between" : "flex-col"}`}>
         <p className="font-medium my-0 break-words">
           {abiFunction.name}
           <InheritanceTooltip inheritedFrom={inheritedFrom} />
@@ -116,7 +116,7 @@ export const WriteOnlyFunctionForm = ({
             />
           </div>
         ) : null}
-        <div className="flex justify-between gap-2">
+        <div className={`flex justify-between gap-2 ${zeroInputs ? "mt-8" : "mt-0"}`}>
           {!zeroInputs && (
             <div className="flex-grow basis-0">
               {displayedTxResult ? <TxReceipt txResult={displayedTxResult} /> : null}