Update all components that shows a message when not configured properly

[hlayisanimazuze]

Update all components that shows a message when not configured properly

[AlexanderSlavchovUX]

Hi @nthangeniphumudzo please see some mockups below.

I have used a similar look and feel to the existing components but shrunk them down to a smaller size. The idea here is that the blue indicates something with a friendly tone that a component needs configuration and in yellow when there is a configuration but with an error such as an invalid value.

When hovering over the component it immediately shows a tooltip to give some further explanation on configuration or errors.

I have also omitted the 'X' button to dismiss them as I don't see how we can remove these error messages without creating an issue where there is an invisible component.

Lastly, I have also included a Figma prototype so you can use it to get a feel for how it works. Please open the link and hover over different components in the newly created area.

https://www.figma.com/proto/OPgxeZhTU3hYIJfe03rLcm/Github-Issues?node-id=23-549&t=2OYTUGt10TxbCMYa-1