make session backup banner dismissable

src/domain/session/SessionStatusViewModel.js

@@ -36,6 +36,8 @@ export class SessionStatusViewModel extends ViewModel {
         this._reconnector = reconnector;
         this._status = this._calculateState(reconnector.connectionStatus.get(), sync.status.get());
         this._session = session;
+        this._setupSessionBackupUrl = this.urlCreator.urlForSegment("settings");
+        this._dismissSecretStorage = false;
     }
 
     start() {
@@ -47,8 +49,12 @@ export class SessionStatusViewModel extends ViewModel {
         }));
     }
 
+    get setupSessionBackupUrl () {
+        return this._setupSessionBackupUrl;
+    }
+
     get isShown() {
-        return this._session.needsSessionBackup.get() || this._status !== SessionStatus.Syncing;
+        return (this._session.needsSessionBackup.get() && !this._dismissSecretStorage) || this._status !== SessionStatus.Syncing;
     }
 
     get statusLabel() {
@@ -65,7 +71,7 @@ export class SessionStatusViewModel extends ViewModel {
                 return this.i18n`Sync failed because of ${this._sync.error}`;
         }
         if (this._session.needsSessionBackup.get()) {
-            return this.i18n`Set up secret storage to decrypt older messages.`;
+            return this.i18n`Set up session backup to decrypt older messages.`;
         }
         return "";
     }
@@ -130,7 +136,18 @@ export class SessionStatusViewModel extends ViewModel {
 
     get isSecretStorageShown() {
         // TODO: we need a model here where we can have multiple messages queued up and their buttons don't bleed into each other.
-        return this._status === SessionStatus.Syncing && this._session.needsSessionBackup.get();
+        return this._status === SessionStatus.Syncing && this._session.needsSessionBackup.get() && !this._dismissSecretStorage;
+    }
+
+    get canDismiss() {
+        return this.isSecretStorageShown;
+    }
+
+    dismiss() {
+        if (this.isSecretStorageShown) {
+            this._dismissSecretStorage = true;
+            this.emitChange();
+        }
     }
 
     connectNow() {

src/ui/web/css/status.css

@@ -24,10 +24,3 @@ limitations under the License.
     word-break: break-all;
     word-break: break-word;
 }
-
-.SessionStatusView button {
-    border: none;
-    background: none;
-    color: currentcolor;
-    text-decoration: underline;
-}

src/ui/web/css/themes/element/icons/dismiss.svg

@@ -0,0 +1,4 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.33313 1.33313L6.66646 6.66646" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M6.66699 1.33313L1.33366 6.66646" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/ui/web/css/themes/element/theme.css

@@ -306,13 +306,34 @@ a {
 }
 
 .SessionStatusView {
-    padding: 8px 4px;
+    padding: 4px;
+    min-height: 22px;
     background-color: #03B381;
     color: white;
+    align-items: center;
 }
 
-.middle-shown .SessionStatusView {
+
-    top: 72px;
+.SessionStatusView button.link {
+    color: currentcolor;
+}
+
+.SessionStatusView > .end {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+    align-self: stretch;
+    align-items: stretch;
+}
+
+.SessionStatusView .dismiss {
+    border: none;
+    background: none;
+    background-image: url('icons/dismiss.svg');
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 32px;
+    cursor: pointer;
 }
 
 .room-placeholder {
@@ -598,8 +619,11 @@ button.link {
     text-decoration: underline;
     background: none;
     cursor: pointer;
-    color: #03B381;
-    font-weight: 600;
     margin: -12px;
     padding: 12px;
 }
+
+.Settings a, .Settings .link {
+    color: #03B381;
+    font-weight: 600;
+}

src/ui/web/session/SessionStatusView.js

@@ -25,10 +25,9 @@ export class SessionStatusView extends TemplateView {
         }}, [
             spinner(t, {hidden: vm => !vm.isWaiting}),
             t.p(vm => vm.statusLabel),
-            t.if(vm => vm.isConnectNowShown, t.createTemplate(t => t.button({onClick: () => vm.connectNow()}, "Retry now"))),
+            t.if(vm => vm.isConnectNowShown, t.createTemplate(t => t.button({className: "link", onClick: () => vm.connectNow()}, "Retry now"))),
-            t.if(vm => vm.isSecretStorageShown, t.createTemplate(t => t.button({onClick: () => vm.enterPassphrase(prompt("Passphrase"))}, "Enter passphrase"))),
+            t.if(vm => vm.isSecretStorageShown, t.createTemplate(t => t.a({href: vm.setupSessionBackupUrl}, "Go to settings"))),
-            t.if(vm => vm.isSecretStorageShown, t.createTemplate(t => t.button({onClick: () => vm.enterSecurityKey(prompt("Security key"))}, "Enter security key"))),
+            t.if(vm => vm.canDismiss, t.createTemplate(t => t.div({className: "end"}, t.button({className: "dismiss", onClick: () => vm.dismiss()})))),
-            window.DEBUG ? t.button({id: "showlogs"}, "Show logs") : ""
         ]);
     }
 }