fix: Info icon pixel alignment

Author: wackerow

app/[locale]/what-is-ethereum/_components/what-is-ethereum.tsx

@@ -488,7 +488,7 @@ const WhatIsEthereumPage = ({
                           })}
                         >
                           <span>
-                            <Info className="mb-0.5 inline-block size-[0.875em] align-middle" />
+                            <Info className="-mb-0.5 size-[0.875em]" />
                           </span>
                         </Tooltip>
                       </NoWrapText>
@@ -511,7 +511,7 @@ const WhatIsEthereumPage = ({
                           })}
                         >
                           <span>
-                            <Info className="mb-0.5 inline-block size-[0.875em] align-middle" />
+                            <Info className="-mb-0.5 size-[0.875em]" />
                           </span>
                         </Tooltip>
                       </NoWrapText>
@@ -534,7 +534,7 @@ const WhatIsEthereumPage = ({
                           })}
                         >
                           <span>
-                            <Info className="mb-0.5 inline-block size-[0.875em] align-middle" />
+                            <Info className="-mb-0.5 size-[0.875em]" />
                           </span>
                         </Tooltip>
                       </NoWrapText>
@@ -559,7 +559,7 @@ const WhatIsEthereumPage = ({
                           })}
                         >
                           <span>
-                            <Info className="mb-0.5 inline-block size-[0.875em] align-middle" />
+                            <Info className="-mb-0.5 size-[0.875em]" />
                           </span>
                         </Tooltip>
                       </NoWrapText>
@@ -585,7 +585,7 @@ const WhatIsEthereumPage = ({
                           })}
                         >
                           <span>
-                            <Info className="mb-0.5 inline-block size-[0.875em] align-middle" />
+                            <Info className="-mb-0.5 size-[0.875em]" />
                           </span>
                         </Tooltip>
                       </NoWrapText>
@@ -611,7 +611,7 @@ const WhatIsEthereumPage = ({
                           })}
                         >
                           <span>
-                            <Info className="mb-0.5 inline-block size-[0.875em] align-middle" />
+                            <Info className="-mb-0.5 size-[0.875em]" />
                           </span>
                         </Tooltip>
                       </NoWrapText>

src/components/BannerGrid/BannerGrid.stories.tsx

@@ -127,7 +127,7 @@ export const BannerGridCell: Story = {
                   })}
                 >
                   <span>
-                    <Info className="inline-block align-middle" />
+                    <Info className="-mb-0.5 size-[0.875em]" />
                   </span>
                 </Tooltip>
               </span>
@@ -163,7 +163,7 @@ export const BannerGrid: Story = {
                       })}
                     >
                       <span>
-                        <Info className="inline-block align-middle" />
+                        <Info className="-mb-0.5 size-[0.875em]" />
                       </span>
                     </Tooltip>
                   </span>

src/components/Staking/StakingStatsBox.tsx

@@ -31,7 +31,7 @@ const Label = ({ children }: ChildOnlyProp) => (
 // BeaconchainTooltip component
 const BeaconchainTooltip = ({ children }: ChildOnlyProp) => (
   <Tooltip content={children}>
-    <Info className="active:primary focus:primary size-[1em] align-middle text-md hover:text-primary" />
+    <Info className="active:primary focus:primary size-[1em] text-md hover:text-primary" />
   </Tooltip>
 )