status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add hover effect on CPU Card

This commit is contained in:
Hristo Nedelkov 2023-09-27 23:12:12 +03:00
parent 946ffd5e9e
commit c25508a612
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Charts/DeviceCPULoad.tsx
View File

@ -3,6 +3,7 @@ import IconText from '../General/IconText'
import { Separator, XStack, YStack } from 'tamagui'
import { Shadow, Text } from '@status-im/components'
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
import { useState } from 'react'
type DataPoint = {
x: number
@ -18,7 +19,8 @@ type ChartData = {
type DeviceCPULoadProps = {
load: number[]
}
const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
const DeviceCPULoad = ({ load }: DeviceCPULoadProps) => {
const [isHovered, setIsHovered] = useState(false);
const dataObj = load.map((yValue, index: number) => ({
x: index + 1,
@ -45,8 +47,10 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
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