From c0cddc303a8e732d40ba2d6d6d25207559fc7308 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Mon, 18 Jan 2021 17:16:11 +0100
Subject: [PATCH] Badge: Increase contrast, remove rocket icon for plugin
 beta/alpha state (#30357)

* Badge: Increase contrast, remove rocket icon for plugin beta/alpha state

* Remove icons to simplify design

* Adding warning icons back
---
 packages/grafana-ui/src/components/Badge/Badge.tsx       | 9 +++++----
 .../components/VizTypePicker/VizTypePickerPlugin.tsx     | 5 +----
 public/app/features/plugins/PluginSignatureBadge.tsx     | 2 +-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/grafana-ui/src/components/Badge/Badge.tsx b/packages/grafana-ui/src/components/Badge/Badge.tsx
index 26d8982fa22..7dfe374ff9b 100644
--- a/packages/grafana-ui/src/components/Badge/Badge.tsx
+++ b/packages/grafana-ui/src/components/Badge/Badge.tsx
@@ -49,20 +49,20 @@ const getStyles = stylesFactory((theme: GrafanaTheme, color: BadgeColor) => {
 
   if (theme.isDark) {
     bgColor = tinycolor(sourceColor)
-      .setAlpha(0.1)
+      .setAlpha(0.15)
       .toString();
     borderColor = tinycolor(sourceColor)
-      .darken(35)
+      .darken(30)
       .toString();
     textColor = tinycolor(sourceColor)
       .lighten(15)
       .toString();
   } else {
     bgColor = tinycolor(sourceColor)
-      .setAlpha(0.1)
+      .setAlpha(0.15)
       .toString();
     borderColor = tinycolor(sourceColor)
-      .lighten(25)
+      .lighten(20)
       .toString();
     textColor = tinycolor(sourceColor)
       .darken(15)
@@ -78,6 +78,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, color: BadgeColor) => {
       background: ${bgColor};
       border: 1px solid ${borderColor};
       color: ${textColor};
+      font-weight: ${theme.typography.weight.regular};
 
       > span {
         position: relative;
diff --git a/public/app/features/dashboard/components/VizTypePicker/VizTypePickerPlugin.tsx b/public/app/features/dashboard/components/VizTypePicker/VizTypePickerPlugin.tsx
index 0aae381c55e..4aa96f02c85 100644
--- a/public/app/features/dashboard/components/VizTypePicker/VizTypePickerPlugin.tsx
+++ b/public/app/features/dashboard/components/VizTypePicker/VizTypePickerPlugin.tsx
@@ -121,7 +121,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     badge: css`
       position: absolute;
-      background: ${theme.colors.bg2};
+      background: ${theme.colors.bg1};
       bottom: ${theme.spacing.xs};
       right: ${theme.spacing.xs};
       z-index: 1;
@@ -153,21 +153,18 @@ function getPanelStateBadgeDisplayModel(panel: PanelPluginMeta): BadgeProps | nu
     case PluginState.deprecated:
       return {
         text: 'Deprecated',
-        icon: 'exclamation-triangle',
         color: 'red',
         tooltip: `${panel.name} panel is deprecated`,
       };
     case PluginState.alpha:
       return {
         text: 'Alpha',
-        icon: 'rocket',
         color: 'blue',
         tooltip: `${panel.name} panel is experimental`,
       };
     case PluginState.beta:
       return {
         text: 'Beta',
-        icon: 'rocket',
         color: 'blue',
         tooltip: `${panel.name} panel is in beta`,
       };
diff --git a/public/app/features/plugins/PluginSignatureBadge.tsx b/public/app/features/plugins/PluginSignatureBadge.tsx
index f1352939387..d21787ec3e9 100644
--- a/public/app/features/plugins/PluginSignatureBadge.tsx
+++ b/public/app/features/plugins/PluginSignatureBadge.tsx
@@ -43,7 +43,7 @@ function getSignatureDisplayModel(signature?: PluginSignatureStatus): BadgeProps
 
   switch (signature) {
     case PluginSignatureStatus.internal:
-      return { text: 'Core', icon: 'cube', color: 'blue', tooltip: 'Core plugin that is bundled with Grafana' };
+      return { text: 'Core', color: 'blue', tooltip: 'Core plugin that is bundled with Grafana' };
     case PluginSignatureStatus.valid:
       return { text: 'Signed', icon: 'lock', color: 'green', tooltip: 'Signed and verified plugin' };
     case PluginSignatureStatus.invalid: