chore(overview-css): fix class names

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

View File

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

View File

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

View File

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