Start using components from ipfs-react-components

package.json

@@ -14,6 +14,7 @@
     "go-ipfs-dep": "^0.4.13",
     "ipfsd-ctl": "^0.27.0",
     "file-extension": "^4.0.1",
+    "ipfs-react-components": "hacdias/ipfs-react-components",
     "ipfs-stats": "^1.0.4",
     "moment": "^2.20.1",
     "multiaddr": "^3.0.2",

src/js/components/logic/new-pinned-hash.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 
-import IconButton from '../view/icon-button'
+import {IconButton} from 'ipfs-react-components'
 
 /**
  * Is a New Pinned Hash form.

src/js/components/view/checkbox-block.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import {Block} from 'ipfs-react-components'
+
 /**
  * Is a Checkbox Block.
  *
@@ -19,18 +21,21 @@ export default function CheckboxBlock (props) {
   }
 
   return (
-    <div onClick={_onClick} className='info-block checkbox'>
-      <div className='wrapper'>
+    <Block
+      onClick={_onClick}
+      className='checkbox'
+      wrapped={(
         <div>
-          <p className='label'>{props.title}</p>
-          <p className='info'>{props.info}</p>
-        </div>
-        <div className='right'>
-          <input type='checkbox' onChange={_onClick} checked={props.value} />
-          <span className='checkbox' />
+          <div>
+            <p className='label'>{props.title}</p>
+            <p className='info'>{props.info}</p>
+          </div>
+          <div className='right'>
+            <input type='checkbox' onChange={_onClick} checked={props.value} />
+            <span className='checkbox' />
+          </div>
         </div>
-      </div>
-    </div>
+      )} />
   )
 }
 

src/js/components/view/file-block.js

@@ -4,8 +4,7 @@ import moment from 'moment'
 import fileExtension from 'file-extension'
 import {ipcRenderer, clipboard} from 'electron'
 
-import Button from './button'
-import Icon from './icon'
+import {Button, Icon} from 'ipfs-react-components'
 
 /**
  * Is a File Block.

src/js/components/view/icon-dropdown-list.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Icon from './icon'
+import {Icon} from 'ipfs-react-components'
 
 function onChangeWrapper (fn) {
   return event => {

src/js/components/view/info-block.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Button from '../view/button'
+import {Button} from 'ipfs-react-components'
 
 /**
  * Is an information block.

src/js/components/view/pinned-hash.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {ipcRenderer} from 'electron'
 
-import Button from './button'
+import {Button} from 'ipfs-react-components'
 
 /**
  * Is a Pinned Hash.

src/js/panes/files.js

@@ -4,11 +4,14 @@ import {ipcRenderer} from 'electron'
 import {NativeTypes} from 'react-dnd-html5-backend'
 import {DropTarget} from 'react-dnd'
 
-import Pane from '../components/view/pane'
-import Header from '../components/view/header'
-import Footer from '../components/view/footer'
+import {
+  Pane,
+  Header,
+  Footer,
+  IconButton
+} from 'ipfs-react-components'
+
 import File from '../components/view/file-block'
-import IconButton from '../components/view/icon-button'
 
 const fileTarget = {
   drop (props, monitor) {

src/js/panes/info.js

@@ -3,11 +3,13 @@ import PropTypes from 'prop-types'
 import {clipboard, ipcRenderer} from 'electron'
 import prettyBytes from 'pretty-bytes'
 
-import Pane from '../components/view/pane'
-import Header from '../components/view/header'
-import Footer from '../components/view/footer'
-import IconButton from '../components/view/icon-button'
-import InfoBlock from '../components/view/info-block'
+import {
+  Pane,
+  Header,
+  Footer,
+  IconButton,
+  InfoBlock
+} from 'ipfs-react-components'
 
 function onClickCopy (text) {
   return () => clipboard.writeText(text)