Align Badge styles across components

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
2025-05-20 05:10:56 +00:00 · 2021-07-13 13:24:40 +03:00 · 2021-07-13 13:24:40 +03:00 · 4151b754ad
commit 4151b754ad
parent 377c09aa9a
19 changed files with 32 additions and 42 deletions
--- a/src/renderer/components/+apps-releases/release-details.scss
+++ b/src/renderer/components/+apps-releases/release-details.scss
@ -27,13 +27,7 @@
  }

  .status {
-    .Badge {
-      @include release-status-bgs;
-
-      &:first-child {
-        margin-left: 0;
-      }
-    }
+    @include release-status-bgs;
  }

  .chart {
--- a/src/renderer/components/+apps-releases/release-details.tsx
+++ b/src/renderer/components/+apps-releases/release-details.tsx
@ -272,7 +272,7 @@ export class ReleaseDetails extends Component<Props> {
        <DrawerItem name="Status" className="status" labelsOnly>
          <Badge
            label={release.getStatus()}
-            className={cssNames("status", kebabCase(release.getStatus()))}
+            className={kebabCase(release.getStatus())}
          />
        </DrawerItem>
        {this.renderValues()}
--- a/src/renderer/components/+catalog/catalog-entity.store.tsx
+++ b/src/renderer/components/+catalog/catalog-entity.store.tsx
@ -88,6 +88,7 @@ export class CatalogEntityItem<T extends CatalogEntity> implements ItemObject {
            onClick?.(event);
            event.stopPropagation();
          }}
+          expandable={false}
        />
      ));
  }
