diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss
index 2a733d11a7..a717495e43 100644
--- a/res/css/views/right_panel/_VerificationPanel.scss
+++ b/res/css/views/right_panel/_VerificationPanel.scss
@@ -15,6 +15,21 @@ limitations under the License.
*/
.mx_UserInfo {
+ .mx_EncryptionPanel_cancel {
+ mask: url('$(res)/img/feather-customised/cancel.svg');
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: cover;
+ width: 14px;
+ height: 14px;
+ background-color: $dialog-close-fg-color;
+ cursor: pointer;
+ position: absolute;
+ z-index: 100;
+ top: 14px;
+ right: 14px;
+ }
+
.mx_VerificationPanel_verified_section .mx_E2EIcon {
// Override general user info margin
margin: 0 auto !important;
diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.js
index 3a4aa2edc3..7ee9225a38 100644
--- a/src/components/views/right_panel/EncryptionPanel.js
+++ b/src/components/views/right_panel/EncryptionPanel.js
@@ -84,6 +84,18 @@ const EncryptionPanel = (props) => {
}, [onClose, request]);
useEventEmitter(request, "change", changeHandler);
+ const onCancel = useCallback(function() {
+ if (request) {
+ request.cancel();
+ }
+ }, [request]);
+
+ let cancelButton;
+ if (request && request.pending) {
+ const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+ cancelButton = ;
+ }
+
const onStartVerification = useCallback(async () => {
setRequesting(true);
const cli = MatrixClientPeg.get();
@@ -98,14 +110,18 @@ const EncryptionPanel = (props) => {
(request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined));
if (!request || requested) {
const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe);
- return ;
+ return
+ {cancelButton}
+
+ ;
} else {
- return (
+ return
+ {cancelButton}
{
request={request}
key={request.channel.transactionId}
phase={phase} />
- );
+ ;
}
};
EncryptionPanel.propTypes = {