intermediate

1 files changed, 54 insertions, 43 deletions

diff --git a/template/users.html.j2 b/template/users.html.j2
index 0b02e8f..e6d6539 100644
--- a/template/users.html.j2
+++ b/template/users.html.j2
@@ -23,7 +23,7 @@
       <div class="browser-selection card">
         <a
           href="javascript:selectGroup('android')"
-          aria-label="Select instructions for Android"
+          aria-label="{% trans %}Select instructions for Android{% endtrans %}"
           role="radio"
         >
           <svg
@@ -40,7 +40,7 @@
         </a>
         <a
           href="javascript:selectGroup('ios')"
-          aria-label="Select instructions for iOS"
+          aria-label="{% trans %}Select instructions for iOS{% endtrans %}"
           role="radio"
         >
           <svg
@@ -57,7 +57,7 @@
         </a>
         <a
           href="javascript:selectGroup('firefox')"
-          aria-label="Select instructions for Firefox"
+          aria-label="{% trans %}Select instructions for Firefox{% endtrans %}"
           role="radio"
         >
           <svg
@@ -74,7 +74,7 @@
         </a>
         <a
           href="javascript:selectGroup('chrome')"
-          aria-label="Select instructions for Chrome"
+          aria-label="{% trans %}Select instructions for Chrome{% endtrans %}"
           role="radio"
         >
           <svg
@@ -97,26 +97,30 @@
       <div class="text card bg-gray-100">
         <h2>{% trans %}Prerequisites{% endtrans %}</h2>
         <p>
-          {% trans %}Here is what you need to get started paying with Taler:{%
-          endtrans %}
+          {% trans %}
+          Here is what you need to get started paying with Taler:
+          {% endtrans %}
         </p>
         <ul class="list-disc list-inside">
           <li>
-            {% trans %}<b>Swiss bank account</b> with an IBAN beginning with
-            "CH";{% endtrans %}
+            {% trans %}
+            <b>Swiss bank account</b> with an IBAN beginning with "CH";
+            {% endtrans %}
           </li>
           <li>
-            {% trans %}<b>Mobile phone number</b> beginning with "+41" to
-            receive P2P payments, and;{% endtrans %}
+            {% trans %}
+            <b>Mobile phone number</b> beginning with "+41" to receive P2P payments, and;
+            {% endtrans %}
           </li>
           <li>
-            <b>{% trans %}Installation of a{% endtrans %}</b>
+            {% trans %}
+            <b>Installation</b> of a
             <a
               href="https://wallet.taler.net/"
               target="_blank"
               rel="noopener noreferrer"
-              >{% trans %}Taler wallet.{% endtrans %}</a
-            >
+              >Taler wallet.</a>
+            {% endtrans %}
           </li>
         </ul>
       </div>
@@ -128,20 +132,23 @@
         <h2>
           <span class="step-prefix">{% trans %}Step{% endtrans %}</span>
           <span class="step-ctr">&#35;1:</span>
-          <span class="step-description"
-            >{% trans %}Select provider{% endtrans %}</span
-          >
+          <span class="step-description">
+          {% trans %}Select provider{% endtrans %}
+          </span>
         </h2>
         <p>
-          {% trans %}As a first-time user, you need to add Taler Operations as a
+          {% trans %}
+          As a first-time user, you need to add Taler Operations as a
           payment service provider. The easiest way to do so is to scan the QR
-          code on the right which will also initiate the withdrawal process.{%
-          endtrans %}
+          code on the right which will also initiate the withdrawal process.
+          {% endtrans %}
         </p>
         <p>
-          {% trans %}If you already have a payment service provider for the
+          {% trans %}
+          If you already have a payment service provider for the
           "CHF" currency, you can withdraw digital cash by clicking the "add"
-          button on the "CHF balance" screen.{% endtrans %}
+          button on the "CHF balance" screen.
+          {% endtrans %}
         </p>
       </div>
       <div class="img">
