status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update Avatar component (#385) 

* revert text changes

* check 'none'

* rm cloneElement

* use 'none' as val
This commit is contained in:
Felicio Mununga 2023-04-26 12:04:07 +02:00 committed by GitHub
parent 1df8c16091
commit 0b6badac48
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
2 changed files with 10 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/components/src/avatar/avatar.tsx
View File

@ -203,16 +203,10 @@ const Avatar = (props: AvatarProps) => {
<Fallback borderRadius={radius} backgroundColor={backgroundColor}> <Fallback borderRadius={radius} backgroundColor={backgroundColor}>
{/* todo?: contrasting color to background */} {/* todo?: contrasting color to background */}
{props.type === 'group' ? ( {props.type === 'group' ? (
cloneElement(
<MembersIcon <MembersIcon
size={ size={groupMembersIconSizes[props.size] as IconProps['size']}
groupMembersIconSizes[props.size] as IconProps['size'] color="$white-100"
} />
/>,
{
color: '$white-100',
}
)
) : ( ) : (
<Text <Text
size={textSizes[props.size]} size={textSizes[props.size]}
@ -285,13 +279,15 @@ const Avatar = (props: AvatarProps) => {
const renderBadge = () => { const renderBadge = () => {
switch (props.type) { switch (props.type) {
case 'user': { case 'user': {
if (!props.indicator) { const { indicator = 'none', size } = props
if (!indicator || indicator === 'none') {
return return
} }
return ( return (
<Unspaced> <Unspaced>
<Indicator size={props.size} state={props.indicator} /> <Indicator size={size} state={indicator} />
</Unspaced> </Unspaced>
) )
} }

5
packages/components/src/text/text.tsx
View File

@ -12,7 +12,6 @@ type Weight = NonNullable<Variants['weight']>
type Props = { type Props = {
children: React.ReactNode children: React.ReactNode
size?: 27 | 19 | 15 | 13 | 11 | undefined
color?: ColorTokens color?: ColorTokens
truncate?: boolean truncate?: boolean
wrap?: false wrap?: false
@ -27,8 +26,8 @@ type Props = {
// TODO: monospace should be used only for variant. Extract to separate <Address> component? // TODO: monospace should be used only for variant. Extract to separate <Address> component?
// TODO: Ubuntu Mono should be used only for code snippets. Extract to separate <Code> component? // TODO: Ubuntu Mono should be used only for code snippets. Extract to separate <Code> component?
const Text = (props: Props, ref: Ref<RNText>) => { const Text = (props: Props, ref: Ref<RNText>) => {
const { color = '$neutral-100', size = 13, ...rest } = props const { color = '$neutral-100', ...rest } = props
return <Base {...rest} ref={ref} color={color} size={size} /> return <Base {...rest} ref={ref} color={color} />
} }
const Base = styled(BaseText, { const Base = styled(BaseText, {