messages: clean up messages and errors containers

messages: clean up messages and errors containers

Refactor the messages container to make use of message.tags [1] which
allows for more customization for each level (e.g. success, warning,
error, etc.) of a message through CSS selectors. As basic proof of
concept, customize the text color of each existing message level. Also,
this addition resolves a TODO by stephenfin in the previous code.

Move the errors container after the messages container in the DOM in the
base.html template so that every template can share the same errors
container. Also, add a background color to the errors container so that
both containers blend in as a uniform block. Add bullet points to each
error item in the list of errors.

Change both the messages and errors containers to always exist in
the DOM. With this, the addition of update and error messages is simpler
because it eliminates the need to create the containers if they don't
exist. These changes will be useful in a following patch that introduces
an internal JS module to make client-side requests to the REST API.

[1] https://docs.djangoproject.com/en/3.2/ref/contrib/messages/#message-tags

Signed-off-by: Raxel Gutierrez <raxel@google.com>
Reviewed-by: Stephen Finucane <stephen@that.guru>
[dja: converted HTML comment to django template comment, thanks sfin]
Signed-off-by: Daniel Axtens <dja@axtens.net>