Commit c0cddc30 by Torkel Ödegaard Committed by GitHub

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
parent af27dd7e
......@@ -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;
......
......@@ -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`,
};
......
......@@ -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:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment