From 56ffadde123d9b745ab79a4e413ff95a67735c25 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Mon, 18 Mar 2024 12:39:17 +0100
Subject: [PATCH 1/2] extract sidebarAvatarSize to variable

---
 src/components/AvatarSkeleton.tsx | 4 ++--
 src/styles/index.ts               | 6 +++---
 src/styles/variables.ts           | 1 +
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/AvatarSkeleton.tsx b/src/components/AvatarSkeleton.tsx
index a6781448c3ba..273143f76098 100644
--- a/src/components/AvatarSkeleton.tsx
+++ b/src/components/AvatarSkeleton.tsx
@@ -6,12 +6,12 @@ import SkeletonViewContentLoader from './SkeletonViewContentLoader';
 
 function AvatarSkeleton() {
     const theme = useTheme();
-    const skeletonCircleRadius = variables.componentSizeSmall / 2;
+    const skeletonCircleRadius = variables.sidebarAvatarSize / 2;
 
     return (
         <SkeletonViewContentLoader
             animate
-            height={variables.componentSizeSmall}
+            height={variables.sidebarAvatarSize}
             backgroundColor={theme.skeletonLHNIn}
             foregroundColor={theme.skeletonLHNOut}
         >
diff --git a/src/styles/index.ts b/src/styles/index.ts
index df89cd823fa4..50a9743f1124 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1443,9 +1443,9 @@ const styles = (theme: ThemeColors) =>
         },
 
         sidebarAvatar: {
-            borderRadius: 28,
-            height: 28,
-            width: 28,
+            borderRadius: variables.sidebarAvatarSize,
+            height: variables.sidebarAvatarSize,
+            width: variables.sidebarAvatarSize,
         },
 
         selectedAvatarBorder: {
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 0ebc4e60991f..acb5dc90a850 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -199,6 +199,7 @@ export default {
     oldDotWireframeIconHeight: 143.28,
     sectionIllustrationHeight: 220,
     photoUploadPopoverWidth: 335,
+    sidebarAvatarSize: 28,
 
     // The height of the empty list is 14px (2px for borders and 12px for vertical padding)
     // This is calculated based on the values specified in the 'getGoogleListViewStyle' function of the 'StyleUtils' utility

From a78f71309914a106db224b2e0fb309188511ba68 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Mon, 18 Mar 2024 13:04:51 +0100
Subject: [PATCH 2/2] move the variable next to iconBottomBar

---
 src/styles/variables.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index acb5dc90a850..d911a2fc4b0e 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -83,6 +83,7 @@ export default {
     iconSizeSuperLarge: 60,
     iconSizeUltraLarge: 120,
     iconBottomBar: 24,
+    sidebarAvatarSize: 28,
     iconHeader: 48,
     emojiSize: 20,
     emojiLineHeight: 28,
@@ -199,7 +200,6 @@ export default {
     oldDotWireframeIconHeight: 143.28,
     sectionIllustrationHeight: 220,
     photoUploadPopoverWidth: 335,
-    sidebarAvatarSize: 28,
 
     // The height of the empty list is 14px (2px for borders and 12px for vertical padding)
     // This is calculated based on the values specified in the 'getGoogleListViewStyle' function of the 'StyleUtils' utility