Chat: Standardise sigil size and input line height

Read-only chats had a slightly bigger sigil box, looking skewed to
the left. Its copy also had a different line height than the
chat input itself, which was vertically aligned slightly higher.

This commit standardises the sigil box to 32px across both
and brings both to the same, centered vertical alignment
for the chat input and read-only notice.
This commit is contained in:
Matilde Park 2019-08-22 17:44:52 -04:00
parent 1c923eaaba
commit 494aae7800
2 changed files with 8 additions and 4 deletions

File diff suppressed because one or more lines are too long

View File

@ -278,11 +278,15 @@ export class ChatInput extends Component {
readOnlyRender() {
return (
<div className="mt2 pa3 cf flex black bt o-50">
<div className="fl" style={{ flexBasis: 35, height: 40 }}>
<div className="fl" style={{
marginTop: 4,
flexBasis: 32,
height: 36
}}>
<Sigil ship={window.ship} size={32} />
</div>
<div className="fr h-100 flex pa2" style={{ flexGrow: 1, height: 40 }}>
<p>This chat is read only and you cannot post.</p>
<p style={{paddingTop: 3}}>This chat is read only and you cannot post.</p>
</div>
</div>
);
@ -310,7 +314,7 @@ export class ChatInput extends Component {
className={'ml2 mt2 mr2 bn ' +
this.getSpeechStyle(state.messageType, state.clipboard)
}
style={{ flexGrow: 1, height: 40, resize: 'none' }}
style={{ flexGrow: 1, height: 40, paddingTop: 3, resize: 'none' }}
ref={this.textareaRef}
placeholder={props.placeholder}
value={state.message}