Lens restructure (#540)

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

src/renderer/components/add-remove-buttons/add-remove-buttons.scss

@@ -0,0 +1,15 @@
+.AddRemoveButtons {
+  position: absolute;
+  margin: $padding * 2;
+  margin-right: $padding * 4;
+  bottom: 0;
+  right: 0;
+  z-index: 99;
+
+  .Button {
+    &.remove-button {
+      background-color: $borderFaintColor;
+      color: $textColorPrimary;
+    }
+  }
+}

src/renderer/components/add-remove-buttons/add-remove-buttons.tsx

@@ -0,0 +1,52 @@
+import "./add-remove-buttons.scss";
+
+import React from "react";
+import { cssNames } from "../../utils";
+import { Button } from "../button";
+import { Icon } from "../icon";
+
+export interface AddRemoveButtonsProps extends React.HTMLAttributes<any> {
+  onAdd?: () => void;
+  onRemove?: () => void;
+  addTooltip?: React.ReactNode;
+  removeTooltip?: React.ReactNode;
+}
+
+export class AddRemoveButtons extends React.PureComponent<AddRemoveButtonsProps> {
+  renderButtons() {
+    const { onRemove, onAdd, addTooltip, removeTooltip } = this.props
+    const buttons = [
+      {
+        onClick: onRemove,
+        className: "remove-button",
+        icon: "remove",
+        tooltip: removeTooltip,
+      },
+      {
+        onClick: onAdd,
+        className: "add-button",
+        icon: "add",
+        tooltip: addTooltip,
+      },
+    ];
+    return buttons.map(button => {
+      if (!button.onClick) {
+        return null;
+      }
+      const { onClick, className, icon, tooltip } = button
+      return (
+        <Button key={icon} big round primary onClick={onClick} className={className} tooltip={tooltip}>
+          <Icon material={icon}/>
+        </Button>
+      )
+    })
+  }
+
+  render() {
+    return (
+      <div className={cssNames("AddRemoveButtons flex gaps", this.props.className)}>
+        {this.renderButtons()}
+      </div>
+    )
+  }
+}

src/renderer/components/add-remove-buttons/index.ts

@@ -0,0 +1 @@
+export * from "./add-remove-buttons"