UI Upgrade

package.json

@@ -112,8 +112,8 @@
     "babel-preset-react-optimize": "^1.0.1",
     "babel-register": "^6.18.0",
     "babili-webpack-plugin": "^0.0.8",
-    "buttercup-generator": "^0.0.1",
     "buttercup-importer": "^0.6.1",
+    "buttercup-ui": "^0.3.1",
     "buttercup-web": "~0.17.2",
     "classnames": "^2.2.5",
     "concurrently": "^2.1.0",
@@ -154,7 +154,6 @@
     "react-dom": "^15.4.0",
     "react-hot-loader": "3.0.0-beta.6",
     "react-icons": "^2.2.1",
-    "react-popover": "^0.4.4",
     "react-redux": "^4.4.6",
     "react-split-pane": "^0.1.51",
     "redux": "^3.5.2",
@@ -172,8 +171,7 @@
     "webpack": "2.2.0",
     "webpack-dev-server": "2.2.0",
     "webpack-merge": "^2.6.0",
-    "xo": "^0.16.0",
-    "zxcvbn": "^4.4.1"
+    "xo": "^0.16.0"
   },
   "xo": {
     "extends": "xo-react",

src/renderer/components/archive/copyable.js

@@ -2,10 +2,10 @@ import React, { PropTypes, Component } from 'react';
 import CopyIcon from 'react-icons/lib/fa/copy';
 import EyeIcon from 'react-icons/lib/fa/eye';
 import EyeSlashIcon from 'react-icons/lib/fa/eye-slash';
+import { Button } from 'buttercup-ui';
 import { showContextMenu } from '../../system/menu';
 import { copyToClipboard } from '../../system/utils';
 import styles from '../../styles/copyable';
-import Button from '../button';
 
 class Copyable extends Component {
   constructor(props) {

src/renderer/components/archive/entries.js

@@ -1,10 +1,10 @@
 import React, { Component, PropTypes } from 'react';
 import PlusIcon from 'react-icons/lib/md/add';
 import cx from 'classnames';
+import { Button } from 'buttercup-ui';
 import { isOSX } from '../../system/utils';
 import { showContextMenu, createMenuFromGroups } from '../../system/menu';
 import Column from '../column';
-import Button from '../button';
 import styles from '../../styles/entries';
 import List from './entries-list';
 import SearchField from './search-field';

src/renderer/components/archive/entry-form.js

@@ -2,8 +2,8 @@ import React, { Component, PropTypes } from 'react';
 import { Field, FieldArray } from 'redux-form';
 import PlusIcon from 'react-icons/lib/md/add';
 import RemoveIcon from 'react-icons/lib/fa/trash-o';
+import { Button } from 'buttercup-ui';
 import styles from '../../styles/entry-form';
-import Button from '../button';
 import Input from './entry-input';
 
 const renderMeta = ({fields, meta: {touched, error}}) => ( // eslint-disable-line react/prop-types

src/renderer/components/archive/entry-input.js

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import cx from 'classnames';
-import Meter from '../meter';
-import Generator from '../generator';
+import { Generator, Meter } from 'buttercup-ui';
+import MagicIcon from 'react-icons/lib/fa/magic';
 import styles from '../../styles/entry-input';
 
 const BareInput = ({input, name, placeholder, type}) => {
@@ -25,11 +25,27 @@ BareInput.propTypes = {
   type: PropTypes.string
 };
 
-class Input extends Component {
+export default class Input extends Component {
+
+  static propTypes = {
+    type: PropTypes.string,
+    input: PropTypes.object
+  }
+
+  state = {
+    isGeneratorOpen: false
+  }
+
+  handleGeneratorToggle() {
+    this.setState({
+      isGeneratorOpen: !this.state.isGeneratorOpen
+    });
+  }
 
   receivePassword(newPassword) {
     const { input: { onChange } } = this.props;
     onChange(newPassword);
+    this.handleGeneratorToggle();
   }
 
   render() {
@@ -40,18 +56,16 @@ class Input extends Component {
         {type === 'password' && 
           <Generator
             onGenerate={pwd => this.receivePassword(pwd)}
-            className={styles.generator}
-            activeClassName={styles.generatorActive}
-            />}
+            isOpen={this.state.isGeneratorOpen}
+            preferPlace="below"
+            >
+            <div className={cx(styles.generator, this.state.isGeneratorOpen && styles.generatorActive)}>
+              <MagicIcon onClick={this.handleGeneratorToggle.bind(this)}/>
+            </div>
+          </Generator>
+        }
         {type === 'password' && <Meter input={input.value}/>}
       </div>
     );
   }
 }
-
-Input.propTypes = {
-  type: PropTypes.string,
-  input: PropTypes.object
-};
-
-export default Input;

src/renderer/components/archive/entry.js

@@ -1,10 +1,10 @@
 import React, { Component, PropTypes } from 'react';
 import TrashIcon from 'react-icons/lib/fa/trash-o';
 import EditIcon from 'react-icons/lib/fa/edit';
+import { Button } from 'buttercup-ui';
 import EntryForm from '../../containers/archive/entry-form';
 import styles from '../../styles/entry';
 import Column from '../column';
-import Button from '../button';
 import EntryView from './entry-view';
 import EmptyView from './entry-empty';
 
@@ -36,7 +36,7 @@ class Entry extends Component {
               primary
               >Save</Button>
             {' '}
-            <Button onClick={this.props.handleViewMode} secondary>Cancel</Button>
+            <Button onClick={this.props.handleViewMode}>Cancel</Button>
           </div>
           <div>
             <Button
@@ -67,7 +67,7 @@ class Entry extends Component {
             primary
             >Save</Button>
           {' '}
-          <Button onClick={this.props.handleViewMode} secondary>Cancel</Button>
+          <Button onClick={this.props.handleViewMode}>Cancel</Button>
         </div>
       )
     };
@@ -76,7 +76,7 @@ class Entry extends Component {
   renderViewMode() {
     return {
       content: <EntryView entry={this.props.entry}/>,
-      footer: <Button onClick={this.props.handleEditMode} secondary icon={<EditIcon/>}>Edit</Button>
+      footer: <Button onClick={this.props.handleEditMode} icon={<EditIcon/>}>Edit</Button>
     };
   }
 

src/renderer/components/file-opener.js

@@ -2,11 +2,11 @@ import React, { Component, PropTypes } from 'react';
 import cx from 'classnames';
 import FolderIcon from 'react-icons/lib/fa/folder-open-o';
 import FileIcon from 'react-icons/lib/fa/file-text-o';
+import { Button } from 'buttercup-ui';
 import { isOSX } from '../system/utils';
 import pkg from '../../../package.json';
 import logo from '../styles/img/logo.svg';
 import styles from '../styles/file-opener';
-import Button from './button';
 
 class FileOpener extends Component {
   render() {