create .icon-error (version of icon-diagonal-cross but with color)

app/assets/javascripts/app/views/generic/error/generic.jst.eco

@@ -1,4 +1,4 @@
 <div class="fullscreenMessage">
-  <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+  <svg class="icon icon-error"><use xlink:href="#icon-diagonal-cross" /></svg>
   <h2><%- @T('Status Code') %>: <%= @status %>. <%= @detail %></h2>
 </div>

app/assets/javascripts/app/views/generic/error/not_found.jst.eco

@@ -1,4 +1,4 @@
 <div class="flex fullscreenMessage">
-  <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+  <svg class="icon icon-error"><use xlink:href="#icon-diagonal-cross" /></svg>
   <h2><%- @T('Opps.. I\'m sorry, but I can\'t find this %s.', @objectName ) %></h2>
 </div>

app/assets/javascripts/app/views/generic/error/unauthorized.jst.eco

@@ -1,4 +1,4 @@
 <div class="flex fullscreenMessage">
-  <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+  <svg class="icon icon-error"><use xlink:href="#icon-diagonal-cross" /></svg>
   <h2><%- @T('Opps.. I\'m sorry, but you have insufficient rights to open this %s.', @objectName ) %></h2>
 </div>

app/assets/javascripts/app/views/import/otrs.jst.eco

@@ -18,7 +18,7 @@
         <p>
           <%- @T('Download and install your personalised OTRS Migration Plugin on your OTRS System') %>:
         </p>
-        <a class="btn btn--primary btn--download js-download" download><span class="download icon"></span> <%- @T('Personal Migration Plugin') %></a>
+        <a class="btn btn--primary btn--download js-download" download><svg class="icon-download"><use xlink:href="#icon-download" /></svg> <%- @T('Personal Migration Plugin') %></a>
       </div>
       <div class="wizard-controls horizontal center">
         <a class="subtle-link" href="#import"><%- @T('Go Back') %></a>
@@ -37,8 +37,8 @@
             <input type="url" id="otrs-link" class="form-control" placeholder="http://otrs.example.com" name="url">
             <div class="input-feedback centered">
               <div class="small loading icon"></div>
-              <div class="error icon"></div>
-              <div class="checkmark icon"></div>
+              <svg class="icon icon-error"><use xlink:href="#icon-diagonal-cross" /></svg>
+              <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
             </div>
           </div>
           <div class="error otrs-link-error"></div>
@@ -60,7 +60,7 @@
             <td class="progressTable-progressCell">
               <div class="horizontal center">
                 <div class="flex"><progress value="0.3"></progress></div><!-- if there is no max, the value is between 0..1 -->
-                <div class="checkmark icon"></div>
+                <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
               </div>
           </tr>
           <tr class="js-base">
@@ -69,7 +69,7 @@
             <td class="progressTable-progressCell">
               <div class="horizontal center">
                 <div class="flex"><progress max="42" value="42"></progress></div>
-                <div class="checkmark icon"></div>
+                <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
               </div>
           </tr>
           <tr class="js-user">
@@ -78,7 +78,7 @@
             <td class="progressTable-progressCell">
               <div class="horizontal center">
                 <div class="flex"><progress max="42" value="42"></progress></div>
-                <div class="checkmark icon"></div>
+                <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
               </div>
           </tr>
           <tr class="js-ticket">
@@ -87,7 +87,7 @@
             <td class="progressTable-progressCell">
               <div class="horizontal center">
                 <div class="flex"><progress max="134318" value="134318"></progress></div>
-                <div class="checkmark icon"></div>
+                <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
               </div>
           </tr>
         </table>

app/assets/javascripts/app/views/layout_ref/error.jst.eco

@@ -1,4 +1,4 @@
 <div class="fullscreenMessage">
-  <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+  <svg class="icon icon-error"><use xlink:href="#icon-diagonal-cross" /></svg>
   <h2><%- @T('Status Code') %>: 1234. Check your internet connection...</h2>
 </div>

app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco

@@ -25,7 +25,8 @@
         <p>
           Download and install this personalised OTRS Migration Plugin on your OTRS System:
         </p>
