diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss
index ba74d46eaf..3313e47c66 100644
--- a/res/css/views/right_panel/_VerificationPanel.scss
+++ b/res/css/views/right_panel/_VerificationPanel.scss
@@ -132,4 +132,19 @@ limitations under the License.
float: right;
}
}
+
+ .mx_VerificationPanel_reciprocate_section {
+ .mx_FormButton {
+ margin: 0 10px;
+ padding: 10px;
+ flex: 1;
+ }
+
+ // show Yes/No buttons next to each other
+ .mx_VerificationPanel_reciprocateButtons {
+ display: flex;
+ flex-direction: row;
+ }
+ }
+
}
diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js
index e2dd1f0408..103497169f 100644
--- a/src/components/views/right_panel/VerificationPanel.js
+++ b/src/components/views/right_panel/VerificationPanel.js
@@ -144,6 +144,16 @@ export default class VerificationPanel extends React.PureComponent {
;
}
+ _onReciprocateYesClick = () => {
+ this.setState({reciprocateButtonClicked: true});
+ this.state.reciprocateQREvent.confirm();
+ };
+
+ _onReciprocateNoClick = () => {
+ this.setState({reciprocateButtonClicked: true});
+ this.state.reciprocateQREvent.cancel();
+ };
+
renderQRReciprocatePhase() {
const {member} = this.props;
const FormButton = sdk.getComponent("elements.FormButton");
@@ -152,15 +162,25 @@ export default class VerificationPanel extends React.PureComponent {
if (this.state.reciprocateQREvent) {
// riot web doesn't support scanning yet, so assume here we're the client being scanned.
body = {_t("Almost there! Is %(displayName)s show the same shield?", {
+ {_t("Almost there! Is %(displayName)s showing the same shield?", {
displayName: member.displayName || member.name || member.userId,
})}