Revert "chat: bottom-align UI in input"

This reverts commit a2af03fc70.
This commit is contained in:
Matilde Park 2020-08-19 12:11:31 -04:00
parent e041afe351
commit bb95a54462
2 changed files with 45 additions and 51 deletions

View File

@ -122,7 +122,7 @@ export default class ChatEditor extends Component {
return ( return (
<div <div
className={ className={
'chat fr h-100 flex flex-shrink-0 bg-gray0-d lh-copy pl2 w-100 items-center' + 'chat fr h-100 flex bg-gray0-d lh-copy pl2 w-100 items-center' +
(props.inCodeMode ? ' code' : '') (props.inCodeMode ? ' code' : '')
} }
style={{ flexGrow: 1, maxHeight: '224px', width: 'calc(100% - 72px)' }}> style={{ flexGrow: 1, maxHeight: '224px', width: 'calc(100% - 72px)' }}>

View File

@ -1,7 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import ChatEditor from './chat-editor'; import ChatEditor from './chat-editor';
import { S3Upload } from './s3-upload'; import { S3Upload } from './s3-upload'
import { Col } from '@tlon/indigo-react'; ;
import { uxToHex } from '~/logic/lib/util'; import { uxToHex } from '~/logic/lib/util';
import { Sigil } from '~/logic/lib/sigil'; import { Sigil } from '~/logic/lib/sigil';
@ -211,34 +211,31 @@ export class ChatInput extends Component {
/>; />;
return ( return (
<div <div className={
className={
"pa3 cf flex black white-d bt b--gray4 b--gray1-d bg-white " + "pa3 cf flex black white-d bt b--gray4 b--gray1-d bg-white " +
"bg-gray0-d relative" "bg-gray0-d relative"
} }
style={{ flexGrow: 1 }}> style={{ flexGrow: 1 }}>
<Col <div className="fl"
style={{ float: 'left' }} style={{
flexDirection="row" marginTop: 6,
alignItems="flex-end" flexBasis: 24,
mb="5px" height: 24
> }}>
{avatar} {avatar}
</Col> </div>
<ChatEditor <ChatEditor
inCodeMode={state.inCodeMode} inCodeMode={state.inCodeMode}
submit={this.submit} submit={this.submit}
onUnmount={props.onUnmount} onUnmount={props.onUnmount}
message={props.message} message={props.message}
placeholder='Message...' placeholder='Message...' />
/> <div className="ml2 mr2"
<Col flexDirection="row" alignItems="flex-end" mb="9px">
<div
className='ml2 mr2'
style={{ style={{
height: "16px", height: '16px',
width: "16px", width: '16px',
flexBasis: 16 flexBasis: 16,
marginTop: 10
}}> }}>
<S3Upload <S3Upload
configuration={props.s3.configuration} configuration={props.s3.configuration}
@ -247,24 +244,21 @@ export class ChatInput extends Component {
uploadError={this.uploadError.bind(this)} uploadError={this.uploadError.bind(this)}
/> />
</div> </div>
<div <div style={{
style={{ height: '16px',
height: "16px", width: '16px',
width: "16px", flexBasis: 16,
flexBasis: 16 marginTop: 10
}}> }}>
<img <img style={{
style={{ filter: state.inCodeMode && 'invert(100%)',
filter: state.inCodeMode && "invert(100%)", height: '14px',
height: "14px", width: '14px',
width: "14px",
}} }}
onClick={this.toggleCode} onClick={this.toggleCode}
src='/~chat/img/CodeEval.png' src="/~chat/img/CodeEval.png"
className='contrast-10-d bg-white bg-none-d ba b--gray1-d br1' className="contrast-10-d bg-white bg-none-d ba b--gray1-d br1" />
/>
</div> </div>
</Col>
</div> </div>
); );
} }