diff --git a/apps/explorer/src/components/network/NetworkSelector.tsx b/apps/explorer/src/components/network/NetworkSelector.tsx index 34da8635f62..deb20e35e9b 100644 --- a/apps/explorer/src/components/network/NetworkSelector.tsx +++ b/apps/explorer/src/components/network/NetworkSelector.tsx @@ -99,11 +99,12 @@ export function NetworkSelector(): JSX.Element { key={idx} onClick={() => handleNetworkSwitch(network.id)} hideBottomBorder + isHighlighted={network === selectedNetwork} >
diff --git a/apps/ui-kit/src/lib/components/atoms/list-item/ListItem.tsx b/apps/ui-kit/src/lib/components/atoms/list-item/ListItem.tsx index 2a5806cf08f..9f6475a674b 100644 --- a/apps/ui-kit/src/lib/components/atoms/list-item/ListItem.tsx +++ b/apps/ui-kit/src/lib/components/atoms/list-item/ListItem.tsx @@ -23,6 +23,10 @@ export interface ListItemProps { * The list item is disabled or not. */ isDisabled?: boolean; + /** + * The list item is highlighted. + */ + isHighlighted?: boolean; } export function ListItem({ @@ -31,6 +35,7 @@ export function ListItem({ onClick, isDisabled, children, + isHighlighted, }: PropsWithChildren): React.JSX.Element { function handleKeyDown(event: React.KeyboardEvent) { if ((event.key === 'Enter' || event.key === ' ') && !isDisabled && onClick) { @@ -63,7 +68,10 @@ export function ListItem({ className={cx( 'relative flex flex-row items-center justify-between px-md py-sm text-neutral-10 dark:text-neutral-92', !isDisabled && onClick ? 'cursor-pointer' : 'cursor-default', - { 'state-layer': !isDisabled }, + { + 'bg-shader-primary-dark-16 dark:bg-shader-inverted-dark-16': isHighlighted, + 'state-layer': !isDisabled, + }, )} > {children}