Tighten up spacing

src/components/layout/Card.tsx

@@ -6,7 +6,7 @@ interface Props {
 
 export function Card({ classes, children }: PropsWithChildren<Props>) {
   return (
-    <div className={`p-4 bg-white shadow border border-blue-50 rounded overflow-auto ${classes}`}>
+    <div className={`p-3 bg-white shadow border border-blue-50 rounded overflow-auto ${classes}`}>
       {children}
     </div>
   );

src/features/chains/ChainSelectField.tsx

@@ -26,9 +26,9 @@ export function ChainSelectField({ name, label, onChange }: Props) {
 
   return (
     <div className="flex flex-col items-center">
-      <div className="flex flex-col items-center justify-center rounded-full bg-gray-100 h-[6.5rem] w-[6.5rem] p-1.5">
-        <div className="flex items-end h-12">
-          <ChainIcon chainId={field.value} size={34} />
+      <div className="flex flex-col items-center justify-center rounded-full bg-gray-100 h-[6.25rem] w-[6.25rem] p-1.5">
+        <div className="flex items-end h-11">
+          <ChainIcon chainId={field.value} size={32} />
         </div>
         <label htmlFor={name} className="mt-2.5 text-sm text-gray-500 uppercase">
           {label}

src/features/transfer/TransferTokenForm.tsx

@@ -56,7 +56,7 @@ export function TransferTokenForm() {
   };
 
   return (
-    <Card classes="w-[35rem] relative">
+    <Card classes="w-[33.5rem] relative">
       <div className="absolute left-0 right-0 -top-24 flex justify-center overflow-hidden z-10">
         <HyperlaneWideChevron direction="s" height="100%" width="100" />
       </div>
@@ -77,7 +77,7 @@ export function TransferTokenForm() {
         validateOnChange={false}
         validateOnBlur={false}
       >
-        <Form className="flex flex-col items-stretch w-full mt-3 space-y-5">
+        <Form className="flex flex-col items-stretch w-full mt-2 space-y-4">
           <div className="flex items-center justify-center space-x-10">
             <ChainSelectField name="sourceChainId" label="From" />
             <div className="flex flex-col items-center">
@@ -90,7 +90,7 @@ export function TransferTokenForm() {
             </div>
             <ChainSelectField name="destinationChainId" label="To" />
           </div>
-          <div className="flex justify-between space-x-5">
+          <div className="flex justify-between space-x-4">
             <div className="flex-1">
               <label
                 htmlFor="tokenAddress"

src/pages/index.tsx

@@ -21,7 +21,7 @@ function InfoCard() {
   const [show, setShow] = useState(true);
   if (!show) return null;
   return (
-    <div className="relative px-4 py-3 w-[35rem] bg-blue-500 shadow-lg rounded opacity-95">
+    <div className="relative px-3 py-3 w-[33.5rem] bg-blue-500 shadow-lg rounded opacity-95">
       <h2 className="text-white text-lg">Bridge Tokens Permissionlessly with Hyperlane!</h2>
       <div className="flex items-end justify-between">
         <p className="text-white mt-1.5 text-sm max-w-[70%]">