Change background color of orphaned objects

[ludd98]

Summary

Hi

The colour used for orphaned object is to light/simular to an normal object, it makes it to hard to find orphaned objects in the view.

argo-cd/ui/src/app/applications/components/application-resource-tree/application-resource-tree.scss

Line 107 in b3eda0f

background-color: themed('light-argo-gray-2') !important;

Motivation

I cant see the difference between normal and orphaned object in the UI. light-argo-gray-2 is to simular, it makes it hard to find orphane objects. If you for ex have lots of objects, then scanning for the orphaned ones is diffucult, when the colour is nearly the same.

Proposal

This is an easy fix, change the colour to a stronger one that stands out more againt the normal objects, gray-2 is not so good, or make it so that orphaned objects stand out more with for ex. a css border or simular.

[dhruvac29]

Hi, I’d like to work on this if maintainers agree with the proposed direction.

Before opening a PR, would changing the orphaned object styling to be more visually distinct be acceptable? I can look at either using a stronger background color or adding a subtle border/indicator so orphaned resources are easier to scan without breaking the existing UI theme.

[doshiprakshal]

Hi, I can work on this as well if @dhruvac29 hasnt started working on it yet.

[dhruvac29]

@doshiprakshal i started to work on that and will finish today. Thanks!!

[dhruvac29]

Opened a PR for this: #27756

I kept the change scoped to the existing orphaned resource tree styling by adding a small warning-color accent while preserving the current background color.