diff --git a/src/components/SyncStatusCardConsensus.tsx b/src/components/SyncStatusCardConsensus.tsx index 582d8649..3cb55807 100644 --- a/src/components/SyncStatusCardConsensus.tsx +++ b/src/components/SyncStatusCardConsensus.tsx @@ -16,7 +16,7 @@ const SyncStatusCardConsensus: React.FC = ({ synced, t id: 'storage', label: 'Used', value: synced, - color: '#E95460', + color: '#ff6161', }, { id: 'storage', @@ -26,7 +26,9 @@ const SyncStatusCardConsensus: React.FC = ({ synced, t }, ] } - + function formatNumber(n: number): string { + return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + } return ( = ({ synced, t style={{ padding: '8px 16px', position: 'relative', - height: '155px', + height: '160px', }} > - Execution Client + Consensus Client @@ -67,7 +69,9 @@ const SyncStatusCardConsensus: React.FC = ({ synced, t {message} - 123,424 / 170,000 + + {formatNumber(synced)} / {formatNumber(total)} + diff --git a/src/components/SyncStatusCardExecution.tsx b/src/components/SyncStatusCardExecution.tsx index fd6f8daa..94a04156 100644 --- a/src/components/SyncStatusCardExecution.tsx +++ b/src/components/SyncStatusCardExecution.tsx @@ -15,7 +15,7 @@ const SyncStatusCardExecution: React.FC = ({ synced, t id: 'storage', label: 'Used', value: synced, - color: '#E95460', + color: '#2a4af5', }, { id: 'storage', @@ -25,6 +25,9 @@ const SyncStatusCardExecution: React.FC = ({ synced, t }, ] } + function formatNumber(n: number): string { + return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + } return ( = ({ synced, t style={{ padding: '8px 16px', position: 'relative', - height: '155px', + height: '160px', }} > @@ -68,7 +71,10 @@ const SyncStatusCardExecution: React.FC = ({ synced, t {message} - 123,424 / 170,000 + + {' '} + {formatNumber(synced)} / {formatNumber(total)} + diff --git a/src/pages/DeviceHealthCheck/DeviceSyncStatus.tsx b/src/pages/DeviceHealthCheck/DeviceSyncStatus.tsx index e639b2b5..2d91d5d3 100644 --- a/src/pages/DeviceHealthCheck/DeviceSyncStatus.tsx +++ b/src/pages/DeviceHealthCheck/DeviceSyncStatus.tsx @@ -2,7 +2,7 @@ import { Stack, YStack } from 'tamagui' import LayoutComponent from '../../components/LayoutComponent' import NimbusLogo from '../../components/NimbusLogo' import Titles from '../../components/Titles' -import { Button } from '@status-im/components' +import { Button, PinnedMessage } from '@status-im/components' import SyncStatusCardExecution from '../../components/SyncStatusCardExecution' import SyncStatusCardConsensus from '../../components/SyncStatusCardConsensus' @@ -19,29 +19,48 @@ export default DeviceSyncStatus const DeviceSyncStatusContent = () => { return ( -
- - - + + - - - - - - - -
+ +
+ + + + + + + + + + + +
+ ) }