Improved CSS for the send button.

- Simplify the Sass a bit
- Put the button at the bottom
- Give it full width (plus some margin)
- Let the color match the chatbox type

updates #796

css/converse.css

@@ -1619,6 +1619,9 @@
     line-height: 1.3em;
     height: 206px;
     height: calc(100% - 96px); }
+  #converse-embedded-chat .chatbox .chat-content-sendbutton,
+  #conversejs .chatbox .chat-content-sendbutton {
+    height: calc(100% - 123px); }
   #converse-embedded-chat .chatbox .dropdown,
   #conversejs .chatbox .dropdown {
     /* status dropdown styles */
@@ -1660,6 +1663,17 @@
       padding: 0.5em;
       width: 100%;
       resize: none; }
+    #converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
+    #conversejs .chatbox form.sendXMPPMessage .send-button {
+      position: absolute;
+      left: 3px;
+      width: -webkit-calc(100% - 3px - 3px);
+      width: calc(100% - 3px - 3px);
+      background-color: #F4A261;
+      color: white;
+      font-size: 80%;
+      height: 27px;
+      bottom: -24px; }
     #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
     #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
       box-sizing: border-box;
@@ -2425,9 +2439,12 @@
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit] {
           margin: 0 0.5em; }
-  #converse-embedded-chat .chatroom .chat-textarea,
-  #conversejs .chatroom .chat-textarea {
+  #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea,
+  #conversejs .chatroom form.sendXMPPMessage .chat-textarea {
     border-bottom-right-radius: 0; }
+  #converse-embedded-chat .chatroom form.sendXMPPMessage .send-button,
+  #conversejs .chatroom form.sendXMPPMessage .send-button {
+    background-color: #E76F51; }
   #converse-embedded-chat .chatroom .room-invite .invited-contact,
   #conversejs .chatroom .room-invite .invited-contact {
     margin: -1px 0 0 -1px;

sass/_chatbox.scss

@@ -258,15 +258,16 @@
                 width: 100%;
                 resize: none;
             }
-            .chat-textarea-send-button {
-                height: $chat-textarea-height - $send-button-margin-bottom;
-            }
             .send-button {
                 position: absolute;
-                right: $send-button-margin-right;
-                background-color: #E76F51;
-                color: #fff;
+                left: $send-button-margin;
+                @include calc(width, '100% - #{$send-button-margin} - #{$send-button-margin}');
+                background-color: $chat-head-color;
+                color: $inverse-link-color;
                 font-size: 80%;
+                height: $send-button-height;
+                bottom: -$send-button-height + $send-button-margin;
+
             }
             .chat-toolbar {
                 box-sizing: border-box;

sass/_chatrooms.scss

@@ -201,8 +201,13 @@
             }
         }
 
-        .chat-textarea {
-            border-bottom-right-radius: 0;
+        form.sendXMPPMessage {
+            .chat-textarea {
+                border-bottom-right-radius: 0;
+            }
+            .send-button {
+                background-color: $chatroom-head-color;
+            }
         }
 
         .room-invite {

sass/_variables.scss

@@ -13,9 +13,8 @@ $border-color: #CCC !default;
 $icon-color: #114327 !default;
 $save-button-color: #436F64 !default;
 $chat-textarea-height: 70px !default;
-$send-button-height: 30px !default;
-$send-button-margin-bottom: 5px !default;
-$send-button-margin-right: 10px !default;
+$send-button-height: 27px !default;
+$send-button-margin: 3px !default;
 $message-them-color: #1A9707 !default;
 $roster-height: 194px !default;