status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-13 03:46:39 +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-19 09:34:48 +02:00
commit c395c074c4
3 changed files with 41 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.css
View File

@ -1,25 +1,36 @@
.osCardsContainer { .osCardsContainer {
/* Container styles */ display: grid;
grid-gap: 16px;
margin: 8px;
grid-template-columns: repeat(3, 1fr)
}
.osCardsContainer {
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 601px) {
.osCardsContainer {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 901px) {
.osCardsContainer {
grid-template-columns: repeat(3, 1fr);
}
} }
.osCard { .osCard {
border: 1px solid rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 16px; border-radius: 16px;
padding: 12px 16px; padding: 12px 16px;
min-width: 200px; cursor: pointer;
cursor: 'pointer'; min-width: 250px;
width: 32%; /* Adjust for normal screens */
} }
.osCard.selected { .osCard.selected {
background-color: #2a4af50d; background-color: #2a4af50d;
border: 1px solid #2a4af566; border: 1px solid #2a4af566;
} }
/* Media query for smaller screens */
@media (max-width: 800px) {
.osCard {
width: 100%; /* Full width on small screens */
margin: 8px 0;
}
}

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

@ -1,6 +1,7 @@
import { YStack } from 'tamagui' import { Stack, YStack } from 'tamagui'
import { Text } from '@status-im/components' import { Text } from '@status-im/components'
import Icon from '../../../../components/General/Icon' import Icon from '../../../../components/General/Icon'
import './InstallLayout.css'
type OSCardProps = { type OSCardProps = {
name: string name: string
@ -8,15 +9,14 @@ type OSCardProps = {
onClick?: () => void onClick?: () => void
isSelected?: boolean isSelected?: boolean
} }
const OSCard = ({ name, icon, onClick, isSelected }: OSCardProps) => { const OSCard = ({ name, icon, onClick, isSelected }: OSCardProps) => {
return ( return (
<YStack className={`osCard ${isSelected ? 'selected' : ''}`} onPress={onClick}> <Stack className={`osCard ${isSelected ? 'selected' : ''}`} onPress={onClick}>
<Text size={19} weight={'semibold'}> <Text size={19} weight={'semibold'}>
{name} {name}
</Text> </Text>
<Icon src={icon} width={90} height={110} /> <Icon src={icon} width={90} height={110} />
</YStack> </Stack>
) )
} }

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

@ -1,27 +1,23 @@
import { XStack } from 'tamagui' import { Stack, XStack } from 'tamagui';
import OSCard from './OSCard' import OSCard from './OSCard';
import { LINUX, MAC, WINDOWS } from '../../../../constants' import { LINUX, MAC, WINDOWS } from '../../../../constants';
import './InstallLayout.css';
import './InstallLayout.css'
const cards = [ const cards = [
{ name: MAC, icon: '/icons/apple-logo.svg' }, { name: MAC, icon: '/icons/apple-logo.svg' },
{ name: LINUX, icon: '/icons/linux-logo.svg' }, { name: LINUX, icon: '/icons/linux-logo.svg' },
{ name: WINDOWS, icon: '/icons/windows-logo.svg' }, { name: WINDOWS, icon: '/icons/windows-logo.svg' },
] ];
type OSCardsProps = { type OSCardsProps = {
selectedOS: string selectedOS: string;
handleOSCardClick: (os: string) => void handleOSCardClick: (os: string) => void;
} };
const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => { const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
return ( return (
<XStack <Stack className="osCardsContainer" my={'15px'} >
className="osCardsContainer"
justifyContent={'space-between'}
my={'15px'}
flexWrap="wrap"
>
{cards.map(card => ( {cards.map(card => (
<OSCard <OSCard
key={card.name} key={card.name}
@ -31,8 +27,8 @@ const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
onClick={() => handleOSCardClick(card.name)} onClick={() => handleOSCardClick(card.name)}
/> />
))} ))}
</XStack> </Stack>
) );
} };
export default OSCards export default OSCards;