Fixed token input symbol and address overlap

hemilabs · Dec 2, 2024 · 39cecb6 · 39cecb6
1 parent 9f3ebbd
commit 39cecb6
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/site/components/Input.js b/site/components/Input.js
@@ -3,7 +3,7 @@ import React from 'react'
 import SvgContainer from './svg/SvgContainer'
 
 const commonInputStyles =
-  'text-base px-4 py-3 rounded-xl bg-white placeholder-slate-400 border placeholder-capitalize'
+  'text-base bg-white placeholder-slate-400 placeholder-capitalize'
 
 export const InputTitle = ({ children }) => (
   <label className="text-md text-slate-500 mb-2.5 block">{children}</label>
@@ -28,9 +28,9 @@ const SuffixedInput = ({ suffix, ...props }) => (
 
 const Caption = ({ caption, captionColor }) =>
   caption && (
-    <div className="absolute flex items-center gap-1">
+    <div className="bg-slate-50 -mx-4 -my-3 flex items-center justify-center gap-1 rounded-r-xl border-l px-4">
       <CaptionIcon captionColor={captionColor} />
-      <p className={`pr-4 text-sm ${captionColor}`}>{caption}</p>
+      <p className={`text-center text-base ${captionColor}`}>{caption}</p>
     </div>
   )
 
@@ -56,7 +56,7 @@ const Input = ({
   captionColor,
   ...props
 }) => (
-  <div className={`mb-6 flex w-full items-center justify-end ${className}`}>
+  <div className={`mb-6 flex w-full rounded-xl border px-4 py-3 ${className}`}>
     {suffix ? (
       <SuffixedInput suffix={suffix} {...props} placeholder={title} />
     ) : (

diff --git a/site/hooks/useTokenInput.js b/site/hooks/useTokenInput.js
@@ -54,7 +54,7 @@ const useTokenInput = function (address, onChange = () => {}, allowAnyAddress) {
           .getInfo()
           .then(function (info) {
             onChange(info)
-            setTokenName(info.name)
+            setTokenName(info.symbol)
           })
           .catch(function () {
             if (allowAnyAddress) {