[HOLD for payment 2022-03-08] Avatars no longer have a default background color behind them

@puneetlath

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Action Performed:

Open app
Hit on search and check loading avatars

Expected Result:

Avatars should have grey background

Actual Result:

Avatars have no background

Workaround:

unknown

Platform:

Where is this issue occurring?

Web
iOS
Android
Desktop App
Mobile Web

Version Number: 1.1.33-3
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @puneetlath
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1643299405098100

View all open jobs on GitHub

@deetergp

Triggered auto assignment to @deetergp (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

Definitely something contributors could work on.

@dylanexpensify

Triggered auto assignment to @dylanexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

Proposal

App/src/components/Avatar.js

Lines 43 to 46 in ef91a04

    
           const imageStyle = [ 
        
               this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal, 
        
               ...this.props.imageStyles, 
        
           ];

+ import themeColors from '../styles/themes/default';


        const imageStyle = [
            this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal,
+           {
+             backgroundColor: themeColors.icon,
+           },
            ...this.props.imageStyles,
        ];

Proposal
Addition of backgroundColor in avatarNormal and avatarSmall in src/styles/styles.js solves the issue.

    avatarNormal: {
        height: variables.componentSizeNormal,
        width: variables.componentSizeNormal,
        borderRadius: variables.componentSizeNormal,
+        backgroundColor: themeColors.icon
    },

    avatarSmall: {
        height: variables.avatarSizeSmall,
        width: variables.avatarSizeSmall,
        borderRadius: variables.avatarSizeSmall,
+        backgroundColor: themeColors.icon
    },

@sobitneupane

@sobitneupane is same as mine. I invest my time to find reason and the background colors used in the main header avatar. Also, I think the proposal is not the final implementation. It should state the reason and a possible solution. Please correct me if I am wrong.

👍 - Sounds good

@sobitneupane

@sobitneupane feel free to submit a PR.

@dylanexpensify could you please assign @sobitneupane to the issue? Thanks

@sobitneupane

@sobitneupane gentle bump to submit a PR ^^

@rushatgabhane

@rushatgabhane I found console error in the PR #7742 so have raised a complementary PR #7845 to fix the issue.
SORRY for inconvenience.

@sobitneupane

@sobitneupane thanks for noticing and making the changes!

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.40-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

If no regressions arise, payment will be issued on 2022-03-08. 🎊

@sobitneupane

@sobitneupane could you please apply to the job to be paid out?

@sobitneupane

@sobitneupane could you please apply to the job to be paid out?

Applied.

@sobitneupane

@sobitneupane @rushatgabhane offers sent!

Payments sent, contracts ended, posting closed!

Navigation Menu

Repository navigation

[HOLD for payment 2022-03-08] Avatars no longer have a default background color behind them #7494

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

Proposal

16 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const imageStyle = [
	this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal,
	...this.props.imageStyles,
	];

[HOLD for payment 2022-03-08] Avatars no longer have a default background color behind them #7494

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

Activity

MelvinBot commented on Feb 1, 2022

deetergp commented on Feb 1, 2022

MelvinBot commented on Feb 1, 2022

mdneyazahmad commented on Feb 2, 2022

Proposal

sobitneupane commented on Feb 2, 2022

mdneyazahmad commented on Feb 2, 2022

sobitneupane commented on Feb 2, 2022

16 remaining items

AndrewGable commented on Feb 7, 2022

rushatgabhane commented on Feb 9, 2022

rushatgabhane commented on Feb 14, 2022

sobitneupane commented on Feb 20, 2022

rushatgabhane commented on Feb 21, 2022

botify commented on Mar 1, 2022

dylanexpensify commented on Mar 8, 2022

sobitneupane commented on Mar 8, 2022

dylanexpensify commented on Mar 8, 2022

dylanexpensify commented on Mar 8, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions