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 Storage Card

This commit is contained in:
Hristo Nedelkov 2023-09-27 23:17:07 +03:00
parent fda7a8b23c
commit e0c72a2bcd
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Charts/DeviceStorageHealth.tsx
View File

@ -3,6 +3,7 @@ import { Separator, XStack, YStack } from 'tamagui'
import StandardGauge from './StandardGauge'
import { Shadow, Text } from '@status-im/components'
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
import { useState } from 'react'
interface DeviceStorageHealthProps {
storage: number
@ -12,6 +13,7 @@ const GOOD_COLOR = '#8DC6BC';
const POOR_COLOR = '#E95460';
const DeviceStorageHealth = ({ storage, maxStorage }: DeviceStorageHealthProps) => {
const [isHovered, setIsHovered] = useState(false);
const message = storage < maxStorage ? 'Good' : 'Poor';
const free = maxStorage - storage;
@ -41,8 +43,10 @@ const DeviceStorageHealth = ({ storage, maxStorage }: DeviceStorageHealthProps)
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