web: add red border to failing steps

[jomsie]

fixes #4111

Release Note

\note{feature}{
  We noticed after \link{PR #4058}{https://github.com/concourse/concourse/pull/4058} 
  (where build steps are collapsed by default) that it wasn't very easy to see failing steps.
  
  Now a failed step has a simple red border around its header and an erroring step has an
  orange border
  \link{#4164}{https://github.com/concourse/concourse/pull/4164} 
}

[vito]

👻 Scope creeping, but can we do the same for errored steps? Those are in the same boat: they cause a build failure (well, error) but are hard to notice when auto-collapsed.

I don't think there are any other states we care about. 🤔

Also maybe we can just explicitly write out all the states here so the compiler will help us find places to update if/when we add another state.

[jamieklassen]

Here's a prototype, but let's get @Lindsayauchin in on this sooner rather than later.

[Lindsayauchin]

@vito @pivotal-jamie-klassen Makes sense. I like it!

[vito]

@Lindsayauchin @pivotal-jamie-klassen More 👻 scope creep: what do you think of adding a yellow border for running steps, since they're auto-collapsed too?

some context: #2608 (comment)

[vito]

💯

[jomsie]

wats test failing, running locally it sometimes passes when it doesn't timeout

[cirocosta]

hey, I just wanted to say that this is amazing ❤️ ! thank you all! (@xtremerui shares the same thought!)