Cleaning up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+custom-resources/crd-details.scss

@@ -23,11 +23,9 @@
 
 .CRDDetails {
   .conditions {
-    .Badge {
+    @include crd-condition-bgc;
-      @include crd-condition-bgc;
-    }
   }
-  
+
   .Table {
     margin-left: -$margin * 2;
     margin-right: -$margin * 2;
@@ -41,21 +39,8 @@
         flex: 0.5;
       }
 
-      .description {
-        flex: 1.5;
-
-        .Badge {
-          background: transparent;
-        }
-      }
-
       .json-path {
         flex: 3;
-
-        .Badge {
-          white-space: pre-line;
-          text-overflow: initial;
-        }
       }
     }
   }

src/renderer/components/+custom-resources/crd-details.tsx

@@ -25,7 +25,6 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { observer } from "mobx-react";
 import type { CustomResourceDefinition } from "../../api/endpoints/crd.api";
-import { cssNames } from "../../utils";
 import { AceEditor } from "../ace-editor";
 import { Badge } from "../badge";
 import { DrawerItem, DrawerTitle } from "../drawer";
@@ -86,7 +85,8 @@ export class CRDDetails extends React.Component<Props> {
                 <Badge
                   key={type}
                   label={type}
-                  className={cssNames({ disabled: status === "False" }, type)}
+                  disabled={status === "False"}
+                  className={type}
                   tooltip={(
                     <>
                       <p>{message}</p>

src/renderer/components/+custom-resources/crd-resource-details.scss

@@ -21,13 +21,9 @@
 
 .CrdResourceDetails {
   .status {
-    .value {
+    .ready {
-      .Badge {
+      color: white;
-        &.ready {
+      background-color: $colorOk;
-          color: white;
-          background-color: $colorOk;
-        }
-      }
     }
   }
 }

src/renderer/components/+custom-resources/crd-resource-details.tsx

@@ -90,7 +90,8 @@ export class CrdResourceDetails extends React.Component<Props> {
       .map(({ kind, message, status }, index) => (
         <Badge
           key={kind + index} label={kind}
-          className={cssNames({ disabled: status === "False" }, kind.toLowerCase())}
+          disabled={status === "False"}
+          className={kind.toLowerCase()}
           tooltip={message}
         />
       ));

src/renderer/components/+custom-resources/crd.mixins.scss

@@ -30,7 +30,7 @@ $crd-condition-colors: (
 
 @mixin crd-condition-bgc {
   @each $status, $color in $crd-condition-colors {
-    &.#{$status} {
+    .#{$status} {
       background: $color;
       color: white;
     }

src/renderer/components/+nodes/node-details.scss

@@ -24,9 +24,6 @@
   --status-default-bg: #{$colorError};
 
   .conditions {
-    .Badge {
+    @include node-status-bgs;
-      cursor: default;
-      @include node-status-bgs;
-    }
   }
 }

src/renderer/components/+nodes/nodes-mixins.scss

@@ -33,7 +33,7 @@ $node-status-color-list: (
 
 @mixin node-status-bgs {
   @each $status, $color in $node-status-color-list {
-    &.#{$status} {
+    .#{$status} {
       background: $color;
       color: white;
     }

src/renderer/components/+workloads-cronjobs/cronjob-details.scss

@@ -33,8 +33,6 @@
   }
 
   .conditions {
-    .Badge {
+    @include job-condition-bgs;
-      @include job-condition-bgs;
-    }
   }
 }

src/renderer/components/+workloads-jobs/job-details.scss

@@ -22,8 +22,6 @@
 
 .JobDetails {
   .conditions {
-    .Badge {
+    @include job-condition-bgs;
-      @include job-condition-bgs;
-    }
   }
 }

src/renderer/components/+workloads-pods/pod-details-container.scss

@@ -58,8 +58,4 @@
 
     @include pod-status-colors;
   }
-
-  .Badge {
-    white-space: normal;
-  }
 }

src/renderer/components/+workloads/workloads-mixins.scss

@@ -98,7 +98,7 @@ $cronjob-condition-color-list: (
 
 @mixin job-condition-bgs {
   @each $condition, $color in $job-condition-color-list {
-    &.#{$condition} {
+    .#{$condition} {
       color: white;
       background: $color;
     }

src/renderer/components/chart/pie-chart.scss

@@ -30,7 +30,7 @@
     flex-direction: column;
 
     > * {
-      &.Badge:hover {
+      &.LegendBadge:hover {
         background-color: transparent;
       }
 

src/renderer/components/dock/info-panel.scss

@@ -30,10 +30,6 @@
     margin-right: var(--padding);
   }
 
-  .Badge {
-    background-color: var(--dockBadgeBackground);
-  }
-
   > .controls {
     white-space: nowrap;
     flex: 1 1;

src/renderer/components/item-object-list/page-filters-list.tsx

@@ -70,7 +70,7 @@ export class PageFiltersList extends React.Component<Props> {
               <Badge
                 key={`${type}-${value}`}
                 title={type}
-                className={cssNames("flex gaps filter align-center", type)}
+                className={cssNames("Badge flex gaps filter align-center", type)}
                 label={(
                   <>
                     <FilterIcon type={type}/>