Differentiate warning toast from error toast style

[twschiller]

Context

• Our warnings currently have the same style as errors
• This is misleading for users
• The toast library we're using doesn't have a warning style: More default toast types (toast.info(), toast.warn()) timolins/react-hot-toast#29

Related Code

• pixiebrix-extension/src/utils/notify.tsx

  Line 137 in 98c8221

  if (type === "warning") {

• Example of warning call:

  pixiebrix-extension/src/pageEditor/hooks/useCreate.ts

  Line 143 in 98c8221

  notify.warning({

Design Tasks

• @icugideon: I think we just need color for the icon/border?

Screenshot

[fregante]

To avoid extra code, we can probably vendor this fork until it's merged:

• feat: add toast.warn() function timolins/react-hot-toast#168

[icugideon]

Design Tasks
@icugideon: I think we just need color for the icon/border?

Yes. The icon would also need to connote warning.

Assets can be found here on Figma

[BALEHOK]

To avoid extra code, we can probably vendor this fork until it's merged:

• feat: add toast.warn() function timolins/react-hot-toast#168

Thanks for the suggestion. I see the PR has been open for several months without attention from the project maintainers, there's no certainty when (if) it will be merged.
Our custom code on the other hand is just the border color and icon, i.e. something that we'd have to write even if react-hot-toast supported warning.
What is the benefit of switching to the fork? It seems to me we can stay with the main version of the package and apply our styles.