diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
index ec856cd..554bdda 100644
--- a/src/app/organisms/settings/Settings.jsx
+++ b/src/app/organisms/settings/Settings.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
import PropTypes from 'prop-types';
import './Settings.scss';
@@ -12,6 +12,7 @@ import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls'
import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/PopupWindow';
import SettingTile from '../../molecules/setting-tile/SettingTile';
+import ImportE2ERoomKeys from '../../molecules/import-e2e-room-keys/ImportE2ERoomKeys';
import SunIC from '../../../../public/res/ic/outlined/sun.svg';
import LockIC from '../../../../public/res/ic/outlined/lock.svg';
@@ -44,8 +45,20 @@ function AppearanceSection() {
function SecuritySection() {
return (
-
-
{`Device ID: ${initMatrix.matrixClient.getDeviceId()}`}
+
+ Use this device ID to verify or manage this session from Element client.}
+ />
+
+ {'To decrypt older messages, Export E2EE room keys from Element (Settings > Security & Privacy > Encryption > Cryptography) and import them here. Imported keys are also encrypted so you have to enter account password.'}
+
+ >
+ )}
+ />
);
}
@@ -53,7 +66,7 @@ function SecuritySection() {
function AboutSection() {
return (
-
+
@@ -62,7 +75,7 @@ function AboutSection() {
Yet another matrix client
-
+
window.open('https://github.com/ajbura/cinny')}>Source code
window.open('https://liberapay.com/ajbura/donate')}>Support
diff --git a/src/app/organisms/settings/Settings.scss b/src/app/organisms/settings/Settings.scss
index 2f54d64..134dbdb 100644
--- a/src/app/organisms/settings/Settings.scss
+++ b/src/app/organisms/settings/Settings.scss
@@ -14,10 +14,15 @@
& .setting-tile {
margin-top: var(--sp-normal);
+ border-bottom: 1px solid var(--bg-surface-border);
+ padding-bottom: 16px;
+ &__title__wrapper {
+ margin-bottom: var(--sp-ultra-tight);
+ }
}
}
-.settings__about {
+.set-about {
&__branding {
margin-top: var(--sp-extra-tight);
margin-bottom: var(--sp-normal);