From e59ba5817a2d0f89e3f08f283bb6c42d4da7e74d Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 27 Sep 2023 23:13:15 +0300
Subject: [PATCH] Add hover effect on Memory Card

---
 src/components/Charts/DeviceMemoryHealth.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Charts/DeviceMemoryHealth.tsx b/src/components/Charts/DeviceMemoryHealth.tsx
index 6fd1fe4d..d0aec44f 100644
--- a/src/components/Charts/DeviceMemoryHealth.tsx
+++ b/src/components/Charts/DeviceMemoryHealth.tsx
@@ -4,6 +4,7 @@ import IconText from '../General/IconText'
 import { Separator, XStack, YStack } from 'tamagui'
 import { Shadow as ShadowBox, Text } from '@status-im/components'
 import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
+import { useState } from 'react'
 
 type DataPoint = {
   x: number
@@ -22,6 +23,9 @@ type DeviceMemoryHealthProps = {
   maxMemory: number
 }
 const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+
   const dataObj = currentMemory.map((yValue, index: number) => ({
     x: index + 1,
     y: yValue,
@@ -48,8 +52,10 @@ const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProp
         minHeight: '135px',
         borderRadius: '16px',
         border: message === 'Poor' ? '1px solid  #D92344' : 'none',
-        backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
+        backgroundColor: isHovered ? '#f8f6ff' : (message === 'Poor' ? '#fefafa' : '#fff'),
       }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
       <YStack>
         <XStack