status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-12 19:36:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(dashboard-cards): move error border

Browse Source
This commit is contained in:
RadoslavDimchev 2024-04-20 14:30:04 +03:00 committed by Emil Ivanichkov
parent 0ff181292f
commit c94cbdfc77
5 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/Dashboard/CPULoad/CPUCard.tsx
View File

@ -42,11 +42,15 @@ const CPUCard = ({ load }: CPUCardProps) => {
const message = currentLoad < 80 ? 'Good' : 'Poor' const message = currentLoad < 80 ? 'Good' : 'Poor'
return ( return (
<DashboardCardWrapper padding="0" height="156px" minWidth="200px"> <DashboardCardWrapper
padding="0"
height="156px"
minWidth="200px"
isErrorBorder={message === 'Poor'}
>
<YStack <YStack
style={{ style={{
borderRadius: '16px', borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff', backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
flexGrow: '1', flexGrow: '1',
}} }}

4
src/pages/Dashboard/DashboardCardWrapper.tsx
View File

@ -8,6 +8,7 @@ type DashboardCardWrapperProps = {
minWidth?: string minWidth?: string
maxWidth?: string maxWidth?: string
maxHeight?: string maxHeight?: string
isErrorBorder?: boolean
} }
const DashboardCardWrapper = ({ const DashboardCardWrapper = ({
@ -18,6 +19,7 @@ const DashboardCardWrapper = ({
minWidth = '0', minWidth = '0',
maxWidth, maxWidth,
maxHeight, maxHeight,
isErrorBorder,
}: DashboardCardWrapperProps) => { }: DashboardCardWrapperProps) => {
return ( return (
<Shadow <Shadow
@ -32,7 +34,7 @@ const DashboardCardWrapper = ({
minWidth: minWidth, minWidth: minWidth,
maxWidth: maxWidth, maxWidth: maxWidth,
maxHeight: maxHeight, maxHeight: maxHeight,
border: '1px solid #E7EAEE', border: isErrorBorder ? '1px solid #D92344' : '1px solid #E7EAEE',
}} }}
> >
{children} {children}

8
src/pages/Dashboard/MemoryCard/MemoryCard.tsx
View File

@ -44,11 +44,15 @@ const MemoryCard = ({ currentMemory, maxMemory }: MemoryCardProps) => {
const message = currentLoad < maxMemory ? 'Good' : 'Poor' const message = currentLoad < maxMemory ? 'Good' : 'Poor'
return ( return (
<DashboardCardWrapper padding="0" height="156px" minWidth="200px"> <DashboardCardWrapper
padding="0"
height="156px"
minWidth="200px"
isErrorBorder={message === 'Poor'}
>
<YStack <YStack
style={{ style={{
borderRadius: '16px', borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff', backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
}} }}
height={'100%'} height={'100%'}

8
src/pages/Dashboard/NetworkCard/NetworkCard.tsx
View File

@ -50,11 +50,15 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
const message = currentLoad > 60 ? 'Good' : 'Poor' const message = currentLoad > 60 ? 'Good' : 'Poor'
return ( return (
<DashboardCardWrapper padding="0" height="156px" minWidth="200px"> <DashboardCardWrapper
padding="0"
height="156px"
minWidth="200px"
isErrorBorder={message === 'Poor'}
>
<YStack <YStack
style={{ style={{
borderRadius: '16px', borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff', backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
}} }}
height={'100%'} height={'100%'}

8
src/pages/Dashboard/StorageCard/StorageCard.tsx
View File

@ -35,11 +35,15 @@ const StorageCard = ({ storage, maxStorage }: StorageCardProps) => {
} }
return ( return (
<DashboardCardWrapper padding="0" height="156px" minWidth="200px"> <DashboardCardWrapper
padding="0"
height="156px"
minWidth="200px"
isErrorBorder={message === 'Poor'}
>
<YStack <YStack
style={{ style={{
borderRadius: '16px', borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff', backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
flexGrow: '1', flexGrow: '1',
}} }}