feat(Icon): update icons

e2e/__tests__/icon.test.js

@@ -2,7 +2,6 @@ import { baisy } from '../setup/TestSuiter';
 
 
 const SUITES = [
-  baisy.suite('Components/Icon', 'all icons'),
   baisy.suite('Components/Icon', 'with color'),
   baisy.suite('Components/Icon', 'with size'),
 ];

src/components/Icon/glyphs/index.js

@@ -5,6 +5,9 @@ import Alert from './Alert.svg';
 import APIToken from './APIToken.svg';
 import Check from './Check.svg';
 import ChevronDown from './ChevronDown.svg';
+import ChevronLeft from './ChevronLeft.svg';
+import ChevronRight from './ChevronRight.svg';
+import ChevronTop from './ChevronTop.svg';
 import CloudDatabase from './Cloud-Database.svg';
 import Contract from './Contract.svg';
 import Customers from './Customers.svg';
@@ -13,7 +16,6 @@ import Delete from './Delete.svg';
 import Diagram from './Diagram.svg';
 import Discord from './Discord.svg';
 import DismissData from './Dismiss-Data.svg';
-import Dots from './Dots.svg';
 import EditPencil from './EditPencil.svg';
 import EightBase from './EightBase.svg';
 import Environment from './Environment.svg';
@@ -28,6 +30,8 @@ import Lock from './Lock.svg';
 import Logic from './Logic.svg';
 import Mail from './Mail.svg';
 import MapPin from './MapPin.svg';
+import More from './More.svg';
+import MoreVertical from './MoreVertical.svg';
 import PaperClip from './PaperClip.svg';
 import Planet from './Planet.svg';
 import Schema from './Schema.svg';
@@ -45,6 +49,9 @@ export {
   APIToken,
   Check,
   ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronTop,
   CloudDatabase,
   Contract,
   Customers,
@@ -53,7 +60,6 @@ export {
   Diagram,
   Discord,
   DismissData,
-  Dots,
   EditPencil,
   EightBase,
   Environment,
@@ -68,6 +74,8 @@ export {
   Logic,
   Mail,
   MapPin,
+  More,
+  MoreVertical,
   PaperClip,
   Planet,
   Schema,

src/components/Table/TableHeaderCell.js

@@ -1,6 +1,5 @@
 // @flow
 import React, { PureComponent } from 'react';
-import styled from 'react-emotion';
 
 import { createThemeTag } from '../../theme/createThemeTag';
 
@@ -33,17 +32,6 @@ const [TableHeaderCellTag, theme] = createThemeTag(name, ({ SIZES }: *) => ({
   }),
 }));
 
-
-const IconTransform = styled('div')(props => {
-  const styles = {};
-
-  if (props.order === 'ASC') {
-    styles.transform = 'rotate(180deg)';
-  }
-
-  return styles;
-});
-
 class TableHeaderCell extends PureComponent<TableHeaderCellProps> {
 
   onSort = () => {
@@ -65,9 +53,7 @@ class TableHeaderCell extends PureComponent<TableHeaderCellProps> {
       <TableHeaderCellTag { ...rest } onClick={ this.onSort } tagName={ Row }>
         <span>{ children }</span>
         <If condition={ !!rest.order }>
-          <IconTransform modifiers={ rest }>
-            <Icon name="ChevronDown" size="md" />
-          </IconTransform>
+          <Icon name={ rest.order === 'ASC' ? 'ChevronTop' : 'ChevronDown' } size="xs" />
         </If>
       </TableHeaderCellTag>
     );