(#881) - Style changes and improvements

apache · Mar 23, 2017 · 13ee067 · 13ee067
1 parent 844fad2
commit 13ee067
Show file tree

Hide file tree

Showing 33 changed files with 173 additions and 120 deletions.
diff --git 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,31 +221,26 @@ 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} />
  <br/>
  <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -82,14 +82,15 @@
  margin: 20px 0;
  }
  .remove-filter {
+ color: #333333;
  text-shadow: none;
  background-color: transparent;
  font-size: 20px;
  margin-top: -3px;
  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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,16 +429,19 @@ 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} />
  </form>
  </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>