Adding flat option to <Badge />

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/badge/badge.scss

@@ -1,14 +1,17 @@
 .Badge {
   display: inline-block;
-  background: $colorVague;
-  color: $textColorSecondary;
-  border-radius: $radius;
-  padding: .2em .4em;
   white-space: nowrap;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
 
+  &:not(.flat) {
+    background: $colorVague;
+    color: $textColorSecondary;
+    border-radius: $radius;
+    padding: .2em .4em;
+  }
+
   &.small {
     font-size: $font-size-small;
   }

src/renderer/components/badge/badge.tsx

@@ -6,16 +6,17 @@ import { TooltipDecoratorProps, withTooltip } from "../tooltip";
 
 export interface BadgeProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
   small?: boolean;
+  flat?: boolean;
   label?: React.ReactNode;
 }
 
 @withTooltip
 export class Badge extends React.Component<BadgeProps> {
   render() {
-    const { className, label, small, children, ...elemProps } = this.props;
+    const { className, label, small, flat, children, ...elemProps } = this.props;
 
     return <>
-      <span className={cssNames("Badge", { small }, className)} {...elemProps}>
+      <span className={cssNames("Badge", { small, flat }, className)} {...elemProps}>
         {label}
         {children}
       </span>