From 6112cc9aaf99f515fc67b2aa1157cae40e08f9d8 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 16 Dec 2022 11:36:05 +0300
Subject: [PATCH] Remove redundant mixin and :global rules

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../pod-details-list.module.scss              | 99 ++++++++++---------
 .../+workloads-pods/pod-details-list.tsx      |  2 +-
 2 files changed, 55 insertions(+), 46 deletions(-)

diff --git a/src/renderer/components/+workloads-pods/pod-details-list.module.scss b/src/renderer/components/+workloads-pods/pod-details-list.module.scss
index 53ca8839fe..616bc92ab3 100644
--- a/src/renderer/components/+workloads-pods/pod-details-list.module.scss
+++ b/src/renderer/components/+workloads-pods/pod-details-list.module.scss
@@ -1,56 +1,65 @@
 .PodDetailsList {
-  @mixin status-colors {
-    @each $status, $color in $pod-status-color-list {
-      &:global(.#{$status}) {
-        color: $color;
-      }
-    }
-  }
-
   .table {
+    margin: 0 (-$margin * 3);
+
     &:global(.virtual) {
       height: 500px;
     }
 
-    :global(.TableCell).warning {
-      @include table-cell-warning;
-    }
-
-    :global(.TableCell).status {
-      @include status-colors;
+    .warning {
+      display: flex;
+      align-items: center;
+      flex-grow: 0.3;
+      padding: 0;
     }
   }
-}
 
-.table {
-  margin: 0 (-$margin * 3);
-}
-
-.name {
-  flex-grow: 2;
-  margin-left: $margin;
-}
-
-.node {
-  flex-grow: 2;
-}
-
-.namespace {
-  flex-grow: 1.2;
-}
-
-.cpu {
-  align-self: center;
-
-  .LineProgress {
-    color: var(--blue);
-  }
-}
-
-.memory {
-  align-self: center;
-
-  :global(.LineProgress) {
-    color: var(--magenta);
+  .name {
+    flex-grow: 2;
+    margin-left: $margin;
+  }
+  
+  .node {
+    flex-grow: 2;
+  }
+  
+  .namespace {
+    flex-grow: 1.2;
+  }
+  
+  .cpu {
+    align-self: center;
+  
+    .LineProgress {
+      color: var(--blue);
+    }
+  }
+  
+  .memory {
+    align-self: center;
+  
+    :global(.LineProgress) {
+      color: var(--magenta);
+    }
+  }
+  
+  .status[data-status=running] {
+    color: var(--colorOk);
+  }
+  
+  .status[data-status=pending] {
+    color: var(--colorWarning);
+  }
+  
+  .status[data-status=evicted] {
+    color: var(--colorError);;
+  }
+  
+  .status[data-status=failed] {
+    color: var(--colorError);;
+  }
+  
+  .status[data-status=succeeded] {
+    color: var(--colorOk);
   }
 }
diff --git a/src/renderer/components/+workloads-pods/pod-details-list.tsx b/src/renderer/components/+workloads-pods/pod-details-list.tsx
index 43b6b36657..d48accd0ef 100644
--- a/src/renderer/components/+workloads-pods/pod-details-list.tsx
+++ b/src/renderer/components/+workloads-pods/pod-details-list.tsx
@@ -150,7 +150,7 @@ export class NonInjectedPodDetailsList extends React.Component<PodDetailsListPro
         </TableCell>
         <TableCell className={styles.cpu}>{this.renderCpuUsage(`cpu-${pod.getId()}`, metrics.cpu)}</TableCell>
         <TableCell className={styles.memory}>{this.renderMemoryUsage(`memory-${pod.getId()}`, metrics.memory)}</TableCell>
-        <TableCell className={cssNames(styles.status, kebabCase(pod.getStatusMessage()))}>{pod.getStatusMessage()}</TableCell>
+        <TableCell className={cssNames(styles.status)} data-status={kebabCase(pod.getStatusMessage())}>{pod.getStatusMessage()}</TableCell>
       </TableRow>
     );
   }