Tweak appearance of invite reason

This adjusts the display of invite reasons to match design feedback.

Fixes https://github.com/vector-im/element-web/issues/16869
This commit is contained in:
J. Ryan Stinnett 2021-04-12 12:28:42 +01:00
parent ae2082b97b
commit 798a891d83
11 changed files with 127 additions and 91 deletions

View file

@ -55,22 +55,10 @@ interface IProps {
* The mxc:// avatar URL of the displayed user
*/
avatarUrl?: string;
/**
* Whether the EventTile should appear faded
*/
faded?: boolean;
/**
* Callback for when the component is clicked
*/
onClick?: () => void;
}
interface IState {
message: string;
faded: boolean;
eventTileKey: number;
}
const AVATAR_SIZE = 32;
@ -81,23 +69,9 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
super(props);
this.state = {
message: props.message,
faded: !!props.faded,
eventTileKey: 0,
};
}
changeMessage(message: string) {
this.setState({
message,
// Change the EventTile key to force React to create a new instance
eventTileKey: this.state.eventTileKey + 1,
});
}
unfade() {
this.setState({ faded: false });
}
private fakeEvent({message}: IState) {
// Fake it till we make it
/* eslint-disable quote-props */
@ -147,12 +121,10 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
const className = classnames(this.props.className, {
"mx_IRCLayout": this.props.layout == Layout.IRC,
"mx_GroupLayout": this.props.layout == Layout.Group,
"mx_EventTilePreview_faded": this.state.faded,
});
return <div className={className} onClick={this.props.onClick}>
return <div className={className}>
<EventTile
key={this.state.eventTileKey}
mxEvent={event}
layout={this.props.layout}
enableFlair={SettingsStore.getValue(UIFeature.Flair)}