Show an indication that a broadcast service is live

We want it to be very clear whether you’re in live or training mode
because:
- you may be switching back and forth between them
- doing something in live mode when you think you’re in training mode
  would have… consequences

By adding a label next to the service name you’ll will have some
indication, on every page, which mode you are in.

Style of the label is based on the ‘Tag’ component from the Design
System:
https://design-system.service.gov.uk/components/tag/#showing-multiple-statuses

app/assets/stylesheets/components/navigation.scss

@@ -20,19 +20,27 @@
 
   &-service-type {
 
+    @include bold-16;
+    position: relative;
+    display: inline-block;
+    margin-left: govuk-spacing(2);
+    padding: 0 govuk-spacing(1);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+
     &--training {
-      @include bold-16;
-      position: relative;
-      display: inline-block;
-      margin-left: govuk-spacing(2);
-      padding: 0 govuk-spacing(1);
       background: $grey-3;
       color: mix($grey-1, $text-colour);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
       box-shadow: 0 -3px 0 0 $grey-3;
     }
 
+    &--live {
+      // This uses new Design System colours to match .govuk-tag--red
+      background: #F6D7D2;
+      color: #942514;
+      box-shadow: 0 -3px 0 0 #F6D7D2;
+    }
+
   }
 
   &-service-switch,

app/templates/withnav_template.html

@@ -17,8 +17,12 @@
       {% endif %}
       <div class="navigation-service-name govuk-!-font-weight-bold">
         {{ current_service.name }}
-        {% if current_service.has_permission('broadcast') and current_service.trial_mode %}
-          <span class="navigation-service-type--training navigation-service-type--training--with-arrow">Training</span>
+        {% if current_service.has_permission('broadcast') %}
+          {% if current_service.trial_mode %}
+            <span class="navigation-service-type navigation-service-type--training">Training</span>
+          {% else %}
+            <span class="navigation-service-type navigation-service-type--live">Live</span>
+          {% endif %}
         {% endif %}
       </div>
       <a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a>

tests/app/main/views/test_broadcast.py

@@ -184,6 +184,48 @@ def test_broadcast_tour_page_4_shows_service_name(
     )
 
 
+@pytest.mark.parametrize('trial_mode, selector, expected_text, expected_tagged_text', (
+    (
+        True,
+        '.navigation-service-type.navigation-service-type--training',
+        'service one Training Switch service',
+        'Training',
+    ),
+    (
+        False,
+        '.navigation-service-type.navigation-service-type--live',
+        'service one Live Switch service',
+        'Live',
+    ),
+))
+def test_broadcast_service_shows_live_or_training(
+    client_request,
+    service_one,
+    mock_get_no_broadcast_messages,
+    mock_get_service_templates_when_no_templates_exist,
+    trial_mode,
+    selector,
+    expected_text,
+    expected_tagged_text,
+):
+    service_one['permissions'] += ['broadcast']
+    service_one['restricted'] = trial_mode
+    page = client_request.get(
+        '.broadcast_dashboard',
+        service_id=SERVICE_ONE_ID,
+    )
+    assert normalize_spaces(
+        page.select_one('.navigation-service').text
+    ) == (
+        expected_text
+    )
+    assert normalize_spaces(
+        page.select_one('.navigation-service').select_one(selector).text
+    ) == (
+        expected_tagged_text
+    )
+
+
 @pytest.mark.parametrize('step_index', (0, 7))
 def test_broadcast_tour_page_404s_out_of_range(
     client_request,