PLT-5985 Cleaned up CSS for post textbox (#5974)

webapp/components/textbox.jsx

@@ -246,6 +246,14 @@ export default class Textbox extends React.Component {
             </div>
         );
 
+        let textboxClassName = 'form-control custom-textarea';
+        if (this.props.emojiEnabled) {
+            textboxClassName += ' custom-textarea--emoji-picker';
+        }
+        if (this.state.connection) {
+            textboxClassName += ' ' + this.state.connection;
+        }
+
         return (
             <div
                 ref='wrapper'
@@ -254,7 +262,7 @@ export default class Textbox extends React.Component {
                 <SuggestionBox
                     id={this.props.id}
                     ref='message'
-                    className={`form-control custom-textarea${this.props.emojiEnabled ? '-emoji' : ''} ${this.state.connection}`}
+                    className={textboxClassName}
                     type='textarea'
                     spellCheck='true'
                     placeholder={this.props.createMessage}

webapp/sass/layout/_post-right.scss

@@ -71,8 +71,7 @@
             }
         }
 
-        .custom-textarea,
-        .custom-textarea-emoji {
+        .custom-textarea {
             min-height: 100px;
         }
 

webapp/sass/layout/_post.scss

@@ -15,11 +15,11 @@
         border-color: #cccccc;
         box-shadow: none;
     }
-}
 
-.bad-connection {
+    &.bad-connection {
         background: #ffffac !important;
         color: #d04444 !important;
+    }
 }
 
 .textarea-wrapper {
@@ -362,31 +362,34 @@
     label {
         font-weight: normal;
     }
- .custom-textarea {
-    overflow: hidden;
-}
 
-form {
+    form {
         margin: 0 auto;
         padding: .5em 15px 0;
         width: 100%;
-}
-#reply_textbox.custom-textarea-emoji{
+    }
+
+    .center {
+        max-width: 1028px;
+    }
+
+    .custom-textarea {
         bottom: 0;
-    max-height: 162px !important;
-    padding-right: 60px;
-    padding-top: 6px;
+        max-height: 162px;
+        padding-top: 8px;
+        overflow: hidden;
         resize: none;
 
+        &:not(.custom-textarea--emoji-picker) {
+            padding-right: 35px;
+        }
 
+        &.custom-textarea--emoji-picker {
+            padding-right: 60px;
+        }
+    }
 
-}
-.center {
-    max-width: 1028px;
-}
-
-.post-create {
-    &.scroll {
+    .post-create.scroll {
         .btn-file {
             right: 10px;
         }
@@ -394,26 +397,18 @@ form {
         .custom-textarea {
             -ms-overflow-style: auto;
             overflow: auto;
+
+            &:not(.custom-textarea--emoji-picker) {
                 padding-right: 43px;
-            resize: none;
             }
 
-        #post_textbox-reference.custom-textarea-emoji {
-            padding-right: 43px;
-            resize: none;
-        }
-
-
-
-        #post_textbox.custom-textarea-emoji {
+            &.custom-textarea--emoji-picker {
                 padding-right: 60px;
-            resize: none;
-
             }
         }
-}
+    }
 
-.post-create-body {
+    .post-create-body {
         padding: 0 0 2px;
         position: relative;
 
@@ -443,41 +438,6 @@ form {
             }
         }
 
-    .custom-textarea {
-        bottom: 0;
-        max-height: 162px !important;
-        padding-right: 35px;
-        padding-top: 8px;
-        resize: none;
-
-    }
-
-    #post_textbox-reference.custom-textarea-emoji {
-        bottom: 0;
-        max-height: 162px !important;
-        padding-right: 35px;
-        padding-top: 8px;
-        resize: none;
-
-    }
-
-
-    #post_textbox.custom-textarea-emoji {
-        bottom: 0;
-        max-height: 162px !important;
-        padding-right: 60px;
-        padding-top: 8px;
-        resize: none;
-
-    }
-    .textarea-div {
-        line-height: 1.5;
-        max-height: 163px !important;
-        overflow: auto;
-        padding-right: 30px;
-        padding-top: 8px;
-    }
-
         .btn-file {
             @include single-transition(all, .15s);
             font-size: 16px;
@@ -594,9 +554,9 @@ form {
         textarea {
             box-shadow: none;
         }
-}
+    }
 
-.post-create-footer {
+    .post-create-footer {
         @include clearfix;
         font-size: 13px;
         padding: 3px 0 0;
@@ -611,9 +571,9 @@ form {
             position: absolute;
             top: 4px;
         }
-}
+    }
 
-.msg-typing {
+    .msg-typing {
         @include opacity(.7);
         display: block;
         font-size: .95em;
@@ -622,7 +582,7 @@ form {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-}
+    }
 }
 
 .post-list__table {