feat: Style improvements for buttons and tooltips (#147)

Ensure proper tooltip rendering on mobile devices and tweak button hover styles
hyperlane-xyz · Dec 16, 2024 · 0363407 · 0363407
1 parent 1f9e154
commit 0363407
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 12 deletions.
diff --git a/src/components/nav/Footer.tsx b/src/components/nav/Footer.tsx
@@ -23,7 +23,7 @@ const footerLinks2 = [
 ];
 
 const footerLinks3 = [
-  { title: 'Twitter', url: links.twitter, external: true, icon: <TwitterIcon color="#fff" /> },
+  { title: 'X', url: links.twitter, external: true, icon: <TwitterIcon color="#fff" /> },
   { title: 'Discord', url: links.discord, external: true, icon: <DiscordIcon color="#fff" /> },
   { title: 'Github', url: links.github, external: true, icon: <GithubIcon color="#fff" /> },
 ];

diff --git a/src/components/search/MiniSearchBar.tsx b/src/components/search/MiniSearchBar.tsx
@@ -31,7 +31,7 @@ export function MiniSearchBar() {
             placeholder="Hash or address"
             className="h-8 w-32 rounded-full px-2.5 py-2 text-sm font-light transition-[width] duration-500 ease-in-out placeholder:text-gray-600 focus:w-64 focus:outline-none"
           />
-          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-pink-500">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-pink-500 duration-500 hover:bg-blue-500">
             <IconButton type="submit" title="Search">
               <SearchIcon width={14} height={14} color={Color.white} />
             </IconButton>

diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
@@ -18,7 +18,7 @@ export function SearchBar({ value, placeholder, onChangeValue, isFetching }: Pro
     const value = event?.target?.value || '';
     onChangeValue(value);
   };
-
+  
   return (
     <div className="flex w-full items-center rounded-full bg-white p-1 transition-all duration-500">
       <input
@@ -28,15 +28,29 @@ export function SearchBar({ value, placeholder, onChangeValue, isFetching }: Pro
         placeholder={placeholder}
         className="h-10 flex-1 rounded-full p-1 font-light placeholder:text-gray-600 focus:outline-none sm:h-12 sm:px-4 md:px-5"
       />
-      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500 sm:h-12 sm:w-12">
-        {isFetching && <SpinnerIcon color={Color.white} width={26} height={26} />}
-        {!isFetching && !value && <Image src={SearchIcon} width={20} height={20} alt="" />}
-        {!isFetching && value && (
-          <IconButton title="Clear search" onClick={() => onChange(null)}>
+
+      {isFetching && (
+        <div className={iconStyle}>
+          <SpinnerIcon color={Color.white} width={26} height={26} />
+        </div>
+      )}
+      {!isFetching && !value && (
+        <div className={iconStyle}>
+          <Image src={SearchIcon} width={20} height={20} alt="" />
+        </div>
+      )}
+      {!isFetching && value && (
+        <div className={`${iconStyle} bg-pink-600 duration-500 hover:bg-blue-500 sm:h-12 sm:w-12`}>
+          <IconButton
+            title="Clear search"
+            className="h-full w-full rounded-full"
+            onClick={() => onChange(null)}
+          >
             <XIcon width={16} height={16} color="white" />
           </IconButton>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   );
 }
+const iconStyle = 'flex h-10 w-10 items-center justify-center rounded-full bg-pink-600 sm:h-12 sm:w-12';
diff --git a/src/consts/links.ts b/src/consts/links.ts
@@ -4,7 +4,7 @@ export const links = {
   discord: 'https://discord.gg/VK9ZUy3aTV',
   github: 'https://github.com/hyperlane-xyz',
   jobs: 'https://jobs.lever.co/Hyperlane',
-  twitter: 'https://twitter.com/hyperlane',
+  twitter: 'https://x.com/hyperlane',
   blog: 'https://medium.com/hyperlane',
   tenderlySimDocs:
     'https://docs.tenderly.co/simulations-and-forks/how-to-simulate-a-transaction/using-simulation-ui',

diff --git a/src/features/messages/cards/ContentDetailsCard.tsx b/src/features/messages/cards/ContentDetailsCard.tsx
@@ -75,6 +75,7 @@ export function ContentDetailsCard({
           <Tooltip
             id="message-info"
             content="Immutable information about the message itself such as its contents."
+            data-tooltip-class-name="max-w-[calc(100%-10px)] sm:max-w-[526px]"
           />
         </div>
       </div>

diff --git a/src/features/messages/cards/GasDetailsCard.tsx b/src/features/messages/cards/GasDetailsCard.tsx
@@ -82,6 +82,7 @@ export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) {
           <Tooltip
             content="Amounts paid to the Interchain Gas Paymaster for message delivery."
             id="gas-info"
+            data-tooltip-class-name="max-w-[calc(100%-10px)] sm:max-w-[526px]"
           />
         </div>
       </div>

diff --git a/src/features/messages/cards/TransactionCard.tsx b/src/features/messages/cards/TransactionCard.tsx
@@ -182,7 +182,11 @@ function TransactionCard({
         </div>
         <div className="flex items-center pb-1">
           <h3 className="mr-2 text-md font-medium text-blue-500">{title}</h3>
-          <Tooltip id="transaction-info" content={helpText} />
+          <Tooltip
+            id="transaction-info"
+            content={helpText}
+            data-tooltip-class-name="max-w-[calc(100%-10px)] sm:max-w-[526px]"
+          />
         </div>
       </div>
       {children}