Pad the toggle and rename to "Chat Contacts"

to make it clearer that this toggle relates to chatting.

css/converse.css

@@ -8015,7 +8015,7 @@ body.reset {
   float: right;
   height: 100%;
   margin: 0 0.5em;
-  padding: 10px 8px 0 8px; }
+  padding: 1em; }
   #conversejs .toggle-controlbox span {
     color: white; }
 

css/inverse.css

@@ -8091,7 +8091,7 @@ body {
   float: right;
   height: 100%;
   margin: 0 0.5em;
-  padding: 10px 8px 0 8px; }
+  padding: 1em; }
   #conversejs .toggle-controlbox span {
     color: white; }
 

sass/_controlbox.scss

@@ -421,7 +421,7 @@
         float: right;
         height: 100%;
         margin: 0 $chat-gutter;
-        padding: 10px 8px 0 8px;
+        padding: 1em;
         span {
             color: $inverse-link-color;
         }

src/converse-controlbox.js

@@ -538,7 +538,7 @@
                     // artifacts (i.e. on page load the toggle is shown only to then
                     // seconds later be hidden in favor of the control box).
                     this.el.innerHTML = tpl_controlbox_toggle({
-                        'label_toggle': _converse.connection.connected ? __('Contacts') : __('Toggle chat')
+                        'label_toggle': _converse.connection.connected ? __('Chat Contacts') : __('Toggle chat')
                     })
                     return this;
                 },