reuse buttons across console for uniformity (#1400)

console/src/components/Common/Common.scss

@@ -789,6 +789,9 @@ code
     background-color: #F2B130;
   }
 }
+.gray_button {
+  background: #f2f2f2 !important;
+}
 .docsButton
 {
   background-color: #fff;
@@ -1109,6 +1112,11 @@ code
   height: 100vh;
   margin-bottom: 50px;
 }
+.button_mar_right
+{
+  margin-right: 20px;
+}
+
 
 /* container height subtracting top header and bottom scroll bar */
 $mainContainerHeight: calc(100vh - 50px - 25px);

console/src/components/Services/CustomResolver/Add/Add.js

@@ -3,6 +3,7 @@ import Common from '../Common/Common';
 
 import { addResolver, RESET } from './addResolverReducer';
 import Helmet from 'react-helmet';
+import Button from '../../Layout/Button/Button';
 
 import { pageTitle } from '../constants';
 
@@ -25,14 +26,15 @@ class Add extends React.Component {
         >
           <Common {...this.props} />
           <div className={styles.commonBtn}>
-            <button
+            <Button
               type="submit"
-              className={styles.yellow_button}
+              color="yellow"
+              size="sm"
               disabled={isRequesting}
               data-test="add-remote-schema-submit"
             >
               {isRequesting ? 'Adding...' : 'Add Remote Schema'}
-            </button>
+            </Button>
             {/*
             <button className={styles.default_button}>Cancel</button>
             */}

console/src/components/Services/CustomResolver/Edit/Edit.js

@@ -13,6 +13,7 @@ import { push } from 'react-router-redux';
 import Helmet from 'react-helmet';
 import tabInfo from './tabInfo';
 import CommonTabLayout from '../../Layout/CommonTabLayout/CommonTabLayout';
+import Button from '../../Layout/Button/Button';
 
 import { appPrefix, pageTitle } from '../constants';
 
@@ -97,8 +98,10 @@ class Edit extends React.Component {
     const generateMigrateBtns = () => {
       return 'isModify' in editState && !editState.isModify ? (
         <div className={styles.commonBtn}>
-          <button
+          <Button
-            className={styles.yellow_button}
+            className={styles.button_mar_right}
+            color="yellow"
+            size="sm"
             onClick={e => {
               e.preventDefault();
               this.modifyClick();
@@ -107,9 +110,10 @@ class Edit extends React.Component {
             disabled={isRequesting}
           >
             Modify
-          </button>
+          </Button>
-          <button
+          <Button
-            className={styles.danger_button + ' btn-danger'}
+            color="red"
+            size="sm"
             onClick={e => {
               e.preventDefault();
               this.handleDeleteResolver(e);
@@ -118,7 +122,7 @@ class Edit extends React.Component {
             data-test={'remote-schema-edit-delete-btn'}
           >
             {isRequesting ? 'Deleting ...' : 'Delete'}
-          </button>
+          </Button>
           {this.state.deleteConfirmationError ? (
             <span
               className={styles.delete_confirmation_error}
@@ -130,16 +134,19 @@ class Edit extends React.Component {
         </div>
       ) : (
         <div className={styles.commonBtn}>
-          <button
+          <Button
-            className={styles.yellow_button}
+            className={styles.button_mar_right}
+            color="yellow"
+            size="sm"
             type="submit"
             disabled={isRequesting}
             data-test={'remote-schema-edit-save-btn'}
           >
             {isRequesting ? 'Saving' : 'Save'}
-          </button>
+          </Button>
-          <button
+          <Button
-            className={styles.default_button}
+            color="white"
+            size="sm"
             onClick={e => {
               e.preventDefault();
               this.handleCancelModify();
@@ -148,7 +155,7 @@ class Edit extends React.Component {
             disabled={isRequesting}
           >
             Cancel
-          </button>
+          </Button>
         </div>
       );
     };

console/src/components/Services/CustomResolver/Landing/CustomResolver.js

@@ -4,6 +4,7 @@ import { push } from 'react-router-redux';
 
 import { appPrefix, pageTitle } from '../constants';
 import globals from '../../../../Globals';
+import Button from '../../Layout/Button/Button';
 
 class CustomResolver extends React.Component {
   render() {
@@ -25,16 +26,17 @@ class CustomResolver extends React.Component {
               Remote Schemas  
             </h2>
             {migrationMode ? (
-              <button
+              <Button
                 data-test="data-create-remote-schemas"
-                className={styles.yellow_button}
+                color="yellow"
+                size="sm"
                 onClick={e => {
                   e.preventDefault();
                   dispatch(push(`${globals.urlPrefix}${appPrefix}/manage/add`));
                 }}
               >
                 Add
-              </button>
+              </Button>
             ) : null}
             <hr />
           </div>

console/src/components/Services/Data/Add/AddTable.js

@@ -4,6 +4,7 @@ import Helmet from 'react-helmet';
 
 import * as tooltip from './Tooltips';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import Button from '../../Layout/Button/Button';
 
 import dataTypes from '../Common/DataTypes';
 import { showErrorNotification } from '../Notification';
@@ -472,14 +473,15 @@ class AddTable extends Component {
               }}
             />
             <hr />
-            <button
+            <Button
               type="submit"
-              className={`btn ${styles.yellow_button}`}
               onClick={this.submitValidation.bind(this)}
               data-test="table-create"
+              color="yellow"
+              size="sm"
             >
               {createBtnText}
-            </button>
+            </Button>
           </div>
         </div>
       </div>

console/src/components/Services/Data/Metadata/ClearAccessKey.js

@@ -7,6 +7,7 @@ import {
   showSuccessNotification,
   showErrorNotification,
 } from '../Notification';
+import Button from '../../Layout/Button/Button';
 
 class ClearAccessKey extends Component {
   constructor() {
@@ -15,13 +16,14 @@ class ClearAccessKey extends Component {
     this.state.isClearing = false;
   }
   render() {
-    const styles = require('../PageContainer/PageContainer.scss');
     const metaDataStyles = require('./Metadata.scss');
     return (
       <div className={metaDataStyles.display_inline}>
-        <button
+        <Button
           data-test="data-clear-access-key"
-          className={styles.default_button + ' ' + metaDataStyles.margin_right}
+          className={metaDataStyles.margin_right}
+          color="white"
+          size="sm"
           onClick={e => {
             e.preventDefault();
             this.setState({ isClearing: true });
@@ -52,7 +54,7 @@ class ClearAccessKey extends Component {
           }}
         >
           {this.state.isClearing ? 'Clearing...' : 'Clear access key (logout)'}
-        </button>
+        </Button>
       </div>
     );
   }

console/src/components/Services/Data/Metadata/ExportMetadata.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Endpoints, { globalCookiePolicy } from '../../../../Endpoints';
+import Button from '../../Layout/Button/Button';
 
 import {
   showSuccessNotification,
@@ -14,13 +15,14 @@ class ExportMetadata extends Component {
     this.state.isExporting = false;
   }
   render() {
-    const styles = require('../PageContainer/PageContainer.scss');
     const metaDataStyles = require('./Metadata.scss');
     return (
       <div className={metaDataStyles.display_inline}>
-        <button
+        <Button
           data-test="data-export-metadata"
-          className={styles.default_button + ' ' + metaDataStyles.margin_right}
+          className={metaDataStyles.margin_right}
+          size="sm"
+          color="white"
           onClick={e => {
             e.preventDefault();
             this.setState({ isExporting: true });
@@ -83,7 +85,7 @@ class ExportMetadata extends Component {
           }}
         >
           {this.state.isExporting ? 'Exporting...' : 'Export metadata'}
-        </button>
+        </Button>
       </div>
     );
   }

console/src/components/Services/Data/Metadata/ImportMetadata.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Endpoints, { globalCookiePolicy } from '../../../../Endpoints';
+import Button from '../../Layout/Button/Button';
 
 import {
   showSuccessNotification,
@@ -83,13 +84,13 @@ class ImportMetadata extends Component {
       });
   }
   render() {
-    const styles = require('../PageContainer/PageContainer.scss');
     const metaDataStyles = require('./Metadata.scss');
     return (
       <div className={metaDataStyles.display_inline}>
-        <button
+        <Button
           data-test="data-import-metadata"
-          className={styles.default_button}
+          size="sm"
+          color="white"
           onClick={e => {
             e.preventDefault();
             const currThis = this;
@@ -112,7 +113,7 @@ class ImportMetadata extends Component {
           }}
         >
           {this.state.isImporting ? 'Importing...' : 'Import metadata'}
-        </button>
+        </Button>
       </div>
     );
   }

console/src/components/Services/Data/Metadata/ReloadMetadata.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Endpoints, { globalCookiePolicy } from '../../../../Endpoints';
+import Button from '../../Layout/Button/Button';
 
 import {
   showSuccessNotification,
@@ -14,13 +15,13 @@ class ReloadMetadata extends Component {
     this.state.isReloading = false;
   }
   render() {
-    const styles = require('../PageContainer/PageContainer.scss');
     const metaDataStyles = require('./Metadata.scss');
     return (
       <div className={metaDataStyles.display_inline}>
-        <button
+        <Button
           data-test="data-reload-metadata"
-          className={this.props.bsClass || styles.default_button}
+          color="white"
+          size="sm"
           onClick={e => {
             e.preventDefault();
             this.setState({ isReloading: true });
@@ -75,7 +76,7 @@ class ReloadMetadata extends Component {
           {this.state.isReloading
             ? this.props.btnTextChanging || 'Reloading...'
             : this.props.btnText || 'Reload'}
-        </button>
+        </Button>
       </div>
     );
   }

console/src/components/Services/Data/Metadata/ResetMetadata.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Endpoints, { globalCookiePolicy } from '../../../../Endpoints';
 import { showNotification } from '../../../App/Actions';
+import Button from '../../Layout/Button/Button';
 
 import {
   showSuccessNotification,
@@ -16,13 +17,13 @@ class ResetMetadata extends Component {
   }
 
   render() {
-    const styles = require('../PageContainer/PageContainer.scss');
     const metaDataStyles = require('./Metadata.scss');
     return (
       <div className={metaDataStyles.display_inline}>
-        <button
+        <Button
           data-test="data-reset-metadata"
-          className={styles.default_button}
+          color="white"
+          size="sm"
           onClick={e => {
             e.preventDefault();
             const a = prompt(
@@ -78,7 +79,7 @@ class ResetMetadata extends Component {
           }}
         >
           {this.state.isResetting ? 'Resetting...' : 'Reset'}
-        </button>
+        </Button>
       </div>
     );
   }

console/src/components/Services/Data/Notification.js

@@ -2,6 +2,7 @@ import React from 'react';
 import AceEditor from 'react-ace';
 import { showNotification, showTempNotification } from '../../App/Actions';
 import { notifExpand, notifMsg } from '../../App/Actions';
+import Button from '../Layout/Button/Button';
 
 const styles = require('./TableCommon/Table.scss');
 
@@ -47,15 +48,17 @@ const showErrorNotification = (title, message, reqBody, error) => {
   let finalJson = error ? error.message : '{}';
   if (error && 'action' in error) {
     refreshBtn = (
-      <button
+      <Button
-        className={styles.yellow_button + ' ' + styles.add_mar_top_small}
+        className={styles.add_mar_top_small}
+        color="yellow"
+        size="sm"
         onClick={e => {
           e.preventDefault();
           window.location.reload();
         }}
       >
         Refresh Console
-      </button>
+      </Button>
     );
     finalJson = error.action;
   } else if (error && 'internal' in error) {

console/src/components/Services/Data/PageContainer/PageContainer.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import globals from '../../../../Globals';
+import Button from '../../Layout/Button/Button';
 
 import { LISTING_SCHEMA } from '../DataActions';
 
@@ -145,12 +146,14 @@ const PageContainer = ({
                 className={styles.padd_remove_full}
                 to={'/data/schema/' + schemaName + '/table/add'}
               >
-                <button
+                <Button
-                  className={styles.add_mar_right + ' btn btn-xs btn-default'}
+                  className={styles.add_mar_right}
+                  size="xs"
+                  color="white"
                   data-test="sidebar-add-table"
                 >
                   Add Table
-                </button>
+                </Button>
               </Link>
             </div>
           ) : null}

console/src/components/Services/Data/RawSQL/RawSQL.js

@@ -4,7 +4,8 @@ import Helmet from 'react-helmet';
 import AceEditor from 'react-ace';
 import 'brace/mode/sql';
 import Modal from 'react-bootstrap/lib/Modal';
-import Button from 'react-bootstrap/lib/Button';
+import ModalButton from 'react-bootstrap/lib/Button';
+import Button from '../../Layout/Button/Button';
 
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
@@ -341,19 +342,20 @@ const RawSQL = ({
           ) : (
             <hr />
           )}
-          <button
+          <Button
             type="submit"
-            className={styles.yellow_button}
             onClick={submitSQL}
+            color="yellow"
+            size="sm"
             data-test="run-sql"
           >
             Run!
-          </button>
+          </Button>
         </div>
         <div className="hidden col-xs-4">{alert}</div>
       </div>
       <Modal show={isModalOpen} onHide={onModalClose.bind(this)}>
-        <Modal.Header closeButton>
+        <Modal.Header closeModalButton>
           <Modal.Title>Run SQL</Modal.Title>
         </Modal.Header>
         <Modal.Body>
@@ -367,14 +369,14 @@ const RawSQL = ({
           </div>
         </Modal.Body>
         <Modal.Footer>
-          <Button onClick={onModalClose}>Cancel</Button>
+          <ModalButton onClick={onModalClose}>Cancel</ModalButton>
-          <Button
+          <ModalButton
             onClick={onConfirmNoMigration}
             bsStyle="primary"
             data-test="not-migration-confirm"
           >
             Yes, i confirm
-          </Button>
+          </ModalButton>
         </Modal.Footer>
       </Modal>
       <div className={`${styles.padd_left_remove} container-fluid`}>

console/src/components/Services/Data/Schema/AutoAddRelations.js

@@ -9,6 +9,7 @@ import {
   autoAddRelName,
 } from '../TableRelationships/Actions';
 import { getRelationshipLine } from '../TableRelationships/Relationships';
+import Button from '../../Layout/Button/Button';
 
 class AutoAddRelations extends Component {
   trackAllRelations = untrackedData => {
@@ -37,15 +38,17 @@ class AutoAddRelations extends Component {
           className={styles.padd_top_medium}
           key={'untrackedIndiv' + obj.data.tableName}
         >
-          <button
+          <Button
-            className={`${styles.display_inline} btn btn-xs btn-default`}
+            className={`${styles.display_inline}`}
+            size="xs"
+            color="white"
             onClick={e => {
               e.preventDefault();
               handleAutoAddIndivRel(obj);
             }}
           >
             Add
-          </button>
+          </Button>
           <div className={styles.display_inline + ' ' + styles.add_pad_left}>
             <b>{obj.data.tableName}</b> -{' '}
             {getRelationshipLine(
@@ -75,17 +78,15 @@ class AutoAddRelations extends Component {
             There are {untrackedRelations.length} untracked relations
           </div>
         )}
-        <button
+        <Button
           onClick={this.trackAllRelations.bind(this, untrackedRelations)}
-          className={
+          className={`${styles.display_inline} ${styles.add_mar_left}`}
-            styles.display_inline +
+          color="white"
-            ' btn btn-xs btn-default ' +
+          size="xs"
-            styles.add_mar_left
-          }
           data-test="track-all-relationships"
         >
           Track All Relations
-        </button>
+        </Button>
         <div className={styles.padd_top_small}>{untrackData}</div>
       </div>
     );

console/src/components/Services/Data/Schema/Schema.js

@@ -9,6 +9,7 @@ import { push } from 'react-router-redux';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 
 import { untrackedTip, untrackedRelTip } from './Tooltips';
+import Button from '../../Layout/Button/Button';
 import {
   setTableName,
   addExistingTableSql,
@@ -93,9 +94,11 @@ class Schema extends Component {
       untrackedHtml.push(
         <div className={styles.padd_bottom} key={`${i}untracked`}>
           <div className={`${styles.display_inline} ${styles.padd_right}`}>
-            <button
+            <Button
               data-test={`add-track-table-${untrackedTables[i].table_name}`}
-              className={`${styles.display_inline} btn btn-xs btn-default`}
+              className={`${styles.display_inline}`}
+              color="white"
+              size="xs"
               onClick={e => {
                 e.preventDefault();
                 dispatch(setTableName(untrackedTables[i].table_name));
@@ -103,7 +106,7 @@ class Schema extends Component {
               }}
             >
               Add
-            </button>
+            </Button>
           </div>
           <div className={`${styles.padd_right} ${styles.inline_block}`}>
             {untrackedTables[i].table_name}
@@ -131,9 +134,10 @@ class Schema extends Component {
               Schema{' '}
             </h2>
             {migrationMode ? (
-              <button
+              <Button
                 data-test="data-create-table"
-                className={styles.yellow_button}
+                color="yellow"
+                size="sm"
                 onClick={e => {
                   e.preventDefault();
                   dispatch(
@@ -142,7 +146,7 @@ class Schema extends Component {
                 }}
               >
                 Create Table
-              </button>
+              </Button>
             ) : null}
           </div>
           <hr />
@@ -159,17 +163,17 @@ class Schema extends Component {
                 <i className="fa fa-info-circle" aria-hidden="true" />
               </OverlayTrigger>
               {untrackedTables.length > 0 ? (
-                <button
+                <Button
-                  className={`${styles.display_inline} ${
+                  className={`${styles.display_inline} ${styles.addAllBtn}`}
-                    styles.addAllBtn
+                  color="white"
-                  } btn btn-xs btn-default`}
+                  size="xs"
                   onClick={e => {
                     e.preventDefault();
                     dispatch(addAllUntrackedTablesSql(untrackedTables));
                   }}
                 >
                   Add all
-                </button>
+                </Button>
               ) : null}
             </div>
             <div className={`${styles.padd_left_remove} col-xs-12`}>

console/src/components/Services/Data/TableBrowseRows/EditItem.js

@@ -4,6 +4,7 @@ import TableHeader from '../TableCommon/TableHeader';
 import { editItem, E_ONGOING_REQ } from './EditActions';
 import globals from '../../../../Globals';
 import { modalClose } from './EditActions';
+import Button from '../../Layout/Button/Button';
 
 // import RichTextEditor from 'react-rte';
 import { replace } from 'react-router-redux';
@@ -298,9 +299,10 @@ class EditItem extends Component {
           <div className="col-xs-9">
             <form className="form-horizontal">
               {elements}
-              <button
+              <Button
                 type="submit"
-                className={styles.yellow_button}
+                color="yellow"
+                size="sm"
                 onClick={e => {
                   e.preventDefault();
                   dispatch({ type: E_ONGOING_REQ });
@@ -321,7 +323,7 @@ class EditItem extends Component {
                 data-test="save-button"
               >
                 {buttonText}
-              </button>
+              </Button>
             </form>
           </div>
           <div className="col-xs-3">{alert}</div>

console/src/components/Services/Data/TableBrowseRows/FilterQuery.js

@@ -22,6 +22,7 @@ import {
   removeOrder,
 } from './FilterActions.js';
 import { setDefaultQuery, runQuery } from './FilterActions';
+import Button from '../../Layout/Button/Button';
 
 const renderCols = (colName, tableSchema, onChange, usage, key) => {
   const columns = tableSchema.columns.map(c => c.column_name);
@@ -198,13 +199,14 @@ class FilterQuery extends Component {
             </div>
           </div>
           <div className={`${styles.padd_right} ${styles.clear_fix}`}>
-            <button
+            <Button
               type="submit"
-              className={`btn ${styles.yellow_button}`}
+              color="yellow"
+              size="sm"
               data-test="run-query"
             >
               Run query
-            </button>
+            </Button>
             {/* <div className={styles.count + ' alert alert-info'}><i>Total <b>{tableName}</b> rows in the database for current query: {count} </i></div> */}
           </div>
         </form>

console/src/components/Services/Data/TableBrowseRows/ViewRows.js

@@ -25,6 +25,7 @@ import { I_SET_CLONE } from '../TableInsertItem/InsertActions';
 import _push from '../push';
 import { ordinalColSort, findTableFromRel } from '../utils';
 import Spinner from '../../../Common/Spinner/Spinner';
+import Button from '../../Layout/Button/Button';
 import './ReactTableFix.css';
 
 const ViewRows = ({
@@ -184,8 +185,10 @@ const ViewRows = ({
     }
     if (!isSingleRow && !isView && hasPrimaryKeys) {
       editButton = (
-        <button
+        <Button
-          className={`${styles.add_mar_right_small} btn btn-xs btn-default`}
+          className={styles.add_mar_right_small}
+          color="white"
+          size="xs"
           onClick={() => {
             dispatch({ type: E_SET_EDITITEM, oldItem: row, pkClause });
             dispatch(
@@ -195,12 +198,14 @@ const ViewRows = ({
           data-test={`row-edit-button-${rowIndex}`}
         >
           Edit
-        </button>
+        </Button>
       );
 
       cloneButton = (
-        <button
+        <Button
-          className={`${styles.add_mar_right_small} btn btn-xs btn-default`}
+          className={styles.add_mar_right_small}
+          size="xs"
+          color="white"
           onClick={() => {
             dispatch({ type: I_SET_CLONE, clone: row });
             dispatch(
@@ -210,19 +215,21 @@ const ViewRows = ({
           data-test={`row-clone-button-${rowIndex}`}
         >
           Clone
-        </button>
+        </Button>
       );
 
       deleteButton = (
-        <button
+        <Button
-          className={`${styles.add_mar_right_small} btn btn-xs btn-default`}
+          className={styles.add_mar_right_small}
+          size="xs"
+          color="white"
           onClick={() => {
             dispatch(deleteItem(pkClause));
           }}
           data-test={`row-delete-button-${rowIndex}`}
         >
           Delete
-        </button>
+        </Button>
       );
     }
     const buttonsDiv = (

console/src/components/Services/Data/TableCommon/TableHeader.js

@@ -142,19 +142,6 @@ const TableHeader = ({
                 Permissions
               </Link>
             </li>
-            <li role="presentation" className={'hide'}>
-              <Link
-                to={
-                  '/data/schema/' +
-                  currentSchema +
-                  '/tables/' +
-                  tableName +
-                  '/permissions'
-                }
-              >
-                <button className="btn btn-xs btn-warning">Try out APIs</button>
-              </Link>
-            </li>
           </ul>
         </div>
         <div className="clearfix" />

console/src/components/Services/Data/TableInsertItem/InsertItem.js

@@ -4,6 +4,7 @@ import TableHeader from '../TableCommon/TableHeader';
 import { insertItem, I_RESET } from './InsertActions';
 import { ordinalColSort } from '../utils';
 import { setTable } from '../DataActions';
+import Button from '../../Layout/Button/Button';
 
 class InsertItem extends Component {
   constructor() {
@@ -285,9 +286,10 @@ class InsertItem extends Component {
           <div className="col-xs-9">
             <form id="insertForm" className="form-horizontal">
               {elements}
-              <button
+              <Button
                 type="submit"
-                className={'btn ' + styles.yellow_button}
+                color="yellow"
+                size="sm"
                 onClick={e => {
                   e.preventDefault();
                   const inputValues = {};
@@ -309,9 +311,10 @@ class InsertItem extends Component {
                 data-test="insert-save-button"
               >
                 {this.state.insertedRows > 0 ? 'Insert Again' : 'Save'}
-              </button>
+              </Button>
-              <button
+              <Button
-                className={'btn ' + styles.default_button}
+                color="white"
+                size="sm"
                 onClick={e => {
                   e.preventDefault();
                   const form = document.getElementById('insertForm');
@@ -334,7 +337,7 @@ class InsertItem extends Component {
                 data-test="clear-button"
               >
                 Clear
-              </button>
+              </Button>
             </form>
           </div>
           <div className="col-xs-3">{alert}</div>

console/src/components/Services/Data/TableModify/ModifyTable.js

@@ -47,6 +47,7 @@ import {
   TIMESTAMP,
   TIME,
 } from '../../../../constants';
+import Button from '../../Layout/Button/Button';
 
 const appPrefix = '/data';
 
@@ -132,23 +133,25 @@ const ColumnEditor = ({
                   <Link
                     to={`${appPrefix}/schema/${currentSchema}/tables/${tableName}/relationships`}
                   >
-                    <button
+                    <Button
-                      className={`${styles.default_button} btn`}
+                      color="white"
+                      size="sm"
                       type="button"
                       data-test="add-rel-mod"
                     >
                       +Add relationship
-                    </button>
+                    </Button>
                   </Link>
                   &nbsp;
-                  <button
+                  <Button
-                    className="btn btn-danger btn-sm"
+                    color="red"
+                    size="sm"
                     onClick={onDeleteFK}
                     data-test="remove-constraint-button"
                   >
                     {' '}
                     Remove Constraint{' '}
-                  </button>{' '}
+                  </Button>{' '}
                   &nbsp;
                 </h5>
               </div>
@@ -383,17 +386,20 @@ const ColumnEditor = ({
         </div>
         {checkExistingForeignKey()}
         <div className="row">
-          <button
+          <Button
             type="submit"
-            className={`${styles.yellow_button} btn`}
+            color="yellow"
+            className={styles.button_mar_right}
+            size="sm"
             data-test="save-button"
           >
             Save
-          </button>
+          </Button>
           {!isPrimaryKey ? (
-            <button
+            <Button
               type="submit"
-              className={`${styles.yellow_button1} btn btn-danger btn-sm`}
+              color="red"
+              size="sm"
               onClick={e => {
                 e.preventDefault();
                 onDelete();
@@ -401,7 +407,7 @@ const ColumnEditor = ({
               data-test="remove-button"
             >
               Remove
-            </button>
+            </Button>
           ) : null}
         </div>
       </form>
@@ -564,8 +570,10 @@ class ModifyTable extends Component {
           <div className="container-fluid">
             <div className="row">
               <h5 className={styles.padd_bottom}>
-                <button
+                <Button
-                  className={`${styles.add_mar_small} btn btn-xs btn-default`}
+                  className={styles.add_mar_small}
+                  size="xs"
+                  color="white"
                   data-test={`edit-${colName}`}
                   onClick={() => {
                     if (activeEdit.column === colName) {
@@ -585,7 +593,7 @@ class ModifyTable extends Component {
                   }}
                 >
                   {btnText}
-                </button>
+                </Button>
                 <b>{colName}</b> {keyProperties()}
                 &nbsp;
               </h5>
@@ -602,10 +610,13 @@ class ModifyTable extends Component {
     let colUniqueInput;
     let colDefaultInput;
 
+    // TODO
     const untrackBtn = (
-      <button
+      <Button
         type="submit"
-        className={`${styles.add_mar_right} btn btn-sm btn-default`}
+        className={styles.add_mar_right}
+        color="white"
+        size="sm"
         onClick={() => {
           const isOk = confirm('Are you sure to untrack?');
           if (isOk) {
@@ -615,7 +626,7 @@ class ModifyTable extends Component {
         data-test="untrack-table"
       >
         Untrack Table
-      </button>
+      </Button>
     );
 
     const editCommentClicked = () => {
@@ -811,20 +822,22 @@ class ModifyTable extends Component {
                   ref={n => (colDefaultInput = n)}
                   data-test="default-value"
                 />
-                <button
+                <Button
                   type="submit"
-                  className="btn btn-sm btn-warning"
+                  color="yellow"
+                  size="sm"
                   data-test="add-column-button"
                 >
                   + Add column
-                </button>
+                </Button>
               </form>
             </div>
             <hr />
             {untrackBtn}
-            <button
+            <Button
               type="submit"
-              className="btn btn-sm btn-danger"
+              color="red"
+              size="sm"
               onClick={() => {
                 const isOk = confirm('Are you sure?');
                 if (isOk) {
@@ -834,7 +847,7 @@ class ModifyTable extends Component {
               data-test="delete-table"
             >
               Delete table
-            </button>
+            </Button>
             <br />
             <br />
           </div>

console/src/components/Services/Data/TableModify/ModifyView.js

@@ -15,6 +15,7 @@ import {
 } from './ModifyActions';
 import { ordinalColSort } from '../utils';
 import { setTable, fetchTableComment } from '../DataActions';
+import Button from '../../Layout/Button/Button';
 
 class ModifyView extends Component {
   componentDidMount() {
@@ -83,9 +84,9 @@ class ModifyView extends Component {
           <div className="container-fluid">
             <div className="row">
               <h5 className={styles.padd_bottom}>
-                <button disabled="disabled" className="btn btn-xs btn-warning">
+                <Button disabled="disabled" size="xs" color="yellow">
                   {btnText}
-                </button>{' '}
+                </Button>{' '}
                 &nbsp; {c.column_name}
               </h5>
             </div>
@@ -95,9 +96,11 @@ class ModifyView extends Component {
     });
 
     const untrackBtn = (
-      <button
+      <Button
         type="submit"
-        className={styles.add_mar_right + ' btn btn-sm btn-default'}
+        className={styles.add_mar_right}
+        color="white"
+        size="sm"
         onClick={() => {
           const isOk = confirm('Are you sure to untrack?');
           if (isOk) {
@@ -107,7 +110,7 @@ class ModifyView extends Component {
         data-test="untrack-view"
       >
         Untrack View
-      </button>
+      </Button>
     );
 
     const editCommentClicked = () => {
@@ -210,25 +213,23 @@ class ModifyView extends Component {
               readOnly
             />
             <hr />
-            <button
+            <Button
               type="submit"
-              className={
+              color="yellow"
-                'btn btn-sm ' +
+              size="sm"
-                styles.yellow_button +
+              className={styles.add_mar_right}
-                ' ' +
-                styles.add_mar_right
-              }
               onClick={() => {
                 this.modifyViewDefinition(tableName);
               }}
               data-test="modify-view"
             >
               Modify
-            </button>
+            </Button>
             {untrackBtn}
-            <button
+            <Button
               type="submit"
-              className={'btn btn-sm btn-danger'}
+              color="red"
+              size="sm"
               onClick={() => {
                 const isOk = confirm('Are you sure');
                 if (isOk) {
@@ -238,7 +239,7 @@ class ModifyView extends Component {
               data-test="delete-view"
             >
               Delete view
-            </button>
+            </Button>
             <br />
             <br />
           </div>

console/src/components/Services/Data/TablePermissions/Permissions.js

@@ -44,6 +44,7 @@ import { setTable, fetchViewInfoFromInformationSchema } from '../DataActions';
 import { getIngForm, escapeRegExp } from '../utils';
 import { legacyOperatorsMap } from './PermissionBuilder/utils';
 import semverCheck from '../../../../helpers/semver';
+import Button from '../../Layout/Button/Button';
 
 /* */
 import EnhancedInput from '../../../Common/InputChecker/InputChecker';
@@ -1358,15 +1359,17 @@ class Permissions extends Component {
       );
     };
 
-    const getButton = (value, customClasses, onClickFn, disabled) => (
+    const getButton = (value, color, onClickFn, disabled) => (
-      <button
+      <Button
-        className={`${styles.editActionButton} button btn ${customClasses}`}
+        className={styles.editActionButton}
+        color={color}
+        size="sm"
         onClick={onClickFn}
         disabled={disabled}
         data-test={`${value.split(' ').join('-')}-button`}
       >
         {value}
-      </button>
+      </Button>
     );
 
     const getButtonsSection = (tableSchema, permsState) => {
@@ -1400,19 +1403,19 @@ class Permissions extends Component {
 
       const saveButton = getButton(
         'Save permissions',
-        'btn-success',
+        'yellow',
         dispatchSavePermissions,
         disableSave
       );
 
       const removeAccessButton = getButton(
         'Remove',
-        'btn-danger',
+        'red',
         dispatchRemoveAccess,
         disableRemoveAccess
       );
 
-      const closeButton = getButton('Close', 'btn-default', dispatchCloseEdit);
+      const closeButton = getButton('Close', 'white', dispatchCloseEdit);
       const currentPermissions = tableSchema.permissions;
       const applySameSelected = e => {
         const isChecked = e.target.checked;
@@ -1463,19 +1466,23 @@ class Permissions extends Component {
             <div>Apply same {permsState.query} permissions to other roles</div>
             <div className={styles.add_mar_top_small}>{roleListHtml}</div>
             {permsState.applySamePermissions.length ? (
-              <button
+              <Button
                 onClick={applySameBulk}
-                className={'btn btn-default ' + styles.bulkApplyBtn}
+                className={styles.bulkApplyBtn}
+                color="white"
+                size="sm"
               >
                 Apply
-              </button>
+              </Button>
             ) : (
-              <button
+              <Button
-                className={'btn btn-default ' + styles.bulkApplyBtn}
+                color="white"
+                className={styles.bulkApplyBtn}
+                size="sm"
                 disabled
               >
                 Apply
-              </button>
+              </Button>
             )}
           </div>
         );
@@ -1552,12 +1559,9 @@ class Permissions extends Component {
             })}
           </div>
           <div className={styles.padd_bottom}>
-            <button
+            <Button onClick={bulkDeleteClicked} color="red" size="sm">
-              onClick={bulkDeleteClicked}
-              className={'btn btn-sm btn-default'}
-            >
               Delete
-            </button>
+            </Button>
           </div>
         </div>
       );

console/src/components/Services/Data/TableRelationships/AddManualRelationship.js

@@ -16,6 +16,7 @@ import {
   UPDATE_REMOTE_SCHEMA_MANUAL_REL,
   RESET_MANUAL_REL_TABLE_LIST,
 } from '../DataActions';
+import Button from '../../Layout/Button/Button';
 
 class AddManualRelationship extends Component {
   constructor() {
@@ -198,21 +199,24 @@ class AddManualRelationship extends Component {
             </select>
           </div>
         </div>
-        <button
+        <Button
-          className={styles.yellow_button}
+          color="yellow"
+          size="sm"
           onClick={this.onAddRelClicked}
           data-test={this.props.dataTestVal}
         >
           Add
-        </button>
+        </Button>
         {this.props.showClose ? (
-          <button
+          <Button
-            className={styles.add_mar_left + ' btn btn-default btn-sm'}
+            className={styles.add_mar_left}
+            color="white"
+            size="sm"
             onClick={this.onCloseClicked}
             data-test="table-close-manual-relationship"
           >
             Close
-          </button>
+          </Button>
         ) : null}
       </div>
     );

console/src/components/Services/Data/TableRelationships/Relationships.js

@@ -18,6 +18,7 @@ import gqlPattern, { gqlRelErrorNotif } from '../Common/GraphQLValidation';
 
 import AddManualRelationship from './AddManualRelationship';
 import suggestedRelationshipsRaw from './autoRelations';
+import Button from '../../Layout/Button/Button';
 
 /* Gets the complete list of relationships and converts it to a list of object, which looks like so :
 {
@@ -81,13 +82,14 @@ const relationshipView = (
   return (
     <td>
       <div>
-        <button
+        <Button
-          className="btn btn-sm btn-danger"
+          color="red"
+          size="sm"
           onClick={onDelete}
           data-test={`remove-button-${relName}`}
         >
           Remove
-        </button>
+        </Button>
         &nbsp;
         <b>{relName}</b>
         <div className={tableStyles.relationshipTopPadding}>
@@ -140,13 +142,13 @@ const addRelationshipCellView = (
     }
     dispatch(addRelNewFromStateMigrate());
   };
-  const styles = require('../TableModify/Modify.scss');
   return (
     <td>
       <div>
         {selectedRelationship === rel ? null : (
-          <button
+          <Button
-            className={`${styles.exploreButton} btn btn-xs`}
+            size="xs"
+            color="yellow"
             onClick={onAdd}
             data-test={
               relMetaData[0] === 'object'
@@ -155,7 +157,7 @@ const addRelationshipCellView = (
             }
           >
             Add
-          </button>
+          </Button>
         )}
         {getRelationshipLine(rel.isObjRel, rel.lcol, rel.rcol, rel.rTable)}{' '}
         &nbsp;
@@ -172,9 +174,10 @@ const addRelationshipCellView = (
               data-test="suggested-rel-name"
             />{' '}
             &nbsp;
-            <button
+            <Button
               type="submit"
-              className={`${styles.exploreButton} btn btn-sm`}
+              color="yellow"
+              size="sm"
               data-test={
                 relMetaData[0] === 'object'
                   ? `obj-rel-save-${relMetaData[1]}`
@@ -182,7 +185,7 @@ const addRelationshipCellView = (
               }
             >
               Save
-            </button>
+            </Button>
           </div>
         </form>
       ) : null}
@@ -343,8 +346,10 @@ const AddRelationship = ({
           </tbody>
         </table>
       </div>
-      <button
+      <Button
-        className="btn btn-sm btn-default hide"
+        className="hide"
+        color="white"
+        size="sm"
         onClick={e => {
           e.preventDefault();
           dispatch(resetRelationshipForm());
@@ -352,7 +357,7 @@ const AddRelationship = ({
       >
         {' '}
         Cancel{' '}
-      </button>
+      </Button>
     </div>
   );
 };
@@ -488,15 +493,16 @@ class Relationships extends Component {
                 />
               </div>
             ) : (
-              <button
+              <Button
                 type="submit"
-                className="btn btn-sm btn-default"
+                color="white"
+                size="sm"
                 onClick={() => {
                   dispatch(addNewRelClicked());
                 }}
               >
                 + Add relationship
-              </button>
+              </Button>
             )}
             <hr />
           </div>
@@ -523,16 +529,17 @@ class Relationships extends Component {
                 />
               </div>
             ) : (
-              <button
+              <Button
                 type="submit"
-                className="btn btn-sm btn-default"
+                color="white"
+                size="sm"
                 onClick={() => {
                   dispatch(relManualAddClicked());
                 }}
                 data-test="add-manual-relationship"
               >
                 + Add a relationship manually
-              </button>
+              </Button>
             )}
             <hr />
           </div>

console/src/components/Services/Data/TableRelationships/RelationshipsView.js

@@ -7,6 +7,7 @@ import { findAllFromRel } from '../utils';
 import { setTable, UPDATE_REMOTE_SCHEMA_MANUAL_REL } from '../DataActions';
 
 import AddRelationship from './AddManualRelationship';
+import Button from '../../Layout/Button/Button';
 
 /* Gets the complete list of relationships and converts it to a list of object, which looks like so :
 {
@@ -70,9 +71,9 @@ const relationshipView = (
   return (
     <td>
       <div>
-        <button className="btn btn-sm btn-danger" onClick={onDelete}>
+        <Button size="sm" color="red" onClick={onDelete}>
           Remove
-        </button>
+        </Button>
         &nbsp;
         <b>{relName}</b>
         <div className={tableStyles.relationshipTopPadding}>
@@ -230,15 +231,16 @@ class RelationshipsView extends Component {
                 />
               </div>
             ) : (
-              <button
+              <Button
                 type="submit"
-                className="btn btn-sm btn-default"
+                color="white"
+                size="sm"
                 onClick={() => {
                   dispatch(addNewRelClicked());
                 }}
               >
                 + Add relationship
-              </button>
+              </Button>
             )}
             <hr />
           </div>

console/src/components/Services/EventTrigger/Add/AddTrigger.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import Helmet from 'react-helmet';
 import * as tooltip from './Tooltips';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import Button from '../../Layout/Button/Button';
 
 import {
   removeHeader,
@@ -265,10 +266,7 @@ class AddTrigger extends Component {
             />
           );
           return (
-            <div
+            <div key={i} className={styles.noPadd + ' col-md-4'}>
-              key={i}
-              className={styles.noPadd + ' col-md-4'}
-            >
               <div className={'checkbox '}>
                 <label>
                   {inputHtml}
@@ -295,7 +293,10 @@ class AddTrigger extends Component {
           </OverlayTrigger>{' '}
         </h4>
         {selectedOperations.update ? (
-          <div className={styles.clearBoth + ' ' + styles.listenColumnWrapper}> {getColumnList('update')} </div>
+          <div className={styles.clearBoth + ' ' + styles.listenColumnWrapper}>
+            {' '}
+            {getColumnList('update')}{' '}
+          </div>
         ) : (
           <div>
             <div
@@ -651,19 +652,18 @@ class AddTrigger extends Component {
                 )}
               </div>
               <hr />
-              <button
+              <div
                 onClick={this.toggleAdvanced.bind(this)}
+                className={styles.toggleAdvanced}
                 data-test="advanced-settings"
-                type="button"
-                className={'btn btn-default ' + styles.advancedToggleBtn}
               >
-                Advanced Settings
                 {this.state.advancedExpanded ? (
-                  <i className={'fa fa-arrow-up'} />
+                  <i className={'fa fa-chevron-down'} />
                 ) : (
-                  <i className={'fa fa-arrow-down'} />
+                  <i className={'fa fa-chevron-right'} />
-                )}
+                )}{' '}
-              </button>
+                <b>Advanced Settings</b>
+              </div>
               {this.state.advancedExpanded ? (
                 <div
                   className={
@@ -671,12 +671,20 @@ class AddTrigger extends Component {
                     ' ' +
                     styles.add_mar_bottom +
                     ' ' +
-                    styles.add_mar_top + ' ' + styles.wd100
+                    styles.add_mar_top +
+                    ' ' +
+                    styles.wd100
                   }
                 >
                   {tableName ? advancedColumnSection : null}
                   <div
-                    className={styles.add_mar_bottom + ' ' + styles.add_mar_top + ' ' + styles.wd100}
+                    className={
+                      styles.add_mar_bottom +
+                      ' ' +
+                      styles.add_mar_top +
+                      ' ' +
+                      styles.wd100
+                    }
                   >
                     <h4 className={styles.subheading_text}>Retry Logic</h4>
                     <div
@@ -725,7 +733,13 @@ class AddTrigger extends Component {
                     </div>
                   </div>
                   <div
-                    className={styles.add_mar_bottom + ' ' + styles.add_mar_top + ' ' + styles.wd100}
+                    className={
+                      styles.add_mar_bottom +
+                      ' ' +
+                      styles.add_mar_top +
+                      ' ' +
+                      styles.wd100
+                    }
                   >
                     <h4 className={styles.subheading_text}>Headers</h4>
                     {heads}
@@ -733,13 +747,14 @@ class AddTrigger extends Component {
                 </div>
               ) : null}
               <hr />
-              <button
+              <Button
                 type="submit"
-                className={`btn ${styles.yellow_button}`}
+                color="yellow"
+                size="sm"
                 data-test="trigger-create"
               >
                 {createBtnText}
-              </button>
+              </Button>
             </div>
           </form>
         </div>

console/src/components/Services/EventTrigger/Modify/ActionButtons.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { deleteTrigger } from '../EventActions';
+import Button from '../../Layout/Button/Button';
 
 const verifyDeleteTrigger = (triggerName, dispatch) => {
   if (confirm('Are you sure?')) {
@@ -9,14 +10,15 @@ const verifyDeleteTrigger = (triggerName, dispatch) => {
 
 const Buttons = ({ styles, dispatch, triggerName, ongoingRequest }) => (
   <div className={styles.add_mar_bottom}>
-    <button
+    <Button
-      className={'btn btn-sm btn-danger'}
+      color="red"
+      size="sm"
       data-test="delete-trigger"
       onClick={() => verifyDeleteTrigger(triggerName, dispatch)}
       disabled={ongoingRequest === 'delete'}
     >
       {ongoingRequest === 'delete' ? 'Deleting ...' : 'Delete'}
-    </button>
+    </Button>
   </div>
 );
 

console/src/components/Services/EventTrigger/Modify/Editor.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Button from '../../Layout/Button/Button';
 
 class Editor extends React.Component {
   state = {
@@ -16,37 +17,35 @@ class Editor extends React.Component {
   };
 
   toggleButton = () => (
-    <button
+    <Button
       className={`${this.props.styles.add_mar_small}
-        btn btn-sm btn-default
         ${this.props.styles.modifyEditButton}`}
+      color="white"
+      size="sm"
       data-test={`${this.state.isEditing ? 'close' : 'edit'}-${
         this.props.name
       }`}
       onClick={this.toggleEditor}
     >
       {this.state.isEditing ? 'Close' : 'Edit'}
-    </button>
+    </Button>
   );
 
   saveButton = saveFunc => {
     const { name, property, ongoingRequest, styles } = this.props;
     const isSaving = ongoingRequest === property;
     return (
-      <button
+      <Button
         type="submit"
-        className={`
+        className={styles.modifySaveButton}
-          btn
+        color="yellow"
-          ${styles.yellow_button}
+        size="sm"
-          ${
-            isSaving ? styles.modifySaveButtonDisabled : styles.modifySaveButton
-          }`}
         onClick={saveFunc}
         data-test={`modify-trigger-${name}-save`}
         disabled={isSaving}
       >
         {isSaving ? 'Saving ...' : 'Save'}
-      </button>
+      </Button>
     );
   };
 

console/src/components/Services/EventTrigger/Modify/Modify.scss

@@ -53,8 +53,6 @@
   align-items: center;
   justify-content: center;
   margin-bottom: 10px;
-  background-color: #e6cd8f;
-  border-color: #e6cd8f;
 }
 
 .modifyWebhookCollapsed {

console/src/components/Services/EventTrigger/Notification.js

@@ -2,6 +2,7 @@ import React from 'react';
 import AceEditor from 'react-ace';
 import { showNotification, showTempNotification } from '../../App/Actions';
 import { notifExpand, notifMsg } from '../../App/Actions';
+import Button from '../Layout/Button/Button';
 
 const styles = require('./TableCommon/Table.scss');
 
@@ -47,15 +48,17 @@ const showErrorNotification = (title, message, reqBody, error) => {
   let finalJson = error ? error.message : '{}';
   if (error && 'action' in error) {
     refreshBtn = (
-      <button
+      <Button
-        className={styles.yellow_button + ' ' + styles.add_mar_top_small}
+        className={styles.add_mar_top_small}
+        color="yellow"
+        size="sm"
         onClick={e => {
           e.preventDefault();
           window.location.reload();
         }}
       >
         Refresh Console
-      </button>
+      </Button>
     );
     finalJson = error.action;
   } else if (error && 'internal' in error) {

console/src/components/Services/EventTrigger/PageContainer/PageContainer.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import globals from '../../../../Globals';
+import Button from '../../Layout/Button/Button';
 
 import { LISTING_TRIGGER } from '../EventActions';
 
@@ -114,12 +115,14 @@ const PageContainer = ({
                 className={styles.padd_remove_full}
                 to={'/events/manage/triggers/add'}
               >
-                <button
+                <Button
-                  className={styles.add_mar_right + ' btn btn-xs btn-default'}
+                  className={styles.add_mar_right}
+                  color="white"
+                  size="xs"
                   data-test="sidebar-add-table"
                 >
                   Add Trigger
-                </button>
+                </Button>
               </Link>
             </div>
           ) : null}

console/src/components/Services/EventTrigger/PendingEvents/FilterQuery.js

@@ -21,6 +21,7 @@ import {
   addOrder,
   removeOrder,
 } from './FilterActions.js';
+import Button from '../../Layout/Button/Button';
 import { setDefaultQuery, runQuery } from './FilterActions';
 import { vMakeRequest } from './ViewActions';
 
@@ -223,16 +224,19 @@ class FilterQuery extends Component {
             </div>
           </div>
           <div className={`${styles.padd_right} ${styles.clear_fix}`}>
-            <button
+            <Button
               type="submit"
-              className={`btn ${styles.yellow_button}`}
+              color="yellow"
+              size="sm"
               data-test="run-query"
             >
               Run query
-            </button>
+            </Button>
-            <button
+            <Button
               onClick={this.watchChanges.bind(this)}
-              className={styles.add_mar_left + ' btn btn-default'}
+              className={styles.add_mar_left}
+              color="white"
+              size="sm"
               data-test="run-query"
             >
               {this.state.isWatching ? (
@@ -242,7 +246,7 @@ class FilterQuery extends Component {
               ) : (
                 'Watch'
               )}
-            </button>
+            </Button>
           </div>
         </form>
       </div>

console/src/components/Services/EventTrigger/ProcessedEvents/FilterQuery.js

@@ -21,6 +21,7 @@ import {
   addOrder,
   removeOrder,
 } from './FilterActions.js';
+import Button from '../../Layout/Button/Button';
 import { setDefaultQuery, runQuery } from './FilterActions';
 import { vMakeRequest } from './ViewActions';
 
@@ -223,16 +224,19 @@ class FilterQuery extends Component {
             </div>
           </div>
           <div className={`${styles.padd_right} ${styles.clear_fix}`}>
-            <button
+            <Button
               type="submit"
-              className={`btn ${styles.yellow_button}`}
+              color="yellow"
+              size="sm"
               data-test="run-query"
             >
               Run query
-            </button>
+            </Button>
-            <button
+            <Button
               onClick={this.watchChanges.bind(this)}
-              className={styles.add_mar_left + ' btn btn-default'}
+              className={styles.add_mar_left}
+              color="white"
+              size="sm"
               data-test="run-query"
             >
               {this.state.isWatching ? (
@@ -242,7 +246,7 @@ class FilterQuery extends Component {
               ) : (
                 'Watch'
               )}
-            </button>
+            </Button>
           </div>
         </form>
       </div>

console/src/components/Services/EventTrigger/RunningEvents/FilterQuery.js

@@ -23,6 +23,7 @@ import {
 } from './FilterActions.js';
 import { setDefaultQuery, runQuery } from './FilterActions';
 import { vMakeRequest } from './ViewActions';
+import Button from '../../Layout/Button/Button';
 
 const renderCols = (colName, triggerSchema, onChange, usage, key) => {
   const columns = ['id', 'delivered', 'created_at'];
@@ -223,16 +224,19 @@ class FilterQuery extends Component {
             </div>
           </div>
           <div className={`${styles.padd_right} ${styles.clear_fix}`}>
-            <button
+            <Button
               type="submit"
-              className={`btn ${styles.yellow_button}`}
               data-test="run-query"
+              color="yellow"
+              size="sm"
             >
               Run query
-            </button>
+            </Button>
-            <button
+            <Button
               onClick={this.watchChanges.bind(this)}
-              className={styles.add_mar_left + ' btn btn-default'}
+              className={styles.add_mar_left}
+              color="white"
+              size="sm"
               data-test="run-query"
             >
               {this.state.isWatching ? (
@@ -242,7 +246,7 @@ class FilterQuery extends Component {
               ) : (
                 'Watch'
               )}
-            </button>
+            </Button>
           </div>
         </form>
       </div>

console/src/components/Services/EventTrigger/Schema/AutoAddRelations.js

@@ -1,134 +0,0 @@
-/* eslint-disable space-infix-ops */
-/* eslint-disable no-loop-func  */
-
-import PropTypes from 'prop-types';
-
-import React, { Component } from 'react';
-import {
-  autoTrackRelations,
-  autoAddRelName,
-} from '../TableRelationships/Actions';
-import { getRelationshipLine } from '../TableRelationships/Relationships';
-import suggestedRelationshipsRaw from '../TableRelationships/autoRelations';
-
-class AutoAddRelations extends Component {
-  trackAllRelations = () => {
-    this.props.dispatch(autoTrackRelations());
-  };
-  render() {
-    const { schema, untrackedRelations, dispatch } = this.props;
-    const styles = require('../PageContainer/PageContainer.scss');
-    const handleAutoAddIndivRel = obj => {
-      dispatch(autoAddRelName(obj));
-    };
-
-    if (untrackedRelations.length === 0) {
-      return (
-        <div
-          className={styles.display_inline + ' ' + styles.padd_bottom}
-          key="no-untracked-rel"
-        >
-          There are no untracked relations
-        </div>
-      );
-    }
-    const untrackedIndivHtml = [];
-    schema.map(table => {
-      const currentTable = table.table_name;
-      const currentTableRel = suggestedRelationshipsRaw(currentTable, schema);
-      currentTableRel.objectRel.map(obj => {
-        untrackedIndivHtml.push(
-          <div
-            className={styles.padd_top_medium}
-            key={'untrackedIndiv' + table.table_name}
-          >
-            <button
-              className={`${styles.display_inline} btn btn-xs btn-default`}
-              onClick={e => {
-                e.preventDefault();
-                handleAutoAddIndivRel(obj);
-              }}
-            >
-              Add
-            </button>
-            <div className={styles.display_inline + ' ' + styles.add_pad_left}>
-              <b>{obj.tableName}</b> -{' '}
-              {getRelationshipLine(
-                obj.isObjRel,
-                obj.lcol,
-                obj.rcol,
-                obj.rTable
-              )}
-            </div>
-          </div>
-        );
-      });
-      currentTableRel.arrayRel.map(obj => {
-        untrackedIndivHtml.push(
-          <div
-            className={styles.padd_top_medium}
-            key={'untrackedIndiv' + table.table_name}
-          >
-            <button
-              className={`${styles.display_inline} btn btn-xs btn-default`}
-              onClick={e => {
-                e.preventDefault();
-                handleAutoAddIndivRel(obj);
-              }}
-            >
-              Add
-            </button>
-            <div className={styles.display_inline + ' ' + styles.add_pad_left}>
-              <b>{obj.tableName}</b> -{' '}
-              {getRelationshipLine(
-                obj.isObjRel,
-                obj.lcol,
-                obj.rcol,
-                obj.rTable
-              )}
-            </div>
-          </div>
-        );
-      });
-    });
-    return (
-      <div>
-        {untrackedRelations.length === 0 ? (
-          <div
-            className={styles.display_inline + ' ' + styles.padd_bottom}
-            key="no-untracked-rel"
-          >
-            There are no untracked relations
-          </div>
-        ) : (
-          <div
-            className={styles.display_inline + ' ' + styles.padd_bottom}
-            key="untracked-rel"
-          >
-            There are {untrackedRelations.length} untracked relations
-          </div>
-        )}
-        <button
-          onClick={this.trackAllRelations}
-          className={
-            styles.display_inline +
-            ' btn btn-xs btn-default ' +
-            styles.add_mar_left
-          }
-          data-test="track-all-relationships"
-        >
-          Track All Relations
-        </button>
-        <div className={styles.padd_top_small}>{untrackedIndivHtml}</div>
-      </div>
-    );
-  }
-}
-
-AutoAddRelations.propTypes = {
-  untrackedRelations: PropTypes.array.isRequired,
-  schema: PropTypes.array.isRequired,
-  dispatch: PropTypes.func.isRequired,
-};
-
-export default AutoAddRelations;

console/src/components/Services/EventTrigger/Schema/Schema.js

@@ -8,6 +8,7 @@ import Helmet from 'react-helmet';
 import { push } from 'react-router-redux';
 import { loadTriggers } from '../EventActions';
 import globals from '../../../../Globals';
+import Button from '../../Layout/Button/Button';
 
 const appPrefix = globals.urlPrefix + '/events';
 
@@ -38,16 +39,17 @@ class Schema extends Component {
               Event Triggers{' '}
             </h2>
             {migrationMode ? (
-              <button
+              <Button
                 data-test="data-create-trigger"
-                className={styles.yellow_button}
+                color="yellow"
+                size="sm"
                 onClick={e => {
                   e.preventDefault();
                   dispatch(push(`${appPrefix}/manage/triggers/add`));
                 }}
               >
                 Create Trigger
-              </button>
+              </Button>
             ) : null}
           </div>
           <hr />

console/src/components/Services/EventTrigger/StreamingLogs/Logs.js

@@ -28,6 +28,7 @@ import {
 import * as tooltip from '../Common/Tooltips';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import { convertDateTimeToLocale } from '../utils';
+import Button from '../../Layout/Button/Button';
 
 class StreamingLogs extends Component {
   constructor(props) {
@@ -287,9 +288,11 @@ class StreamingLogs extends Component {
         />
         <br />
         <div className={'hide'}>
-          <button
+          <Button
             onClick={this.watchChanges.bind(this)}
-            className={styles.watchBtn + ' btn btn-default'}
+            className={styles.watchBtn}
+            color="white"
+            size="sm"
             data-test="run-query"
           >
             {this.state.isWatching ? (
@@ -302,7 +305,7 @@ class StreamingLogs extends Component {
                 Stream Logs <i className={'fa fa-play'} />
               </span>
             )}
-          </button>
+          </Button>
         </div>
         {invocationRowsData.length ? (
           <div className={styles.streamingLogs + ' streamingLogs'}>
@@ -315,9 +318,11 @@ class StreamingLogs extends Component {
                   onChange={this.filterAll.bind(this)}
                 />
               </div>
-              <button
+              <Button
                 onClick={this.handleNewerEvents.bind(this)}
-                className={styles.newBtn + ' btn btn-default'}
+                className={styles.newBtn}
+                color="white"
+                size="sm"
               >
                 {log.isLoadingNewer ? (
                   <span>
@@ -326,7 +331,7 @@ class StreamingLogs extends Component {
                 ) : (
                   <span>Load newer logs</span>
                 )}
-              </button>
+              </Button>
               {!log.isNewAvailable ? (
                 <span> No new logs available at this time </span>
               ) : null}
@@ -482,9 +487,10 @@ class StreamingLogs extends Component {
             />
             <div className={styles.loadOlder}>
               {log.isOldAvailable ? (
-                <button
+                <Button
                   onClick={this.handleOlderEvents.bind(this)}
-                  className={styles.oldBtn + ' btn btn-default'}
+                  color="white"
+                  size="sm"
                 >
                   {log.isLoadingOlder ? (
                     <span>
@@ -493,7 +499,7 @@ class StreamingLogs extends Component {
                   ) : (
                     <span>Load older logs</span>
                   )}
-                </button>
+                </Button>
               ) : (
                 <div> No more logs available </div>
               )}

console/src/components/Services/EventTrigger/TableCommon/RedeliverEvent.js

@@ -12,6 +12,7 @@ import {
 } from '../EventActions';
 import AceEditor from 'react-ace';
 import 'brace/mode/json';
+import Button from '../../Layout/Button/Button';
 
 class RedeliverEvent extends Component {
   constructor(props) {
@@ -211,12 +212,14 @@ class RedeliverEvent extends Component {
                 <div className="col-md-12">
                   <div className={styles.add_mar_bottom}>
                     Event ID - {log.redeliverEventId}
-                    <button
+                    <Button
                       onClick={this.handleRedeliver.bind(this)}
-                      className={'hide btn btn-default'}
+                      className="hide"
+                      color="white"
+                      size="sm"
                     >
                       Deliver again
-                    </button>
+                    </Button>
                   </div>
                   <div className={styles.padd_left_remove + ' col-md-5'}>
                     <div> Request </div>

console/src/components/Services/EventTrigger/TableCommon/Table.scss

@@ -272,7 +272,6 @@ a.expanded {
 
 .advancedToggleBtn {
   width: 300px;
-  background: #f2f2f2 !important;
   i {
     padding-left: 5px;
   }
@@ -293,7 +292,6 @@ a.expanded {
   min-height: 41px;
 }
 .newBtn {
-  font-size: 12px;
   margin-right: 10px;
 }
 .loadNewer {
@@ -314,9 +312,6 @@ a.expanded {
     margin-left: 10px;
   }
 }
-.oldBtn {
-  font-size: 12px;
-}
 .retryEvent {
   cursor: pointer;
 }
@@ -346,3 +341,12 @@ a.expanded {
     margin-left: 5px;
   }
 }
+.toggleAdvanced {
+  cursor: pointer;
+  b {
+    font-size: 15px;
+  }
+  i:hover {
+    color: #4D4D4D ;
+  }
+}

console/src/components/Services/Layout/Button/Button.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import styles from '../../../Common/Common.scss';
+
+/*
+  This is a Button HOC that takes al the props supported by <button> and also
+  - color: (default: white) color of the button; currently supports yellow, red, green, gray, white
+  - size: size of the button; currently supports xs (extra small), sm(small)
+  - className: although you can provide any CSS classname, it is recommended to use only the positioning related classes and not the ones that change the appearance (color, font, size) of the button
+*/
+
+const Button = props => {
+  const { children, size, color, className } = props;
+  let extendedClassName = `${className || ''} btn ${
+    size ? `btn-${size} ` : 'button '
+  }`;
+  switch (color) {
+    case 'yellow':
+      extendedClassName += styles.yellow_button;
+      break;
+    case 'red':
+      extendedClassName += 'btn-danger';
+      break;
+    case 'green':
+      extendedClassName += 'btn-success';
+      break;
+    case 'gray':
+      extendedClassName += styles.gray_button;
+      break;
+    default:
+      extendedClassName += 'btn-default';
+      break;
+  }
+  return (
+    <button {...props} className={extendedClassName}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;

console/src/components/Services/Layout/LeftNavBar/LeftNavBar.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { Link } from 'react-router';
 
 import { LISTING_SCHEMA } from '../../Data/DataActions';
+import Button from '../Button/Button';
 
 const LeftNavBar = ({
   appPrefix,
@@ -69,12 +70,14 @@ const LeftNavBar = ({
                 className={styles.padd_remove_full}
                 to={`${appPrefix}/manage/add`}
               >
-                <button
+                <Button
-                  className={styles.add_mar_right + ' btn btn-xs btn-default'}
+                  className={styles.add_mar_right}
+                  color="white"
+                  size="xs"
                   data-test="remote-schema-sidebar-add-table"
                 >
                   Add
-                </button>
+                </Button>
               </Link>
             </div>
           ) : null}

console/src/components/Services/Layout/RightLayoutWrapper/Schema.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
+import Button from '../Button/Button';
 import { push } from 'react-router-redux';
 import { loadTriggers } from '../EventActions';
 import globals from '../../../../Globals';
@@ -38,16 +39,18 @@ class Schema extends Component {
               Event Triggers{' '}
             </h2>
             {migrationMode ? (
-              <button
+              <Button
                 data-test="data-create-trigger"
-                className={styles.yellow_button}
+                className={styles.button_mar_right}
+                color="yellow"
+                size="sm"
                 onClick={e => {
                   e.preventDefault();
                   dispatch(push(`${appPrefix}/manage/triggers/add`));
                 }}
               >
                 Create Trigger
-              </button>
+              </Button>
             ) : null}
           </div>
           <hr />