From a2af03fc7048ee94b09c1007cec1477b784925e8 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Tue, 18 Aug 2020 17:47:05 -0400
Subject: [PATCH] chat: bottom-align UI in input

---
 .../apps/chat/components/lib/chat-editor.js   |  2 +-
 .../apps/chat/components/lib/chat-input.js    | 94 ++++++++++---------
 2 files changed, 51 insertions(+), 45 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-editor.js b/pkg/interface/src/views/apps/chat/components/lib/chat-editor.js
index ee6dc4b6cd..c41c56262e 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-editor.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/chat-editor.js
@@ -121,7 +121,7 @@ export default class ChatEditor extends Component {
 
     return (
       <div
-        className="chat fr h-100 flex bg-gray0-d lh-copy pl2 w-100 items-center"
+        className="chat fr h-100 flex flex-shrink-0 bg-gray0-d lh-copy pl2 w-100 items-center"
         style={{ flexGrow: 1, maxHeight: '224px', width: 'calc(100% - 72px)' }}
       >
         <CodeEditor
diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-input.js b/pkg/interface/src/views/apps/chat/components/lib/chat-input.js
index 4e49680a12..ccdf54bd65 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-input.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/chat-input.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 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 { Sigil } from '~/logic/lib/sigil';
 
@@ -211,54 +211,60 @@ export class ChatInput extends Component {
         />;
 
     return (
-      <div className={
-             "pa3 cf flex black white-d bt b--gray4 b--gray1-d bg-white " +
-             "bg-gray0-d relative"
-           }
-           style={{ flexGrow: 1 }}>
-        <div className="fl"
-             style={{
-               marginTop: 6,
-               flexBasis: 24,
-               height: 24
-             }}>
+      <div
+        className={
+          "pa3 cf flex black white-d bt b--gray4 b--gray1-d bg-white " +
+          "bg-gray0-d relative"
+        }
+        style={{ flexGrow: 1 }}>
+        <Col
+          style={{ float: 'left' }}
+          flexDirection="row"
+          alignItems="flex-end"
+          mb="5px"
+        >
           {avatar}
-        </div>
+        </Col>
         <ChatEditor
           inCodeMode={state.inCodeMode}
           submit={this.submit}
           onUnmount={props.onUnmount}
           message={props.message}
-          placeholder='Message...' />
-        <div className="ml2 mr2"
-             style={{
-               height: '16px',
-               width: '16px',
-               flexBasis: 16,
-               marginTop: 10
-             }}>
-          <S3Upload
-            configuration={props.s3.configuration}
-            credentials={props.s3.credentials}
-            uploadSuccess={this.uploadSuccess.bind(this)}
-            uploadError={this.uploadError.bind(this)}
-          />
-        </div>
-        <div style={{
-               height: '16px',
-               width: '16px',
-               flexBasis: 16,
-               marginTop: 10
-          }}>
-          <img style={{
-                 filter: state.inCodeMode && 'invert(100%)',
-                 height: '14px',
-                 width: '14px',
-               }}
-               onClick={this.toggleCode}
-               src="/~chat/img/CodeEval.png"
-               className="contrast-10-d bg-white bg-none-d ba b--gray1-d br1" />
-        </div>
+          placeholder='Message...'
+        />
+        <Col flexDirection="row" alignItems="flex-end" mb="9px">
+          <div
+            className='ml2 mr2'
+            style={{
+              height: "16px",
+              width: "16px",
+              flexBasis: 16
+            }}>
+            <S3Upload
+              configuration={props.s3.configuration}
+              credentials={props.s3.credentials}
+              uploadSuccess={this.uploadSuccess.bind(this)}
+              uploadError={this.uploadError.bind(this)}
+            />
+          </div>
+          <div
+            style={{
+              height: "16px",
+              width: "16px",
+              flexBasis: 16
+            }}>
+            <img
+              style={{
+                filter: state.inCodeMode && "invert(100%)",
+                height: "14px",
+                width: "14px",
+              }}
+              onClick={this.toggleCode}
+              src='/~chat/img/CodeEval.png'
+              className='contrast-10-d bg-white bg-none-d ba b--gray1-d br1'
+            />
+          </div>
+        </Col>
       </div>
     );
   }