adjust tab loading icon

app/assets/javascripts/app/controllers/taskbar_widget.js.coffee

@@ -29,7 +29,7 @@ class App.TaskbarWidget extends App.Controller
       data =
         url:   '#'
         id:    false
-        iconClass: 'loading dot'
+        iconClass: 'loading'
         title: App.i18n.translateInline('Loading...')
         head:  App.i18n.translateInline('Loading...')
       worker = App.TaskManager.worker( task.key  )

app/assets/javascripts/app/views/task_widget_tasks.jst.eco

@@ -1,6 +1,6 @@
 <% for item in @item_list: %>
   <a href="<%- item.data.url %>" title="<%= item.data.title %>" class="nav-tab <%= item.data.class %><% if item.task.active: %> is-active<% end %>" data-key="<%- item.task.key %>">
-    <svg class="nav-tab-icon priority-icon">
+    <svg class="nav-tab-icon priority-icon icon-<%= item.data.iconClass %>">
       <% if item.task.notify && item.data.iconClass is 'priority': %>
       <use class="inner-circle" xlink:href="#icon-priority-modified-inner-circle" />
       <use class="outer-circle" xlink:href="#icon-priority-modified-outer-circle" />

app/assets/stylesheets/zammad.css.scss

@@ -2215,7 +2215,6 @@ footer {
   }
 
   .nav-tab-icon .inner-circle {
-    will-change: opacity;
     animation: fade 3s ease-in-out infinite;
   }
 
@@ -2225,6 +2224,11 @@ footer {
     to { opacity: 1 }
   }
 
+  .nav-tab-icon.icon-loading {
+    animation: rotateplane 1.2s infinite ease-in-out;
+    fill: $supergood-color;
+  }
+
   .nav-tab-close {
     position: absolute;
     right: 0;
@@ -2290,7 +2294,7 @@ footer {
 }
 
 .search {
-  padding: 14px 2px 10px 10px;
+  padding: 9px 2px 10px 10px;
   border-bottom: 1px solid rgba(240, 250, 255, .05);
   flex-shrink: 0;
 }

public/assets/images/icons/loading.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
+    <title>loading</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="loading" sketch:type="MSArtboardGroup" fill="#50E3C2">
+            <circle id="Oval-2" sketch:type="MSShapeGroup" cx="8" cy="8" r="5"></circle>
+        </g>
+    </g>
+</svg>

public/assets/images/icons/mail.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.3 (11970) - http://www.bohemiancoding.com/sketch -->
-    <title>mail</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="mail" sketch:type="MSArtboardGroup" fill="#50E3C2">
-            <path d="M11.324675,9 L8.5,11.592593 L5.675325,9 L1,14 L16,14 L11.324675,9 L11.324675,9 Z M17,4 L12,8.591837 L17,14 L17,4 L17,4 Z M0,4 L0,14 L5,8.646465 L0,4 L0,4 Z M17,3 L0,3 L8.449102,10 L17,3 L17,3 Z" id="email-channel-white" sketch:type="MSShapeGroup"></path>
-        </g>
-    </g>
-</svg>