From 35e1424c616a09f251e8341414a083614b6d8b08 Mon Sep 17 00:00:00 2001
From: Ricardo Marques <rimarques@suse.com>
Date: Tue, 17 Apr 2018 10:26:38 +0100
Subject: [PATCH] mgr/dashboard: Improve background tasks style

Signed-off-by: Ricardo Marques <rimarques@suse.com>
---
 .../notifications.component.scss              |  5 ---
 .../task-manager/task-manager.component.html  | 34 ++++++++++++-------
 .../frontend/src/styles/popover.scss          |  4 +--
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss
index c28816c7029c2..70cfd4a697d3e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss
@@ -1,6 +1 @@
 @import '../../../../styles/popover.scss';
-
-.icon-col {
-  width: 50px !important;
-  font-size: 10px;
-}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/task-manager/task-manager.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/task-manager/task-manager.component.html
index c58c678dcf72f..6178293c5f098 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/task-manager/task-manager.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/task-manager/task-manager.component.html
@@ -8,15 +8,19 @@
     <div *ngFor="let executingTask of executingTasks">
       <table>
         <tr>
-          <td class="icon-col">
-            <i class="fa fa-spinner fa-spin fa-fw" aria-hidden="true"></i>
+          <td rowspan="3"  class="icon-col text-center">
+            <span class="fa-stack fa-2x text-info">
+              <i class="fa fa-circle fa-stack-2x"></i>
+              <i class="fa fa-stack-1x fa-inverse fa-spinner fa-spin"></i>
+            </span>
           </td>
-          <td>{{ executingTask.description }}</td>
-          <td class="text-right italic" *ngIf="executingTask.progress"><span>{{ executingTask.progress }} %</span></td>
+          <td colspan="3"><strong>{{ executingTask.description }}</strong></td>
         </tr>
         <tr>
-          <td colspan="3" class="text-right">
-            <span class="date">{{ executingTask.begin_time | cdDate }}</span></td>
+          <td colspan="2">
+            <small class="date">{{ executingTask.begin_time | cdDate }}</small>
+          </td>
+          <td class="text-right italic" nowrap *ngIf="executingTask.progress"><span>{{ executingTask.progress }} %</span></td>
         </tr>
       </table>
       <hr>
@@ -31,16 +35,22 @@
     <div *ngFor="let finishedTask of finishedTasks">
       <table>
         <tr>
-          <td class="icon-col">
+          <td rowspan="3"  class="icon-col text-center">
             <span *ngIf="!finishedTask.errorMessage">
-              <i class="fa fa-check text-success"></i>
+              <span class="fa-stack fa-2x text-success">
+                <i class="fa fa-circle fa-stack-2x"></i>
+                <i class="fa fa-stack-1x fa-inverse fa-check"></i>
+              </span>
             </span>
             <span *ngIf="finishedTask.errorMessage">
-              <i class="fa fa-exclamation-triangle text-danger"></i>
+              <span class="fa-stack fa-2x text-danger">
+                <i class="fa fa-circle fa-stack-2x"></i>
+                <i class="fa fa-stack-1x fa-inverse fa-exclamation-triangle"></i>
+              </span>
             </span>
           </td>
           <td colspan="2">
-            {{ finishedTask.description }}
+            <strong>{{ finishedTask.description }}</strong>
           </td>
         </tr>
         <tr>
@@ -52,8 +62,8 @@
           </td>
         </tr>
         <tr>
-          <td colspan="2" class="text-right">
-            <span class="date">{{ finishedTask.end_time | cdDate }}</span>
+          <td colspan="2">
+            <small class="date">{{ finishedTask.end_time | cdDate }}</small>
           </td>
         </tr>
       </table>
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/popover.scss b/src/pybind/mgr/dashboard/frontend/src/styles/popover.scss
index 7599a69b591c9..3148ff2d2483b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/popover.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/popover.scss
@@ -30,8 +30,8 @@ table {
 }
 
 .icon-col {
-  width: 20px;
-  font-size: 15px;
+  width: 50px;
+  font-size: 10px;
 }
 
 .date {
-- 
2.39.5