Put app strings into a YAML file for easy editing by product owner

templates/components/modal.html

@@ -11,7 +11,9 @@
               {% if dismissable %}
                 <button type='button' class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
                   {{ Icon('x') }}
-                  <span>Close</span>
+                  <span>
+                    {{ "components.modal.close" | translate }}
+                  </span>
                 </button>
               {% endif %}
           </div>

templates/components/usa_header.html

@@ -1,10 +1,14 @@
 {% from "components/tooltip.html" import Tooltip %}
 
 <aside class='usa-banner'>
-  <img src='{{ url_for("static", filename="img/us_flag_small.png") }}' alt='U.S. Flag' />
-  <p>An official website of the United States government</p>
+  <img src='{{ url_for("static", filename="img/us_flag_small.png") }}' alt='{{ "components.usa_header.flag_image_alt" | translate }}' />
+  <p>{{ "components.usa_header.official_message" | translate }}
 
-  {{ Tooltip('<p><strong>The .mil means it’s official.</strong><br/>Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.</p><br/><p><strong>The site is secure.</strong><br>The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.</p>',
-  title='Here’s how you know') }}
+  {{
+    Tooltip(
+      ("components.usa_header.tooltip.message" | translate),
+      title=("components.usa_header.tooltip.title" | translate)
+     )
+  }}
 
 </aside>