Merge branch 'release/next-userspace' into mp/chat/blockquote

pkg/interface/src/views/apps/chat/components/lib/chat-editor.js

@@ -122,7 +122,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' +
+          'chat fr h-100 flex flex-shrink-0 bg-gray0-d lh-copy pl2 w-100 items-center' +
           (props.inCodeMode ? ' code' : '')
         }
         style={{ flexGrow: 1, maxHeight: '224px', width: 'calc(100% - 72px)' }}>

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>
     );
   }

pkg/interface/src/views/apps/groups/components/lib/group-detail.js

@@ -19,6 +19,7 @@ export class GroupDetail extends Component {
     this.changeTitle = this.changeTitle.bind(this);
     this.changeDescription = this.changeDescription.bind(this);
     this.changePolicy = this.changePolicy.bind(this);
+    this.getShortcode = this.getShortcode.bind(this);
   }
 
   componentDidMount() {
@@ -185,6 +186,41 @@ export class GroupDetail extends Component {
     );
   }
 
+  getShortcode(group, path) {
+    if (group?.policy?.open) {
+      return (
+        <div className='mt4'>
+          <p className='f9 mt4 lh-copy'>Share</p>
+          <p className='f9 gray2 mb2'>
+            Share a shortcode to join this group
+          </p>
+          <div
+            className='relative w-100 flex'
+            style={{ maxWidth: '29rem' }}>
+            <input
+              className={'f8 mono ba b--gray3 b--gray2-d bg-gray0-d ' +
+              'white-d pa3 db w-100 flex-auto mr3 pr9'}
+              disabled={true}
+              value={path.substr(6)}
+            />
+            <span
+              className='lh-solid f8 pointer absolute pa3 inter'
+              style={{ right: 12, top: 1 }}
+              ref='copy'
+              onClick={() => {
+                writeText(path.substr(6));
+                this.refs.copy.innerText = 'Copied';
+              }}>
+              Copy
+            </span>
+          </div>
+        </div>
+      );
+    } else {
+      return <div />;
+    };
+  }
+
   renderSettings() {
     const { props } = this;
 
@@ -201,33 +237,8 @@ export class GroupDetail extends Component {
       { description: 'Janitor', tag: 'janitor', addDescription: 'Make Janitor' }
     ];
 
-    let shortcode = <div />;
+    const shortcode = this.getShortcode(group, props.path);
 
-    if (group?.policy?.open) {
-      shortcode = <div className="mt4">
-        <p className="f9 mt4 lh-copy">Share</p>
-        <p className="f9 gray2 mb2">Share a shortcode to join this group</p>
-        <div className="relative w-100 flex"
-          style={{ maxWidth: '29rem' }}
-        >
-          <input
-            className="f8 mono ba b--gray3 b--gray2-d bg-gray0-d white-d pa3 db w-100 flex-auto mr3"
-            disabled={true}
-            value={props.path.substr(6)}
-          />
-          <span className="lh-solid f8 pointer absolute pa3 inter"
-            style={{ right: 12, top: 1 }}
-            ref="copy"
-            onClick={() => {
-              writeText(props.path.substr(6));
-              this.refs.copy.innerText = 'Copied';
-            }}
-          >
-            Copy
-              </span>
-        </div>
-      </div>;
-    }
     return (
       <div className="pa4 w-100 h-100 white-d overflow-y-auto">
         <div className="f8 f9-m f9-l f9-xl w-100">