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

feat(consensus-selection): move style to module

Browse Source
This commit is contained in:
RadoslavDimchev 2024-04-18 21:01:24 +03:00 committed by Emil Ivanichkov
parent f881ba2a1d
commit ea2ae38132
2 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx
View File

@ -6,6 +6,7 @@ import ConsensusClientCard from './ConsensusClientCard'
import LinkWithArrow from '../../../../components/General/LinkWithArrow'
import SyncStatusCard from '../../../../components/General/SyncStatusCard'
import { useWindowSize } from '../../../../hooks/useWindowSize'
import styles from './consensusSelection.module.css'
const ConsensusSelection = () => {
const windowSize = useWindowSize()
@ -19,27 +20,12 @@ const ConsensusSelection = () => {
]
return (
<YStack style={{ width: '100%', padding: '32px' }} minHeight={'65vh'}>
<div
style={{
width: '100%',
justifyContent: 'space-between',
display: 'flex',
flexWrap: 'wrap',
gap: '8px',
}}
>
<YStack className={styles['main-container']}>
<div className={styles['header-container']}>
<Text size={27} weight={'semibold'}>
Client Setup
</Text>
<div
style={{
display: 'flex',
gap: '8px',
flexWrap: 'wrap',
minWidth: windowSize.width < 771 ? '100%' : '',
}}
>
<div className={styles['header-cards-container']}>
<PairedDeviceCard />
<SyncStatusCard
synced={123.524}

25
src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/consensusSelection.module.css Normal file
View File

@ -0,0 +1,25 @@
.main-container {
width: 100%;
padding: 32px;
min-height: 65vh;
}
.header-container {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: space-between;
}
.header-cards-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
@media (max-width: 710px) {
.header-cards-container {
width: 100%;
}
}