imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update the button styling on the emoji comparison dialog during cross-signing

Browse source 
Signed-off-by: Faye Duxovni <fayed@element.io>
This commit is contained in:
Faye Duxovni 2021-10-14 00:46:15 -04:00
parent 418043488b
commit 8f10a1d3fb
2 changed files with 9 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

21
res/css/views/verification/_VerificationShowSas.scss
View file

@ -62,20 +62,13 @@ limitations under the License.
flex-basis: 100%; flex-basis: 100%;
} }
.mx_VerificationShowSas { .mx_VerificationShowSas_buttonRow {
.mx_Dialog_buttons { text-align: center;
// this is more specific than the DialogButtons css so gets preference display: flex;
button.mx_VerificationShowSas_matchButton { flex-wrap: wrap;
color: $accent-color; justify-content: center;
background-color: $accent-bg-color;
border: none;
}
// this is more specific than the DialogButtons css so gets preference .mx_AccessibleButton {
button.mx_VerificationShowSas_noMatchButton { margin-inline: 9px;
color: $notice-primary-color;
background-color: $notice-primary-bg-color;
border: none;
}
} }
} }

15
src/components/views/verification/VerificationShowSas.tsx
View file

@ -20,7 +20,6 @@ import { DeviceInfo } from "matrix-js-sdk/src//crypto/deviceinfo";
import { _t, _td } from '../../../languageHandler'; import { _t, _td } from '../../../languageHandler';
import { PendingActionSpinner } from "../right_panel/EncryptionInfo"; import { PendingActionSpinner } from "../right_panel/EncryptionInfo";
import AccessibleButton from "../elements/AccessibleButton"; import AccessibleButton from "../elements/AccessibleButton";
import DialogButtons from "../elements/DialogButtons";
import { fixupColorFonts } from '../../../utils/FontManager'; import { fixupColorFonts } from '../../../utils/FontManager';
import { replaceableComponent } from "../../../utils/replaceableComponent"; import { replaceableComponent } from "../../../utils/replaceableComponent";
@ -143,25 +142,15 @@ export default class VerificationShowSas extends React.Component<IProps, IState>
text = _t("Cancelling…"); text = _t("Cancelling…");
} }
confirm = <PendingActionSpinner text={text} />; confirm = <PendingActionSpinner text={text} />;
} 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")}
onPrimaryButtonClick={this.onMatchClick}
primaryButtonClass="mx_UserInfo_wideButton mx_VerificationShowSas_matchButton"
cancelButton={_t("They don't match")}
onCancel={this.onDontMatchClick}
cancelButtonClass="mx_UserInfo_wideButton mx_VerificationShowSas_noMatchButton"
/>;
} else { } else {
confirm = <React.Fragment> confirm = <div className="mx_VerificationShowSas_buttonRow">
<AccessibleButton onClick={this.onDontMatchClick} kind="danger"> <AccessibleButton onClick={this.onDontMatchClick} kind="danger">
{ _t("They don't match") } { _t("They don't match") }
</AccessibleButton> </AccessibleButton>
<AccessibleButton onClick={this.onMatchClick} kind="primary"> <AccessibleButton onClick={this.onMatchClick} kind="primary">
{ _t("They match") } { _t("They match") }
</AccessibleButton> </AccessibleButton>
</React.Fragment>; </div>;
} }
return <div className="mx_VerificationShowSas"> return <div className="mx_VerificationShowSas">