Align deposit status colour coding across pages

[bradyv]

Description

Presently we apply colour coding to deposit status differently depending on where they're displayed. It would be great to bring consistency to the visual cues and reduce some of the cognitive load of understanding deposits.

Acceptance criteria

Consistent colours are used throughout WooPayments to represent disputes at each stage.

• Pending -> yellow
• In transit -> blue
• Paid -> green
• Failed -> red
• Canceled -> gray

[haszari]

Nice quick-fix. Not urgent but a great thing to tidy up so medium priority.

[naman03malhotra]

@bradyv can you please share the color codes you'd like us use for consistent visual behavior?

[haszari]

can you please share the color codes you'd like us use for consistent visual behavior?

FYI @naman03malhotra @bradyv isn't working with us any longer (though maybe he'll reply as a civilian!)

I'd recommend using the existing colours – we already have colours in place, but we're just using them inconsistently. If there are gaps, feel free to find colours from elsewhere in the UI and/or colour schemes/libraries.

@rogermattic or @elizaan36 can advise and review, though there's no need to wait on design to start implementing! Possibly no need for design on this if we're using existing colours to make dispute status consistent across all UI/screens.

[naman03malhotra]

I'd recommend using the existing colours – we already have colours in place, but we're just using them inconsistently

@haszari My question largely is, if we have two variations of the same color which one to standardize. My step would be to find inconsistency in colors and ask design which one to pick.

[rogermattic]

I'd recommend using the existing colours – we already have colours in place, but we're just using them inconsistently. If there are gaps, feel free to find colours from elsewhere in the UI and/or colour schemes/libraries.

@rogermattic or @elizaan36 can advise and review, though there's no need to wait on design to start implementing! Possibly no need for design on this if we're using existing colours to make dispute status consistent across all UI/screens.

1000% agree! Please use the existing colours.

My question largely is, if we have two variations of the same color which one to standardize. My step would be to find inconsistency in colors and ask design which one to pick.

Would you be able to check the colours and the style here in this Figma