fix(explorer): fix selected network style (#4550)

iotaledger · Dec 18, 2024 · 9fb6665 · 9fb6665
1 parent 455641d
commit 9fb6665
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git 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}
                             >
                                 <div className="flex items-center gap-2">
                                     <CheckmarkFilled
                                         className={cx('flex-shrink-0', {
-                                            'text-success': network === selectedNetwork,
+                                            'text-primary-30': network === selectedNetwork,
                                             'text-gray-45': 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
@@ -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<ListItemProps>): React.JSX.Element {
     function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
         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}