--- a/src/renderer/components/+config-autoscalers/hpa-details.scss
+++ b/src/renderer/components/+config-autoscalers/hpa-details.scss
@ -22,7 +22,7 @@
@import "autoscaler.mixins";

 .HpaDetails {
-  .Badge {
+  .status {
    @include hpa-status-bgc;
  }

--- a/src/renderer/components/+config-autoscalers/hpa-details.tsx
+++ b/src/renderer/components/+config-autoscalers/hpa-details.tsx
@ -125,7 +125,7 @@ export class HpaDetails extends React.Component<Props> {
          {hpa.getReplicas()}
        </DrawerItem>

-        <DrawerItem name="Status" labelsOnly>
+        <DrawerItem name="Status" className="status" labelsOnly>
          {hpa.getConditions().map(({ type, tooltip, isReady }) => {
            if (!isReady) return null;

--- a/src/renderer/components/+config-autoscalers/hpa.scss
+++ b/src/renderer/components/+config-autoscalers/hpa.scss
@ -38,10 +38,7 @@
    &.status {
      flex: 1.5;
      @include table-cell-labels-offsets;
-
-      .Badge {
-        @include hpa-status-bgc;
-      }
+      @include hpa-status-bgc;
    }

    &.age {
--- a/src/renderer/components/+config-autoscalers/hpa.tsx
+++ b/src/renderer/components/+config-autoscalers/hpa.tsx
@ -104,6 +104,7 @@ export class HorizontalPodAutoscalers extends React.Component<Props> {
                label={type}
                tooltip={tooltip}
                className={cssNames(type.toLowerCase())}
+                expandable={false}
              />
            );
          })
--- a/src/renderer/components/+config-secrets/secrets.tsx
+++ b/src/renderer/components/+config-secrets/secrets.tsx
@ -79,7 +79,7 @@ export class Secrets extends React.Component<Props> {
            secret.getName(),
            <KubeObjectStatusIcon key="icon" object={secret} />,
            secret.getNs(),
-            secret.getLabels().map(label => <Badge key={label} label={label}/>),
+            secret.getLabels().map(label => <Badge key={label} label={label} expandable={false}/>),
            secret.getKeys().join(", "),
            secret.type,
            secret.getAge(),
--- a/src/renderer/components/+workloads-deployments/deployment-details.scss
+++ b/src/renderer/components/+workloads-deployments/deployment-details.scss
@ -21,21 +21,19 @@

 .DeploymentDetails {
  .conditions {
-    .Badge {
-      &.available {
-        color: white;
-        background-color: $deployment-available;
-      }
+    .available {
+      color: white;
+      background-color: $deployment-available;
+    }

-      &.progressing {
-        color: white;
-        background-color: $deployment-progressing;
-      }
+    .progressing {
+      color: white;
+      background-color: $deployment-progressing;
+    }

-      &.replica-failure {
-        color: white;
-        background-color: $deployment-replicafailure;
-      }
+    .replica-failure {
+      color: white;
+      background-color: $deployment-replicafailure;
    }
  }
 }
--- a/src/renderer/components/+workloads-deployments/deployment-details.tsx
+++ b/src/renderer/components/+workloads-deployments/deployment-details.tsx
@ -27,7 +27,6 @@ import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import { Badge } from "../badge";
 import type { Deployment } from "../../api/endpoints";
-import { cssNames } from "../../utils";
 import { PodDetailsTolerations } from "../+workloads-pods/pod-details-tolerations";
 import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities";
 import { podsStore } from "../+workloads-pods/pods.store";
@ -118,7 +117,8 @@ export class DeploymentDetails extends React.Component<Props> {
                <Badge
                  key={type}
                  label={type}
-                  className={cssNames({ disabled: status === "False" }, kebabCase(type))}
+                  disabled={status === "False"}
+                  className={kebabCase(type)}
                  tooltip={(
                    <>
                      <p>{message}</p>
--- a/src/renderer/components/+workloads-pods/pod-details.tsx
+++ b/src/renderer/components/+workloads-pods/pod-details.tsx
@ -142,7 +142,7 @@ export class PodDetails extends React.Component<Props> {
                <Badge
                  key={type}
                  label={type}
-                  className={cssNames({ disabled: status === "False" })}
+                  disabled={status === "False"}
                  tooltip={`Last transition time: ${lastTransitionTime}`}
                />
              );
--- a/src/renderer/components/+workloads-pods/pods.tsx
+++ b/src/renderer/components/+workloads-pods/pods.tsx
@ -127,7 +127,7 @@ export class Pods extends React.Component<Props> {
          { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
        ]}
        renderTableContents={(pod: Pod) => [
-          <Badge flat key="name" label={pod.getName()} tooltip={pod.getName()} />,
+          <Badge flat key="name" label={pod.getName()} tooltip={pod.getName()} expandable={false} />,
          <KubeObjectStatusIcon key="icon" object={pod} />,
          pod.getNs(),
          this.renderContainersStatus(pod),
@ -145,7 +145,7 @@ export class Pods extends React.Component<Props> {
            );
          }),
          pod.getNodeName() ?
-            <Badge flat key="node" className="node" tooltip={pod.getNodeName()}>
+            <Badge flat key="node" className="node" tooltip={pod.getNodeName()} expandable={false}>
              <Link to={getDetailsUrl(nodesApi.getUrl({ name: pod.getNodeName() }))} onClick={stopPropagation}>
                {pod.getNodeName()}
              </Link>
--- a/src/renderer/components/chart/chart.scss
+++ b/src/renderer/components/chart/chart.scss
@ -29,7 +29,7 @@
  }

  .legend {
-    .Badge {
+    .LegendBadge {
      background: transparent;
      transition: background-color 250ms;
      white-space: normal;
--- a/src/renderer/components/chart/chart.tsx
+++ b/src/renderer/components/chart/chart.tsx
@ -169,7 +169,7 @@ export class Chart extends React.Component<ChartProps> {
    const labelElem = (title: string, color: string, tooltip?: string) => (
      <Badge
        key={title}
-        className="flex gaps align-center"
+        className="LegendBadge flex gaps align-center"
        label={(
          <div>
            <StatusBrick style={{ backgroundColor: color }}/>
@ -177,6 +177,7 @@ export class Chart extends React.Component<ChartProps> {
          </div>
        )}
        tooltip={tooltip}
+        expandable={false}
      />
    );

--- a/src/renderer/components/cluster-settings/components/cluster-show-metrics.tsx
+++ b/src/renderer/components/cluster-settings/components/cluster-show-metrics.tsx
@ -69,13 +69,14 @@ export class ShowMetricsSetting extends React.Component<Props> {
        const tooltipId = `${name}`;

        return (
-          <Badge key={name} flat>
+          <Badge key={name} flat expandable={false}>
            <span id={tooltipId}>{name}</span>
            <Icon
              smallest
              material="clear"
              onClick={() => this.removeMetric(name)}
              tooltip="Remove"
+              className="mx-3"
            />
          </Badge>
        );
--- a/src/renderer/components/drawer/drawer-item.scss
+++ b/src/renderer/components/drawer/drawer-item.scss
@ -67,7 +67,7 @@
        margin: 0;
      }

-      .Badge {
+      > div {
        float: left;
        margin: $spacing;

--- a/src/renderer/components/hotbar/hotbar-selector.scss
+++ b/src/renderer/components/hotbar/hotbar-selector.scss
@ -33,7 +33,7 @@
    top: -20px;
  }

-  .Badge {
+  .SelectorIndex {
    cursor: pointer;
    background: var(--secondaryBackground);
    width: 100%;
--- a/src/renderer/components/hotbar/hotbar-selector.tsx
+++ b/src/renderer/components/hotbar/hotbar-selector.tsx
@ -49,6 +49,7 @@ export function HotbarSelector({ hotbar }: Props) {
            preferredPositions: [TooltipPosition.TOP, TooltipPosition.TOP_LEFT],
            children: hotbar.name
          }}
+          className="SelectorIndex"
        />
      </div>
      <Icon material="play_arrow" className="next box" onClick={() => store.switchToNext()} />
--- a/src/renderer/components/table/table.mixins.scss
+++ b/src/renderer/components/table/table.mixins.scss
@ -49,8 +49,4 @@
@mixin table-cell-labels-offsets {
  padding-top: $padding / 2;
  padding-bottom: 0;
-
-  .Badge + .Badge {
-    margin-left: $padding / 2;
-  }
 }