customer chat: add status dropdown arrows

app/assets/javascripts/app/views/customer_chat/index.jst.eco

@@ -6,13 +6,13 @@
       <div class="page-header-center">
         <div class="status-fields">
           <div class="status-field js-acceptChat js-waitingCustomers">
-            <span class="badge js-badgeWaitingCustomers"></span> <%- @T('Waiting Customers') %>
+            <span class="badge js-badgeWaitingCustomers"></span> <%- @T('Waiting Customers') %> <div class="info-arrow"><%- @Icon('arrow-down') %></div>
           </div>
           <div class="status-field js-chattingCustomers">
-            <span class="badge js-badgeChattingCustomers"></span> <%- @T('Chatting Customers') %>
+            <span class="badge js-badgeChattingCustomers"></span> <%- @T('Chatting Customers') %> <div class="info-arrow"><%- @Icon('arrow-down') %></div>
           </div>
           <div class="status-field js-activeAgents">
-            <span class="badge js-badgeActiveAgents"></span> <%- @T('Active Agents') %>
+            <span class="badge js-badgeActiveAgents"></span> <%- @T('Active Agents') %> <div class="info-arrow"><%- @Icon('arrow-down') %></div>
           </div>
         </div>
       </div>

app/assets/stylesheets/zammad.scss

@@ -700,12 +700,22 @@ pre code.hljs {
   .badge {
     background: hsla(210,50%,10%,.24);
   }
+
+  .info-arrow {
+    margin: -8px -10px -6px 0;
+    padding: 8px 10px 7px 3px;
+  }
 }
 
 @keyframes pulsate {
   to { filter: brightness(1.2); }
 }
 
+.info-arrow {
+  display: inline-block;
+  cursor: pointer;
+}
+
 .badge {
   display: inline-block;
   min-width: 18px;