Update styling for the status change form.

converse.js

@@ -5319,7 +5319,9 @@
                     'label_custom_status': __('Custom status'),
                     'label_save': __('Save')
                 });
-                this.$el.find('.xmpp-status').replaceWith(input);
+                var $xmppstatus = this.$el.find('.xmpp-status');
+                $xmppstatus.parent().addClass('no-border');
+                $xmppstatus.replaceWith(input);
                 this.$el.find('.custom-xmpp-status').focus().focus();
             },
 
@@ -5362,7 +5364,7 @@
                 // # For translators: the %1$s part gets replaced with the status
                 // # Example, I am online
                 var status_message = model.get('status_message') || __("I am %1$s", this.getPrettyStatus(stat));
-                this.$el.find('#fancy-xmpp-status-select').html(
+                this.$el.find('#fancy-xmpp-status-select').removeClass('no-border').html(
                     converse.templates.chat_status({
                         'chat_status': stat,
                         'status_message': status_message,

css/converse.css

@@ -1605,15 +1605,19 @@
   #conversejs #controlbox #set-custom-xmpp-status {
     float: left;
     padding: 0; }
+    #conversejs #controlbox #set-custom-xmpp-status fieldset {
+      padding: 0;
+      margin-top: -1px; }
     #conversejs #controlbox #set-custom-xmpp-status input {
       height: 26px;
       width: -webkit-calc(100% - 40px);
       width: calc(100% - 40px);
       padding: 0 0 0 0.5em; }
-    #conversejs #controlbox #set-custom-xmpp-status button {
+    #conversejs #controlbox #set-custom-xmpp-status input[type=submit] {
       height: 26px;
       width: 40px;
-      padding: 1px; }
+      padding: 1px;
+      float: right; }
   #conversejs #controlbox #controlbox-tabs {
     text-align: center;
     display: inline;
@@ -1649,8 +1653,6 @@
           height: 55px;
           cursor: default;
           color: #818479; }
-  #conversejs #controlbox .xmpp-status {
-    display: inline; }
   #conversejs #controlbox .fancy-dropdown {
     border: 1px solid #B1BFC4;
     height: 25px;
@@ -1667,12 +1669,19 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       display: inline; }
-  #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
-    float: right;
-    clear: right;
-    width: 12px;
-    margin-right: 0.3em;
-    color: #2A9D8F; }
+    #conversejs #controlbox .fancy-dropdown.no-border {
+      border: 0; }
+  #conversejs #controlbox #fancy-xmpp-status-select {
+    padding-left: 0; }
+    #conversejs #controlbox #fancy-xmpp-status-select .xmpp-status {
+      margin-left: 0.3em;
+      display: inline; }
+    #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
+      float: right;
+      clear: right;
+      width: 12px;
+      margin-right: 0.3em;
+      color: #2A9D8F; }
   #conversejs #controlbox .controlbox-pane {
     background-color: white;
     border-bottom-left-radius: 4px;

sass/_controlbox.scss

@@ -207,15 +207,20 @@
         #set-custom-xmpp-status {
             float: left;
             padding: 0;
+            fieldset {
+                padding: 0;
+                margin-top: -1px;
+            }
             input {
                 height: $controlbox-dropdown-height + 1px;
                 @include calc(width, '100% - 40px');
                 padding: 0 0 0 0.5em;
             }
-            button {
+            input[type=submit] {
                 height: $controlbox-dropdown-height + 1px;
                 width: 40px;
                 padding: 1px;
+                float: right;
             }
         }
 
@@ -262,9 +267,6 @@
             }
         }
 
-        .xmpp-status {
-            display: inline;
-        }
         .fancy-dropdown {
             border: 1px solid $light-background-border-color;
             height: $controlbox-dropdown-height;
@@ -283,8 +285,17 @@
                 white-space: nowrap;
                 display: inline;
             }
+            &.no-border {
+                border: 0;
+            }
+
         }
         #fancy-xmpp-status-select {
+            padding-left: 0;
+            .xmpp-status {
+                margin-left: 0.3em;
+                display: inline;
+            }
             a.change-xmpp-status-message {
                 float: right;
                 clear: right;

src/templates/change_status_message.html

-<form id="set-custom-xmpp-status">
+<form id="set-custom-xmpp-status" class="pure-form">
+<fieldset>
     <span class="input-button-group">
-        <input type="text" class="custom-xmpp-status" {{status_message}}
-            placeholder="{{label_custom_status}}"/>
-        <button type="submit">{{label_save}}</button>
+        <input type="text" class="custom-xmpp-status" {{status_message}} placeholder="{{label_custom_status}}"/>
+        <input type="submit" class="pure-button button-primary" value="{{label_save}}"/>
     </span>
+</fieldset>
 </form>