PLT-7224 - Updating post textbox UI (#7153)

* PLT-7224 - Updating post textbox UI

* Updating post textbox spacing

* Updating emoji icon

6 files changed, 23 insertions, 11 deletions

diff --git a/webapp/components/create_comment/create_comment.jsx b/webapp/components/create_comment/create_comment.jsx
index 9370d7b48..54f3f65ca 100644
--- a/webapp/components/create_comment/create_comment.jsx
+++ b/webapp/components/create_comment/create_comment.jsx
@@ -549,7 +549,7 @@ export default class CreateComment extends React.Component {
         let emojiPicker = null;
         if (window.mm_config.EnableEmojiPicker === 'true') {
             emojiPicker = (
-                <span>
+                <span className='emoji-picker__container'>
                     <EmojiPickerOverlay
                         show={this.state.showEmojiPicker}
                         container={this.props.getSidebarBody}
@@ -560,7 +560,8 @@ export default class CreateComment extends React.Component {
                         topOffset={55}
                     />
                     <span
-                        className={'fa fa-smile-o icon--emoji-picker emoji-rhs'}
+                        className='icon icon--emoji emoji-rhs'
+                        dangerouslySetInnerHTML={{__html: Constants.EMOJI_ICON_SVG}}
                         onClick={this.toggleEmojiPicker}
                         onMouseOver={EmojiPicker.beginPreloading}
                     />
@@ -594,7 +595,7 @@ export default class CreateComment extends React.Component {
                             />
                             <span
                                 ref='createCommentControls'
-                                className='btn btn-file'
+                                className='post-body__actions'
                             >
                                 {fileUpload}
                                 {emojiPicker}
diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx
index 4b83f3051..e7329c5f3 100644
--- a/webapp/components/create_post.jsx
+++ b/webapp/components/create_post.jsx
@@ -721,7 +721,7 @@ export default class CreatePost extends React.Component {
         let emojiPicker = null;
         if (window.mm_config.EnableEmojiPicker === 'true') {
             emojiPicker = (
-                <span>
+                <span className='emoji-picker__container'>
                     <EmojiPickerOverlay
                         show={this.state.showEmojiPicker}
                         container={this.props.getChannelView}
@@ -732,7 +732,8 @@ export default class CreatePost extends React.Component {
                         topOffset={-7}
                     />
                     <span
-                        className={'fa fa-smile-o icon--emoji-picker emoji-main'}
+                        className='icon icon--emoji'
+                        dangerouslySetInnerHTML={{__html: Constants.EMOJI_ICON_SVG}}
                         onClick={this.toggleEmojiPicker}
                         onMouseOver={EmojiPicker.beginPreloading}
                     />
@@ -767,7 +768,7 @@ export default class CreatePost extends React.Component {
                             />
                             <span
                                 ref='createPostControls'
-                                className='btn btn-file'
+                                className='post-body__actions'
                             >
                                 {fileUpload}
                                 {emojiPicker}
diff --git a/webapp/components/file_upload.jsx b/webapp/components/file_upload.jsx
index 3e28f11df..9ec4aaf2f 100644
--- a/webapp/components/file_upload.jsx
+++ b/webapp/components/file_upload.jsx
@@ -380,9 +380,8 @@ class FileUpload extends React.Component {
         let fileDiv;
         if (FileUtils.canUploadFiles()) {
             fileDiv = (
-                <div className='icon--attachment'>
+                <div className='icon icon--attachment'>
                     <span
-                        className='icon'
                         dangerouslySetInnerHTML={{__html: Constants.ATTACHMENT_ICON_SVG}}
                     />
                     <input
diff --git a/webapp/components/post_view/post_info/post_info.jsx b/webapp/components/post_view/post_info/post_info.jsx
index 21492b92f..2c5b98c69 100644
--- a/webapp/components/post_view/post_info/post_info.jsx
+++ b/webapp/components/post_view/post_info/post_info.jsx
@@ -173,7 +173,10 @@ export default class PostInfo extends React.PureComponent {
                             className='reacticon__container'
                             onClick={this.toggleEmojiPicker}
                         >
-                            <i className='fa fa-smile-o'/>
+                            <span
+                                className='icon icon--emoji'
+                                dangerouslySetInnerHTML={{__html: Constants.EMOJI_ICON_SVG}}
+                            />
                         </a>
                     </span>
 
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index a4db89835..6b27848bb 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -371,7 +371,11 @@ export default class RhsComment extends React.Component {
                         className='reacticon__container reaction'
                         onClick={this.toggleEmojiPicker}
                         ref={'rhs_reacticon_' + post.id}
-                    ><i className='fa fa-smile-o'/>
+                    >
+                        <span
+                            className='icon icon--emoji'
+                            dangerouslySetInnerHTML={{__html: Constants.EMOJI_ICON_SVG}}
+                        />
                     </a>
                 </span>
 
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index ed88fff05..9c7fd7244 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -236,7 +236,11 @@ export default class RhsRootPost extends React.Component {
                         className='reacticon__container reaction'
                         onClick={this.toggleEmojiPicker}
                         ref='rhs_root_reacticon'
-                    ><i className='fa fa-smile-o'/>
+                    >
+                        <span
+                            className='icon icon--emoji'
+                            dangerouslySetInnerHTML={{__html: Constants.EMOJI_ICON_SVG}}
+                        />
                     </a>
                 </span>