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

* PLT-7224 - Updating post textbox UI

* Updating post textbox spacing

* Updating emoji icon

13 files changed, 160 insertions, 195 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>
 
diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss
index 1442a8de8..fefb58092 100644
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -82,11 +82,6 @@
             min-width: 1px;
         }
 
-        .post-create-footer {
-            padding: 5px 0 30px;
-            width: 100%;
-        }
-
         .post-right-comments-upload-in-progress {
             @include opacity(.7);
             margin-right: 10px;
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 1857462e6..245ff062f 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -258,10 +258,9 @@
 
     .post-list-holder-by-time {
         -webkit-overflow-scrolling: touch;
-        background: #ffffff;
         height: 100%;
         overflow-y: scroll;
-        padding: 1em 0 0;
+        padding: 1em 0 .5em;
         position: absolute;
         width: 100%;
 
@@ -385,7 +384,7 @@
 .post-create__container {
     @include flex(0 0 auto);
     width: 100%;
-    z-index: 9;
+    z-index: 5;
 
     label {
         font-weight: normal;
@@ -393,7 +392,7 @@
 
     form {
         margin: 0 auto;
-        padding: .5em 15px 0;
+        padding: 0 15px 0;
         width: 100%;
     }
 
@@ -404,16 +403,16 @@
     .custom-textarea {
         bottom: 0;
         max-height: 162px;
-        padding-top: 8px;
         overflow: hidden;
+        padding: 14px 0 14px 20px;
         resize: none;
 
         &:not(.custom-textarea--emoji-picker) {
-            padding-right: 35px;
+            padding-right: 40px;
         }
 
         &.custom-textarea--emoji-picker {
-            padding-right: 60px;
+            padding-right: 80px;
         }
 
         &.textbox-preview-area {
@@ -423,26 +422,113 @@
 
     .emoji-picker {
         position: absolute;
+        right: 0;
         top: -361px;
-        right: 0px;
     }
 
-    .post-create.scroll {
-        .btn-file {
+    .scroll {
+        .post-body__actions {
             right: 10px;
         }
 
         .custom-textarea {
             -ms-overflow-style: auto;
-            overflow: auto;
             -webkit-overflow-scrolling: touch;
+            overflow: auto;
 
             &:not(.custom-textarea--emoji-picker) {
-                padding-right: 43px;
+                padding-right: 50px;
             }
 
             &.custom-textarea--emoji-picker {
-                padding-right: 60px;
+                padding-right: 90px;
+            }
+        }
+    }
+
+    .post-body__actions {
+        display: flex;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+
+        > span {
+            border-left: 1px solid transparent;
+            width: 41px;
+
+            &:first-child {
+                border: none;
+            }
+
+            > span,
+            div {
+                display: block;
+                height: 49px;
+                line-height: 49px;
+                text-align: center;
+                width: 100%;
+            }
+        }
+
+        &:hover,
+        &:active {
+            box-shadow: none;
+        }
+
+        &.btn-file__disabled {
+            @include opacity(.1);
+
+            &:hover,
+            &:active {
+                @include opacity(.1);
+            }
+        }
+
+        .icon--emoji {
+            @include opacity(.5);
+            @include single-transition(all, .15s);
+            cursor: pointer;
+
+            &:hover {
+                @include opacity(.7);
+            }
+
+            svg {
+                position: relative;
+                top: 2px;
+            }
+        }
+
+        .icon--attachment {
+            @include opacity(.4);
+            @include single-transition(all, .15s);
+            cursor: pointer;
+            overflow: hidden;
+            position: relative;
+            vertical-align: top;
+
+            &:hover {
+                @include opacity(.6);
+            }
+
+            input {
+                cursor: pointer;
+                direction: ltr;
+                filter: alpha(opacity=0);
+                font-size: 23px;
+                height: 100%;
+                margin: 0;
+                opacity: 0;
+                position: absolute;
+                right: 0;
+                top: 0;
+                width: 100%;
+            }
+
+            svg {
+                position: relative;
+                top: 3px;
             }
         }
     }
@@ -477,69 +563,11 @@
             }
         }
 
-        .btn-file {
-            @include single-transition(all, .15s);
-            font-size: 16px;
-            padding: 8px 9px 4px;
-            position: absolute;
-            right: 0;
-            top: 0;
-            z-index: 5;
-
-            svg {
-                height: 18px;
-                width: 18px;
-            }
-
-            &:hover,
-            &:active {
-                box-shadow: none;
-            }
-
-            &.btn-file__disabled {
-                @include opacity(.1);
-
-                &:hover,
-                &:active {
-                    @include opacity(.1);
-                }
-            }
-
-            .icon--attachment {
-                @include opacity(.5);
-                display: inline-block;
-                position: relative;
-                vertical-align: top;
-
-                input {
-                    cursor: pointer;
-                    direction: ltr;
-                    filter: alpha(opacity=0);
-                    font-size: 23px;
-                    height: 100%;
-                    margin: 0;
-                    opacity: 0;
-                    position: absolute;
-                    right: 0;
-                    top: 0;
-                    width: 100%;
-                }
-
-                &:hover {
-                    @include opacity(.9);
-                }
-            }
-        }
-
 
         .icon--emoji-picker {
             @include opacity(.5);
             @include single-transition(all, .15s);
             cursor: pointer;
-            font-size: 19px;
-            margin-left: 7px;
-            position: relative;
-            vertical-align: top;
 
             &:hover,
             &:active {
@@ -573,23 +601,6 @@
             }
         }
 
-
-        .icon--emoji-picker {
-            @include opacity(.5);
-            @include single-transition(all, .15s);
-            cursor: pointer;
-            font-size: 19px;
-            margin-left: 7px;
-            position: relative;
-            vertical-align: top;
-
-            &:hover,
-            &:active {
-                @include opacity(.9);
-                box-shadow: none;
-            }
-        }
-
         textarea {
             box-shadow: none;
         }
@@ -1524,6 +1535,13 @@
         margin-left: 5px;
         vertical-align: top;
         visibility: hidden;
+
+        svg {
+            height: 14px;
+            position: relative;
+            top: 1px;
+            width: 14px;
+        }
     }
 
     .flag-icon__container {
diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss
index 73654923f..bf1cef606 100644
--- a/webapp/sass/layout/_sidebar-right.scss
+++ b/webapp/sass/layout/_sidebar-right.scss
@@ -95,17 +95,17 @@
 
         .post-create-footer {
             @include clearfix;
+            clear: both;
             font-size: 13px;
             overflow: visible;
             position: relative;
-            clear: both;
 
             .post-error {
-                font-weight: normal;
-                margin-bottom: 0;
+                @include opacity(.55);
                 display: inline-block;
                 font-size: .85em;
-                @include opacity(.55);
+                font-weight: normal;
+                margin-bottom: 0;
                 position: absolute;
                 top: -25px;
             }
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index ba830000a..fdbf774ee 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -40,13 +40,30 @@
     }
 
     .post-create__container {
-        padding-bottom: 10px;
+        .post-create-footer {
+            padding: 0 10px;
+        }
+
+        form {
+            padding: 0;
+        }
+
+        .post-create-body {
+            padding: 0;
+
+            textarea {
+                .app-content & {
+                    border-left: none;
+                    border-right: none;
+                }
+            }
+        }
 
         .msg-typing {
             display: none;
         }
 
-        .icon--emoji-picker {
+        .emoji-picker__container {
             display: none;
         }
     }
@@ -821,7 +838,7 @@
     }
 
     .file-preview__container {
-        margin: 5px 0 0;
+        margin: 10px 0 5px;
     }
 
     .file-preview {
@@ -1189,6 +1206,8 @@
             }
 
             .post-create-footer {
+                padding-top: 10px;
+
                 .control-label {
                     margin: .5em 0;
                     top: 0;
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 71b95c997..967d6231d 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -19,86 +19,6 @@
         }
     }
 
-    .post-create__container {
-        .post-create {
-            &.post-create--attachment-disabled {
-                .post-body__cell {
-                    padding-left: 1em;
-                }
-
-                .post-create-footer {
-                    padding-left: 1em;
-                }
-            }
-        }
-
-        form {
-            padding: .5em 0 0;
-        }
-
-        .post-create-footer {
-            padding: 0 45px 0 8px;
-
-            .post-error {
-                position: relative;
-                top: 0;
-
-                .sidebar--right & {
-                    left: 0;
-                }
-            }
-        }
-
-        .post-create-body {
-            display: table;
-            width: 100%;
-
-            .post-body__cell {
-                display: table-cell;
-                padding-left: 45px;
-
-
-                .sidebar--right & {
-                    padding-left: 0;
-                }
-            }
-
-            .app__content & {
-                .btn-file {
-                    bottom: -2px;
-                    left: 10px;
-                    line-height: 36px;
-                    padding: 0;
-                    top: auto;
-                    width: 25px;
-
-                    .icon--emoji-picker {
-                        display: none;
-                    }
-                }
-            }
-
-            .app__content & {
-                .icon {
-                    position: relative;
-                    top: 3px;
-
-                }
-            }
-
-            .icon__emoji_picker {
-                position: relative;
-                display: none;
-                top: 1px;
-                right: -1px;
-            }
-
-            .send-button {
-                display: table-cell;
-            }
-        }
-    }
-
     .signup-team__container {
         &.branded {
             display: block;
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index a5e24c69c..ea6d1dba3 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -470,12 +470,13 @@ export const Constants = {
     OPEN_TEAM: 'O',
     MAX_POST_LEN: 4000,
     EMOJI_SIZE: 16,
+    EMOJI_ICON_SVG: "<svg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g transform='translate(-1071.000000, -954.000000)' fill='inherit'> <g transform='translate(25.000000, 937.000000)'> <g transform='translate(1046.000000, 17.000000)'> <path d='M7.5,0.0852272727 C3.405,0.0852272727 0.0852272727,3.405 0.0852272727,7.5 C0.0852272727,11.595 3.405,14.9147727 7.5,14.9147727 C11.595,14.9147727 14.9147727,11.595 14.9147727,7.5 C14.9147727,3.405 11.595,0.0852272727 7.5,0.0852272727 Z M7.5,14.0663436 C3.87926951,14.0663436 0.933656417,11.1207305 0.933656417,7.5 C0.933656417,3.87926951 3.87926951,0.933656417 7.5,0.933656417 C11.1207305,0.933656417 14.0663436,3.87926951 14.0663436,7.5 C14.0663436,11.1207305 11.1207305,14.0663436 7.5,14.0663436 Z'></path> <path d='M11.7732955,8.95397727 C12.0119318,8.90488636 12.2159659,9.11778409 12.1684091,9.35676136 C11.8063636,11.1790909 9.85346591,12.5710227 7.49846591,12.5710227 C5.15096591,12.5710227 3.20284091,11.1877841 2.83193182,9.37397727 C2.78181818,9.129375 2.99267045,8.911875 3.23744318,8.96198864 C4.85369318,9.29232955 10.1786932,9.28142045 11.7732955,8.95397727 Z'></path> <ellipse cx='4.94318182' cy='5.50431818' rx='1' ry='1.06534091'></ellipse> <ellipse cx='10.0568182' cy='5.50431818' rx='1' ry='1.06534091'></ellipse> </g> </g> </g> </g> </svg>",
     UNREAD_ICON_SVG: "<svg width='10px' height='10px' viewBox='0 0 10 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'><g transform='matrix(1,0,0,1,-20,-18)'><g transform='matrix(0.0330723,0,0,0.0322634,15.8132,12.3164)'><path d='M245.803,377.493C245.803,377.493 204.794,336.485 179.398,311.088C168.55,300.24 150.962,300.24 140.114,311.088C138.327,312.875 136.517,314.686 134.73,316.473C123.882,327.321 123.882,344.908 134.73,355.756C167.972,388.998 233.949,454.975 256.949,477.975C262.158,483.184 269.223,486.111 276.591,486.111C277.38,486.111 278.176,486.111 278.965,486.111C286.332,486.111 293.397,483.184 298.607,477.975C321.607,454.975 387.584,388.998 420.826,355.756C431.674,344.908 431.674,327.321 420.826,316.473C419.039,314.686 417.228,312.875 415.441,311.088C404.593,300.24 387.005,300.24 376.158,311.088C350.761,336.485 309.753,377.493 309.753,377.493C309.753,377.493 309.753,279.687 309.753,203.94C309.753,196.573 306.826,189.508 301.617,184.298C296.408,179.089 289.342,176.162 281.975,176.162C279.191,176.162 276.364,176.162 273.58,176.162C266.213,176.162 259.148,179.089 253.939,184.298C248.729,189.508 245.803,196.573 245.803,203.94L245.803,377.493Z'/></g></g></svg>",
     MEMBERS_ICON_SVG: "<svg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Symbols' stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g id='Channel-Header/Web-HD' transform='translate(-725.000000, -32.000000)' fill-rule='nonzero' fill='inherit'> <g id='Channel-Header'> <g id='user-count' transform='translate(676.000000, 22.000000)'> <path d='M64.9481342,24 C64.6981342,20.955 63.2551342,19.076 60.6731342,18.354 C61.4831342,17.466 61.9881342,16.296 61.9881342,15 C61.9881342,12.238 59.7501342,10 56.9881342,10 C54.2261342,10 51.9881342,12.238 51.9881342,15 C51.9881342,16.297 52.4941342,17.467 53.3031342,18.354 C50.7221342,19.076 49.2771342,20.955 49.0271342,24 C49.0161342,24.146 49.0061342,24.577 49.0001342,25.001 C48.9911342,25.553 49.4361342,26 49.9881342,26 L63.9881342,26 C64.5411342,26 64.9851342,25.553 64.9761342,25.001 C64.9701342,24.577 64.9601342,24.146 64.9481342,24 Z M56.9881342,12 C58.6421342,12 59.9881342,13.346 59.9881342,15 C59.9881342,16.654 58.6421342,18 56.9881342,18 C55.3341342,18 53.9881342,16.654 53.9881342,15 C53.9881342,13.346 55.3341342,12 56.9881342,12 Z M51.0321342,24 C51.2981342,21.174 52.7911342,20 55.9881342,20 L57.9881342,20 C61.1851342,20 62.6781342,21.174 62.9441342,24 L51.0321342,24 Z' id='User_4_x2C__Profile_5-Copy-9'></path> </g> </g> </g> </g> </svg>",
     TEAM_INFO_SVG: "<svg width='100%' height='100%' viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'> <g transform='matrix(1.17647,0,0,1.17647,-1.55431e-15,-1.00573e-14)'> <path d='M8.5,0C3.797,0 0,3.797 0,8.5C0,13.203 3.797,17 8.5,17C13.203,17 17,13.203 17,8.5C17,3.797 13.203,0 8.5,0ZM10,8.5C10,7.672 9.328,7 8.5,7C7.672,7 7,7.672 7,8.5L7,12.45C7,13.278 7.672,13.95 8.5,13.95C9.328,13.95 10,13.278 10,12.45L10,8.5ZM8.5,3C9.328,3 10,3.672 10,4.5C10,5.328 9.328,6 8.5,6C7.672,6 7,5.328 7,4.5C7,3.672 7.672,3 8.5,3Z'/> </g> </svg>",
     FLAG_FILLED_ICON_SVG: "<svg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g transform='translate(-1073.000000, -33.000000)' fill-rule='nonzero' fill='inherit'> <g transform='translate(-1.000000, 0.000000)'> <g transform='translate(1064.000000, 22.000000)'> <g transform='translate(10.000000, 11.000000)'> <path d='M8,1 L2,1 C2,0.447 1.553,0 1,0 C0.447,0 0,0.447 0,1 L0,15.5 C0,15.776 0.224,16 0.5,16 L1.5,16 C1.776,16 2,15.776 2,15.5 L2,11 L7,11 L7,12 C7,12.553 7.447,13 8,13 L15,13 C15.553,13 16,12.553 16,12 L16,4 C16,3.447 15.553,3 15,3 L9,3 L9,2 C9,1.447 8.553,1 8,1 Z'></path> </g> </g> </g> </g> </g> </svg>",
     FLAG_ICON_SVG: "<svg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g transform='translate(-1106.000000, -33.000000)' fill-rule='nonzero' fill='inherit'> <g> <g transform='translate(1096.000000, 22.000000)'> <g transform='translate(10.000000, 11.000000)'> <path d='M8,1 L2,1 C2,0.447 1.553,0 1,0 C0.447,0 0,0.447 0,1 L0,15.5 C0,15.776 0.224,16 0.5,16 L1.5,16 C1.776,16 2,15.776 2,15.5 L2,11 L7,11 L7,12 C7,12.553 7.447,13 8,13 L15,13 C15.553,13 16,12.553 16,12 L16,4 C16,3.447 15.553,3 15,3 L9,3 L9,2 C9,1.447 8.553,1 8,1 Z M9,11 L9,9.5 C9,9.224 8.776,9 8.5,9 L2,9 L2,3 L7,3 L7,4.5 C7,4.776 7.224,5 7.5,5 L14,5 L14,11 L9,11 Z'></path> </g> </g> </g> </g> </g> </svg>",
-    ATTACHMENT_ICON_SVG: "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 48 48' enable-background='new 0 0 48 48' xml:space='preserve'><g><path d='M43.922,6.653c-2.643-2.644-6.201-4.107-9.959-4.069c-3.774,0.019-7.32,1.497-9.983,4.161l-12.3,12.3l-8.523,8.521   c-4.143,4.144-4.217,10.812-0.167,14.862c1.996,1.996,4.626,2.989,7.277,2.989c2.73,0,5.482-1.055,7.583-3.156l15.547-15.545   c0.002-0.002,0.002-0.004,0.004-0.005l5.358-5.358c1.394-1.393,2.176-3.24,2.201-5.2c0.026-1.975-0.716-3.818-2.09-5.192   c-2.834-2.835-7.496-2.787-10.394,0.108L9.689,29.857c-0.563,0.563-0.563,1.474,0,2.036c0.281,0.28,0.649,0.421,1.018,0.421   c0.369,0,0.737-0.141,1.018-0.421l18.787-18.788c1.773-1.774,4.609-1.824,6.322-0.11c0.82,0.82,1.263,1.928,1.247,3.119   c-0.017,1.205-0.497,2.342-1.357,3.201l-5.55,5.551c-0.002,0.002-0.002,0.004-0.004,0.005L15.814,40.225   c-3.02,3.02-7.86,3.094-10.789,0.167c-2.928-2.929-2.854-7.77,0.167-10.791l0.958-0.958c0.001-0.002,0.004-0.002,0.005-0.004   L26.016,8.78c2.123-2.124,4.951-3.303,7.961-3.317c2.998,0.02,5.814,1.13,7.91,3.226c4.35,4.351,4.309,11.472-0.093,15.873   L25.459,40.895c-0.563,0.562-0.563,1.473,0,2.035c0.281,0.281,0.65,0.422,1.018,0.422c0.369,0,0.737-0.141,1.018-0.422   L43.83,26.596C49.354,21.073,49.395,12.126,43.922,6.653z'></path></g></svg>",
+    ATTACHMENT_ICON_SVG: "<svg width='17px' height='16px' viewBox='0 0 17 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g fill='inherit' fill-rule='evenodd'> <g transform='translate(-1029.000000, -954.000000)' fill-rule='nonzero' fill='inherit'> <g transform='translate(25.000000, 937.000000)'> <g transform='translate(1004.000000, 17.000000)'> <path d='M5.35,15.56 C3.98,15.56 2.61,15.039 1.567,13.997 C0.557,12.984 0,11.642 0,10.212 C0,8.783 0.557,7.44 1.566,6.429 L6.869,1.126 C8.371,-0.376 10.812,-0.375 12.314,1.125 C13.815,2.627 13.815,5.069 12.314,6.57 L7.011,11.873 C6.094,12.792 4.603,12.79 3.687,11.873 C2.771,10.958 2.771,9.467 3.687,8.551 L8.99,3.248 C9.323,2.916 9.861,2.916 10.193,3.248 C10.525,3.579 10.525,4.118 10.193,4.449 L4.89,9.752 C4.637,10.006 4.637,10.418 4.89,10.672 C5.143,10.923 5.555,10.925 5.809,10.672 L11.113,5.369 C11.952,4.53 11.952,3.166 11.113,2.327 C10.276,1.49 8.911,1.488 8.073,2.327 L2.769,7.631 C2.079,8.32 1.699,9.237 1.699,10.212 C1.699,11.188 2.079,12.104 2.768,12.794 C4.19,14.216 6.502,14.216 7.925,12.798 L7.929,12.794 C7.929,12.793 7.929,12.793 7.929,12.793 L15.355,5.369 C15.687,5.037 16.224,5.037 16.556,5.369 C16.888,5.7 16.888,6.239 16.556,6.57 L8.779,14.348 L8.761,14.332 C7.776,15.15 6.562,15.56 5.35,15.56 Z'></path> </g> </g> </g> </g> </svg>",
     MATTERMOST_ICON_SVG: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'viewBox='0 0 500 500' style='enable-background:new 0 0 500 500;' xml:space='preserve'> <style type='text/css'> .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#222222;} </style> <g id='XMLID_1_'> <g id='XMLID_3_'> <path id='XMLID_4_' class='st0' d='M396.9,47.7l2.6,53.1c43,47.5,60,114.8,38.6,178.1c-32,94.4-137.4,144.1-235.4,110.9 S51.1,253.1,83,158.7C104.5,95.2,159.2,52,222.5,40.5l34.2-40.4C150-2.8,49.3,63.4,13.3,169.9C-31,300.6,39.1,442.5,169.9,486.7 s272.6-25.8,316.9-156.6C522.7,223.9,483.1,110.3,396.9,47.7z'/> </g> <path id='XMLID_2_' class='st0' d='M335.6,204.3l-1.8-74.2l-1.5-42.7l-1-37c0,0,0.2-17.8-0.4-22c-0.1-0.9-0.4-1.6-0.7-2.2 c0-0.1-0.1-0.2-0.1-0.3c0-0.1-0.1-0.2-0.1-0.2c-0.7-1.2-1.8-2.1-3.1-2.6c-1.4-0.5-2.9-0.4-4.2,0.2c0,0-0.1,0-0.1,0 c-0.2,0.1-0.3,0.1-0.4,0.2c-0.6,0.3-1.2,0.7-1.8,1.3c-3,3-13.7,17.2-13.7,17.2l-23.2,28.8l-27.1,33l-46.5,57.8 c0,0-21.3,26.6-16.6,59.4s29.1,48.7,48,55.1c18.9,6.4,48,8.5,71.6-14.7C336.4,238.4,335.6,204.3,335.6,204.3z'/> </g> </svg>",
     ONLINE_AVATAR_SVG: "<svg version='1.1'id='Layer_1' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns:svg='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:cc='http://creativecommons.org/ns#' inkscape:version='0.48.4 r9939' sodipodi:docname='TRASH_1_4.svg'xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-243 245 12 12'style='enable-background:new -243 245 12 12;' xml:space='preserve'> <sodipodi:namedview  inkscape:cx='26.358185' inkscape:zoom='1.18' bordercolor='#666666' pagecolor='#ffffff' borderopacity='1' objecttolerance='10' inkscape:cy='139.7898' gridtolerance='10' guidetolerance='10' showgrid='false' showguides='true' id='namedview6' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:guide-bbox='true' inkscape:window-width='1366' inkscape:current-layer='Layer_1' inkscape:window-height='705' inkscape:window-y='-8' inkscape:window-maximized='1' inkscape:window-x='-8'> <sodipodi:guide  position='50.036793,85.991376' orientation='1,0' id='guide2986'></sodipodi:guide> <sodipodi:guide  position='58.426196,66.216355' orientation='0,1' id='guide3047'></sodipodi:guide> </sodipodi:namedview> <g> <path class='online--icon' d='M-236,250.5C-236,250.5-236,250.5-236,250.5C-236,250.5-236,250.5-236,250.5C-236,250.5-236,250.5-236,250.5z'/> <ellipse class='online--icon' cx='-238.5' cy='248' rx='2.5' ry='2.5'/> </g> <path class='online--icon' d='M-238.9,253.8c0-0.4,0.1-0.9,0.2-1.3c-2.2-0.2-2.2-2-2.2-2s-1,0.1-1.2,0.5c-0.4,0.6-0.6,1.7-0.7,2.5c0,0.1-0.1,0.5,0,0.6 c0.2,1.3,2.2,2.3,4.4,2.4c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0C-238.7,255.7-238.9,254.8-238.9,253.8z'/> <g> <g> <path class='online--icon' d='M-232.3,250.1l1.3,1.3c0,0,0,0.1,0,0.1l-4.1,4.1c0,0,0,0-0.1,0c0,0,0,0,0,0l-2.7-2.7c0,0,0-0.1,0-0.1l1.2-1.2 c0,0,0.1,0,0.1,0l1.4,1.4l2.9-2.9C-232.4,250.1-232.3,250.1-232.3,250.1z'/> </g> </g> </svg>",
     AWAY_AVATAR_SVG: "<svg version='1.1'id='Layer_1' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns:svg='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:cc='http://creativecommons.org/ns#' inkscape:version='0.48.4 r9939' sodipodi:docname='TRASH_1_4.svg'xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-299 391 12 12'style='enable-background:new -299 391 12 12;' xml:space='preserve'> <sodipodi:namedview  inkscape:cx='26.358185' inkscape:zoom='1.18' bordercolor='#666666' pagecolor='#ffffff' borderopacity='1' objecttolerance='10' inkscape:cy='139.7898' gridtolerance='10' guidetolerance='10' showgrid='false' showguides='true' id='namedview6' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:guide-bbox='true' inkscape:window-width='1366' inkscape:current-layer='Layer_1' inkscape:window-height='705' inkscape:window-y='-8' inkscape:window-maximized='1' inkscape:window-x='-8'> <sodipodi:guide  position='50.036793,85.991376' orientation='1,0' id='guide2986'></sodipodi:guide> <sodipodi:guide  position='58.426196,66.216355' orientation='0,1' id='guide3047'></sodipodi:guide> </sodipodi:namedview> <g> <ellipse class='away--icon' cx='-294.6' cy='394' rx='2.5' ry='2.5'/> <path class='away--icon' d='M-293.8,399.4c0-0.4,0.1-0.7,0.2-1c-0.3,0.1-0.6,0.2-1,0.2c-2.5,0-2.5-2-2.5-2s-1,0.1-1.2,0.5c-0.4,0.6-0.6,1.7-0.7,2.5 c0,0.1-0.1,0.5,0,0.6c0.2,1.3,2.2,2.3,4.4,2.4c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.7,0,1.4-0.1,2-0.3 C-293.3,401.5-293.8,400.5-293.8,399.4z'/> </g> <path class='away--icon' d='M-287,400c0,0.1-0.1,0.1-0.1,0.1l-4.9,0c-0.1,0-0.1-0.1-0.1-0.1v-1.6c0-0.1,0.1-0.1,0.1-0.1l4.9,0c0.1,0,0.1,0.1,0.1,0.1 V400z'/> </svg>",
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 2df4a753e..52574e735 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -650,9 +650,9 @@ export function applyTheme(theme) {
         changeCss('.app__body .post-image__details', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .post-image__column a, .app__body .post-image__column a:hover, .app__body .post-image__column a:focus', 'color:' + theme.centerChannelColor);
         changeCss('@media(min-width: 768px){.app__body .search-bar__container .search__form .search-bar, .app__body .form-control', 'color:' + theme.centerChannelColor);
-        changeCss('.app__body .input-group-addon, .app__body .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
+        changeCss('.app__body .input-group-addon, .app__body .form-control, .app__body .post-create__container .post-body__actions > span', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1));
         changeCss('@media(min-width: 768px){.app__body .post-list__table .post-list__content .dropdown-menu a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.1));
-        changeCss('.app__body .form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3));
+        changeCss('.app__body .form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .attachment .attachment__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3));
         changeCss('.app__body .input-group-addon, .app__body .channel-intro .channel-intro__content, .app__body .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05));
         changeCss('.app__body .date-separator .separator__text', 'color:' + theme.centerChannelColor);
@@ -679,7 +679,7 @@ export function applyTheme(theme) {
             changeCss('body.app__body ::-webkit-scrollbar-thumb', 'background:' + changeOpacity(theme.centerChannelColor, 0.4));
         }
         changeCss('body', 'scrollbar-arrow-color:' + theme.centerChannelColor);
-        changeCss('.app__body .post-create__container .post-create-body .btn-file svg, .app__body .post.post--compact .post-image__column .post-image__details svg, .app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg', 'fill:' + theme.centerChannelColor);
+        changeCss('.app__body .post-create__container .post-create-body .btn-file svg, .app__body .post.post--compact .post-image__column .post-image__details svg, .app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg, .app__body .post-body__actions svg', 'fill:' + theme.centerChannelColor);
         changeCss('.app__body .scrollbar--horizontal, .app__body .scrollbar--vertical', 'background:' + changeOpacity(theme.centerChannelColor, 0.5));
         changeCss('.app__body .post-list__new-messages-below', 'background:' + changeColor(theme.centerChannelColor, 0.5));
         changeCss('.app__body .post.post--comment .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));