Fix UserInfo e2e buttons to match Figma
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
parent
7a92c90b79
commit
4a4a13ac75
7 changed files with 39 additions and 6 deletions
res/css/views/right_panel
src/components/views
|
@ -266,12 +266,29 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
&.mx_AccessibleButton_kind_primary {
|
||||
color: $accent-color;
|
||||
background-color: $accent-bg-color;
|
||||
}
|
||||
|
||||
&.mx_AccessibleButton_kind_danger {
|
||||
color: $notice-primary-color;
|
||||
background-color: $notice-primary-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_VerificationShowSas .mx_AccessibleButton,
|
||||
.mx_UserInfo_wideButton {
|
||||
display: block;
|
||||
margin: 16px 0;
|
||||
margin: 16px 0 8px;
|
||||
}
|
||||
button.mx_UserInfo_wideButton {
|
||||
width: 100%; // FIXME get rid of this once we get rid of DialogButtons here
|
||||
|
||||
|
||||
.mx_VerificationShowSas {
|
||||
.mx_AccessibleButton + .mx_AccessibleButton {
|
||||
margin: 8px 0; // space between buttons
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -279,6 +279,7 @@ export default class DeviceVerifyDialog extends React.Component {
|
|||
onDone={this._onSasMatchesClick}
|
||||
isSelf={MatrixClientPeg.get().getUserId() === this.props.userId}
|
||||
onStartEmoji={this._onUseSasClick}
|
||||
inDialog={true}
|
||||
/>;
|
||||
}
|
||||
|
||||
|
|
|
@ -196,7 +196,8 @@ export default class IncomingSasDialog extends React.Component {
|
|||
sas={this._showSasEvent.sas}
|
||||
onCancel={this._onCancelClick}
|
||||
onDone={this._onSasMatchesClick}
|
||||
isSelf={this.props.verifier.userId == MatrixClientPeg.get().getUserId()}
|
||||
isSelf={this.props.verifier.userId === MatrixClientPeg.get().getUserId()}
|
||||
inDialog={true}
|
||||
/>;
|
||||
}
|
||||
|
||||
|
|
|
@ -48,6 +48,7 @@ export default class VerificationRequestDialog extends React.Component {
|
|||
verificationRequestPromise={this.props.verificationRequestPromise}
|
||||
onClose={this.props.onFinished}
|
||||
member={member}
|
||||
inDialog={true}
|
||||
/>
|
||||
</BaseDialog>;
|
||||
}
|
||||
|
|
|
@ -31,7 +31,7 @@ import {_t} from "../../../languageHandler";
|
|||
const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
|
||||
|
||||
const EncryptionPanel = (props) => {
|
||||
const {verificationRequest, verificationRequestPromise, member, onClose, layout, isRoomEncrypted} = props;
|
||||
const {verificationRequest, verificationRequestPromise, member, onClose, layout, isRoomEncrypted, inDialog} = props;
|
||||
const [request, setRequest] = useState(verificationRequest);
|
||||
// state to show a spinner immediately after clicking "start verification",
|
||||
// before we have a request
|
||||
|
@ -133,6 +133,7 @@ const EncryptionPanel = (props) => {
|
|||
member={member}
|
||||
request={request}
|
||||
key={request.channel.transactionId}
|
||||
inDialog={inDialog}
|
||||
phase={phase} />
|
||||
</React.Fragment>);
|
||||
}
|
||||
|
@ -142,6 +143,7 @@ EncryptionPanel.propTypes = {
|
|||
onClose: PropTypes.func.isRequired,
|
||||
verificationRequest: PropTypes.object,
|
||||
layout: PropTypes.string,
|
||||
inDialog: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default EncryptionPanel;
|
||||
|
|
|
@ -245,6 +245,7 @@ export default class VerificationPanel extends React.PureComponent {
|
|||
sas={this.state.sasEvent.sas}
|
||||
onCancel={this._onSasMismatchesClick}
|
||||
onDone={this._onSasMatchesClick}
|
||||
inDialog={this.props.inDialog}
|
||||
/>
|
||||
</div>;
|
||||
} else {
|
||||
|
|
|
@ -33,6 +33,7 @@ export default class VerificationShowSas extends React.Component {
|
|||
onCancel: PropTypes.func.isRequired,
|
||||
sas: PropTypes.object.isRequired,
|
||||
isSelf: PropTypes.bool,
|
||||
inDialog: PropTypes.bool, // whether this component is being shown in a dialog and to use DialogButtons
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
|
@ -112,7 +113,7 @@ export default class VerificationShowSas extends React.Component {
|
|||
text = _t("Cancelling…");
|
||||
}
|
||||
confirm = <PendingActionSpinner text={text} />;
|
||||
} else {
|
||||
} else if (this.props.inDialog) {
|
||||
// FIXME: stop using DialogButtons here once this component is only used in the right panel verification
|
||||
confirm = <DialogButtons
|
||||
primaryButton={_t("They match")}
|
||||
|
@ -122,6 +123,15 @@ export default class VerificationShowSas extends React.Component {
|
|||
onCancel={this.onDontMatchClick}
|
||||
cancelButtonClass="mx_UserInfo_wideButton"
|
||||
/>;
|
||||
} else {
|
||||
confirm = <React.Fragment>
|
||||
<AccessibleButton onClick={this.onMatchClick} kind="primary">
|
||||
{ _t("They match") }
|
||||
</AccessibleButton>
|
||||
<AccessibleButton onClick={this.onDontMatchClick} kind="danger">
|
||||
{ _t("They don't match") }
|
||||
</AccessibleButton>
|
||||
</React.Fragment>;
|
||||
}
|
||||
|
||||
return <div className="mx_VerificationShowSas">
|
||||
|
|
Loading…
Reference in a new issue