diff --git a/res/css/views/dialogs/_ConfirmUserActionDialog.scss b/res/css/views/dialogs/_ConfirmUserActionDialog.scss index fd286720c4..cdcb2b4587 100644 --- a/res/css/views/dialogs/_ConfirmUserActionDialog.scss +++ b/res/css/views/dialogs/_ConfirmUserActionDialog.scss @@ -37,16 +37,4 @@ limitations under the License. font-size: $font-14px; color: $primary-content; background-color: $background; - - border-radius: 3px; - border: solid 1px $input-border-color; - line-height: $font-36px; - padding-left: 16px; - padding-right: 16px; - padding-top: 1px; - padding-bottom: 1px; - - margin-bottom: 24px; - - width: 90%; } diff --git a/src/components/views/dialogs/ConfirmUserActionDialog.tsx b/src/components/views/dialogs/ConfirmUserActionDialog.tsx index 7468f400c6..2f4e511675 100644 --- a/src/components/views/dialogs/ConfirmUserActionDialog.tsx +++ b/src/components/views/dialogs/ConfirmUserActionDialog.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ReactNode } from 'react'; +import React, { ChangeEvent, ReactNode } from 'react'; import { MatrixClient } from 'matrix-js-sdk/src/client'; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import classNames from "classnames"; @@ -27,6 +27,7 @@ import MemberAvatar from '../avatars/MemberAvatar'; import BaseAvatar from '../avatars/BaseAvatar'; import BaseDialog from "./BaseDialog"; import DialogButtons from "../elements/DialogButtons"; +import Field from '../elements/Field'; interface IProps { // matrix-js-sdk (room) member object. Supply either this or 'groupMember' @@ -48,6 +49,10 @@ interface IProps { onFinished: (success: boolean, reason?: string) => void; } +interface IState { + reason: string; +} + /* * A dialog for confirming an operation on another user. * Takes a user ID and a verb, displays the target user prominently @@ -57,37 +62,50 @@ interface IProps { * Also tweaks the style for 'dangerous' actions (albeit only with colour) */ @replaceableComponent("views.dialogs.ConfirmUserActionDialog") -export default class ConfirmUserActionDialog extends React.Component { - private reasonField: React.RefObject = React.createRef(); - +export default class ConfirmUserActionDialog extends React.Component { static defaultProps = { danger: false, askReason: false, }; - public onOk = (): void => { - this.props.onFinished(true, this.reasonField.current?.value); + constructor(props: IProps) { + super(props); + + this.state = { + reason: "", + }; + } + + private onOk = (): void => { + this.props.onFinished(true, this.state.reason); }; - public onCancel = (): void => { + private onCancel = (): void => { this.props.onFinished(false); }; + private onReasonChange = (ev: ChangeEvent) => { + this.setState({ + reason: ev.target.value, + }); + }; + public render() { const confirmButtonClass = this.props.danger ? 'danger' : ''; let reasonBox; if (this.props.askReason) { reasonBox = ( -
-
- -
-
+
+ + ); }