Move ToolbarIcon to main ui components folder

Summary: there are two plugins which uses copy-pasted ToolbarIcon and at least one more where it will be helpful. Let's move it to components folder

Reviewed By: nikoant

Differential Revision: D21089290

fbshipit-source-id: a14dcd56633dd24016711e34308b94023fcb40ed

desktop/app/src/index.tsx

@@ -131,6 +131,7 @@ export {default as FlexRow} from './ui/components/FlexRow';
 export {default as FlexColumn} from './ui/components/FlexColumn';
 export {default as FlexCenter} from './ui/components/FlexCenter';
 export {default as Toolbar, Spacer} from './ui/components/Toolbar';
+export {default as ToolbarIcon} from './ui/components/ToolbarIcon';
 export {default as Panel} from './ui/components/Panel';
 export {default as Text} from './ui/components/Text';
 export {default as TextParagraph} from './ui/components/TextParagraph';

desktop/app/src/ui/components/ToolbarIcon.tsx

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import Glyph from './Glyph';
+import {colors} from './colors';
+import styled from '@emotion/styled';
+import React from 'react';
+
+type Props = {
+  title: string;
+  icon: string;
+  active: boolean;
+  onClick: () => void;
+};
+
+const ToolbarIcon = styled.div({
+  marginRight: 9,
+  marginTop: -3,
+  marginLeft: 4,
+  position: 'relative', // for settings popover positioning
+});
+
+export default function (props: Props) {
+  return (
+    <ToolbarIcon onClick={props.onClick} title={props.title}>
+      <Glyph
+        name={props.icon}
+        size={16}
+        color={
+          props.active
+            ? colors.macOSTitleBarIconSelected
+            : colors.macOSTitleBarIconActive
+        }
+      />
+    </ToolbarIcon>
+  );
+}

desktop/app/src/ui/index.tsx

@@ -110,6 +110,7 @@ export {default as FlexRow} from './components/FlexRow';
 export {default as FlexColumn} from './components/FlexColumn';
 export {default as FlexCenter} from './components/FlexCenter';
 export {default as Toolbar, Spacer} from './components/Toolbar';
+export {default as ToolbarIcon} from './components/ToolbarIcon';
 export {default as Panel} from './components/Panel';
 export {default as Text} from './components/Text';
 export {default as TextParagraph} from './components/TextParagraph';