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

update avatar initials (#515) 

* update avatar initials

* Create itchy-steaks-leave.md
This commit is contained in:
Felicio Mununga 2023-12-15 14:22:31 +01:00 committed by GitHub
parent 92ff3bd4dc
commit 70cb660cd2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 192 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/itchy-steaks-leave.md Normal file
View File

@ -0,0 +1,5 @@
---
"@status-im/components": patch
---
update avatar initials

338
packages/components/src/avatar/avatar.stories.tsx
View File

@ -45,79 +45,161 @@ export const User: StoryObj<UserArgs> = {
render: args => ( render: args => (
<Stack space flexDirection="row"> <Stack space flexDirection="row">
<Stack space flexDirection="column"> <Stack space flexDirection="column">
<Stack space alignItems="flex-start"> <Stack space flexDirection="row">
<Avatar <Stack space alignItems="flex-start">
{...args} <Avatar
size={80} {...args}
indicator="online" size={80}
colorHash={[ indicator="online"
[3, 30], colorHash={[
[2, 10], [3, 30],
[5, 5], [2, 10],
[3, 14], [5, 5],
[5, 4], [3, 14],
[4, 19], [5, 4],
[3, 16], [4, 19],
[4, 0], [3, 16],
[5, 28], [4, 0],
[4, 13], [5, 28],
[4, 15], [4, 13],
]} [4, 15],
/> ]}
<Avatar />
{...args} <Avatar
size={56} {...args}
indicator="online" size={56}
colorHash={[ indicator="online"
[3, 30], colorHash={[
[2, 10], [3, 30],
[5, 5], [2, 10],
[3, 14], [5, 5],
[5, 4], [3, 14],
[4, 19], [5, 4],
[3, 16], [4, 19],
[4, 0], [3, 16],
[5, 28], [4, 0],
[4, 13], [5, 28],
[4, 15], [4, 13],
]} [4, 15],
/> ]}
<Avatar />
{...args} <Avatar
size={48} {...args}
indicator="online" size={48}
colorHash={[ indicator="online"
[3, 30], colorHash={[
[2, 10], [3, 30],
[5, 5], [2, 10],
[3, 14], [5, 5],
[5, 4], [3, 14],
[4, 19], [5, 4],
[3, 16], [4, 19],
[4, 0], [3, 16],
[5, 28], [4, 0],
[4, 13], [5, 28],
[4, 15], [4, 13],
]} [4, 15],
/> ]}
<Avatar />
{...args} <Avatar
size={32} {...args}
indicator="online" size={32}
colorHash={[ indicator="online"
[3, 30], colorHash={[
[2, 10], [3, 30],
[5, 5], [2, 10],
[3, 14], [5, 5],
[5, 4], [3, 14],
[4, 19], [5, 4],
[3, 16], [4, 19],
[4, 0], [3, 16],
[5, 28], [4, 0],
[4, 13], [5, 28],
[4, 15], [4, 13],
]} [4, 15],
/> ]}
/>
</Stack>
<Stack space flexDirection="column">
<Stack space alignItems="flex-start">
<Avatar
{...args}
src={undefined}
size={80}
indicator="online"
colorHash={[
[3, 30],
[2, 10],
[5, 5],
[3, 14],
[5, 4],
[4, 19],
[3, 16],
[4, 0],
[5, 28],
[4, 13],
[4, 15],
]}
/>
<Avatar
{...args}
src={undefined}
size={56}
indicator="online"
colorHash={[
[3, 30],
[2, 10],
[5, 5],
[3, 14],
[5, 4],
[4, 19],
[3, 16],
[4, 0],
[5, 28],
[4, 13],
[4, 15],
]}
/>
<Avatar
{...args}
src={undefined}
size={48}
indicator="online"
colorHash={[
[3, 30],
[2, 10],
[5, 5],
[3, 14],
[5, 4],
[4, 19],
[3, 16],
[4, 0],
[5, 28],
[4, 13],
[4, 15],
]}
/>
<Avatar
{...args}
src={undefined}
size={32}
indicator="online"
colorHash={[
[3, 30],
[2, 10],
[5, 5],
[3, 14],
[5, 4],
[4, 19],
[3, 16],
[4, 0],
[5, 28],
[4, 13],
[4, 15],
]}
/>
</Stack>
</Stack>
</Stack> </Stack>
<Stack space alignItems="flex-start"> <Stack space alignItems="flex-start">
<Avatar {...args} size={80} indicator="online" /> <Avatar {...args} size={80} indicator="online" />
@ -127,95 +209,27 @@ export const User: StoryObj<UserArgs> = {
<Avatar {...args} size={28} indicator="online" /> <Avatar {...args} size={28} indicator="online" />
<Avatar {...args} size={24} indicator="online" /> <Avatar {...args} size={24} indicator="online" />
</Stack> </Stack>
<Stack space alignItems="flex-start"> <Stack space flexDirection="row">
<Avatar {...args} size={80} /> <Stack space alignItems="flex-start">
<Avatar {...args} size={56} /> <Avatar {...args} size={80} />
<Avatar {...args} size={48} /> <Avatar {...args} size={56} />
<Avatar {...args} size={32} /> <Avatar {...args} size={48} />
<Avatar {...args} size={28} /> <Avatar {...args} size={32} />
<Avatar {...args} size={24} /> <Avatar {...args} size={28} />
<Avatar {...args} size={20} /> <Avatar {...args} size={24} />
<Avatar {...args} size={16} /> <Avatar {...args} size={20} />
</Stack> <Avatar {...args} size={16} />
</Stack> </Stack>
<Stack space flexDirection="column"> <Stack space alignItems="flex-start">
<Stack space alignItems="flex-start"> <Avatar {...args} src={undefined} size={80} />
<Avatar <Avatar {...args} src={undefined} size={56} />
{...args} <Avatar {...args} src={undefined} size={48} />
src={undefined} <Avatar {...args} src={undefined} size={32} />
size={80} <Avatar {...args} src={undefined} size={28} />
indicator="online" <Avatar {...args} src={undefined} size={24} />
colorHash={[ <Avatar {...args} src={undefined} size={20} />
[3, 30], <Avatar {...args} src={undefined} size={16} />
[2, 10], </Stack>
[5, 5],
[3, 14],
[5, 4],
[4, 19],
[3, 16],
[4, 0],
[5, 28],
[4, 13],
[4, 15],
]}
/>
<Avatar
{...args}
src={undefined}
size={56}
indicator="online"
colorHash={[
[3, 30],
[2, 10],
[5, 5],
[3, 14],
[5, 4],
[4, 19],
[3, 16],
[4, 0],
[5, 28],
[4, 13],
[4, 15],
]}
/>
<Avatar
{...args}
src={undefined}
size={48}
indicator="online"
colorHash={[
[3, 30],
[2, 10],
[5, 5],
[3, 14],
[5, 4],
[4, 19],
[3, 16],
[4, 0],
[5, 28],
[4, 13],
[4, 15],
]}
/>
<Avatar
{...args}
src={undefined}
size={32}
indicator="online"
colorHash={[
[3, 30],
[2, 10],
[5, 5],
[3, 14],
[5, 4],
[4, 19],
[3, 16],
[4, 0],
[5, 28],
[4, 13],
[4, 15],
]}
/>
</Stack> </Stack>
</Stack> </Stack>
</Stack> </Stack>

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

@ -216,7 +216,16 @@ const Avatar = (props: AvatarProps) => {
color="$white-100" color="$white-100"
select={false} select={false}
> >
{props.name.slice(0, 2).toUpperCase()} {props.name
.slice(
0,
props.type === 'user' &&
props.size < 28 &&
(!props.indicator || props.indicator === 'none')
? 1
: 2
)
.toUpperCase()}
</Text> </Text>
)} )}
</Fallback> </Fallback>
@ -267,7 +276,7 @@ const Avatar = (props: AvatarProps) => {
color="$white-100" color="$white-100"
select={false} select={false}
> >
{props.name.slice(0, 2).toUpperCase()} {props.name.slice(0, props.size < 24 ? 1 : 2).toUpperCase()}
</Text> </Text>
</Fallback> </Fallback>
) )