status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-18 06:16:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'hn.validator-onboarding-responsive' of https://github.com/nimbus-gui/nimbus-gui into hn.validator-onboarding-responsive

Browse Source
This commit is contained in:
RadoslavDimchev 2024-01-21 16:17:26 +02:00
commit 340cb69107
4 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css
View File

@ -1,6 +1,10 @@
.osCardsContainer { .osCardsContainer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(3, 1fr);
} }
.osCard { .osCard {
@ -9,8 +13,6 @@
padding: 12px 16px; padding: 12px 16px;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 16px;
flex-basis: calc(33.333% - 10px);
} }
.osCardSelected { .osCardSelected {
@ -18,14 +20,23 @@
border: 1px solid #2a4af566; border: 1px solid #2a4af566;
} }
@media (max-width: 900px) { @media (max-width: 1000px) {
.osCard { .osCardsContainer {
flex-basis: calc(50% - 10px); grid-template-columns: repeat(2, 1fr);
}
.osCard:nth-child(3) {
width: 205%;
} }
} }
@media (max-width: 680px) { @media (max-width: 750px) {
.osCardsContainer {
grid-template-columns: repeat(1, 1fr);
}
.osCard { .osCard {
flex-basis: 100%; width: 90%;
}
.osCard:nth-child(3) {
width: 90%;
} }
} }

2
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
View File

@ -8,7 +8,7 @@ type OSCardProps = {
} }
const OSCard = ({ name, icon }: OSCardProps) => { const OSCard = ({ name, icon }: OSCardProps) => {
return ( return (
<Stack> <Stack >
<Text size={19} weight={'semibold'}> <Text size={19} weight={'semibold'}>
{name} {name}
</Text> </Text>

1
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
View File

@ -1,4 +1,3 @@
import { Stack } from 'tamagui'
import OSCard from './OSCard' import OSCard from './OSCard'
import { LINUX, MAC, WINDOWS } from '../../../../constants' import { LINUX, MAC, WINDOWS } from '../../../../constants'
import styles from './InstallLayout.module.css' import styles from './InstallLayout.module.css'

4
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
View File

@ -18,7 +18,7 @@ const ValidatorSetupInstall = () => {
} }
return ( return (
<YStack style={{ padding: '26px 32px' }}> <YStack style={{ padding: '26px 32px', width:'fit-content'}} >
<Text size={27} weight={'semibold'}> <Text size={27} weight={'semibold'}>
Validator Setup Validator Setup
</Text> </Text>
@ -35,7 +35,7 @@ const ValidatorSetupInstall = () => {
<Text size={19} weight={'semibold'}> <Text size={19} weight={'semibold'}>
Installing {selectedClient} Installing {selectedClient}
</Text> </Text>
<Stack flexWrap="wrap"> <Stack>
<Markdown children={DOCUMENTATIONS[selectedClient].general} /> <Markdown children={DOCUMENTATIONS[selectedClient].general} />
<OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} /> <OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} />
<Markdown children={DOCUMENTATIONS[selectedClient].documentation[selectedOS]} /> <Markdown children={DOCUMENTATIONS[selectedClient].documentation[selectedOS]} />