From 6c6d77b13ab367f090f95a5a2a53c0d83944de9c Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 19 Oct 2023 08:33:55 +0300
Subject: [PATCH] fix: vaidator list item tweaks

---
 .../ValidatorsTabs/ValidatorListItem.tsx            | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx b/src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx
index 79a51aa3..6a3a6b67 100644
--- a/src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx
+++ b/src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { XStack, YStack } from 'tamagui'
 import { Avatar, Checkbox, Text } from '@status-im/components'
 import { VerifiedIcon, ContactIcon } from '@status-im/icons'
+
 import { getFormattedValidatorAddress } from '../../../../utilities'
 
 type ValidatorListItemProps = {
@@ -19,14 +20,14 @@ const ValidatorListItem = ({
   isAvatarChipIncluded,
   isVerified,
 }: ValidatorListItemProps) => {
-  const [hovered, setHovered] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
   const [isSelected, setIsSelected] = useState(selected)
 
-  const handleMouseEnter = () => setHovered(true)
-  const handleMouseLeave = () => setHovered(false)
+  const handleMouseEnter = () => setIsHovered(true)
+  const handleMouseLeave = () => setIsHovered(false)
   const handleClick = () => setIsSelected(!isSelected)
 
-  const backgroundColor = isSelected || hovered ? 'rgba(42, 74, 245, 0.05)' : 'transparent'
+  const backgroundColor = isSelected || isHovered ? 'rgba(42, 74, 245, 0.05)' : 'transparent'
 
   return (
     <XStack
@@ -38,7 +39,7 @@ const ValidatorListItem = ({
       style={{
         padding: '6px 8px',
         borderRadius: '12px',
-        backgroundColor: backgroundColor,
+        backgroundColor,
       }}
       width="90%"
     >
@@ -58,7 +59,7 @@ const ValidatorListItem = ({
           ]}
         />
         <YStack pl="8px">
-          <XStack space={'$2'} alignItems="center">
+          <XStack space={'$1'} alignItems="center">
             <Text size={13} weight={'semibold'}>
               {name}
             </Text>