Add some upgrade hints

public/i18n/de.json

@@ -43,7 +43,9 @@
         "VERSION": "Version",
         "BACKGROUND_IMAGE": "Hintergrundbild",
         "NEW_VERSION": "Neue Version von Threema Web",
-        "NEW_VERSION_DETAILS": "Diese Version von Threema Web setzt <strong>Threema 3.45 für Android</strong> voraus. Falls Sie eine ältere Threema-Version verwenden, <strong>aktualisieren Sie bitte die App</strong>.<br><br>Wenn Sie die Threema-App nicht aktualisieren können, nutzen Sie vorübergehend die archivierte Version von Threema Web: <a href=\"https://web.threema.ch/archive/1.8.2/\">web.threema.ch/archive/1.8.2</a>"
+        "NEW_VERSION_DETAILS": "Diese Version von Threema Web setzt <strong>Threema 3.45 für Android</strong> voraus. Falls Sie eine ältere Threema-Version verwenden, <strong>aktualisieren Sie bitte die App</strong>.<br><br>Wenn Sie die Threema-App nicht aktualisieren können, nutzen Sie vorübergehend die archivierte Version von Threema Web: <a href=\"https://web.threema.ch/archive/1.8.2/\">web.threema.ch/archive/1.8.2</a>",
+        "NOTIFICATION_IOS_BETA": "iOS Beta-User? Bitte benutzen Sie <a href=\"https://web-beta.threema.ch/\">web-beta.threema.ch</a>.",
+        "NOTIFICATION_NEW_RELEASE": "Eine neue Version von Threema Web wurde veröffentlicht. Bitte aktualisieren Sie Ihre App oder verwenden Sie die <a href=\"https://web.threema.ch/archive/1.8.2/\">letzte Version</a>."
     },
     "connecting": {
         "CONNECTION_PROBLEMS": "Verbindungsprobleme",

public/i18n/en.json

@@ -43,7 +43,9 @@
         "VERSION": "Version",
         "BACKGROUND_IMAGE": "Background Image",
         "NEW_VERSION": "New Threema Web Version",
-        "NEW_VERSION_DETAILS": "This version of Threema Web requires <strong>Threema 3.45 for Android</strong>. If you are using an older Threema version, <strong>please update the app</strong>.<br><br>If you are unable to update the Threema app, you can temporarily use the archived version of Threema Web: <a href=\"https://web.threema.ch/archive/1.8.2/\">web.threema.ch/archive/1.8.2</a>"
+        "NEW_VERSION_DETAILS": "This version of Threema Web requires <strong>Threema 3.45 for Android</strong>. If you are using an older Threema version, <strong>please update the app</strong>.<br><br>If you are unable to update the Threema app, you can temporarily use the archived version of Threema Web: <a href=\"https://web.threema.ch/archive/1.8.2/\">web.threema.ch/archive/1.8.2</a>",
+        "NOTIFICATION_IOS_BETA": "Using the iOS beta? Please go to <a href=\"https://web-beta.threema.ch/\">web-beta.threema.ch</a>.",
+        "NOTIFICATION_NEW_RELEASE": "A new version of Threema Web was released. Make sure to update your app or use the <a href=\"/archive/1.8.2/\">previous version of Threema Web</a>."
     },
     "connecting": {
         "CONNECTION_PROBLEMS": "Connection problems",

src/partials/welcome.html

@@ -6,6 +6,13 @@
                 <p><strong translate>common.NOTE</strong> <span translate>welcome.SAFARI</span></p>
             </div>
 
+            <div class="notification">
+                <p translate>welcome.NOTIFICATION_NEW_RELEASE</p>
+            </div>
+            <div class="notification">
+                <p translate>welcome.NOTIFICATION_IOS_BETA</p>
+            </div>
+
             <p class="instructions" translate>welcome.PLEASE_SCAN</p>
             <qrcode version="{{ ctrl.qrCode.version }}"
                     id="connecting-code"
@@ -28,6 +35,10 @@
         </div>
 
         <div ng-if="ctrl.state === 'connecting' && ctrl.mode === 'unlock'" class="unlock">
+            <div class="notification">
+                <p translate>welcome.NOTIFICATION_NEW_RELEASE</p>
+            </div>
+
             <h2 class="instructions" translate>welcome.PLEASE_UNLOCK</h2>
             <div class="password-entry">
                 <label>

src/sass/sections/_welcome.scss

@@ -170,4 +170,17 @@
         }
     }
 
+    .notification {
+        flex-direction: horizontal;
+        padding: 8px;
+        background-color: #ff9800;
+        margin-bottom: 16px;
+        p {
+            font-size: 0.8em;
+            line-height: 1.4em;
+            font-weight: bold;
+            text-align: center;
+            width: 100%;
+        }
+    }
 }