Skip to content

Commit

Permalink
update avatar initials (#515)
Browse files Browse the repository at this point in the history 
* update avatar initials

* Create itchy-steaks-leave.md
  • Loading branch information
@felicio
felicio authored Dec 15, 2023
1 parent 92ff3bd commit 70cb660
Show file tree
Hide file tree
Showing 3 changed files with 192 additions and 164 deletions.
5 changes: 5 additions & 0 deletions .changeset/itchy-steaks-leave.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@status-im/components": patch
---

update avatar initials
338 changes: 176 additions & 162 deletions packages/components/src/avatar/avatar.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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>
Expand Down
13 changes: 11 additions & 2 deletions packages/components/src/avatar/avatar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
)
Expand Down

0 comments on commit 70cb660

Please sign in to comment.