From 70cb660cd2f1a0f5f1aa543dcac8c6b3cd81afcc Mon Sep 17 00:00:00 2001
From: Felicio Mununga <felicio@users.noreply.github.com>
Date: Fri, 15 Dec 2023 14:22:31 +0100
Subject: [PATCH] update avatar initials (#515)

* update avatar initials

* Create itchy-steaks-leave.md
---
 .changeset/itchy-steaks-leave.md              |   5 +
 .../components/src/avatar/avatar.stories.tsx  | 338 +++++++++---------
 packages/components/src/avatar/avatar.tsx     |  13 +-
 3 files changed, 192 insertions(+), 164 deletions(-)
 create mode 100644 .changeset/itchy-steaks-leave.md

diff --git a/.changeset/itchy-steaks-leave.md b/.changeset/itchy-steaks-leave.md
new file mode 100644
index 00000000..44753420
--- /dev/null
+++ b/.changeset/itchy-steaks-leave.md
@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+update avatar initials
diff --git a/packages/components/src/avatar/avatar.stories.tsx b/packages/components/src/avatar/avatar.stories.tsx
index ccfe15fa..628bd2e1 100644
--- a/packages/components/src/avatar/avatar.stories.tsx
+++ b/packages/components/src/avatar/avatar.stories.tsx
@@ -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>
diff --git a/packages/components/src/avatar/avatar.tsx b/packages/components/src/avatar/avatar.tsx
index b4c1752f..9f0ce8f7 100644
--- a/packages/components/src/avatar/avatar.tsx
+++ b/packages/components/src/avatar/avatar.tsx
@@ -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>
         )