-        <a class="btn btn--primary btn--download" download data-action="reveal"><span class="download icon"></span> Personal Migration Plugin</a>
+        <a class="btn btn--primary btn--download" download data-action="reveal">
+          <svg class="icon-download"><use xlink:href="#icon-download" /></svg>  Personal Migration Plugin</a>
       </div>
       <div class="wizard-controls horizontal center">
         <a class="subtle-link" data-target="home">Go Back</a>
@@ -44,8 +45,8 @@
             <input type="url" id="otrs-link" class="form-control" placeholder="http://otrs.company.de/otrs">
             <div class="input-feedback centered">
               <div class="small loading icon"></div>
-              <div class="error icon"></div>
-              <div class="checkmark icon"></div>
+              <svg class="icon icon-error"><use xlink:href="#icon-diagonal-cross" /></svg>
+              <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
             </div>
           </div>
         </div>
@@ -65,7 +66,7 @@
             <td class="progressTable-progressCell">
               <div class="horizontal center">
                 <div class="flex"><progress max="42" value="42"></progress></div>
-                <div class="checkmark icon"></div>
+                <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
               </div>
           </tr>
           <tr class="is-done">
@@ -74,7 +75,7 @@
             <td class="progressTable-progressCell">
               <div class="horizontal center">
                 <div class="flex"><progress max="134318" value="134318"></progress></div>
-                <div class="checkmark icon"></div>
+                <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
               </div>
           </tr>
           <tr>
@@ -83,7 +84,7 @@
             <td class="progressTable-progressCell">
               <div class="horizontal center">
                 <div class="flex"><progress value="0.3"></progress></div><!-- if there is no max, the value is between 0..1 -->
-                <div class="checkmark icon"></div>
+                <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
               </div>
           </tr>
         </table>

app/assets/javascripts/app/views/layout_ref/loading_placeholder.jst.eco

@@ -1,3 +1,3 @@
-<div class="flex fullscreenMessage">
+<div class="fullscreenMessage">
   <div class="loading icon"></div><h2>Loading Ticket</h2>
 </div>

app/assets/stylesheets/zammad.css.scss

@@ -397,11 +397,12 @@ span[data-tooltip]:hover:before {
   margin-top: 10px;
 }
 
-.btn--download .download.icon {
+.btn--download .icon-download {
   margin-right: 6px;
-  margin-top: 3px;
+  margin-top: 4px;
   margin-left: -10px;
   vertical-align: top;
+  fill: white;
 }
 
 .btn-label {
@@ -871,7 +872,6 @@ textarea,
 
   .icon {
     margin-right: 14px;
-    fill: #F35910;
   }
 
   h2 {
@@ -1322,6 +1322,16 @@ ol.tabs li {
   height: 13px;
 }
 
+.icon-checkmark {
+  fill: #38AE6A;
+}
+
+.icon-error {
+  fill: #F35910;
+  width: 13px;
+  height: 13px;
+}
+
 
   .add.icon,
   .remove.icon {
@@ -1861,22 +1871,6 @@ ol.tabs li {
     background-position: -103px -345px;
   }
 
-  .download.icon {
-    width: 14px;
-    height: 13px;
-    background-position: -120px -349px;
-  }
-
-  .checkmark.icon {
-    width: 17px;
-    height: 15px;
-    background-position: -135px -348px;
-  }
-
-  .white.checkmark.icon {
-    background-position: -135px -364px;
-  }
-
   .error.icon {
     width: 13px;
     height: 13px;
@@ -1884,6 +1878,7 @@ ol.tabs li {
   }
 
   .loading.icon {
+    display: inline-block;
     width: 30px;
     height: 30px;
     background: hsl(145,51%,45%);
@@ -4949,8 +4944,8 @@ label + .wizard-buttonList {
 }
 
 .input-feedback[data-state=loading] .loading.icon,
-.input-feedback[data-state=error] .error.icon,
-.input-feedback[data-state=success] .checkmark.icon {
+.input-feedback[data-state=error] .icon-error,
+.input-feedback[data-state=success] .icon-checkmark {
   display: block;
 }
 
@@ -4979,12 +4974,12 @@ label + .wizard-buttonList {
   display: block;
 }
 
-.progressTable .checkmark {
+.progressTable .icon-checkmark {
   margin-left: 10px;
   opacity: 0;
 }
 
-.progressTable tr.is-done .checkmark {
+.progressTable tr.is-done .icon-checkmark {
   opacity: 1;
 }