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
This commit is contained in:
Torkel Ödegaard 2021-01-18 17:16:11 +01:00 committed by GitHub
parent af27dd7e7d
commit c0cddc303a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 9 deletions

View File

@ -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;

View File

@ -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`,
};

View File

@ -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: