Badge: Design improvement & reduce contrast (#30328)

* Badge: Design improvement & reduce contrast

* light theme border tweak

* Updated snapshot

packages/grafana-ui/src/components/Badge/Badge.tsx

@@ -49,23 +49,23 @@ const getStyles = stylesFactory((theme: GrafanaTheme, color: BadgeColor) => {
 
 
   if (theme.isDark) {
   if (theme.isDark) {
     bgColor = tinycolor(sourceColor)
     bgColor = tinycolor(sourceColor)
-      .darken(38)
+      .setAlpha(0.1)
       .toString();
       .toString();
     borderColor = tinycolor(sourceColor)
     borderColor = tinycolor(sourceColor)
-      .darken(25)
+      .darken(35)
       .toString();
       .toString();
     textColor = tinycolor(sourceColor)
     textColor = tinycolor(sourceColor)
-      .lighten(45)
+      .lighten(15)
       .toString();
       .toString();
   } else {
   } else {
     bgColor = tinycolor(sourceColor)
     bgColor = tinycolor(sourceColor)
-      .lighten(30)
+      .setAlpha(0.1)
       .toString();
       .toString();
     borderColor = tinycolor(sourceColor)
     borderColor = tinycolor(sourceColor)
-      .lighten(15)
+      .lighten(25)
       .toString();
       .toString();
     textColor = tinycolor(sourceColor)
     textColor = tinycolor(sourceColor)
-      .darken(40)
+      .darken(15)
       .toString();
       .toString();
   }
   }
 
 
@@ -75,7 +75,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme, color: BadgeColor) => {
       display: inline-flex;
       display: inline-flex;
       padding: 1px 4px;
       padding: 1px 4px;
       border-radius: 3px;
       border-radius: 3px;
-      margin-top: 6px;
       background: ${bgColor};
       background: ${bgColor};
       border: 1px solid ${borderColor};
       border: 1px solid ${borderColor};
       color: ${textColor};
       color: ${textColor};

public/app/core/components/Card/Card.tsx

@@ -30,7 +30,7 @@ export const Card: React.FC<CardProps> = ({
       <div className="add-data-source-item-text-wrapper">
       <div className="add-data-source-item-text-wrapper">
         <span className="add-data-source-item-text">{title}</span>
         <span className="add-data-source-item-text">{title}</span>
         {description && <span className="add-data-source-item-desc">{description}</span>}
         {description && <span className="add-data-source-item-desc">{description}</span>}
-        {labels && <div>{labels}</div>}
+        {labels && <div className="add-data-source-item-badge">{labels}</div>}
       </div>
       </div>
       {actions && <div className="add-data-source-item-actions">{actions}</div>}
       {actions && <div className="add-data-source-item-actions">{actions}</div>}
     </div>
     </div>

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

@@ -121,6 +121,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     `,
     badge: css`
     badge: css`
       position: absolute;
       position: absolute;
+      background: ${theme.colors.bg2};
       bottom: ${theme.spacing.xs};
       bottom: ${theme.spacing.xs};
       right: ${theme.spacing.xs};
       right: ${theme.spacing.xs};
       z-index: 1;
       z-index: 1;

public/app/features/datasources/NewDataSourcePage.tsx

@@ -156,13 +156,7 @@ const DataSourceTypeCard: FC<DataSourceTypeCardProps> = props => {
           {!isPhantom && <Button disabled={plugin.unlicensed}>Select</Button>}
           {!isPhantom && <Button disabled={plugin.unlicensed}>Select</Button>}
         </>
         </>
       }
       }
-      labels={
-        !isPhantom && (
-          <div>
-            <PluginSignatureBadge status={plugin.signature} />
-          </div>
-        )
-      }
+      labels={!isPhantom && <PluginSignatureBadge status={plugin.signature} />}
       className={isPhantom ? 'add-data-source-item--phantom' : ''}
       className={isPhantom ? 'add-data-source-item--phantom' : ''}
       onClick={onClick}
       onClick={onClick}
       aria-label={selectors.pages.AddDataSource.dataSourcePlugins(plugin.name)}
       aria-label={selectors.pages.AddDataSource.dataSourcePlugins(plugin.name)}

public/app/features/plugins/PluginListItem.tsx

@@ -15,7 +15,9 @@ const PluginListItem: FC<Props> = props => {
       <a className="card-item" href={`plugins/${plugin.id}/`}>
       <a className="card-item" href={`plugins/${plugin.id}/`}>
         <div className="card-item-header">
         <div className="card-item-header">
           <div className="card-item-type">{plugin.type}</div>
           <div className="card-item-type">{plugin.type}</div>
-          <PluginSignatureBadge status={plugin.signature} />
+          <div className="card-item-badge">
+            <PluginSignatureBadge status={plugin.signature} />
+          </div>
           {plugin.hasUpdate && (
           {plugin.hasUpdate && (
             <div className="card-item-notice">
             <div className="card-item-notice">
               <span bs-tooltip="plugin.latestVersion">Update available!</span>
               <span bs-tooltip="plugin.latestVersion">Update available!</span>

public/app/features/plugins/__snapshots__/PluginListItem.test.tsx.snap

@@ -17,7 +17,11 @@ exports[`Render should render component 1`] = `
       >
       >
         panel
         panel
       </div>
       </div>
-      <PluginSignatureBadge />
+      <div
+        className="card-item-badge"
+      >
+        <PluginSignatureBadge />
+      </div>
     </div>
     </div>
     <div
     <div
       className="card-item-body"
       className="card-item-body"
@@ -65,7 +69,11 @@ exports[`Render should render has plugin section 1`] = `
       >
       >
         panel
         panel
       </div>
       </div>
-      <PluginSignatureBadge />
+      <div
+        className="card-item-badge"
+      >
+        <PluginSignatureBadge />
+      </div>
       <div
       <div
         className="card-item-notice"
         className="card-item-notice"
       >
       >

public/sass/components/_add_data_source.scss

@@ -53,6 +53,10 @@
   color: $text-color-weak;
   color: $text-color-weak;
 }
 }
 
 
+.add-data-source-item-badge {
+  margin-top: 6px;
+}
+
 .add-data-source-item-text {
 .add-data-source-item-text {
   font-size: $font-size-h5;
   font-size: $font-size-h5;
 }
 }

public/sass/components/_cards.scss

@@ -84,6 +84,10 @@
   font-weight: $font-weight-semi-bold;
   font-weight: $font-weight-semi-bold;
 }
 }
 
 
+.card-item-badge {
+  margin: 6px 0;
+}
+
 .card-item-notice {
 .card-item-notice {
   font-size: $font-size-sm;
   font-size: $font-size-sm;
 }
 }