Skip to content

Commit b16af8f

Browse files
edmoiseenkovedmoiseenkov
committed
feat: update colors + badge component
1 parent 45e51a8 commit b16af8f

File tree

20 files changed

+333
-79
lines changed

20 files changed

+333
-79
lines changed

‎block-explorer/app/addresses/[address]/components/menu.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,8 @@ export default function Menu({
4747
if (!isContract && item?.title === 'Contract') return null;
4848
return (
4949
<Link href={item.href} key={_}>
50-
<Badge
51-
variant={pathname === item.href ? 'default' : 'secondary'}
52-
className="h-[32px] !max-h-[32px] rounded-xl text-xs font-normal capitalize"
53-
>
50+
{/*TODO: update according to the design*/}
51+
<Badge size="md" type={pathname === item.href ? 'linear' : 'filled'}>
5452
<div className="flex items-center gap-1">
5553
<span>{item.title}</span>
5654
{item.hasCheckmark ? (

‎block-explorer/app/addresses/[address]/evm-transfers/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export default async function Page({ params, searchParams }: PageProps) {
6464
<InOutBadge address={address} from={tx.from} to={tx.to} />
6565
</TableCell>
6666
<TableCell>
67-
<Badge variant="outline">{tx.type}</Badge>
67+
<Badge type="linear">{tx.type}</Badge>
6868
</TableCell>
6969
<TableCell>
7070
<TimeAgoDate date={tx?.timestamp} />

‎block-explorer/app/addresses/[address]/layout.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -200,13 +200,7 @@ export default async function Layout({ children, params }: LayoutProps) {
200200
<CardDetail.Wrapper>
201201
<CardDetail.Title>Tags</CardDetail.Title>
202202
<CardDetail.Content>
203-
<div className="mt-2 flex gap-2">
204-
{tags?.map((tag, _) => (
205-
<Badge variant="default" key={_}>
206-
{tag}
207-
</Badge>
208-
))}
209-
</div>
203+
<div className="mt-2 flex gap-2">{tags?.map((tag, _) => <Badge key={_}>{tag}</Badge>)}</div>
210204
</CardDetail.Content>
211205
</CardDetail.Wrapper>
212206
) : null}

‎block-explorer/app/addresses/[address]/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -271,7 +271,7 @@ const BalancesReserved = ({ tx, address }) => {
271271
</TableCell>
272272
<TableCell className="max-w-[150px] truncate">
273273
<Tooltip text="Reserved">
274-
<Badge variant="warning">Reserved</Badge>
274+
<Badge color="orange">Reserved</Badge>
275275
</Tooltip>
276276
</TableCell>
277277
</TableRow>
@@ -333,7 +333,7 @@ const BalancesUnreserved = ({ tx, address }) => {
333333
</TableCell>
334334
<TableCell className="max-w-[150px] truncate">
335335
<Tooltip text="Unreserved">
336-
<Badge variant="success">Unreserved</Badge>
336+
<Badge color="green">Unreserved</Badge>
337337
</Tooltip>
338338
</TableCell>
339339
<TableCell className="max-w-[25px] text-muted-foreground">

‎block-explorer/app/blocks/[blocknumber]/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,11 @@ export default async function Page({ params }: PageProps) {
5858
<CardDetail.Content>
5959
{block.isFinalized ? (
6060
<div>
61-
<Badge variant="success">Finalized</Badge>
61+
<Badge color="green">Finalized</Badge>
6262
</div>
6363
) : (
6464
<div>
65-
<Badge variant="warning">Unfinalized</Badge>
65+
<Badge color="orange">Unfinalized</Badge>
6666
</div>
6767
)}
6868
</CardDetail.Content>

‎block-explorer/app/blocks/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,11 @@ export default async function Page({ searchParams }: PageProps) {
5656
<TableCell className="max-w-fit md:max-w-[120px] lg:max-w-[60px]">
5757
{block?.isFinalized ? (
5858
<div>
59-
<Badge variant="success">Finalized</Badge>
59+
<Badge color="green">Finalized</Badge>
6060
</div>
6161
) : (
6262
<div className="flex items-center">
63-
<Badge variant="warning">Unfinalized</Badge>
63+
<Badge color="orange">Unfinalized</Badge>
6464
</div>
6565
)}
6666
</TableCell>

‎block-explorer/app/ecosystem/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export default function Page() {
157157
<h3 className="shrink">{item?.title}</h3>
158158
<p className="grow text-xs text-muted-foreground">{item?.description}</p>
159159
<div>
160-
<Badge variant="outline">{item?.category}</Badge>
160+
<Badge type="linear">{item?.category}</Badge>
161161
</div>
162162
</div>
163163
</Link>

‎block-explorer/app/token/[address]/components/menu.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,8 @@ export default function Menu() {
1818
].map((item, _) => {
1919
return (
2020
<Link href={item.href} key={_}>
21-
<Badge
22-
variant={pathname === item.href ? 'default' : 'secondary'}
23-
className="h-[32px] !max-h-[32px] rounded-xl text-xs font-normal capitalize"
24-
>
21+
{/*TODO: update according to the design*/}
22+
<Badge size="md" type={pathname === item.href ? 'linear' : 'filled'}>
2523
<div className="flex items-center gap-1">
2624
<span>{item.title}</span>
2725
</div>

‎block-explorer/app/tokens/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export default async function Page({ searchParams }: PageProps) {
9595
</OnlyMainnet>
9696
</TableCell>
9797
<TableCell>
98-
<Badge variant="outline">{token?.type}</Badge>
98+
<Badge type="linear">{token?.type}</Badge>
9999
</TableCell>
100100
<TableCell>
101101
{token?.collectionId ? token?.collectionId : token?.assetId ? token?.assetId : '-'}

‎block-explorer/app/tx/[id]/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,7 @@ export default async function Page({ params }: PageProps) {
286286
<TokenDisplay token={XRP_TOKEN} hideCopyButton />
287287
<OnlyMainnet>
288288
{transaction?.xrpPriceData?.price ? (
289-
<Badge variant="outline">
289+
<Badge type="linear">
290290
{formatNumberDollars(Number(transaction.transactionFee) * transaction?.xrpPriceData?.price, 2)}
291291
</Badge>
292292
) : null}
@@ -302,7 +302,7 @@ export default async function Page({ params }: PageProps) {
302302
<span className="text-muted-foreground">Tags</span>
303303
<div className="mt-1 flex flex-wrap items-center gap-2">
304304
{transaction?.tags?.map((tag, _) => (
305-
<Badge variant="info" key={_}>
305+
<Badge color="blue" key={_}>
306306
{tag}
307307
</Badge>
308308
))}

‎block-explorer/components/bridge-transactions.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,7 @@ const ETHBridgeSubmitEvent = ({ tx }: { tx: IExtrinsic<'ethBridge'> }) => {
5555
return (
5656
<TableRow>
5757
<TableCell className="max-w-[100px]">
58-
{tx?.args?.type === 'inbox' ? (
59-
<Badge variant="success">Deposit</Badge>
60-
) : (
61-
<Badge variant="warning">Withdraw</Badge>
62-
)}
58+
{tx?.args?.type === 'inbox' ? <Badge color="green">Deposit</Badge> : <Badge color="orange">Withdraw</Badge>}
6359
</TableCell>
6460
<TableCell>
6561
<TimeAgoDate date={tx?.timestamp * 1000} />
@@ -108,7 +104,7 @@ const XRPDeposit = ({ tx }: { tx: IExtrinsic<'xrplBridge'> }) => {
108104
return (
109105
<TableRow>
110106
<TableCell className="max-w-[100px]">
111-
<Badge variant="success">Deposit</Badge>
107+
<Badge color="green">Deposit</Badge>
112108
</TableCell>
113109
<TableCell>
114110
<TimeAgoDate date={tx?.timestamp * 1000} />
@@ -134,7 +130,7 @@ const XRPWithdraw = ({ tx }: { tx: IExtrinsic<'xrplBridge'> }) => {
134130
return (
135131
<TableRow>
136132
<TableCell className="max-w-[100px]">
137-
<Badge variant="destructive">Withdraw</Badge>
133+
<Badge color="orange">Withdraw</Badge>
138134
</TableCell>
139135
<TableCell>
140136
<TimeAgoDate date={tx?.timestamp * 1000} />

‎block-explorer/components/extrinsic-status.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ export default function ExtrinsicStatus({
1515
<div>
1616
{extrinsic?.isSuccess === false ? (
1717
<div className="flex items-center gap-1">
18-
<Badge variant="destructive">Failed</Badge>
19-
{showErrorInfo ? <Badge variant="outline">Reason: {extrinsic?.errorInfo || 'Unknown'}</Badge> : null}
18+
<Badge color="orange">Failed</Badge>
19+
{showErrorInfo ? <Badge type="linear">Reason: {extrinsic?.errorInfo || 'Unknown'}</Badge> : null}
2020
</div>
2121
) : (
22-
<Badge variant="success">Success</Badge>
22+
<Badge color="green">Success</Badge>
2323
)}
2424
</div>
2525
);

‎block-explorer/components/homepage/latest-transactions.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,13 @@ export const TransactionCard = (props: TransactionCardProps) => {
4444

4545
const renderBadges = () => (
4646
<div className="flex flex-wrap items-center gap-2">
47-
{transaction?.toLookup?.isContract ? <Badge variant="info">Contract Call</Badge> : null}
47+
{transaction?.toLookup?.isContract ? <Badge color="blue">Contract Call</Badge> : null}
4848
{transaction?.tags?.map((tag, _) => (
49-
<Badge variant="info" key={_}>
49+
<Badge color="blue" key={_}>
5050
{tag}
5151
</Badge>
5252
))}
53-
{transaction.status === 'success' ? <Badge variant="success">Confirmed</Badge> : null}
53+
{transaction.status === 'success' ? <Badge color="green">Confirmed</Badge> : null}
5454
</div>
5555
);
5656

‎block-explorer/components/in-out-badge.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import { Badge } from './ui/badge';
22

33
export default function InOutBadge({ address, from, to }) {
44
if (from === address && to === address) {
5-
return <Badge variant="info">Self</Badge>;
5+
return <Badge color="blue">Self</Badge>;
66
}
77
if (from === address) {
8-
return <Badge variant="warning">Out</Badge>;
8+
return <Badge color="orange">Out</Badge>;
99
}
1010
if (to === address) {
11-
return <Badge variant="success">In</Badge>;
11+
return <Badge color="green">In</Badge>;
1212
}
1313
}

‎block-explorer/components/main-search.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,14 @@ export default function MainSearch() {
3232
};
3333

3434
useKeyDown('/', handleFocus);
35+
useKeyDown('Escape', () => inputRef.current?.blur());
3536

3637
return (
3738
<div className="relative">
3839
<RiSearchLine className="absolute left-4 top-3 -z-10 size-4 text-muted-foreground" />
3940
<Input
4041
ref={inputRef}
41-
className="px-10"
42+
className="px-10 focus:outline-0"
4243
placeholder="Search by address / txn hash / block..."
4344
value={value}
4445
onChange={handleChangeValue}

‎block-explorer/components/navigation.tsx

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,7 @@ import { Fragment, useState } from 'react';
44

55
import { Card, CardContent } from '@/components/ui/card';
66
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible.tsx';
7-
import {
8-
DropdownMenu,
9-
DropdownMenuContent,
10-
DropdownMenuItem,
11-
DropdownMenuTrigger,
12-
} from '@/components/ui/dropdown-menu.tsx';
7+
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card.tsx';
138
import { cn } from '@/lib/utils';
149
import { RiArrowDownSLine, RiCloseLargeLine, RiMenuLine } from '@remixicon/react';
1510
import Link from 'next/link';
@@ -84,21 +79,20 @@ export function Navigation() {
8479
{isLink ? (
8580
headerMenuLink
8681
) : (
87-
<DropdownMenu>
88-
<DropdownMenuTrigger asChild>{headerMenuLink}</DropdownMenuTrigger>
89-
<DropdownMenuContent className="flex flex-col gap-1 rounded-[12px] bg-popover p-2">
82+
<HoverCard openDelay={0}>
83+
<HoverCardTrigger asChild>{headerMenuLink}</HoverCardTrigger>
84+
<HoverCardContent className="flex w-fit flex-col gap-1 rounded-[12px] bg-popover p-2">
9085
{subitems?.map((subitem, i) => (
91-
<DropdownMenuItem key={i} asChild>
92-
<Link
93-
href={subitem.href}
94-
className="cursor-pointer rounded-[4px] px-3 py-2 text-[14px]/[20px] font-semibold"
95-
>
96-
{subitem.title}
97-
</Link>
98-
</DropdownMenuItem>
86+
<Link
87+
key={i}
88+
href={subitem.href}
89+
className="cursor-pointer rounded-[4px] px-3 py-2 text-[14px]/[20px] font-semibold hover:bg-[#F5F5F5] dark:hover:bg-[#1C1C1C]"
90+
>
91+
{subitem.title}
92+
</Link>
9993
))}
100-
</DropdownMenuContent>
101-
</DropdownMenu>
94+
</HoverCardContent>
95+
</HoverCard>
10296
)}
10397
</Fragment>
10498
);

‎block-explorer/components/transaction-status-badge.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@ import { Badge } from './ui/badge';
55
export default function TransactionStatusBadge({ status }: { status: 'reverted' | 'success' | 'pending' }) {
66
if (status === 'reverted') {
77
return (
8-
<Badge variant="destructive">
8+
<Badge color="orange">
99
<div className="flex items-center gap-1">
1010
<AlertCircle className="size-4" /> Reverted
1111
</div>
1212
</Badge>
1313
);
1414
} else if (status === 'success') {
1515
return (
16-
<Badge variant="success">
16+
<Badge color="green">
1717
<div className="flex items-center gap-1">
1818
<Check className="size-4" /> Success
1919
</div>
2020
</Badge>
2121
);
2222
} else if (!status) {
2323
return (
24-
<Badge variant="info">
24+
<Badge color="blue">
2525
{' '}
2626
<div className="flex items-center gap-1">
2727
<Clock className="size-4" /> Pending

‎block-explorer/components/ui/badge.tsx

Lines changed: 49 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,65 @@ import { cn } from '@/lib/utils';
44
import { type VariantProps, cva } from 'class-variance-authority';
55

66
const badgeVariants = cva(
7-
'inline-flex select-none items-center whitespace-nowrap rounded-[6px] border px-1.5 py-0.5 text-[.5625rem] font-semibold uppercase leading-[-.01688rem] transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
7+
'inline-flex select-none items-center whitespace-nowrap rounded-[6px] px-1.5 text-[9px]/[14px] font-bold uppercase transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
88
{
99
variants: {
10-
variant: {
11-
default: 'border-transparent bg-secondary text-secondary-foreground',
12-
secondary: 'border-transparent bg-white text-secondary-foreground dark:bg-[#090909]/50',
13-
destructive: 'border-transparent bg-destructive text-destructive-foreground',
14-
outline: 'text-foreground',
15-
info: 'border-transparent bg-blue-200 text-blue-800',
16-
success: 'border-transparent bg-green-200 text-green-800',
17-
warning: 'border-transparent bg-orange-200 text-orange-800',
10+
size: {
11+
sm: 'h-5 px-[6px] py-[3px]',
12+
md: 'h-6 px-[8px] py-[5px]',
13+
},
14+
color: {
15+
grey: '',
16+
green: '',
17+
orange: '',
18+
blue: '',
19+
},
20+
type: {
21+
filled: '',
22+
linear: 'border bg-surface-container',
1823
},
1924
},
25+
compoundVariants: [
26+
{
27+
color: 'grey',
28+
type: 'linear',
29+
className: 'border-border-primary text-text-foreground',
30+
},
31+
{
32+
color: 'grey',
33+
type: 'filled',
34+
className: 'bg-surface-hover-secondary text-text-foreground',
35+
},
36+
{
37+
color: 'green',
38+
type: 'filled',
39+
className: 'bg-tag-green-dark text-tag-green-light',
40+
},
41+
{
42+
color: 'orange',
43+
type: 'filled',
44+
className: 'bg-tag-orange-dark text-tag-orange-light',
45+
},
46+
{
47+
color: 'blue',
48+
type: 'filled',
49+
className: 'bg-tag-blue-dark text-tag-blue-light',
50+
},
51+
],
2052
defaultVariants: {
21-
variant: 'default',
53+
size: 'sm',
54+
color: 'grey',
55+
type: 'filled',
2256
},
2357
},
2458
);
2559

26-
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
60+
export interface BadgeProps
61+
extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,
62+
VariantProps<typeof badgeVariants> {}
2763

28-
function Badge({ className, variant, ...props }: BadgeProps) {
29-
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
64+
function Badge({ className, size, color, type, ...props }: BadgeProps) {
65+
return <div className={cn(badgeVariants({ size, color, type }), className)} {...props} />;
3066
}
3167

3268
export { Badge, badgeVariants };

0 commit comments

Comments
 (0)