Wrap chain button around icon

hyperlane-xyz · Sep 26, 2024 · 5141720 · 5141720
1 parent 3c75dc5
commit 5141720
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 26 deletions.
diff --git a/src/components/input/TextField.tsx b/src/components/input/TextField.tsx
@@ -26,4 +26,4 @@ export function TextInput({ onChange, classes, ...props }: InputProps) {
 }
 
 const defaultInputClasses =
-  'mt-1.5 px-2.5 py-2 text-sm rounded-lg border border-primary-300 focus:border-primary-500 disabled:bg-gray-150 outline-none transition-all duration-300';
+  'mt-1.5 px-2.5 py-2.5 text-sm rounded-lg border border-primary-300 focus:border-primary-500 disabled:bg-gray-150 outline-none transition-all duration-300';
diff --git a/src/features/chains/ChainSelectField.tsx b/src/features/chains/ChainSelectField.tsx
@@ -37,26 +37,26 @@ export function ChainSelectField({ name, label, chains, onChange, disabled }: Pr
   };
 
   return (
-    <div>
-      <div className="flex items-center justify-center gap-2.5">
-        <div className="max-w-[1.5rem] sm:max-w-fit">
-          <ChainLogo chainName={field.value} size={36} />
-        </div>
-        <div className="flex flex-col gap-1">
-          <label htmlFor={name} className="pl-2 text-xs text-gray-600">
-            {label}
-          </label>
-          <button
-            type="button"
-            name={field.name}
-            className={`${styles.base} ${disabled ? styles.disabled : styles.enabled}`}
-            onClick={onClick}
-          >
+    <div className="flex-[4]">
+      <button
+        type="button"
+        name={field.name}
+        className={`${styles.base} ${disabled ? styles.disabled : styles.enabled}`}
+        onClick={onClick}
+      >
+        <div className="flex items-center gap-3">
+          <div className="max-w-[1.4rem] sm:max-w-fit">
+            <ChainLogo chainName={field.value} size={32} />
+          </div>
+          <div className="flex flex-col gap-1 items-start">
+            <label htmlFor={name} className="text-xs text-gray-600">
+              {label}
+            </label>
             {getChainDisplayName(field.value, true)}
-            <Image src={ChevronIcon} width={12} height={8} alt="" />
-          </button>
+          </div>
         </div>
-      </div>
+        <Image src={ChevronIcon} width={12} height={8} alt="" />
+      </button>
       <ChainSelectListModal
         isOpen={isModalOpen}
         close={() => setIsModalOpen(false)}
@@ -68,7 +68,7 @@ export function ChainSelectField({ name, label, chains, onChange, disabled }: Pr
 }
 
 const styles = {
-  base: 'w-32 sm:w-36 px-3 py-1.5 flex items-center justify-between text-sm bg-white rounded-lg border border-primary-300 outline-none transition-colors duration-500',
-  enabled: 'hover:bg-gray-50 active:bg-gray-100 focus:border-primary-500',
+  base: 'px-2 py-1.5 w-full flex items-center justify-between text-sm bg-white rounded-lg border border-primary-300 outline-none transition-colors duration-500',
+  enabled: 'hover:bg-gray-100 active:scale-95 focus:border-primary-500',
   disabled: 'bg-gray-150 cursor-default',
 };
diff --git a/src/features/tokens/TokenSelectField.tsx b/src/features/tokens/TokenSelectField.tsx
@@ -105,7 +105,7 @@ function TokenButton({
 }
 
 const styles = {
-  base: 'mt-1.5 w-full px-2.5 py-2 flex items-center justify-between text-sm rounded-lg border border-primary-300 outline-none transition-colors duration-500',
+  base: 'mt-1.5 w-full px-2.5 py-2.5 flex items-center justify-between text-sm rounded-lg border border-primary-300 outline-none transition-colors duration-500',
   enabled: 'hover:bg-gray-50 active:bg-gray-100 focus:border-primary-500',
   disabled: 'bg-gray-100 cursor-default',
 };
diff --git a/src/features/transfer/TransferTokenForm.tsx b/src/features/transfer/TransferTokenForm.tsx
@@ -113,12 +113,12 @@ function ChainSelectSection({ isReview }: { isReview: boolean }) {
   const chains = useMemo(() => getWarpCore().getTokenChains(), []);
 
   return (
-    <div className="mt-4 flex items-center justify-between gap-2">
-      <ChainSelectField name="origin" label="From chain" chains={chains} disabled={isReview} />
-      <div className="flex flex-col items-center">
+    <div className="mt-4 flex items-center justify-between gap-4">
+      <ChainSelectField name="origin" label="From" chains={chains} disabled={isReview} />
+      <div className="flex flex-col items-center flex-1">
         <SwapChainsButton disabled={isReview} />
       </div>
-      <ChainSelectField name="destination" label="To chain" chains={chains} disabled={isReview} />
+      <ChainSelectField name="destination" label="To" chains={chains} disabled={isReview} />
     </div>
   );
 }