feat(redesign-message-input): update input positioning/styles and add placeholder to mentions component

src/components/message-input/index.tsx

@@ -284,24 +284,22 @@ export class MessageInput extends React.Component<Properties, State> {
 
         <div {...cn('input-row')}>
           {this.allowLeftIcons && (
-            <div {...cn('icon-outer')}>
-              <div {...cn('icon-wrapper')}>
-                {this.allowGiphy && (
-                  <IconButton {...cn('icon', 'giphy')} onClick={this.openGiphy} Icon={IconStickerCircle} size='small' />
-                )}
-
-                {this.allowFileAttachment && (
-                  <Menu
-                    onSelected={this.mediaSelected}
-                    mimeTypes={this.mimeTypes}
-                    maxSize={config.cloudinary.max_file_size}
-                  />
-                )}
-              </div>
+            <div {...cn('icon-wrapper')}>
+              {this.allowGiphy && (
+                <IconButton {...cn('icon', 'giphy')} onClick={this.openGiphy} Icon={IconStickerCircle} size='small' />
+              )}
+
+              {this.allowFileAttachment && (
+                <Menu
+                  onSelected={this.mediaSelected}
+                  mimeTypes={this.mimeTypes}
+                  maxSize={config.cloudinary.max_file_size}
+                />
+              )}
             </div>
           )}
 
-          <div {...cn('chat-container')}>
+          <div {...cn('chat-container', this.props.isEditing && 'editing')}>
             <div {...cn('scroll-container')}>
               <div {...cn('text-and-emoji-wrapper')}>
                 <Dropzone
@@ -361,21 +359,19 @@ export class MessageInput extends React.Component<Properties, State> {
           </div>
 
           {!this.props.isEditing && (
-            <div {...cn('icon-outer')}>
-              <div {...cn('icon-wrapper')}>
-                {/* See: ZOS-115
-                 * @ts-ignore */}
-                <Tooltip content={this.sendDisabledTooltipContent} open={this.state.isSendTooltipOpen}>
-                  <IconButton
-                    {...cn('icon', 'end-action')}
-                    onClick={this.onSend}
-                    Icon={IconSend3}
-                    size='small'
-                    isFilled={this.sendHighlighted()}
-                    label='send'
-                  />
-                </Tooltip>
-              </div>
+            <div {...cn('icon-wrapper')}>
+              {/* See: ZOS-115
+               * @ts-ignore */}
+              <Tooltip content={this.sendDisabledTooltipContent} open={this.state.isSendTooltipOpen}>
+                <IconButton
+                  {...cn('icon', 'end-action')}
+                  onClick={this.onSend}
+                  Icon={IconSend3}
+                  size='small'
+                  isFilled={this.sendHighlighted()}
+                  label='send'
+                />
+              </Tooltip>
             </div>
           )}
         </div>

src/components/message-input/mentions/index.tsx

@@ -88,6 +88,7 @@ export class Mentions extends React.Component<Properties> {
         allowSuggestionsAboveCursor
         suggestionsPortalHost={document.body}
         onContextMenu={this.handleOnContextMenu}
+        placeholder='Write a Message...'
       >
         {this.renderMentionTypes()}
       </MentionsInput>

src/components/message-input/styles.scss

@@ -4,14 +4,15 @@
 
 .message-input {
   display: flex;
-  padding: 8px 16px;
   flex-direction: column;
   justify-content: flex-end;
   align-items: flex-end;
   gap: 8px;
+  padding: 12px 18px;
 
   &--editing {
     padding: 0;
+
     margin-right: none;
   }
 
@@ -34,16 +35,11 @@
     width: 100%;
   }
 
-  &__icon-outer {
-    padding-bottom: 8px;
-  }
-
   &__emoji-icon-outer {
     display: flex;
     align-self: flex-end;
     position: sticky;
     bottom: 0;
-    margin-right: 3px;
   }
 
   &__icon-wrapper {
@@ -63,19 +59,23 @@
 
   &__chat-container {
     display: flex;
-    padding: 8px 0px 8px 16px;
+    padding: 0;
     flex-direction: column;
     justify-content: center;
     align-items: flex-end;
     gap: 8px;
     width: 100%;
     border-radius: 8px;
 
-    @include glass-input-inset-default;
+    &--editing {
+      padding: 8px 0px 8px 16px;
+
+      @include glass-input-inset-default;
 
-    &:focus-within {
-      border-color: theme.$color-primary-7;
-      @include glass-input-inset-active;
+      &:focus-within {
+        border-color: theme.$color-primary-7;
+        @include glass-input-inset-active;
+      }
     }
   }