Display deprecation message as a warning

controlpanel/frontend/jinja2/tool-list.html

@@ -113,14 +113,14 @@ <h2 class="govuk-heading-m">{{ tool_info.name }}</h2>
   </div>
 </div>
 
-<div id="{{ chart_name }}-deprecation-message" {% if not deployment or deployment.deprecated_message == "" %}class="govuk-visually-hidden"{% endif %}><p class="govuk-body">{{ deployment.deprecated_message }}</p></div>
+<div id="{{ chart_name }}-deprecation-message" class="govuk-warning-text{% if not deployment or not deployment.deprecated_message %} govuk-visually-hidden{% endif %}"><span class="govuk-warning-text__icon" aria-hidden="true">!</span><strong class="govuk-warning-text__text"><span class="govuk-visually-hidden">Warning</span>{{ deployment.deprecated_message }}</strong></div>
 
 {% if deployment and deployment.tool_id == -1 %}
 
 <div>
   <p class="govuk-body">
     Your previous deployment <b> ({{ deployment.chart_name}}-{{ deployment.chart_version }}: {{ deployment.image_tag }}) </b>
-    is no longer maintained. You will need to deploy a new version from the dropdown list.
+    has been retired. You will need to deploy a new version from the dropdown list.
   </p>
 </div>
 {% endif %}

controlpanel/frontend/static/javascripts/modules/tool-status.js

@@ -166,11 +166,11 @@ moj.Modules.toolStatus = {
     const deprecationMessage = selected.attributes["data-deprecated-message"].value;
 
     if (isDeprecated) {
-      deprecationMessageElement.firstChild.innerText = deprecationMessage;
+      deprecationMessageElement.lastChild.innerText = deprecationMessage;
       deprecationMessageElement.classList.remove(this.hidden);
     } else {
       deprecationMessageElement.classList.add(this.hidden);
-      deprecationMessageElement.firstChild.innerText = "";
+      deprecationMessageElement.lastChild.innerText = "";
     }
   }
 };