@@ -159,16 +166,19 @@
         <h2>
           <span class="step-prefix">{% trans %}Step{% endtrans %}</span>
           <span class="step-ctr">&#35;2:</span>
-          <span class="step-description"
-            >{% trans %}Enter amount{% endtrans %}</span
-          >
+          <span class="step-description">
+            {% trans %}Enter amount{% endtrans %}
+          </span>
         </h2>
         <p>
-          {% trans %}Enter the desired amount to be withdrawn.{% endtrans %}
+          {% trans %}
+          Enter the desired amount to be withdrawn.
+          {% endtrans %}
         </p>
         <p>
-          {% trans %}Afterwards, select "Withdraw" from my bank account.{%
-          endtrans %}
+          {% trans %}
+          Afterwards, select "Withdraw" from my bank account.
+          {% endtrans %}
         </p>
       </div>
       <div class="img">
@@ -182,7 +192,7 @@
           class="group-chrome"
           src="{{ url_static('images/screenshots/cta-withdraw-chrome-latest.png') }}"
           alt=""
-          width="450px"
+          width="350px"
         />
         <img
           class="group-firefox"
@@ -205,17 +215,19 @@
         <h2>
           <span class="step-prefix">{% trans %}Step{% endtrans %}</span>
           <span class="step-ctr">&#35;3:</span>
-          <span class="step-description"
-            >{% trans %}Accept terms{% endtrans %}</span
-          >
+          <span class="step-description">
+          {% trans %}Accept terms{% endtrans %}
+          </span>
         </h2>
         <p>
-          {% trans %}Please read the Terms of Service and accept them.{%
-          endtrans %}
+          {% trans %}
+          Please read the Terms of Service and accept them.
+          {% endtrans %}
         </p>
         <p>
-          {% trans %}You will only need to do so the first time, or when the
-          terms have been updated.{% endtrans %}
+          {% trans %}
+          You will only need to do so the first time, or when the terms have been updated.
+          {% endtrans %}
         </p>
       </div>
       <div class="img">
@@ -229,7 +241,7 @@
           class="group-chrome"
           src="{{ url_static('images/screenshots/cta-accept-tos-chrome-latest.png') }}"
           alt=""
-          width="450px"
+          width="350px"
         />
         <img
           class="group-firefox"
@@ -321,7 +333,7 @@
           class="group-chrome"
           src="{{ url_static('images/screenshots/cta-wire-transfer-chrome-latest.png') }}"
           alt=""
-          width="450px"
+          width="350px"
         />
         <img
           class="group-firefox"
@@ -367,7 +379,7 @@
           class="group-chrome"
           src="{{ url_static('images/screenshots/cta-withdraw-done-chrome-latest.png') }}"
           alt=""
-          width="450px"
+          width="350px"
         />
         <img
           class="group-firefox"
@@ -404,10 +416,9 @@
         </p>
       </div>
       <div class="img">
-        <!-- FIXME: Dialog: "QR scan" -->
         <img
           class="group-android"
-          src="{{ url_static('images/screenshots/cta-url-entry-1-android-latest.png') }}"
+          src="{{ url_static('images/screenshots/cta-url-entry-2-android-latest.png') }}"
           alt=""
           width="350px"
         />
@@ -415,7 +426,7 @@
           class="group-chrome"
           src="{{ url_static('images/screenshots/cta-url-entry-chrome-latest.png') }}"
           alt=""
-          width="450px"
+          width="350px"
         />
         <img
           class="group-firefox"
@@ -460,7 +471,7 @@
           class="group-chrome"
           src="{{ url_static('images/screenshots/cta-payment-chrome-latest.png') }}"
           alt=""
-          width="450px"
+          width="350px"
         />
         <img
           class="group-firefox"
@@ -505,7 +516,7 @@
           class="group-chrome"
           src="{{ url_static('images/screenshots/cta-payment-paid-chrome-latest.png') }}"
           alt=""
-          width="450px"
+          width="350px"
         />
         <img
           class="group-firefox"