Lens restructure (#540)

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/badge/badge.scss

@@ -0,0 +1,15 @@
+.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;
+
+  &.small {
+    font-size: $font-size-small;
+  }
+}

src/renderer/components/badge/badge.tsx

@@ -0,0 +1,23 @@
+import "./badge.scss"
+
+import React from "react";
+import { cssNames } from "../../utils/cssNames";
+import { TooltipDecoratorProps, withTooltip } from "../tooltip";
+
+interface Props extends React.HTMLAttributes<any>, TooltipDecoratorProps {
+  label: React.ReactNode;
+  small?: boolean;
+}
+
+@withTooltip
+export class Badge extends React.Component<Props> {
+  render() {
+    const { className, label, small, children, ...elemProps } = this.props;
+    return (
+      <span className={cssNames("Badge", { small }, className)} {...elemProps}>
+        {label}
+        {children}
+      </span>
+    );
+  }
+}

src/renderer/components/badge/index.ts

@@ -0,0 +1 @@
+export * from "./badge"