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