Update styling and copy to match Figma

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-04-08 13:47:15 +01:00
parent ada860f163
commit eec28ce38a
3 changed files with 27 additions and 11 deletions

View file

@ -15,6 +15,8 @@ limitations under the License.
*/ */
.mx_CreateRoomDialog_details { .mx_CreateRoomDialog_details {
margin-top: 15px;
.mx_CreateRoomDialog_details_summary { .mx_CreateRoomDialog_details_summary {
outline: none; outline: none;
list-style: none; list-style: none;
@ -71,14 +73,17 @@ limitations under the License.
} }
.mx_CreateRoomDialog { .mx_CreateRoomDialog {
&.mx_Dialog_fixedWidth { &.mx_Dialog_fixedWidth {
width: 450px; width: 450px;
} }
p,
.mx_Field_input label {
color: $muted-fg-color;
}
.mx_SettingsFlag { .mx_SettingsFlag {
display: flex; display: flex;
margin-top: 4px;
} }
.mx_SettingsFlag_label { .mx_SettingsFlag_label {
@ -91,5 +96,18 @@ limitations under the License.
flex: 0 0 auto; flex: 0 0 auto;
margin-left: 30px; margin-left: 30px;
} }
.mx_CreateRoomDialog_topic {
margin-bottom: 36px;
}
.mx_Dialog_content > .mx_SettingsFlag {
margin-top: 20px;
}
p {
margin: 0 85px 0 0;
line-height: $font-24px;
}
} }

View file

@ -177,11 +177,10 @@ export default createReactClass({
const LabelledToggleSwitch = sdk.getComponent('views.elements.LabelledToggleSwitch'); const LabelledToggleSwitch = sdk.getComponent('views.elements.LabelledToggleSwitch');
const RoomAliasField = sdk.getComponent('views.elements.RoomAliasField'); const RoomAliasField = sdk.getComponent('views.elements.RoomAliasField');
let privateLabel; let publicPrivateLabel;
let publicLabel;
let aliasField; let aliasField;
if (this.state.isPublic) { if (this.state.isPublic) {
publicLabel = (<p>{_t("Set a room alias to easily share your room with other people.")}</p>); publicPrivateLabel = (<p>{_t("Set a room alias to easily share your room with other people.")}</p>);
const domain = MatrixClientPeg.get().getDomain(); const domain = MatrixClientPeg.get().getDomain();
aliasField = ( aliasField = (
<div className="mx_CreateRoomDialog_aliasContainer"> <div className="mx_CreateRoomDialog_aliasContainer">
@ -189,14 +188,14 @@ export default createReactClass({
</div> </div>
); );
} else { } else {
privateLabel = (<p>{_t("This room is private, and can only be joined by invitation.")}</p>); publicPrivateLabel = (<p>{_t("This room is private, and can only be joined by invitation.")}</p>);
} }
let e2eeSection; let e2eeSection;
if (!this.state.isPublic && SettingsStore.isFeatureEnabled("feature_cross_signing")) { if (!this.state.isPublic && SettingsStore.isFeatureEnabled("feature_cross_signing")) {
e2eeSection = <React.Fragment> e2eeSection = <React.Fragment>
<LabelledToggleSwitch label={ _t("Enable end-to-end encryption")} onChange={this.onEncryptedChange} value={this.state.isEncrypted} /> <LabelledToggleSwitch label={ _t("Enable end-to-end encryption")} onChange={this.onEncryptedChange} value={this.state.isEncrypted} />
{ _t("Bridges and most bots will not function in end-to-end encrypted rooms.") } <p>{ _t("You cant disable this later. Bridges & most bots currently wont work.") }</p>
</React.Fragment>; </React.Fragment>;
} }
@ -208,11 +207,10 @@ export default createReactClass({
<form onSubmit={this.onOk} onKeyDown={this._onKeyDown}> <form onSubmit={this.onOk} onKeyDown={this._onKeyDown}>
<div className="mx_Dialog_content"> <div className="mx_Dialog_content">
<Field ref={ref => this._nameFieldRef = ref} label={ _t('Name') } onChange={this.onNameChange} onValidate={this.onNameValidate} value={this.state.name} className="mx_CreateRoomDialog_name" /> <Field ref={ref => this._nameFieldRef = ref} label={ _t('Name') } onChange={this.onNameChange} onValidate={this.onNameValidate} value={this.state.name} className="mx_CreateRoomDialog_name" />
<Field label={ _t('Topic (optional)') } onChange={this.onTopicChange} value={this.state.topic} /> <Field label={ _t('Topic (optional)') } onChange={this.onTopicChange} value={this.state.topic} className="mx_CreateRoomDialog_topic" />
<LabelledToggleSwitch label={ _t("Make this room public")} onChange={this.onPublicChange} value={this.state.isPublic} /> <LabelledToggleSwitch label={ _t("Make this room public")} onChange={this.onPublicChange} value={this.state.isPublic} />
{ publicPrivateLabel }
{ e2eeSection } { e2eeSection }
{ privateLabel }
{ publicLabel }
{ aliasField } { aliasField }
<details ref={this.collectDetailsRef} className="mx_CreateRoomDialog_details"> <details ref={this.collectDetailsRef} className="mx_CreateRoomDialog_details">
<summary className="mx_CreateRoomDialog_details_summary">{ this.state.detailsOpen ? _t('Hide advanced') : _t('Show advanced') }</summary> <summary className="mx_CreateRoomDialog_details_summary">{ this.state.detailsOpen ? _t('Hide advanced') : _t('Show advanced') }</summary>

View file

@ -1556,7 +1556,7 @@
"Set a room alias to easily share your room with other people.": "Set a room alias to easily share your room with other people.", "Set a room alias to easily share your room with other people.": "Set a room alias to easily share your room with other people.",
"This room is private, and can only be joined by invitation.": "This room is private, and can only be joined by invitation.", "This room is private, and can only be joined by invitation.": "This room is private, and can only be joined by invitation.",
"Enable end-to-end encryption": "Enable end-to-end encryption", "Enable end-to-end encryption": "Enable end-to-end encryption",
"Bridges and most bots will not function in end-to-end encrypted rooms.": "Bridges and most bots will not function in end-to-end encrypted rooms.", "You cant disable this later. Bridges & most bots currently wont work.": "You cant disable this later. Bridges & most bots currently wont work.",
"Create a public room": "Create a public room", "Create a public room": "Create a public room",
"Create a private room": "Create a private room", "Create a private room": "Create a private room",
"Name": "Name", "Name": "Name",