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

@@ -49,20 +49,20 @@ const getStyles = stylesFactory((theme: GrafanaTheme, color: BadgeColor) => {
 
 
   if (theme.isDark) {
   if (theme.isDark) {
     bgColor = tinycolor(sourceColor)
     bgColor = tinycolor(sourceColor)
-      .setAlpha(0.1)
+      .setAlpha(0.15)
       .toString();
       .toString();
     borderColor = tinycolor(sourceColor)
     borderColor = tinycolor(sourceColor)
-      .darken(35)
+      .darken(30)
       .toString();
       .toString();
     textColor = tinycolor(sourceColor)
     textColor = tinycolor(sourceColor)
       .lighten(15)
       .lighten(15)
       .toString();
       .toString();
   } else {
   } else {
     bgColor = tinycolor(sourceColor)
     bgColor = tinycolor(sourceColor)
-      .setAlpha(0.1)
+      .setAlpha(0.15)
       .toString();
       .toString();
     borderColor = tinycolor(sourceColor)
     borderColor = tinycolor(sourceColor)
-      .lighten(25)
+      .lighten(20)
       .toString();
       .toString();
     textColor = tinycolor(sourceColor)
     textColor = tinycolor(sourceColor)
       .darken(15)
       .darken(15)
@@ -78,6 +78,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, color: BadgeColor) => {
       background: ${bgColor};
       background: ${bgColor};
       border: 1px solid ${borderColor};
       border: 1px solid ${borderColor};
       color: ${textColor};
       color: ${textColor};
+      font-weight: ${theme.typography.weight.regular};
 
 
       > span {
       > span {
         position: relative;
         position: relative;

public/app/features/dashboard/components/VizTypePicker/VizTypePickerPlugin.tsx

@@ -121,7 +121,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     `,
     badge: css`
     badge: css`
       position: absolute;
       position: absolute;
-      background: ${theme.colors.bg2};
+      background: ${theme.colors.bg1};
       bottom: ${theme.spacing.xs};
       bottom: ${theme.spacing.xs};
       right: ${theme.spacing.xs};
       right: ${theme.spacing.xs};
       z-index: 1;
       z-index: 1;
@@ -153,21 +153,18 @@ function getPanelStateBadgeDisplayModel(panel: PanelPluginMeta): BadgeProps | nu
     case PluginState.deprecated:
     case PluginState.deprecated:
       return {
       return {
         text: 'Deprecated',
         text: 'Deprecated',
-        icon: 'exclamation-triangle',
         color: 'red',
         color: 'red',
         tooltip: `${panel.name} panel is deprecated`,
         tooltip: `${panel.name} panel is deprecated`,
       };
       };
     case PluginState.alpha:
     case PluginState.alpha:
       return {
       return {
         text: 'Alpha',
         text: 'Alpha',
-        icon: 'rocket',
         color: 'blue',
         color: 'blue',
         tooltip: `${panel.name} panel is experimental`,
         tooltip: `${panel.name} panel is experimental`,
       };
       };
     case PluginState.beta:
     case PluginState.beta:
       return {
       return {
         text: 'Beta',
         text: 'Beta',
-        icon: 'rocket',
         color: 'blue',
         color: 'blue',
         tooltip: `${panel.name} panel is in beta`,
         tooltip: `${panel.name} panel is in beta`,
       };
       };

public/app/features/plugins/PluginSignatureBadge.tsx

@@ -43,7 +43,7 @@ function getSignatureDisplayModel(signature?: PluginSignatureStatus): BadgeProps
 
 
   switch (signature) {
   switch (signature) {
     case PluginSignatureStatus.internal:
     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:
     case PluginSignatureStatus.valid:
       return { text: 'Signed', icon: 'lock', color: 'green', tooltip: 'Signed and verified plugin' };
       return { text: 'Signed', icon: 'lock', color: 'green', tooltip: 'Signed and verified plugin' };
     case PluginSignatureStatus.invalid:
     case PluginSignatureStatus.invalid: