mgr/dashboard: Improve background tasks style

Signed-off-by: Ricardo Marques <rimarques@suse.com>

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 c28816c7029c2fbdcadb80e49807ea30f1c976c9..70cfd4a697d3e014e7319cbebd683cca41c2dbee 100644 (file)
--- 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 c58c678dcf72ff5ab867a589377f3067b7fe857c..6178293c5f098a9edf98eb9f640e48367aff8ea4 100644 (file)
--- 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 7599a69b591c9a6105245c67dbced5b8912fa01a..3148ff2d2483b6e29ffee835188474ed4e2ccbf4 100644 (file)
--- 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 {