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

* PLT-7224 - Updating post textbox UI

* Updating post textbox spacing

* Updating emoji icon

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}

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}

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

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>
 

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>
 

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>