Add "Trial mode" tag next to the service name

app/assets/stylesheets/components/navigation.scss

@@ -9,26 +9,15 @@
   $padding-bottom: 17px;
 
   &-service-name,
-  &-organisation-link {
+  &-organisation-link,
+  &-status-tag {
     float: left;
   }
 
-  &-service-type {
-
-    @include govuk-font(16, $weight: bold);
-    position: relative;
-    display: inline-block;
+  &-status-tag {
     margin-left: govuk-spacing(2);
-    padding: 0 govuk-spacing(1);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-
-    &--suspended {
-      background: mix(black, govuk-colour('black', $variant: "tint-95"), 7%);
-      color: mix(govuk-colour('black', $variant: "tint-25"), govuk-colour('black'));
-      box-shadow: 0 -3px 0 0 mix(black, govuk-colour('black', $variant: "tint-95"), 7%);
-    }
-
+    margin-bottom: govuk-spacing(1);
+    letter-spacing: 0.02em;
   }
 
   &-service-back-to,
@@ -72,11 +61,15 @@
     }
   }
 
+  &-service-name {
+    margin-bottom: govuk-spacing(1);
+  }
+
   &-organisation-link {
 
     box-sizing: border-box;
     margin-bottom: govuk-spacing(1);
-    
+
     &:focus:before {
       border-color: govuk-functional-colour(focus-text);
     }
@@ -147,4 +140,4 @@
 
   }
 
-}
+}

app/templates/service_navigation.html

@@ -1,10 +1,21 @@
+{% from "govuk_frontend_jinja/components/tag/macro.html" import govukTag %}
+
 {% macro navigation_service_name(service) %}
   <div class="navigation-service-name govuk-!-font-weight-bold">
     {{ service.name }}
-    {% if not service.active %}
-      <span class="navigation-service-type navigation-service-type--suspended">Suspended</span>
-    {% endif %}
   </div>
+  {% if service.trial_mode %}
+    {{ govukTag({
+      "text": "Trial mode",
+      "classes": "govuk-tag--grey navigation-status-tag",
+    }) }}
+  {% endif %}
+  {% if not service.active %}
+    {{ govukTag({
+      "text": "Archived",
+      "classes": "govuk-tag--orange navigation-status-tag",
+    }) }}
+  {% endif %}
 {% endmacro %}
 
 {% macro service_navigation(user, service) %}

tests/app/main/views/test_dashboard.py

@@ -1835,7 +1835,7 @@ def test_org_breadcrumbs_show_if_user_is_platform_admin(
     )
 
 
-def test_breadcrumb_shows_if_service_is_suspended(
+def test_breadcrumb_shows_if_service_is_archived(
     mock_get_template_statistics,
     mock_get_service_templates_when_no_templates_exist,
     mock_has_no_jobs,
@@ -1847,12 +1847,38 @@ def test_breadcrumb_shows_if_service_is_suspended(
     client_request,
     mocker,
 ):
-    service_one_json = service_json(SERVICE_ONE_ID, active=False)
+    service_one_json = service_json(SERVICE_ONE_ID, active=False, restricted=False)
     client_request.login(platform_admin_user, service=service_one_json)
 
     page = client_request.get("main.service_dashboard", service_id=SERVICE_ONE_ID)
 
-    assert "Suspended" in page.select_one(".navigation-service-name").text
+    assert normalize_spaces(page.select_one(".navigation-status-tag").text) == "Archived"
+
+
+@pytest.mark.parametrize("service_restricted", [True, False])
+def test_service_navigation_shows_if_service_is_in_trial_mode(
+    mock_get_service_templates_when_no_templates_exist,
+    mock_has_no_jobs,
+    mock_get_unsubscribe_requests_statistics,
+    mock_get_returned_letter_statistics_with_no_returned_letters,
+    api_user_active,
+    client_request,
+    service_restricted,
+    mocker,
+):
+    service_one = service_json(
+        SERVICE_ONE_ID,
+        users=[api_user_active["id"]],
+        restricted=service_restricted,
+    )
+    mocker.patch("app.service_api_client.get_service", return_value={"data": service_one})
+
+    page = client_request.get("main.service_dashboard", service_id=SERVICE_ONE_ID)
+
+    if service_restricted:
+        assert normalize_spaces(page.select_one(".navigation-status-tag").text) == "Trial mode"
+    else:
+        assert not page.select_one(".navigation-status-tag")
 
 
 @pytest.mark.parametrize(