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 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 => (
<Stack space flexDirection="row">
<Stack space flexDirection="column">
<Stack space alignItems="flex-start">
<Avatar
{...args}
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}
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}
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}
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 space flexDirection="row">
<Stack space alignItems="flex-start">
<Avatar
{...args}
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}
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}
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}
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 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 space alignItems="flex-start">
<Avatar {...args} size={80} indicator="online" />
@ -127,95 +209,27 @@ export const User: StoryObj<UserArgs> = {
<Avatar {...args} size={28} indicator="online" />
<Avatar {...args} size={24} indicator="online" />
</Stack>
<Stack space alignItems="flex-start">
<Avatar {...args} size={80} />
<Avatar {...args} size={56} />
<Avatar {...args} size={48} />
<Avatar {...args} size={32} />
<Avatar {...args} size={28} />
<Avatar {...args} size={24} />
<Avatar {...args} size={20} />
<Avatar {...args} size={16} />
</Stack>
</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 space flexDirection="row">
<Stack space alignItems="flex-start">
<Avatar {...args} size={80} />
<Avatar {...args} size={56} />
<Avatar {...args} size={48} />
<Avatar {...args} size={32} />
<Avatar {...args} size={28} />
<Avatar {...args} size={24} />
<Avatar {...args} size={20} />
<Avatar {...args} size={16} />
</Stack>
<Stack space alignItems="flex-start">
<Avatar {...args} src={undefined} size={80} />
<Avatar {...args} src={undefined} size={56} />
<Avatar {...args} src={undefined} size={48} />
<Avatar {...args} src={undefined} size={32} />
<Avatar {...args} src={undefined} size={28} />
<Avatar {...args} src={undefined} size={24} />
<Avatar {...args} src={undefined} size={20} />
<Avatar {...args} src={undefined} size={16} />
</Stack>
</Stack>
</Stack>
</Stack>

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

@ -216,7 +216,16 @@ const Avatar = (props: AvatarProps) => {
color="$white-100"
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>
)}
</Fallback>
@ -267,7 +276,7 @@ const Avatar = (props: AvatarProps) => {
color="$white-100"
select={false}
>
{props.name.slice(0, 2).toUpperCase()}
{props.name.slice(0, props.size < 24 ? 1 : 2).toUpperCase()}
</Text>
</Fallback>
)