Remove uses of inline-styles

app/assets/stylesheets/app.scss

@@ -233,3 +233,23 @@ details .arrow {
 input:-webkit-autofill::first-line {
   @include core-19;
 }
+
+.pilot-disabled {
+  a {
+    background-color: gray;
+    border-color: gray;
+
+    span {
+      color: lightgray;
+    }
+  }
+  .big-number-status {
+    background-color: gray;
+    border-color: gray;
+    color: lightgray;
+  }
+
+  & > * {
+    color: gray;
+  }
+}

app/templates/components/table.html

@@ -183,8 +183,19 @@
   id=None
 ) %}
   {% call field(align='right') %}
+    <style nonce="{{ csp_nonce() }}">
+      {% if id %}
+        #{{id}} .spark-bar-bar {
+          width: {{ count / max_count * 100 }}%;
+        }
+      {% else %}
+        .spark-bar-bar {
+          width: 100%;
+        }
+      {% endif %}
+    </style>
     <span {% if id %}id="{{ id }}"{% endif %} class="spark-bar">
-      <span class="spark-bar-bar" style="width: {{ count / max_count * 100 }}%">
+      <span class="spark-bar-bar">
         {{ '{:,.0f}'.format(count) }}
       </span>
     </span>

app/templates/components/uk_components/header/template.njk

@@ -5,7 +5,7 @@
     <div class="govuk-header__logo">
       <a href="{{ params.homepageUrl | default('/') }}" class="govuk-header__link govuk-header__link--homepage">
         <span class="govuk-header__logotype">
-            <image src="{{ params.assetsPath | default('/assets/images') }}/email-template/us-flag.png" xlink:href="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32"></image>
+            <image src="{{ params.assetsPath | default('/assets/images') }}/email-template/us-flag.png" alt="United States Flag" xlink:href="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32"></image>
           </svg>
           <span class="govuk-header__logotype-text">
             U.S.

app/templates/main_template.html

@@ -33,8 +33,8 @@
 
     {% block skipLink %}
       {{ govukSkipLink({
-        href: '#main-content',
-        text: 'Skip to main content'
+        "href": '#main-content',
+        "text": 'Skip to main content'
       }) }}
     {% endblock %}
 

app/templates/views/dashboard/_totals.html

@@ -15,14 +15,14 @@
         ) }}
       </div>
       <div id="total-email" class="govuk-grid-column-one-half">
-        <span class="big-number-with-status">
-        <a class="govuk-link govuk-link--no-visited-state big-number-link" style="background-color: gray; border-color: gray;">
+        <span class="big-number-with-status pilot-disabled">
+          <a class="govuk-link govuk-link--no-visited-state big-number-link">
             <span class="big-number-smaller">
-              <span class="big-number-number" style="color: lightgray;">0</span>
-              <span class="big-number-label" style="color: lightgray;">emails sent</span>
+              <span class="big-number-number">0</span>
+              <span class="big-number-label">emails sent</span>
             </span>
           </a>
-          <span class="big-number-status" style="background-color: gray; border-color: gray; color: lightgray;">No failures</span>
+          <span class="big-number-status">No failures</span>
         </span>
       </div>
     </div>

app/templates/views/dashboard/_usage.html

@@ -15,8 +15,8 @@
       {% endif %}
     </div>
   </div>
-  <div class='govuk-grid-column-one-half'>
-    <div class="keyline-block" style="color: gray;">
+  <div class='govuk-grid-column-one-half pilot-disabled'>
+    <div class="keyline-block">
       {{ big_number("0", 'email disabled during SMS pilot', smaller=True) }}
     </div>
   </div>

app/templates/views/dashboard/all-template-statistics.html

@@ -46,7 +46,7 @@
                 {{ 1|message_count_label(item.type, suffix='template')|capitalize }}
               </span>
             {% endcall %}
-            {{ spark_bar_field(item.requested_count, most_used_template_count) }}
+            {{ spark_bar_field(item.requested_count, most_used_template_count, id=item.id) }}
           {% endcall %}
         </div>
       {% endif %}

app/templates/views/templates/template.html

@@ -80,8 +80,8 @@
     {% endif %}
   </div>
 
-  <div class="bottom-gutter-1-2" style="display:none">
+  <!--<div class="bottom-gutter-1-2">
     {{ copy_to_clipboard(template.id, name="Template ID", thing='template ID') }}
-  </div>
+  </div>-->
 
 {% endblock %}

app/templates/views/usage.html

@@ -38,9 +38,9 @@
             {% endfor %}
           </div>
         </div>
-        <div class='govuk-grid-column-one-half'>
-          <h2 class='heading-small' style="color: gray;">Emails</h2>
-          <div class="keyline-block" style="color: gray;">
+        <div class='govuk-grid-column-one-half pilot-disabled'>
+          <h2 class='heading-small'>Emails</h2>
+          <div class="keyline-block">
             {{ big_number(emails_sent, 'email disabled during SMS pilot', smaller=True) }}
             {{ big_number("", '', smaller=True) }}
           </div>