From 6d7c71f8a88177d9901f22e87279bd0bf3c87e3e Mon Sep 17 00:00:00 2001
From: Mark Armanious <markarmanus@gmail.com>
Date: Mon, 21 Nov 2022 18:43:42 -0330
Subject: [PATCH 1/7] Modify Avatar to add imageStyles when image error

---
 src/components/Avatar.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Avatar.js b/src/components/Avatar.js
index aa4f6dbf92fd..8a08ded07ec3 100644
--- a/src/components/Avatar.js
+++ b/src/components/Avatar.js
@@ -64,12 +64,14 @@ class Avatar extends PureComponent {
             <View pointerEvents="none" style={this.props.containerStyles}>
                 {_.isFunction(this.props.source) || this.state.imageError
                     ? (
-                        <Icon
-                            src={this.state.imageError ? this.props.fallbackIcon : this.props.source}
-                            height={iconSize}
-                            width={iconSize}
-                            fill={this.state.imageError ? themeColors.offline : this.props.fill}
-                        />
+                        <View style={this.props.imageStyles}>
+                            <Icon
+                                src={this.state.imageError ? this.props.fallbackIcon : this.props.source}
+                                height={iconSize}
+                                width={iconSize}
+                                fill={this.state.imageError ? themeColors.offline : this.props.fill}
+                            />
+                        </View>
                     )
                     : (
                         <Image

From b93905f9006c7ec4f2b9431dda4144bedaedd353 Mon Sep 17 00:00:00 2001
From: Mark Armanious <markarmanus@gmail.com>
Date: Tue, 22 Nov 2022 20:12:20 -0330
Subject: [PATCH 2/7] Change based on comments

---
 src/components/Avatar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Avatar.js b/src/components/Avatar.js
index 8a08ded07ec3..68dab4d57612 100644
--- a/src/components/Avatar.js
+++ b/src/components/Avatar.js
@@ -64,7 +64,7 @@ class Avatar extends PureComponent {
             <View pointerEvents="none" style={this.props.containerStyles}>
                 {_.isFunction(this.props.source) || this.state.imageError
                     ? (
-                        <View style={this.props.imageStyles}>
+                        <View style={imageStyle}>
                             <Icon
                                 src={this.state.imageError ? this.props.fallbackIcon : this.props.source}
                                 height={iconSize}

From 615f4ed49b83dbce0941157b8c93c7d46de21c33 Mon Sep 17 00:00:00 2001
From: Mark Armanious <markarmanus@gmail.com>
Date: Tue, 22 Nov 2022 21:00:49 -0330
Subject: [PATCH 3/7] Address comments

---
 src/components/Avatar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Avatar.js b/src/components/Avatar.js
index 68dab4d57612..ac5ce970bdab 100644
--- a/src/components/Avatar.js
+++ b/src/components/Avatar.js
@@ -64,7 +64,7 @@ class Avatar extends PureComponent {
             <View pointerEvents="none" style={this.props.containerStyles}>
                 {_.isFunction(this.props.source) || this.state.imageError
                     ? (
-                        <View style={imageStyle}>
+                        <View style={[...imageStyle, {backgroundColor: ''}]}>
                             <Icon
                                 src={this.state.imageError ? this.props.fallbackIcon : this.props.source}
                                 height={iconSize}

From 550c1c3de4d877520e9323e1192030176a8de852 Mon Sep 17 00:00:00 2001
From: Mark Armanious <markarmanus@gmail.com>
Date: Tue, 22 Nov 2022 21:09:15 -0330
Subject: [PATCH 4/7] remove inline styling

---
 src/components/Avatar.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Avatar.js b/src/components/Avatar.js
index ac5ce970bdab..8d2b79898c08 100644
--- a/src/components/Avatar.js
+++ b/src/components/Avatar.js
@@ -57,14 +57,17 @@ class Avatar extends PureComponent {
             StyleUtils.getAvatarStyle(this.props.size),
             ...this.props.imageStyles,
         ];
-
+        const iconStyle = [
+            ...imageStyle,
+            {backgroundColor: ''},
+        ];
         const iconSize = StyleUtils.getAvatarSize(this.props.size);
 
         return (
             <View pointerEvents="none" style={this.props.containerStyles}>
                 {_.isFunction(this.props.source) || this.state.imageError
                     ? (
-                        <View style={[...imageStyle, {backgroundColor: ''}]}>
+                        <View style={iconStyle}>
                             <Icon
                                 src={this.state.imageError ? this.props.fallbackIcon : this.props.source}
                                 height={iconSize}

From 57292e770ba9b85a56704d3a033565f5f446a1c8 Mon Sep 17 00:00:00 2001
From: markarmanus <33489215+markarmanus@users.noreply.github.com>
Date: Wed, 23 Nov 2022 01:42:40 -0330
Subject: [PATCH 5/7] Update src/components/Avatar.js

Co-authored-by: Rajat Parashar <parasharrajat@users.noreply.github.com>
---
 src/components/Avatar.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Avatar.js b/src/components/Avatar.js
index 8d2b79898c08..058aba14ea6f 100644
--- a/src/components/Avatar.js
+++ b/src/components/Avatar.js
@@ -58,8 +58,9 @@ class Avatar extends PureComponent {
             ...this.props.imageStyles,
         ];
         const iconStyle = [
-            ...imageStyle,
-            {backgroundColor: ''},
+            StyleUtils.getAvatarStyle(this.props.size),
+            styles.bgTransparent,
+            ...this.props.imageStyles,
         ];
         const iconSize = StyleUtils.getAvatarSize(this.props.size);
 

From 4fc820174338a4bd1175095a131b1cf94a1d6b71 Mon Sep 17 00:00:00 2001
From: Mark Armanious <markarmanus@gmail.com>
Date: Wed, 23 Nov 2022 11:24:32 -0330
Subject: [PATCH 6/7] add import

---
 src/components/Avatar.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Avatar.js b/src/components/Avatar.js
index 058aba14ea6f..7d9f723989b6 100644
--- a/src/components/Avatar.js
+++ b/src/components/Avatar.js
@@ -9,6 +9,7 @@ import CONST from '../CONST';
 import * as StyleUtils from '../styles/StyleUtils';
 import * as Expensicons from './Icon/Expensicons';
 import getAvatarDefaultSource from '../libs/getAvatarDefaultSource';
+import styles from '../styles/styles';
 
 const propTypes = {
     /** Source for the avatar. Can be a URL or an icon. */

From bd377564c463cb9bdd79b9324619eab09ab6a732 Mon Sep 17 00:00:00 2001
From: Mark Armanious <markarmanus@gmail.com>
Date: Wed, 23 Nov 2022 11:44:05 -0330
Subject: [PATCH 7/7] add spacing

---
 src/components/Avatar.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Avatar.js b/src/components/Avatar.js
index 7d9f723989b6..05caa431c970 100644
--- a/src/components/Avatar.js
+++ b/src/components/Avatar.js
@@ -58,6 +58,7 @@ class Avatar extends PureComponent {
             StyleUtils.getAvatarStyle(this.props.size),
             ...this.props.imageStyles,
         ];
+
         const iconStyle = [
             StyleUtils.getAvatarStyle(this.props.size),
             styles.bgTransparent,