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

fix(consensus-selection): replace useWidth with media query

This commit is contained in:
RadoslavDimchev 2024-04-18 21:33:33 +03:00 committed by Emil Ivanichkov
parent f212bf8342
commit dea4e9a785
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,11 +5,9 @@ import PairedDeviceCard from './PairedDeviceCard'
import ConsensusClientCard from './ConsensusClientCard' import ConsensusClientCard from './ConsensusClientCard'
import LinkWithArrow from '../../../../components/General/LinkWithArrow' import LinkWithArrow from '../../../../components/General/LinkWithArrow'
import SyncStatusCard from '../../../../components/General/SyncStatusCard' import SyncStatusCard from '../../../../components/General/SyncStatusCard'
import { useWindowSize } from '../../../../hooks/useWindowSize'
import styles from './consensusSelection.module.css' import styles from './consensusSelection.module.css'
const ConsensusSelection = () => { const ConsensusSelection = () => {
const windowSize = useWindowSize()
const selectedClient = 'Nimbus' const selectedClient = 'Nimbus'
const clients = [ const clients = [
@ -53,7 +51,7 @@ const ConsensusSelection = () => {
<Text size={27}>Install Consensus client</Text> <Text size={27}>Install Consensus client</Text>
<XStack space={'$8'} marginTop={'20px'} flexWrap="wrap"> <XStack space={'$8'} marginTop={'20px'} flexWrap="wrap">
<ConsensusClientCard name={clients[0].name} icon={clients[0].icon} /> <ConsensusClientCard name={clients[0].name} icon={clients[0].icon} />
<YStack width={windowSize.width < 780 ? '100%' : '70%'} space={'$4'}> <YStack className={styles['card-description-texts']} space={'$4'}>
<Text size={19}>The resource efficient Ethereum Clients.</Text> <Text size={19}>The resource efficient Ethereum Clients.</Text>
<Text size={15}> <Text size={15}>
{selectedClient} is a client implementation for both execution and {selectedClient} is a client implementation for both execution and

10
src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/consensusSelection.module.css
View File

@ -18,8 +18,18 @@
gap: 8px; gap: 8px;
} }
.card-description-texts {
width: 70%;
}
@media (max-width: 710px) { @media (max-width: 710px) {
.header-cards-container { .header-cards-container {
width: 100%; width: 100%;
} }
} }
@media (max-width: 780px) {
.card-description-texts {
width: 100%;
}
}