You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ga...@apache.org on 2017/03/23 09:24:44 UTC

[couchdb-fauxton] branch master updated: (#881) - Style changes and improvements

This is an automated email from the ASF dual-hosted git repository.

garren pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/couchdb-fauxton.git

The following commit(s) were added to refs/heads/master by this push:
       new  13ee067   (#881) - Style changes and improvements
13ee067 is described below

commit 13ee067d74c40674ae8421750301c9e6df214634
Author: Justin McDavid <jm...@us.ibm.com>
AuthorDate: Wed Mar 22 12:32:16 2017 -0700

    (#881) - Style changes and improvements
---
 app/addons/auth/components.react.jsx               | 27 +++++++----------
 app/addons/auth/routes.js                          |  2 ++
 .../components/assets/less/header-breadcrumbs.less |  7 ++++-
 app/addons/components/assets/less/modals.less      |  7 +++--
 .../components/components/deletedatabasemodal.js   |  4 +--
 .../components/components/stringeditmodal.js       |  2 +-
 app/addons/config/routes.js                        |  2 +-
 app/addons/cors/assets/less/cors.less              |  2 +-
 app/addons/cors/components.react.jsx               |  6 ++--
 app/addons/documents/assets/less/changes.less      |  3 +-
 app/addons/documents/assets/less/doc-editor.less   | 14 +++++++++
 app/addons/documents/assets/less/documents.less    |  4 +++
 .../documents/assets/less/header-docs-left.less    |  2 +-
 .../documents/assets/less/query-options.less       | 16 +++++++---
 app/addons/documents/assets/less/sidenav.less      | 15 +++++-----
 app/addons/documents/assets/less/view-editor.less  |  8 ++++-
 .../documents/doc-editor/components.react.jsx      | 17 ++++++-----
 .../documents/index-editor/components.react.jsx    |  2 +-
 .../documents/queryoptions/queryoptions.react.jsx  |  4 +--
 app/addons/documents/sidebar/sidebar.react.jsx     |  2 +-
 app/addons/fauxton/assets/less/components.less     |  7 +++++
 app/addons/fauxton/navigation/components.react.jsx |  7 +----
 .../permissions/components/PermissionsSection.js   |  8 ++---
 .../replication/assets/less/replication.less       | 27 ++++++++++-------
 .../replication/components/common-activity.js      |  2 +-
 app/addons/setup/route.js                          |  1 +
 app/addons/setup/setup.react.jsx                   | 10 +++----
 assets/less/bootstrap/close.less                   | 10 +++----
 assets/less/bootstrap/dropdowns.less               |  7 +++--
 assets/less/formstyles.less                        | 34 +++++++++++-----------
 assets/less/prettyprint.less                       |  2 +-
 assets/less/templates.less                         | 23 ++++++++++-----
 assets/less/variables.less                         |  9 +++---
 33 files changed, 173 insertions(+), 120 deletions(-)

diff --git a/app/addons/auth/components.react.jsx b/app/addons/auth/components.react.jsx
index f0e4426..1784618 100644
--- a/app/addons/auth/components.react.jsx
+++ b/app/addons/auth/components.react.jsx
@@ -97,7 +97,7 @@ var LoginForm = React.createClass({
               <input id="password" type="password" name="password" ref="password" placeholder="Password" size="24"
                 onChange={this.onInputChange} value={this.state.password} />
               <br/>
-              <button id="submit" className="btn btn-success" type="submit">Log In</button>
+              <button id="submit" className="btn btn-primary" type="submit">Log In</button>
             </form>
           </div>
         </div>
@@ -148,17 +148,15 @@ var ChangePasswordForm = React.createClass({
   render: function () {
     return (
       <div className="auth-page">
-        <h3>Change Password</h3>
-
         <form id="change-password" onSubmit={this.changePassword}>
           <p>
-            Enter your new password.
+            Enter and confirm a new password.
           </p>
 
           <input id="password" type="password" ref="password" name="password" placeholder="Password"
             size="24" onChange={this.onChangePassword} value={this.state.password} />
           <br />
-          <input id="password-confirm" type="password" name="password_confirm" placeholder= "Verify Password"
+          <input id="password-confirm" type="password" name="password_confirm" placeholder= "Password Confirmation"
             size="24" onChange={this.onChangePasswordConfirm} value={this.state.passwordConfirm} />
 
           <br />
@@ -223,19 +221,17 @@ var CreateAdminForm = React.createClass({
   render: function () {
     return (
       <div className="auth-page">
-        <h3>Create Admins</h3>
-
         <p>
-          Before a server admin is configured, all clients have admin privileges. This is fine when
-          HTTP access is restricted to trusted users. <strong>If end-users will be accessing this
-          CouchDB, you must create an admin account to prevent accidental (or malicious) data
+          Before a server admin is configured, all client connections have admin privileges. <strong>If HTTP access is open to non-trusted users, create an admin account to prevent data
           loss.</strong>
         </p>
         <p>
-          Server admins can create and destroy databases, install and update _design documents, run
-          the test suite, and edit all aspects of CouchDB configuration.
+          Connections with Admin privileges can create and destroy databases, install and update _design documents, run
+          the test suite, and modify the CouchDB configuration.
+        </p>
+        <p>
+          Connections without Admin privileges have read and write access to all databases controlled by validation functions. CouchDB can be configured to block anonymous connections.
         </p>
-
         <form id="create-admin-form" onSubmit={this.createAdmin}>
           <input id="username" type="text" ref="username" name="name" placeholder="Username" size="24"
             onChange={this.onChangeUsername} />
@@ -243,11 +239,8 @@ var CreateAdminForm = React.createClass({
           <input id="password" type="password" name="password" placeholder= "Password" size="24"
             onChange={this.onChangePassword} />
           <p>
-            Non-admin users have read and write access to all databases, which
-            are controlled by validation functions. CouchDB can be configured to block all
-            access to anonymous users.
+          <button type="submit" id="create-admin" className="btn btn-primary"><i className="icon icon-ok-circle" /> Grant Admin Privileges</button>
           </p>
-          <button type="submit" id="create-admin" className="btn btn-primary"><i className="icon icon-ok-circle" /> Create Admin</button>
         </form>
       </div>
     );
diff --git a/app/addons/auth/routes.js b/app/addons/auth/routes.js
index 36e547d..b4a0e68 100644
--- a/app/addons/auth/routes.js
+++ b/app/addons/auth/routes.js
@@ -22,6 +22,8 @@ import {AuthLayout, AdminLayout} from './layout';
 const {LoginForm, CreateAdminForm} = Components;
 
 var AuthRouteObject = FauxtonAPI.RouteObject.extend({
+  selectedHeader: 'Login',
+
   routes: {
     'login?*extra': 'login',
     'login': 'login',
diff --git a/app/addons/components/assets/less/header-breadcrumbs.less b/app/addons/components/assets/less/header-breadcrumbs.less
index b0063d1..d87486a 100644
--- a/app/addons/components/assets/less/header-breadcrumbs.less
+++ b/app/addons/components/assets/less/header-breadcrumbs.less
@@ -28,11 +28,16 @@
   white-space: nowrap;
 }
 
-.faux-header__breadcrumbs-link:hover {
+a.faux-header__breadcrumbs-link {
+  color: @darkRed;
+  &:hover {
+  color: @hoverRed;
   text-decoration: none;
   cursor: hand;
+  }
 }
 
+
 .faux-header__breadcrumbs-divider {
   width: 13px;
   padding-top: 22px;
diff --git a/app/addons/components/assets/less/modals.less b/app/addons/components/assets/less/modals.less
index 0ad20c1..66617f6 100644
--- a/app/addons/components/assets/less/modals.less
+++ b/app/addons/components/assets/less/modals.less
@@ -16,9 +16,10 @@
 .modal .cancel-link {
   margin: 0 15px;
   font-size: 14px;
-  color: @defaultText;
+  color: #666;
   &:hover {
-    color: @brandPrimaryDark;
-    cursor: pointer;
+    color: @hoverRed;
+    text-decoration: none;
+    cursor: hand;
   }
 }
diff --git a/app/addons/components/components/deletedatabasemodal.js b/app/addons/components/components/deletedatabasemodal.js
index 74bc273..eead46f 100644
--- a/app/addons/components/components/deletedatabasemodal.js
+++ b/app/addons/components/components/deletedatabasemodal.js
@@ -88,7 +88,7 @@ export const DeleteDatabaseModal = React.createClass({
     return (
       <Modal dialogClassName="delete-db-modal" show={showDeleteModal} onHide={this.close}>
         <Modal.Header closeButton={true}>
-          <Modal.Title>Delete Database</Modal.Title>
+          <Modal.Title>Confirm Deletion</Modal.Title>
         </Modal.Header>
         <Modal.Body>
           {warning}
@@ -110,7 +110,7 @@ export const DeleteDatabaseModal = React.createClass({
             disabled={this.state.disableSubmit}
             onClick={this.onDeleteClick}
             className="btn btn-danger delete">
-            <i className="icon icon-trash" /> Delete
+            <i className="icon icon-trash" /> Delete Database
           </button>
         </Modal.Footer>
       </Modal>
diff --git a/app/addons/components/components/stringeditmodal.js b/app/addons/components/components/stringeditmodal.js
index 782a3db..44a8261 100644
--- a/app/addons/components/components/stringeditmodal.js
+++ b/app/addons/components/components/stringeditmodal.js
@@ -85,7 +85,7 @@ export const StringEditModal = React.createClass({
         </Modal.Body>
         <Modal.Footer>
           <a className="cancel-link" onClick={this.closeModal}>Cancel</a>
-          <button id="string-edit-save-btn" onClick={this.save} className="btn btn-success save">
+          <button id="string-edit-save-btn" onClick={this.save} className="btn btn-primary save">
             <i className="fonticon-circle-check"></i> Modify Text
           </button>
         </Modal.Footer>
diff --git a/app/addons/config/routes.js b/app/addons/config/routes.js
index 892a25b..e1dadb7 100644
--- a/app/addons/config/routes.js
+++ b/app/addons/config/routes.js
@@ -37,7 +37,7 @@ var ConfigDisabledRouteObject = FauxtonAPI.RouteObject.extend({
 
 var ConfigPerNodeRouteObject = FauxtonAPI.RouteObject.extend({
   roles: ['_admin'],
-  selectedHeader: 'Config',
+  selectedHeader: 'Configuration',
 
   apiUrl: function () {
     return [this.configs.url(), this.configs.documentation];
diff --git a/app/addons/cors/assets/less/cors.less b/app/addons/cors/assets/less/cors.less
index a8520fc..fb4610d 100644
--- a/app/addons/cors/assets/less/cors.less
+++ b/app/addons/cors/assets/less/cors.less
@@ -85,7 +85,7 @@
   }
 
   .input-append {
-      width: 90%;
+      width: 80%;
   }
 
   input[type='text'] {
diff --git a/app/addons/cors/components.react.jsx b/app/addons/cors/components.react.jsx
index 8868997..12b6d3e 100644
--- a/app/addons/cors/components.react.jsx
+++ b/app/addons/cors/components.react.jsx
@@ -182,8 +182,8 @@ var OriginInput = React.createClass({
       <div id="origin-domains-container">
         <div className="origin-domains">
           <div className="input-append">
-            <input type="text" name="new_origin_domain" onChange={this.onInputChange} onKeyUp={this.onKeyUp} value={this.state.origin} placeholder="e.g., https://site.com"/>
-            <button onClick={this.addOrigin} className="btn btn-primary add-domain"> Add </button>
+            <input type="text" name="new_origin_domain" onChange={this.onInputChange} onKeyUp={this.onKeyUp} value={this.state.origin} placeholder="https://example.com"/>
+            <button onClick={this.addOrigin} className="btn btn-secondary add-domain"><i className="icon fonticon-ok-circled"></i> Add Domain</button>
           </div>
         </div>
       </div>
@@ -334,7 +334,7 @@ var CORSController = React.createClass({
             <br />
             <button
               type="button"
-              className="enable-disable btn btn-success"
+              className="enable-disable btn btn-secondary"
               onClick={this.enableCorsChange}
               disabled={this.state.isLoading ? 'disabled' : null}
             >
diff --git a/app/addons/documents/assets/less/changes.less b/app/addons/documents/assets/less/changes.less
index 242b68f..80ab086 100644
--- a/app/addons/documents/assets/less/changes.less
+++ b/app/addons/documents/assets/less/changes.less
@@ -82,6 +82,7 @@
     margin: 20px 0;
   }
   .remove-filter {
+    color: #333333;
     text-shadow: none;
     background-color: transparent;
     font-size: 20px;
@@ -89,7 +90,7 @@
     padding-left: 0;
     margin-right: 8px;
     &:hover {
-      color: #111111;
+      color: #E73D34;
     }
   }
 }
diff --git a/app/addons/documents/assets/less/doc-editor.less b/app/addons/documents/assets/less/doc-editor.less
index ad14715..714e21a 100644
--- a/app/addons/documents/assets/less/doc-editor.less
+++ b/app/addons/documents/assets/less/doc-editor.less
@@ -79,6 +79,20 @@
 
   .cancel-button {
     font-size: 14px;
+    color: #666;
+    &:hover {
+      color: @hoverRed;
+      text-decoration: none;
+      cursor: hand;
+    }
+  }
+  .panel-button {
+    color: #666;
+    &:hover {
+      color: @hoverRed;
+      text-decoration: none;
+      cursor: hand;
+    }
   }
 
   .bgEditorGutter {
diff --git a/app/addons/documents/assets/less/documents.less b/app/addons/documents/assets/less/documents.less
index 3c2e468..87a1d3c 100644
--- a/app/addons/documents/assets/less/documents.less
+++ b/app/addons/documents/assets/less/documents.less
@@ -90,6 +90,10 @@ button.beautify {
   }
   .icon-question-sign {
     margin-left: 4px;
+    color: @secondaryBlue;
+    &:hover {
+      color: @hoverRed;
+    }
   }
   section {
     line-height: 21px;
diff --git a/app/addons/documents/assets/less/header-docs-left.less b/app/addons/documents/assets/less/header-docs-left.less
index 0c37c3e..b5941af 100644
--- a/app/addons/documents/assets/less/header-docs-left.less
+++ b/app/addons/documents/assets/less/header-docs-left.less
@@ -76,7 +76,7 @@ button.faux-header__doc-header-dropdown-toggle:focus {
   padding: 10px 15px 10px 12px;
 }
 .faux-header__doc-header-dropdown-itemwrapper .faux-header__doc-header-dropdown-item:hover {
-  background-color: @navBG;
+  background-color: @hoverRed;
   color: #fff;
   cursor: pointer;
 }
diff --git a/app/addons/documents/assets/less/query-options.less b/app/addons/documents/assets/less/query-options.less
index e9556d2..20dd187 100644
--- a/app/addons/documents/assets/less/query-options.less
+++ b/app/addons/documents/assets/less/query-options.less
@@ -72,6 +72,10 @@
   .icon-question-sign {
     margin-left: 3px;
     font-size: 17.5px;
+    color: @secondaryBlue;
+    &:hover {
+      color: @hoverRed;
+    }
   }
 
   .query-group {
@@ -122,6 +126,13 @@
       color: @red;
       line-height: 1em;
     }
+    .btn-cancelDark, .btn-cancelDark:active {
+      background: none;
+      border: none;
+      box-shadow: none;
+      color: #CCC;
+      line-height: 1em;
+    }
     select {
       margin-top: -4px;
       margin-bottom: 0px;
@@ -208,10 +219,7 @@
   .hide {
     display: none;
   }
-
-  .icon-question-sign:hover {
-    color: @linkColorHover;
-  }
+  
   .additionalParams {
     margin-bottom: 2px;
   }
diff --git a/app/addons/documents/assets/less/sidenav.less b/app/addons/documents/assets/less/sidenav.less
index e8f75bc..00e716d 100644
--- a/app/addons/documents/assets/less/sidenav.less
+++ b/app/addons/documents/assets/less/sidenav.less
@@ -45,6 +45,7 @@
     & + span.index-menu-toggle {
       color: white;
     }
+
   }
 
   li {
@@ -61,7 +62,7 @@
         color: white;
       }
       p {
-        background-color: @darkRed;
+        background-color: @hoverRed;
       }
     }
     .accordion-list-item p {
@@ -113,7 +114,7 @@
           &:hover {
             color: #fff;
             text-decoration: none;
-            background-color: @darkRed;
+            background-color: @hoverRed;
           }
           border-top: none;
           &.accordion-header{
@@ -175,7 +176,7 @@
     padding-left: 4px;
     .transition(all 0.25s linear);
     &:hover {
-      color: @linkColor;
+      color: @hoverRed;
     }
     &:before {
       font-size: 17px;
@@ -187,8 +188,8 @@
 #index-menu-component-popover {
   .border-radius(0);
   .box-shadow(2px 2px rgba(0, 0, 0, 0.2));
-  background-color: black;
-  color: #dddddd;
+  background-color: @brown;
+  color: #FFF;
   font-size: 12px;
   padding: 0;
   margin-left: -7px;
@@ -199,12 +200,12 @@
   }
   li {
     padding: 10px;
-    background-color: #202326;
+    background-color: @greyBrown;
     margin-bottom: 2px;
     cursor: pointer;
     .transition(all 0.25s linear);
     &:hover {
-      background-color: @brandPrimaryDark;
+      background-color: @hoverRed;
     }
     &:last-child {
       margin-bottom: 0;
diff --git a/app/addons/documents/assets/less/view-editor.less b/app/addons/documents/assets/less/view-editor.less
index de76655..da42713 100644
--- a/app/addons/documents/assets/less/view-editor.less
+++ b/app/addons/documents/assets/less/view-editor.less
@@ -222,7 +222,13 @@
   }
 }
 
-.index-cancel-link {
+a.index-cancel-link {
   margin-left: 10px;
   font-size: 14px;
+  color: #666;
+  &:hover {
+    color: @hoverRed;
+    text-decoration: none;
+    cursor: hand;
+  }
 }
diff --git a/app/addons/documents/doc-editor/components.react.jsx b/app/addons/documents/doc-editor/components.react.jsx
index 88fd38a..c1932fe 100644
--- a/app/addons/documents/doc-editor/components.react.jsx
+++ b/app/addons/documents/doc-editor/components.react.jsx
@@ -169,7 +169,7 @@ var DocEditorController = React.createClass({
       <div>
         <div id="doc-editor-actions-panel">
           <div className="doc-actions-left">
-            <button className="save-doc btn btn-success save" type="button" onClick={this.saveDoc}>
+            <button className="save-doc btn btn-primary save" type="button" onClick={this.saveDoc}>
               <i className="icon fonticon-ok-circled"></i> {saveButtonLabel}
             </button>
             <div>
@@ -349,8 +349,8 @@ var UploadModal = React.createClass({
           <div>
             <form ref="uploadForm" className="form">
               <p>
-                Please select the file you want to upload as an attachment to this document. This creates a new
-                revision of the document, so it's not necessary to save after uploading.
+                Select a file to upload as an attachment to this document. Uploading a file saves the document as a new
+                revision.
               </p>
               <input ref="attachments" type="file" name="_attachments" />
               <br />
@@ -363,7 +363,7 @@ var UploadModal = React.createClass({
         </Modal.Body>
         <Modal.Footer>
           <a href="#" data-bypass="true" className="cancel-link" onClick={this.closeModal}>Cancel</a>
-          <button href="#" id="upload-btn" data-bypass="true" className="btn btn-success save" onClick={this.upload}>
+          <button href="#" id="upload-btn" data-bypass="true" className="btn btn-primary save" onClick={this.upload}>
             <i className="icon icon-upload" /> Upload Attachment
           </button>
         </Modal.Footer>
@@ -429,7 +429,10 @@ const CloneDocModal = React.createClass({
         <Modal.Body>
           <form className="form" onSubmit={(e) => { e.preventDefault(); this.cloneDoc(); }}>
             <p>
-              Set new document's ID:
+              Document cloning copies the saved version of the document. Unsaved document changes will be discarded.
+            </p>
+            <p>
+              You can modify the following generated ID for your new document.
             </p>
             <input ref="newDocId" type="text" autoFocus={true} className="input-block-level"
               onChange={this.docIDChange} value={this.state.uuid} />
@@ -437,8 +440,8 @@ const CloneDocModal = React.createClass({
         </Modal.Body>
         <Modal.Footer>
           <a href="#" data-bypass="true" className="cancel-link" onClick={this.closeModal}>Cancel</a>
-          <button className="btn btn-success save" onClick={this.cloneDoc}>
-            <i className="fonticon-ok-circled"></i> Clone Document
+          <button className="btn btn-primary save" onClick={this.cloneDoc}>
+            <i className="icon-repeat"></i> Clone Document
           </button>
         </Modal.Footer>
       </Modal>
diff --git a/app/addons/documents/index-editor/components.react.jsx b/app/addons/documents/index-editor/components.react.jsx
index 883dc71..fa835b3 100644
--- a/app/addons/documents/index-editor/components.react.jsx
+++ b/app/addons/documents/index-editor/components.react.jsx
@@ -311,7 +311,7 @@ var EditorController = React.createClass({
     }
 
     var pageHeader = (this.state.isNewView) ? 'New View' : 'Edit View';
-    var btnLabel = (this.state.isNewView) ? 'Create Document and Build Index' : 'Save Document and Build Index';
+    var btnLabel = (this.state.isNewView) ? 'Create Document and then Build Index' : 'Save Document and then Build Index';
 
     var cancelLink = '#' + FauxtonAPI.urls('view', 'showView', this.state.database.id, this.state.designDocId, this.state.viewName);
     return (
diff --git a/app/addons/documents/queryoptions/queryoptions.react.jsx b/app/addons/documents/queryoptions/queryoptions.react.jsx
index 5b38cbc..a7c157d 100644
--- a/app/addons/documents/queryoptions/queryoptions.react.jsx
+++ b/app/addons/documents/queryoptions/queryoptions.react.jsx
@@ -272,8 +272,8 @@ var QueryButtons = React.createClass({
     return (
       <div className="controls-group query-group">
         <div id="button-options" className="controls controls-row">
-          <button type="submit" className="btn btn-success">Run Query</button>
-          <a onClick={this.hideTray} className="btn btn-cancel">Cancel</a>
+          <button type="submit" className="btn btn-secondary">Run Query</button>
+          <a onClick={this.hideTray} className="btn btn-cancelDark">Cancel</a>
         </div>
       </div>
     );
diff --git a/app/addons/documents/sidebar/sidebar.react.jsx b/app/addons/documents/sidebar/sidebar.react.jsx
index 10b561b..b08b0e5 100644
--- a/app/addons/documents/sidebar/sidebar.react.jsx
+++ b/app/addons/documents/sidebar/sidebar.react.jsx
@@ -643,7 +643,7 @@ var CloneIndexModal = React.createClass({
         </Modal.Body>
         <Modal.Footer>
           <a href="#" className="cancel-link" onClick={this.close} data-bypass="true">Cancel</a>
-          <button onClick={this.submit} data-bypass="true" className="btn btn-success save">
+          <button onClick={this.submit} data-bypass="true" className="btn btn-primary save">
             <i className="icon fonticon-ok-circled" /> Clone {this.props.indexLabel}</button>
         </Modal.Footer>
       </Modal>
diff --git a/app/addons/fauxton/assets/less/components.less b/app/addons/fauxton/assets/less/components.less
index 4ac2f25..b98b15c 100644
--- a/app/addons/fauxton/assets/less/components.less
+++ b/app/addons/fauxton/assets/less/components.less
@@ -25,6 +25,10 @@
 
     .icon-question-sign {
       margin-left: 3px;
+      color: @secondaryBlue;
+      &:hover {
+        color: @hoverRed;
+      }
     }
   }
 }
@@ -43,6 +47,9 @@
 button.clipboard-copy-element {
   background: transparent;
   border: 0;
+  &:hover {
+    color: #E73D34;
+  }
 }
 
 #perma-warning {
diff --git a/app/addons/fauxton/navigation/components.react.jsx b/app/addons/fauxton/navigation/components.react.jsx
index e734568..a269726 100644
--- a/app/addons/fauxton/navigation/components.react.jsx
+++ b/app/addons/fauxton/navigation/components.react.jsx
@@ -127,13 +127,8 @@ export const NavBar = React.createClass({
         <nav id="main_navigation">
           <ul id="nav-links" className="nav">
             {navLinks}
+            {bottomNavLinks}
           </ul>
-
-          <div id="bottom-nav">
-            <ul id="bottom-nav-links" className="nav">
-              {bottomNavLinks}
-            </ul>
-          </div>
         </nav>
         <div id="primary-nav-right-shadow"/>
 
diff --git a/app/addons/permissions/components/PermissionsSection.js b/app/addons/permissions/components/PermissionsSection.js
index 3813f5a..ba8958a 100644
--- a/app/addons/permissions/components/PermissionsSection.js
+++ b/app/addons/permissions/components/PermissionsSection.js
@@ -133,8 +133,8 @@ const PermissionsSection = React.createClass({
             <p>Specify users who will have {this.props.section} access to this database.</p>
           </header>
           <form onSubmit={this.addNames} className="permission-item-form permissions-add-user form-inline">
-            <input onChange={this.nameChange} value={this.state.newName} type="text" className="item input-small" placeholder="Add User" />
-            <button type="submit" className="btn btn-success"><i className="icon fonticon-plus-circled" /> Add User</button>
+            <input onChange={this.nameChange} value={this.state.newName} type="text" className="item input-small" placeholder="Username" />
+            <button type="submit" className="btn btn-primary"><i className="icon fonticon-plus-circled" /> Add User</button>
           </form>
           <ul className="unstyled permission-items span10">
             {this.getNames()}
@@ -146,8 +146,8 @@ const PermissionsSection = React.createClass({
             <p>Users with any of the following role(s) will have {this.props.section} access.</p>
           </header>
           <form onSubmit={this.addRoles} className="permission-item-form permissions-add-role form-inline">
-            <input onChange={this.roleChange} value={this.state.newRole} type="text" className="item input-small" placeholder="Add Role" />
-            <button type="submit" className="btn btn-success"><i className="icon fonticon-plus-circled" /> Add Role</button>
+            <input onChange={this.roleChange} value={this.state.newRole} type="text" className="item input-small" placeholder="Role" />
+            <button type="submit" className="btn btn-primary"><i className="icon fonticon-plus-circled" /> Add Role</button>
           </form>
           <ul className="unstyled permission-items span10">
             {this.getRoles()}
diff --git a/app/addons/replication/assets/less/replication.less b/app/addons/replication/assets/less/replication.less
index 0936622..1564d7d 100644
--- a/app/addons/replication/assets/less/replication.less
+++ b/app/addons/replication/assets/less/replication.less
@@ -254,7 +254,9 @@ input.replication__bulk-select-input[type="checkbox"] {
   border: 1px solid #aaa;
   background-color: rgba(0, 0, 0, 0);
   margin-left: 3px;
-  padding-left: 8px
+  padding-left: 8px;
+  &:hover{
+    color: @hoverRed}
 }
 
 .replication__row-actions-list {
@@ -272,17 +274,22 @@ input.replication__bulk-select-input[type="checkbox"] {
   cursor: pointer;
   padding-right: 8px;
   padding-left: 8px;
+  color: #666;
+  &:visited {
+    color: #666;
+    text-decoration: none;
+  }
+  &:hover {
+    color: @hoverRed;
+    text-decoration: none;
+  }
+
 }
 
 .replication__row-btn--no-left-pad {
   padding-left: 0px;
 }
 
-.replication__row-btn:visited,
-.replication__row-btn:hover {
-  text-decoration: none;
-}
-
 .replication__row-btn--warning {
   color: #E73D34;
 }
@@ -304,13 +311,13 @@ button.replication__error-continue {
 
 .replication__error-cancel,
 .replication__error-continue {
-  background-color: #0082BF;
+  background-color: @secondaryBlue;
   color: #FFF;
 }
 
 .replication__error-cancel:hover,
 .replication__error-continue:hover {
-  background-color: #e73d34;
+  background-color: @hoverRed;
   color: #FFF;
 }
 
@@ -319,11 +326,11 @@ td.replication__empty-row {
 }
 
 .replication__remote_icon_help {
-  color: #E33F3B
+  color: @secondaryBlue
 }
 
 .replication__remote_icon_help:hover {
-  color: #af2d24;
+  color: @hoverRed;
 }
 
 .replication__tooltip {
diff --git a/app/addons/replication/components/common-activity.js b/app/addons/replication/components/common-activity.js
index 5a75766..5faf29c 100644
--- a/app/addons/replication/components/common-activity.js
+++ b/app/addons/replication/components/common-activity.js
@@ -36,7 +36,7 @@ export const ReplicationHeader = ({filter, onFilterChange}) => {
     <div className="replication__activity_header">
       <div></div>
       <ReplicationFilter value={filter} onChange={onFilterChange} />
-      <a href="#/replication/_create" className="btn save replication__activity_header-btn btn-success">
+      <a href="#/replication/_create" className="btn save replication__activity_header-btn btn-primary">
         <i className="icon fonticon-plus-circled"></i>
         New Replication
       </a>
diff --git a/app/addons/setup/route.js b/app/addons/setup/route.js
index b601aba..1549bdc 100644
--- a/app/addons/setup/route.js
+++ b/app/addons/setup/route.js
@@ -21,6 +21,7 @@ import {OnePaneSimpleLayout} from '../components/layouts';
 
 var RouteObject = FauxtonAPI.RouteObject.extend({
   roles: ['_admin'],
+  selectedHeader: 'Setup',
 
   routes: {
     'setup': 'setupInitView',
diff --git a/app/addons/setup/setup.react.jsx b/app/addons/setup/setup.react.jsx
index 03f2852..bc65d5c 100644
--- a/app/addons/setup/setup.react.jsx
+++ b/app/addons/setup/setup.react.jsx
@@ -341,23 +341,21 @@ var SetupFirstStepController = React.createClass({
       <div className="setup-screen">
         <h2>Welcome to {app.i18n.en_US['couchdb-productname']}!</h2>
         <p>
-          The recommended way to run the wizard is directly on your
-          node (e.g without a Loadbalancer) in front of it.
+          This wizard should be run directly on the node, rather than through a load-balancer.
         </p>
         <p>
-          Do you want to setup a cluster with multiple nodes
-          or just a single node CouchDB installation?
+          You can configure a single node, or a multi-node CouchDB installation.
         </p>
         <div>
           <ConfirmButton
             onClick={this.redirectToMultiNodeSetup}
             showIcon={false}
-            text="Configure	Cluster" />
+            text="Configure	a Cluster" />
           <ConfirmButton
             onClick={this.redirectToSingleNodeSetup}
             showIcon={false}
             id="setup-btn-no-thanks"
-            text="Configure	Single	Node" />
+            text="Configure	a Single Node" />
         </div>
       </div>
     );
diff --git a/assets/less/bootstrap/close.less b/assets/less/bootstrap/close.less
index 4c626bd..4549075 100644
--- a/assets/less/bootstrap/close.less
+++ b/assets/less/bootstrap/close.less
@@ -8,15 +8,13 @@
   font-size: 20px;
   font-weight: bold;
   line-height: @baseLineHeight;
-  color: @black;
+  color: #B9B9B9;
   text-shadow: 0 1px 0 rgba(255,255,255,1);
-  .opacity(20);
   &:hover,
   &:focus {
-    color: @black;
+    color: @hoverRed;
     text-decoration: none;
-    cursor: pointer;
-    .opacity(40);
+    cursor: pointer
   }
 }
 
@@ -29,4 +27,4 @@ button.close {
   background: transparent;
   border: 0;
   -webkit-appearance: none;
-}
\ No newline at end of file
+}
diff --git a/assets/less/bootstrap/dropdowns.less b/assets/less/bootstrap/dropdowns.less
index f510b17..49468bb 100644
--- a/assets/less/bootstrap/dropdowns.less
+++ b/assets/less/bootstrap/dropdowns.less
@@ -49,7 +49,8 @@
   min-width: 160px;
   margin: 2px 0 0; // override default ul
   list-style: none;
-  background-color: @dropdownBackground;
+  background-color: #564E4C;
+  color: #B3B4B4;
   border: 1px solid #ccc; // Fallback for IE7-8
   border: 1px solid @dropdownBorder;
   *border-right-width: 2px;
@@ -64,8 +65,8 @@
     left: auto;
   }
   li.header-label{
-    background-color: #1A1A1A;
-    color: #676767;
+    background-color: #3A2C2B;
+    color: #FFFFFF;
     padding: 3px 20px;
     font-size: 13px;
   }
diff --git a/assets/less/formstyles.less b/assets/less/formstyles.less
index c04a254..58ad7a8 100644
--- a/assets/less/formstyles.less
+++ b/assets/less/formstyles.less
@@ -79,22 +79,20 @@ button:focus {
   }
 }
 .btn-primary {
-  background: @brandPrimary;
+  background: #2bb673;
+  color: #fff;
 }
 .btn.btn-danger {
   background-color: #f00;
   color: #fff;
 }
-.btn.btn-danger:hover {
-  background-color: #e73d34;
-  color: #fff;
-}
 .btn.btn-info, .btn-secondary {
   background-color: #0082BF;
   color: #fff;
 }
-.btn.btn-info:hover, .btn-secondary:hover {
-  background-color: #E73D34;
+.btn-primary:hover, .btn-secondary:hover, .btn.btn-danger:hover, .btn.btn-info:hover {
+  background-color: @hoverRed;
+  color: #fff;
 }
 
 .btn-primary a:visited {
@@ -151,10 +149,15 @@ label {
   font-size: 12px;
 }
 
-a.help-link:hover {
+a.help-link{
+  color: @secondaryBlue;
   text-decoration: none;
+  &:hover {
+    color: @hoverRed
+  }
 }
 
+
 input[type=text].error {
   border: red 1px solid;
 }
@@ -267,15 +270,16 @@ div.add-dropdown {
       right: 4px;
     }
     a {
-      background-color: #202326;
-      color: rgba(255, 255, 255, 0.8);
+      background-color: #564E4C;
+      color: #B3B4B4;
       &:hover {
-        background-color: @navBG;
+        background-color: @hoverRed;
         color: white;
       }
     }
     li a {
       padding: 10px 15px 10px 12px;
+
     }
   }
   .dropdown-toggle {
@@ -312,12 +316,8 @@ input.errorHighlight {
 
     }
     &.active {
-      background-color: #f1f1f1;
-      color: #af2d24;
-      &:hover {
-        background-color: #f1f1f1;
-        color: #af2d24;
-      }
+      background-color: #AF2D24;
+      color: #FFFFFF;
       .box-shadow(none);
     }
   }
diff --git a/assets/less/prettyprint.less b/assets/less/prettyprint.less
index ee0b02f..fbf0c9e 100644
--- a/assets/less/prettyprint.less
+++ b/assets/less/prettyprint.less
@@ -20,7 +20,7 @@ pre.prettyprint {
 }
 .prettyprint {
   .pln, .pun, .typ {
-    color: #333;
+    color: #B3B4B4;
   }
   .kwd {
     color: #dddddd;
diff --git a/assets/less/templates.less b/assets/less/templates.less
index ba41a21..a26f1fa 100644
--- a/assets/less/templates.less
+++ b/assets/less/templates.less
@@ -87,7 +87,7 @@
       position: absolute;
       z-index: 100;
       top: 0;
-      background-color: @primaryNav;
+      background-color: @brown;
       width: @navWidth;
       .closeMenu & {
         width: @collapsedNavWidth;
@@ -96,7 +96,7 @@
         height: 4px;
         width: 24px;
         .border-radius(2);
-        background-color: @navBG;
+        background-color: #B3B4B4;
         margin: 2px 0px;
       }
       &:hover div {
@@ -146,7 +146,7 @@
 
           a {
             font-size: 10px;
-            color: @linkColor;
+            color: #B3B4B4;
             padding: 0px;
             text-shadow: none;
             width: 100%;
@@ -155,7 +155,7 @@
           &.active, &:hover {
             a {
               text-decoration: underline;
-              color: @darkRed;
+              color: @hoverRed;
             }
           }
         }
@@ -177,13 +177,20 @@
           font-weight: normal;
           font-family: helvetica;
           .box-sizing(border-box);
-          background-color: @navBG;
+          background-color: #564E4C;
           border-bottom:  1px solid @primaryNav;
           height: 48px;
           min-height: 48px;
           position: relative;
 
-          &.active, &:hover {
+          &.active {
+            a {
+              .box-shadow(none);
+            }
+            background-color: #AF2D24;
+            pointer-events: none;
+          }
+          &:hover {
             a {
               .box-shadow(none);
             }
@@ -452,8 +459,8 @@
     .divider {
       border: none;
     }
-    > li > a:hover{
-      background-color: @linkColorHover;
+    > li > a:hover {
+      background-color: @hoverRed;
       color: #fff;
     }
     li.active > a {
diff --git a/assets/less/variables.less b/assets/less/variables.less
index 87df168..14230a5 100644
--- a/assets/less/variables.less
+++ b/assets/less/variables.less
@@ -14,11 +14,11 @@
 
 /* colors */
 @brown: #3A2C2B;
-@red: #E33F3B;
+@red: #E73D34;
 @orange: #F3622D;
 @darkRed: #AF2D24;
 @linkRed: #DA4F49;
-@greyBrown: #554D4C;
+@greyBrown: #564E4C;
 @greyBrownLighter: #A59D9D;
 @blue: #049cdb;
 @blueDark: #0064cd;
@@ -28,6 +28,7 @@
 @purple: #7a43b6;
 @hoverOrange: #f3812d;
 @hoverRed: #e73d34;
+@secondaryBlue: #0082BF;
 
 /* brand */
 @brandPrimary: @red;
@@ -52,11 +53,11 @@
 @navBGHighlight: @brandPrimary;
 @navBGHover: @brandPrimary;
 @navWidth: 220px;
-@navIconColor: @brandPrimaryDark;
+@navIconColor: #B3B4B4;
 @navIconHighlight: #FFFFFF;
 @bottomNav: @greyBrown;
 @NavIconActive: #ffffff;
-@NavIcon: @brown;
+@NavIcon: #B3B4B4;
 
 /*top header*/
 @breadcrumbBG: #F1F1F1;

-- 
To stop receiving notification emails like this one, please contact
['"commits@couchdb.apache.org" <co...@couchdb.apache.org>'].