fix: icon text work with status text

This commit is contained in:
RadoslavDimchev 2023-08-11 10:39:34 +03:00
parent e091c591f6
commit 4e5a29c5d4
3 changed files with 8 additions and 7 deletions

View File

@ -4,7 +4,7 @@ export type TextElement = {
text: string text: string
bold?: boolean bold?: boolean
italic?: boolean italic?: boolean
weight?: 'regular' | 'medium' | 'bold' weight?: 'regular' | 'medium' | 'semibold'
} }
type FormattedTextProps = { type FormattedTextProps = {

View File

@ -1,12 +1,13 @@
import { Paragraph, XStack } from 'tamagui' import { XStack } from 'tamagui'
import Icon from './Icon' import Icon from './Icon'
import { Text } from '@status-im/components'
type IconTextProps = { type IconTextProps = {
icon: string icon: string
children: string children: string
} }
const IconText = ({ icon, children, ...props }: IconTextProps) => { const IconText = ({ icon, children }: IconTextProps) => {
return ( return (
<XStack <XStack
style={{ style={{
@ -15,9 +16,9 @@ const IconText = ({ icon, children, ...props }: IconTextProps) => {
space={'$2'} space={'$2'}
> >
<Icon src={icon} /> <Icon src={icon} />
<Paragraph {...props} color={'#000000'} fontWeight={'bold'}> <Text size={11} color={'#000000'} weight={"medium"} >
{children} {children}
</Paragraph> </Text>
</XStack> </XStack>
) )
} }

View File

@ -1,7 +1,7 @@
import LayoutComponent from './LayoutComponent' import LayoutComponent from './LayoutComponent'
import './LandingPage.css' import './LandingPage.css'
import QuickStartBar from './QuickStartBar' import QuickStartBar from './QuickStartBar'
import NodesLogo from './NodesLogo' import IconText from './IconText'
function LandingPage() { function LandingPage() {
return ( return (
@ -15,6 +15,7 @@ function LandingPage() {
function Content() { function Content() {
return ( return (
<div className="container-inner landing-page"> <div className="container-inner landing-page">
<IconText icon="src/assets/nodes-app-icon.png">Quick Start</IconText>
<header> <header>
<div> <div>
<div> <div>
@ -24,7 +25,6 @@ function Content() {
nodes<span className="beta">BETA</span> nodes<span className="beta">BETA</span>
</p> </p>
</div> </div>
<NodesLogo />
</header> </header>
<article className="content"> <article className="content">
<div className="avatar"> <div className="avatar">