Interface improvements

src/components/bookmarks/bookmark.js

@@ -40,7 +40,8 @@ export default class Bookmark extends React.Component {
   };
 
   static defaultProps = {
-    onSettingsClick: () => {}
+    onSettingsClick: () => {},
+    icon: 'star'
   };
 
   constructor(...args) {
@@ -61,6 +62,7 @@ export default class Bookmark extends React.Component {
 
     return (
       <NavigationItem
+        className="navigation-item--color_blue"
         badge={this.iconComponent}
         icon={fromJS({ icon })}
         theme="2.0"

src/components/bookmarks/bookmarks.js

@@ -18,7 +18,7 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { pick } from 'lodash';
-import { List } from 'immutable';
+import { Map as ImmutableMap, List } from 'immutable';
 
 import { API_HOST } from '../../config';
 import ApiClient from '../../api/client';
@@ -27,12 +27,14 @@ import { addError } from '../../actions/messages';
 import { setRemote, toggleRemote } from '../../actions/remote';
 import createSelector from '../../selectors/createSelector';
 
-import Button from '../button';
 import Navigation from '../navigation';
+import NavigationItem from '../navigation-item';
 import Bookmark from './bookmark';
 import BookmarkSettingsModal from './settings-modal';
 import BookmarkSettingsForm from './settings-form';
 
+const AddBookmarkIcon = ImmutableMap({ icon: 'add' });
+
 export class Bookmarks extends React.Component {
   static propTypes = {
     dispatch: PropTypes.func,
@@ -98,6 +100,7 @@ export class Bookmarks extends React.Component {
     try {
       await triggers.manageBookmark(data);
       success = true;
+      this.handleModalClose();
     } catch (e) {
       this.props.dispatch(addError(e.message));
     }
@@ -118,11 +121,14 @@ export class Bookmarks extends React.Component {
               onSettingsClick={this.handleSettingsClick}
             />
           ))}
-          <Button
-            className="button button-wide button-hover_grey button-transparent"
-            title="Create bookmark"
+          <NavigationItem
+            className="action"
+            icon={AddBookmarkIcon}
+            theme="2.0"
             onClick={this.handleSettingsClick}
-          />
+          >
+            Create bookmark
+          </NavigationItem>
         </Navigation>
       </div>
     );

src/components/bookmarks/settings-form.js

@@ -172,17 +172,15 @@ class BookmarkSettingsForm extends React.Component {
     e.preventDefault();
     this.toggleProcessing('submit');
 
-    const nativeForm = event.target;
     const { form } = this.props;
     form.forceValidate();
     if (!form.isValid()) {
       return;
     }
 
     const newValues = form.values();
-
     await this.props.onSave({
-      id: nativeForm.id.value,
+      ...this.props.bookmark.toJS(),
       more: { description: newValues.description },
       title: newValues.title,
       url: newValues.url
@@ -215,7 +213,6 @@ class BookmarkSettingsForm extends React.Component {
 
     return (
       <form onSubmit={this.handleSubmit}>
-        <input id="bookmark_id" name="id" type="hidden" value={bookmarkId} />
         <Field
           field={fields.url}
           name="Url"

src/less/blocks/button.less

@@ -95,15 +95,6 @@
   color: #fff;
 }
 
-.button-transparent {
-  background: transparent;
-  color: grey;
-}
-
-.button-hover_grey:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
 .button__icon {
   margin-right: 5px;
 }