Skip to content

Commit 6169023

Browse files
wackerowwackerow
committed
patch: tooltip spacing, use   over x margins
Fixes alignment of tooltip popups, improves alignment consistency for inline flows
1 parent 589ae71 commit 6169023

File tree

5 files changed

+50
-44
lines changed

5 files changed

+50
-44
lines changed

‎app/[locale]/stablecoins/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -556,9 +556,9 @@ async function Page({ params }: { params: Promise<{ locale: Lang }> }) {
556556
</div>
557557

558558
<h3 id="stablecoin-markets" className="mb-8 mt-12">
559-
{t("page-stablecoins-top-coins")}
559+
{t("page-stablecoins-top-coins")}&nbsp;
560560
<Tooltip content={tooltipContent}>
561-
<Info className="ms-2 size-4" />
561+
<Info className="size-4" />
562562
</Tooltip>
563563
</h3>
564564

‎src/components/BigNumber/index.tsx

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -50,26 +50,29 @@ const BigNumber = async ({
5050
<div className="text-sm">
5151
{children}
5252
{sourceName && sourceUrl && (
53-
<Tooltip
54-
content={
55-
<>
56-
<p>
57-
{t("data-provided-by")}{" "}
58-
<Link href={sourceUrl}>{sourceName}</Link>
59-
</p>
60-
{lastUpdated && (
61-
<p className="mt-2">
62-
{t("last-updated")}: {lastUpdatedDisplay}
53+
<>
54+
&nbsp;
55+
<Tooltip
56+
content={
57+
<>
58+
<p>
59+
{t("data-provided-by")}{" "}
60+
<Link href={sourceUrl}>{sourceName}</Link>
6361
</p>
64-
)}
65-
</>
66-
}
67-
>
68-
<Info
69-
className="mb-0.5 ms-2 inline size-3.5 align-text-bottom"
70-
aria-label={t("data-provided-by")}
71-
/>
72-
</Tooltip>
62+
{lastUpdated && (
63+
<p className="mt-2">
64+
{t("last-updated")}: {lastUpdatedDisplay}
65+
</p>
66+
)}
67+
</>
68+
}
69+
>
70+
<Info
71+
className="mb-0.5 inline size-3.5 align-text-bottom"
72+
aria-label={t("data-provided-by")}
73+
/>
74+
</Tooltip>
75+
</>
7376
)}
7477
</div>
7578
</>

‎src/components/EthPriceCard.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,9 @@ const EthPriceCard = ({
117117
{...props}
118118
>
119119
<h4 className="m-0 flex items-center text-sm font-medium uppercase leading-xs tracking-wider">
120-
{t("eth-current-price")}
120+
{t("eth-current-price")}&nbsp;
121121
<Tooltip content={tooltipContent}>
122-
<Info className="ms-2 size-[0.875em] text-sm" />
122+
<Info className="size-[0.875em] text-sm" />
123123
</Tooltip>
124124
</h4>
125125

‎src/components/Layer2NetworksTable/NetworksSubComponent.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const NetworkSubComponent = ({ network }: NetworkSubComponentProps) => {
3838
<div className="flex-1">
3939
<div>
4040
<p className="text-xs font-bold text-body-medium">
41-
{t("page-layer-2-networks-age")}{" "}
41+
{t("page-layer-2-networks-age")}&nbsp;
4242
<Tooltip
4343
content={
4444
<div className="flex flex-col gap-2">
@@ -84,7 +84,7 @@ const NetworkSubComponent = ({ network }: NetworkSubComponentProps) => {
8484
<div className="flex-1">
8585
<div>
8686
<p className="text-xs font-bold text-body-medium">
87-
{t("page-layer-2-networks-wallet-support")}{" "}
87+
{t("page-layer-2-networks-wallet-support")}&nbsp;
8888
<Tooltip
8989
content={
9090
<div className="flex flex-col gap-2">
@@ -119,7 +119,7 @@ const NetworkSubComponent = ({ network }: NetworkSubComponentProps) => {
119119
<div className="flex-1">
120120
<div>
121121
<p className="text-xs font-bold text-body-medium">
122-
{t("page-layer-2-networks-active-address")}{" "}
122+
{t("page-layer-2-networks-active-address")}&nbsp;
123123
<Tooltip
124124
content={
125125
<div className="flex flex-col gap-2">
@@ -157,7 +157,7 @@ const NetworkSubComponent = ({ network }: NetworkSubComponentProps) => {
157157
<div className="flex-1">
158158
<div>
159159
<p className="text-xs font-bold text-body-medium">
160-
{t("page-layer-2-networks-fee-token")}{" "}
160+
{t("page-layer-2-networks-fee-token")}&nbsp;
161161
<Tooltip
162162
content={
163163
<div className="flex flex-col gap-2">
@@ -182,7 +182,7 @@ const NetworkSubComponent = ({ network }: NetworkSubComponentProps) => {
182182
<div className="flex-1 gap-2">
183183
<div>
184184
<p className="text-xs font-bold text-body-medium">
185-
{t("page-layer-2-networks-network-usage")}{" "}
185+
{t("page-layer-2-networks-network-usage")}&nbsp;
186186
<Tooltip
187187
content={
188188
<div className="flex flex-col gap-2">

‎src/components/RadialChart/index.tsx

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -107,23 +107,26 @@ const RadialChart = ({
107107
<div className="text-sm">
108108
{label}
109109
{sourceName && sourceUrl && (
110-
<Tooltip
111-
content={
112-
<>
113-
<p>
114-
{t("data-provided-by")}{" "}
115-
<Link href={sourceUrl}>{sourceName}</Link>
116-
</p>
117-
{lastUpdated && (
118-
<p className="mt-2">
119-
{t("last-updated")}: {lastUpdatedDisplay}
110+
<>
111+
&nbsp;
112+
<Tooltip
113+
content={
114+
<>
115+
<p>
116+
{t("data-provided-by")}{" "}
117+
<Link href={sourceUrl}>{sourceName}</Link>
120118
</p>
121-
)}
122-
</>
123-
}
124-
>
125-
<Info className="mb-0.5 ms-2 inline size-[0.875em] align-text-bottom" />
126-
</Tooltip>
119+
{lastUpdated && (
120+
<p className="mt-2">
121+
{t("last-updated")}: {lastUpdatedDisplay}
122+
</p>
123+
)}
124+
</>
125+
}
126+
>
127+
<Info className="mb-0.5 inline size-[0.875em] align-text-bottom" />
128+
</Tooltip>
129+
</>
127130
)}
128131
</div>
129132
</div>

0 commit comments

Comments
 (0)