From 700f172f0d537b5454d85c5fad5e9aa3f76c26b3 Mon Sep 17 00:00:00 2001
From: Matthew Birtch <mattbirtch@gmail.com>
Date: Mon, 18 Mar 2024 17:32:13 -0400
Subject: [PATCH] changed avatar tokens not to be so custom

---
 .../__snapshots__/admin_user_card.test.tsx.snap           | 8 ++++----
 .../admin_console/admin_user_card/admin_user_card.scss    | 2 +-
 .../admin_console/admin_user_card/admin_user_card.tsx     | 4 ++--
 .../channel_intro_message/channel_intro_message.tsx       | 4 ++--
 .../src/components/widgets/users/avatar/avatar.scss       | 2 +-
 .../src/components/widgets/users/avatar/avatar.tsx        | 8 ++++----
 .../src/components/widgets/users/avatars/avatars.scss     | 2 +-
 7 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap b/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap
index 8668b1edc2..ed369ec41a 100644
--- a/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match d
           >
             <img
               alt="user profile image"
-              class="Avatar Avatar-xxl"
+              class="Avatar Avatar-xxxxl"
               loading="lazy"
               src="/api/v4/users/1234/image"
               tabindex="-1"
@@ -79,7 +79,7 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match s
           >
             <img
               alt="user profile image"
-              class="Avatar Avatar-xxl"
+              class="Avatar Avatar-xxxxl"
               loading="lazy"
               src="/api/v4/users/1234/image"
               tabindex="-1"
@@ -134,7 +134,7 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match s
           >
             <img
               alt="user profile image"
-              class="Avatar Avatar-xxl"
+              class="Avatar Avatar-xxxxl"
               loading="lazy"
               src="/api/v4/users/1234/image"
               tabindex="-1"
@@ -187,7 +187,7 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match s
           >
             <img
               alt="user profile image"
-              class="Avatar Avatar-xxl"
+              class="Avatar Avatar-xxxxl"
               loading="lazy"
               src="/api/v4/users/1234/image"
               tabindex="-1"
diff --git a/webapp/channels/src/components/admin_console/admin_user_card/admin_user_card.scss b/webapp/channels/src/components/admin_console/admin_user_card/admin_user_card.scss
index f3134e0315..a46df10300 100644
--- a/webapp/channels/src/components/admin_console/admin_user_card/admin_user_card.scss
+++ b/webapp/channels/src/components/admin_console/admin_user_card/admin_user_card.scss
@@ -21,7 +21,7 @@
     background-color: #295eb9;
 }
 
-.AdminUserCard__header .Avatar.Avatar-xxl {
+.AdminUserCard__header .Avatar.Avatar-xxxxl {
     border: solid 2px #fff;
 }
 
diff --git a/webapp/channels/src/components/admin_console/admin_user_card/admin_user_card.tsx b/webapp/channels/src/components/admin_console/admin_user_card/admin_user_card.tsx
index d539794b30..e616b4e4ed 100644
--- a/webapp/channels/src/components/admin_console/admin_user_card/admin_user_card.tsx
+++ b/webapp/channels/src/components/admin_console/admin_user_card/admin_user_card.tsx
@@ -31,7 +31,7 @@ const AdminUserCard = ({isLoading = false, ...props}: Props) => {
                 <div className='AdminUserCard__header'>
                     <ProfilePicture
                         src=''
-                        size='xxl'
+                        size='xxxxl'
                         wrapperClass='admin-user-card'
                     />
                 </div>
@@ -54,7 +54,7 @@ const AdminUserCard = ({isLoading = false, ...props}: Props) => {
             <div className='AdminUserCard__header'>
                 <ProfilePicture
                     src={Client4.getProfilePictureUrl(props.user.id, props.user.last_picture_update)}
-                    size='xxl'
+                    size='xxxxl'
                     wrapperClass='admin-user-card'
                     userId={props.user.id}
                 />
diff --git a/webapp/channels/src/components/post_view/channel_intro_message/channel_intro_message.tsx b/webapp/channels/src/components/post_view/channel_intro_message/channel_intro_message.tsx
index 387a1a03f3..c2ada8251c 100644
--- a/webapp/channels/src/components/post_view/channel_intro_message/channel_intro_message.tsx
+++ b/webapp/channels/src/components/post_view/channel_intro_message/channel_intro_message.tsx
@@ -175,7 +175,7 @@ function createGMIntroMessage(
                 <ProfilePicture
                     key={'introprofilepicture' + profile.id}
                     src={Utils.imageURLForUser(profile.id, profile.last_picture_update)}
-                    size='xl-custom-GM'
+                    size='xxl'
                     userId={profile.id}
                     username={profile.username}
                 />
@@ -265,7 +265,7 @@ function createDMIntroMessage(
                 <div className='post-profile-img__container channel-intro-img'>
                     <ProfilePicture
                         src={src}
-                        size='xl-custom-DM'
+                        size='xxxl'
                         status={teammate.is_bot ? '' : channel.status}
                         userId={teammate?.id}
                         username={teammate?.username}
diff --git a/webapp/channels/src/components/widgets/users/avatar/avatar.scss b/webapp/channels/src/components/widgets/users/avatar/avatar.scss
index a2786a62fd..aa22a37ace 100644
--- a/webapp/channels/src/components/widgets/users/avatar/avatar.scss
+++ b/webapp/channels/src/components/widgets/users/avatar/avatar.scss
@@ -55,7 +55,7 @@
         font-size: 18px;
     }
 
-    &.Avatar-xxl {
+    &.Avatar-xxxxl {
         width: 128px;
         min-width: 128px;
         height: 128px;
diff --git a/webapp/channels/src/components/widgets/users/avatar/avatar.tsx b/webapp/channels/src/components/widgets/users/avatar/avatar.tsx
index 3f6b1cd1a8..2e946e1946 100644
--- a/webapp/channels/src/components/widgets/users/avatar/avatar.tsx
+++ b/webapp/channels/src/components/widgets/users/avatar/avatar.tsx
@@ -27,11 +27,11 @@ export const getAvatarWidth = (size: TAvatarSizeToken) => {
         return 36;
     case 'xl':
         return 50;
-    case 'xl-custom-DM':
-        return 96;
-    case 'xl-custom-GM':
-        return 72;
     case 'xxl':
+        return 72;
+    case 'xxxl':
+        return 96;
+    case 'xxxxl':
         return 128;
     }
     return 0;
diff --git a/webapp/channels/src/components/widgets/users/avatars/avatars.scss b/webapp/channels/src/components/widgets/users/avatars/avatars.scss
index 7da42625f1..e94cff3431 100644
--- a/webapp/channels/src/components/widgets/users/avatars/avatars.scss
+++ b/webapp/channels/src/components/widgets/users/avatars/avatars.scss
@@ -37,7 +37,7 @@
         --border-width: 2px;
     }
 
-    &.Avatars___xxl {
+    &.Avatars___xxxxl {
         --offset: -26px;
         --border-width: 5px;
     }