Fix tooltips style

src/components/block/BlockDetails.tsx

@@ -20,7 +20,6 @@ const columns = [
         <Tip
           dropProps={{ align: { left: "right" } }}
           content={<TipContent message={blockPropertyDescriptions[e.key]} />}
-          plain
         >
           <span>
             <CircleQuestion size="small" />

src/components/block/helpers.tsx

@@ -58,6 +58,7 @@ export const blockPropertyDisplayNames: Record<string, string> = {
 };
 
 export const blockPropertyDescriptions: Record<string, string> = {
+  shard: 'Shard Number',
   number:
     "Also known as Block Number. The block height, which indicates the length of the blockchain, increases after the addition of the new block.",
   hash: "The hash of the block header of the current block.",

src/components/metrics/index.tsx

@@ -311,7 +311,6 @@ function BlockLatency(params: { latency: number; latencyPerBlock: number[] }) {
               }
             />
           }
-          plain
         >
           <Text size="small" weight="bold">
             {params.latency.toFixed(2)}s

src/components/transaction/TransactionDetails.tsx

@@ -33,12 +33,13 @@ const getColumns = ({ type = "" }) => [
           content={
             <TipContent
               message={
-                transactionPropertyDescriptions[e.key + type] ||
+                <Text size={'small'}>
-                transactionPropertyDescriptions[e.key]
+                  {transactionPropertyDescriptions[e.key + type] ||
+                    transactionPropertyDescriptions[e.key]}
+                </Text>
               }
             />
           }
-          // plain
         >
           <span>
             <CircleQuestion size="small" />

src/components/ui/ONEValue.tsx

@@ -56,25 +56,25 @@ export const ONEValue = (props: ONEValueProps) => {
       </Text>
       {USDValue && +price > 0 && !isTodayTransaction && !hideTip && (
         <Tip
-          dropProps={{ align: { left: "right" }, margin: { left: "small" } }}
+          dropProps={{ align: { bottom: "top" }}}
           content={
             <TipContent
+              showArrow={true}
               message={
-                <span>
+                <Text size={'small'}>
                   {`Displaying value on ${dayjs(timestamp).format(
                     "YYYY-MM-DD"
-                  )}. Current value`}{" "}
+                  )}. Current value:`}{" "}
                   <b>
                     $
                     {formatNumber(v * +lastPrice, {
                       maximumFractionDigits: 2,
                     })}
                   </b>
-                </span>
+                </Text>
               }
             />
           }
-          plain
         >
           <Text size="small">(${USDValue})</Text>
         </Tip>

src/components/ui/Tooltip.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box } from 'grommet'
+import { Box, Text } from 'grommet'
 import styled from "styled-components";
 
 const ArrowDown = styled(Box)`
@@ -12,8 +12,12 @@ const ArrowDown = styled(Box)`
   border-top: 8px solid ${(props) => props.theme.global.colors.backgroundTip};
 `
 
-export const TipContent = (props: { message: string | JSX.Element }) => (
+export const TipContent = (props: { message: string | JSX.Element, showArrow?: boolean }) => {
-  <Box
+  let message = props.message
+  if (typeof message === 'string') {
+    message = <Text size={'small'}>{message}</Text>
+  }
+  return <Box
     direction="column"
     align="center"
     background="backgroundTip"
@@ -21,7 +25,9 @@ export const TipContent = (props: { message: string | JSX.Element }) => (
     round={{ size: 'xsmall' }}
     style={{ position: 'relative', color: 'white', width: 'fit-content' }}
   >
-    <Box>{props.message}</Box>
+    <Box>{message}</Box>
+    {props.showArrow &&
       <ArrowDown border={{ color: '#EFF8FF' }} />
+    }
   </Box>
-)
+}

src/pages/AddressPage/AddressDetails.tsx

@@ -262,15 +262,15 @@ const addressPropertyDisplayValues: Record<
         formatNumber
       />
       <Tip
-        dropProps={{ align: { left: "right" } }}
+        dropProps={{ align: { bottom: "top" }}}
         content={
           <TipContent
-            message={`last update block height ${formatNumber(
+            showArrow={true}
+            message={`Last update block height: ${formatNumber(
               +data.lastUpdateBlockNumber
             )}`}
           />
         }
-        plain
       >
         <span style={{ marginLeft: "5px" }}>
           <CircleQuestion size="small" />
@@ -283,15 +283,15 @@ const addressPropertyDisplayValues: Record<
       <Box direction={"row"}>
         <>{formatNumber(+value)}</>
         <Tip
-          dropProps={{ align: { left: "right" } }}
+          dropProps={{ align: { bottom: "top" }}}
           content={
             <TipContent
-              message={`last update block height ${formatNumber(
+              showArrow={true}
+              message={`Last update block height: ${formatNumber(
                 +data.lastUpdateBlockNumber
               )}`}
             />
           }
-          plain
         >
           <span style={{ marginLeft: "5px" }}>
             <CircleQuestion size="small" />
@@ -312,15 +312,15 @@ const addressPropertyDisplayValues: Record<
         formatNumber
       />
       <Tip
-        dropProps={{ align: { left: "right" } }}
+        dropProps={{ align: { bottom: "top" }}}
         content={
           <TipContent
-            message={`last update block height ${formatNumber(
+            showArrow={true}
+            message={`Last update block height: ${formatNumber(
               +data.lastUpdateBlockNumber
             )}`}
           />
         }
-        plain
       >
         <span style={{ marginLeft: "5px" }}>
           <CircleQuestion size="small" />

src/pages/AddressPage/TokenInfo.tsx

@@ -179,7 +179,6 @@ export function TokensInfo(props: { value: Token[] }) {
                     <Tip
                       dropProps={{ align: { left: "right" } }}
                       content={<TipContent message={"Outdated"} />}
-                      plain
                     >
                       <span>
                         <Alert size="small" />

src/pages/AddressPage/tabs/transactions/columns/transactions.tsx

@@ -74,6 +74,7 @@ export function getColumns(id: string): ColumnConfig<any>[] {
         }
 
         const tipContent = <TipContent
+            showArrow={true}
             message={<Text size={'small'} textAlign={'center'}>{signature}</Text>}
         />
 

src/pages/ERC1155List/ERC1155Table.tsx

@@ -204,12 +204,11 @@ function getColumns(props: any) {
             dropProps={{ align: { right: "left" } }}
             content={
               <TipContent
-                message={`last update block height ${formatNumber(
+                message={`Last update block height: ${formatNumber(
                   +data.lastUpdateBlockNumber
                 )}`}
               />
             }
-            plain
           >
             <span style={{ marginLeft: "5px" }}>
               <CircleQuestion size="small" />

src/pages/ERC20List/ERC20Table.tsx

@@ -180,12 +180,11 @@ function getColumns(props: any) {
               dropProps={{ align: { left: "right" } }}
               content={
                 <TipContent
-                  message={`last update block height ${formatNumber(
+                  message={`Last update block height: ${formatNumber(
                     +data.lastUpdateBlockNumber
                   )}`}
                 />
               }
-              plain
             >
               <span style={{ marginLeft: "5px" }}>
                 <CircleQuestion size="small" />
@@ -217,12 +216,11 @@ function getColumns(props: any) {
               dropProps={{ align: { right: "left" } }}
               content={
                 <TipContent
-                  message={`last update block height ${formatNumber(
+                  message={`Last update block height: ${formatNumber(
                     +data.lastUpdateBlockNumber
                   )}`}
                 />
               }
-              plain
             >
               <span style={{ marginLeft: "5px" }}>
                 <CircleQuestion size="small" />
@@ -250,12 +248,11 @@ function getColumns(props: any) {
             dropProps={{ align: { right: "left" } }}
             content={
               <TipContent
-                message={`last update block height ${formatNumber(
+                message={`Last update block height: ${formatNumber(
                   +data.lastUpdateBlockNumber
                 )}`}
               />
             }
-            plain
           >
             <span style={{ marginLeft: "5px" }}>
               <CircleQuestion size="small" />

src/pages/ERC721List/ERC721Table.tsx

@@ -191,12 +191,11 @@ function getColumns(props: any) {
             dropProps={{ align: { right: "left" } }}
             content={
               <TipContent
-                message={`last update block height ${formatNumber(
+                message={`Last update block height: ${formatNumber(
                   +data.lastUpdateBlockNumber
                 )}`}
               />
             }
-            plain
           >
             <span style={{ marginLeft: "5px" }}>
               <CircleQuestion size="small" />