My thinking is this:

• Until we actually use these on other pages, it makes more sense to keep these with the page they belong to.
• Once we want to use them on other pages then it'd be very awkward to keep them with this page, so we'll naturally extract them.

So rather than future-proofing now, I want to organically transform the structure. It's very cheap, and the benefit is that each state is a valid one, plus, if we change our plans, we're still in a good place.

I've updated the text colors:

But then, with an eyedropper Chrome plugin, I couldn't confirm the real colors that get rendered because it seems to be broken even for the figma 🤯:

But then, in the CSS, I use the correct dark theme background colors: #d68cf3 and #51cf66. So they should be correct even if they render differently by the time the screenshot reaches the figma.

I've also replaced some literals with the matching CSS variables.

Okay, just realized I made a mistake with not updating the checkmark icon and some text colors. Now it's like this:

The reds are a best-effort.

Thanks. I did not specify a red version anywhere, I think we should remove that for now.

@rrhyne: Sure. What style shall I use for the "Invites not sent" error notification and its sisters?

...or, broader question because I might be off-track with the whole notification direction: how should I communicate it when an action (like sending the invites) fails?

Roger. I put together these warning states:

https://www.figma.com/design/FMSdn1oKccJRHQPgf7053o/Cody-PLG-GA?node-id=5082-11931&t=35JUr8zVHPGQAO13-4

We shouldn't go all red there as there isn't anything critical happening.

@rrhyne the updated designs, now with the new icons:

If it looks roughly right, could you stamp this PR? I can handle further tweaks in a follow-up, but I want to use these notifications on other pages, and for that, it'd be nice to have these new designs, even if they're not final.