feat(controls): add icons #8

src/plugins/Controls/index.js

@@ -2,6 +2,9 @@ import React from 'react';
 import classnames from 'classnames';
 
 import { fitView, zoomIn, zoomOut } from '../../utils/graph';
+import plusIcon from '../../../assets/icons/plus.svg';
+import minusIcon from '../../../assets/icons/minus.svg';
+import fitviewIcon from '../../../assets/icons/fitview.svg';
 
 const baseStyle = {
   position: 'absolute',
@@ -25,19 +28,19 @@ export default ({ style, className }) => {
         className="react-flow__controls-button react-flow__controls-zoomin"
         onClick={zoomIn}
       >
-        +
+        <img src={plusIcon} />
       </div>
       <div
         className="react-flow__controls-button  react-flow__controls-zoomout"
         onClick={zoomOut}
       >
-        -
+        <img src={minusIcon} />
       </div>
       <div
         className="react-flow__controls-button  react-flow__controls-fitview"
         onClick={fitView}
       >
-        @
+        <img src={fitviewIcon} />
       </div>
     </div>
   );

src/style.css

@@ -151,17 +151,27 @@
   }
 }
 
-.react-flow__controls-button {
-  background: #f8f8f8;
-  border: 1px solid #eee;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-}
+.react-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
 
-.react-flow__controls-button:hover {
-  background: #eee;
-}
+  &-button {
+    background: #fefefe;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    user-select: none;
+    padding: 5px;
+
+    img {
+      width: 100%;
+    }
+
+    &:hover {
+      background: #f4f4f4;
+    }
+  }
+}