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

chore(overview-css): fix class names

Browse Source
This commit is contained in:
RadoslavDimchev 2024-02-14 10:58:46 +02:00 committed by Radoslav Dimchev
parent 743a2d7d62
commit 27f8e4b560
3 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/ValidatorOnboarding/Overview/Overview.tsx
View File

@ -1,4 +1,4 @@
import { YStack, Stack } from 'tamagui' import { YStack } from 'tamagui'
import { Text } from '@status-im/components' import { Text } from '@status-im/components'
import OverviewCard from './OverviewCard' import OverviewCard from './OverviewCard'
@ -37,7 +37,7 @@ const Overview = () => {
style={{ marginBottom: '1rem', fontSize: '13px' }} style={{ marginBottom: '1rem', fontSize: '13px' }}
/> />
</YStack> </YStack>
<div className={styles.overviewCards}> <div className={styles['overview-cards']}>
<OverviewCard text={'Current APR'} value={'4.40%'} /> <OverviewCard text={'Current APR'} value={'4.40%'} />
<OverviewCard text={'Total ETH Staked'} value={'9,451,123'} /> <OverviewCard text={'Total ETH Staked'} value={'9,451,123'} />
<OverviewCard text={'Estimated Activation Time'} value={'32 Days'} /> <OverviewCard text={'Estimated Activation Time'} value={'32 Days'} />

2
src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx
View File

@ -9,7 +9,7 @@ type OverviewCardProps = {
const OverviewCard = ({ text, value }: OverviewCardProps) => { const OverviewCard = ({ text, value }: OverviewCardProps) => {
return ( return (
<div className={styles['overviewCard']}> <div className={styles['overview-card']}>
<div> <div>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>
{text} {text}

10
src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css
View File

@ -1,11 +1,11 @@
.overviewCards { .overview-cards {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 16px; gap: 16px;
width: 258%; width: 258%;
} }
.overviewCard { .overview-card {
border-radius: 16px; border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.15);
padding: 10px 12px; padding: 10px 12px;
@ -13,19 +13,19 @@
} }
@media screen and (max-width: 1300px) { @media screen and (max-width: 1300px) {
.overviewCards { .overview-cards {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {
.overviewCards { .overview-cards {
width: 100%; width: 100%;
} }
} }
@media screen and (max-width: 515px) { @media screen and (max-width: 515px) {
.overviewCards { .overview-cards {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }