Updated buttons throughout app

TIER · Jun 10, 2021 · fbc3a73 · fbc3a73
1 parent 634f1a4
commit fbc3a73
Show file tree

Hide file tree

Showing 34 changed files with 209 additions and 161 deletions.
diff --git a/ui/src/app/admin/component/AccessRequest.js b/ui/src/app/admin/component/AccessRequest.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Button from 'react-bootstrap/Button';
 import Translate from '../../i18n/components/translate';
 
 export function AccessRequest({ users, roles, onDeleteUser, onChangeUserRole }) {
@@ -49,13 +50,13 @@ export function AccessRequest({ users, roles, onDeleteUser, onChangeUserRole })
                         </div>
                     </div>
                     <div className="col-2 text-right">
-                        <button className="btn btn-danger btn-sm" onClick={() => onDeleteUser(user.username)}>
+                        <Button variant="danger" size="sm" onClick={() => onDeleteUser(user.username)}>
                             <i className="fa fa-trash fa-lg"></i>
                             &nbsp;
-                            <span >
+                            <span>
                                 <Translate value="label.delete-request">Delete Request</Translate>
                             </span>
-                        </button>
+                        </Button>
                     </div>
                 </div>
             </div>

diff --git a/ui/src/app/admin/component/UserMaintenance.js b/ui/src/app/admin/component/UserMaintenance.js
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import Button from 'react-bootstrap/Button';
 
 import Translate from '../../i18n/components/translate';
 import { useCurrentUser } from '../../core/user/UserContext';
@@ -46,12 +47,12 @@ export default function UserMaintenance({ users, roles, onDeleteUser, onChangeUs
                             </td>
                             <td>
                                 {currentUser.username !== user.username &&
-                                    <button className="btn btn-link text-danger" onClick={() => onDeleteUser(user.username)}>
+                                    <Button className="text-danger" variant="link" onClick={() => onDeleteUser(user.username)}>
                                         <span className="sr-only">
                                             <Translate value="label.delete-user">Delete User</Translate>
                                         </span>
                                         <FontAwesomeIcon icon={faTrash} />
-                                    </button>
+                                    </Button>
                                 }
                             </td>
                         </tr>

diff --git a/ui/src/app/admin/container/UserManagement.js b/ui/src/app/admin/container/UserManagement.js
@@ -4,6 +4,7 @@ import useFetch from 'use-http';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import Button from 'react-bootstrap/Button';
 
 import Translate from '../../i18n/components/translate';
 import API_BASE_PATH from '../../App.constant';
@@ -75,12 +76,12 @@ export default function UserManagement({ users, children, reload }) {
                     </p>
                 </Modal.Body>
                 <Modal.Footer>
-                    <button className="btn btn-danger" type="button" onClick={() => deleteUser(deleting)}>
+                    <Button variant="danger"type="button" onClick={() => deleteUser(deleting)}>
                         <Translate value="action.delete">Delete</Translate>
-                    </button>{' '}
-                    <button className="btn btn-secondary" type="button" onClick={() => setDeleting(null)}>
+                    </Button>{' '}
+                    <Button variant="secondary" type="button" onClick={() => setDeleting(null)}>
                         <Translate value="action.cancel">Cancel</Translate>
-                    </button>
+                    </Button>
                 </Modal.Footer>
             </Modal>
         </div>

diff --git a/ui/src/app/dashboard/component/Search.js b/ui/src/app/dashboard/component/Search.js
@@ -40,7 +40,7 @@ export function Search ({ entities, searchable, children }) {
                             placeholder="Search Files" onChange={ (event) => search(event.target.value) }
                             value={query} />
                         <InputGroup.Append>
-                            <Button variant="text" className="px-3" onClick={ () => search('') }>Clear</Button>
+                            <Button variant="outline-primary" className="px-3" onClick={ () => search('') }>Clear</Button>
                         </InputGroup.Append>
                     </InputGroup>
                 </Form.Group>

diff --git a/ui/src/app/form/component/fields/FilterTargetField.js b/ui/src/app/form/component/fields/FilterTargetField.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import Dropdown from 'react-bootstrap/Dropdown';
 import Translate from '../../../i18n/components/translate';
+import Button from 'react-bootstrap/Button';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAsterisk, faCaretDown, faCaretUp, faEye, faEyeSlash, faPlus, faSpinner, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { useTranslator } from '../../../i18n/hooks';
@@ -15,17 +16,18 @@ import isNil from 'lodash/isNil';
 import { FilterTargetPreview } from '../../../metadata/hoc/FilterTargetPreview';
 
 const ToggleButton = ({ isOpen, onClick, disabled }) => (
-    <button
+    <Button
         type="button"
-        className="btn btn-outline-secondary toggle-button"
+        variant="outline-secondary"
+        className="toggle-button"
         onClick={onClick}
         disabled={disabled}
         onMouseDown={e => {
             // Prevent input from losing focus.
             e.preventDefault();
         }}>
         <FontAwesomeIcon icon={isOpen ? faCaretUp : faCaretDown} />
-    </button>
+    </Button>
 );
 
 const FilterTargetField = ({
@@ -225,13 +227,13 @@ const FilterTargetField = ({
                             </div>
                             {targetType === 'ENTITY' &&
                                 <div className="ml-2">
-                                    <button className="btn btn-success"
+                                    <Button variant="success"
                                         type="button"
                                         disabled={!term}
                                         onClick={() => onSelectValue(term)}>
                                         <Translate value="action.add-entity-id">Add Entity ID</Translate>&nbsp;&nbsp;
                                         <FontAwesomeIcon icon={faPlus} />
-                                    </button>
+                                    </Button>
                                 </div>
                             }
                         </div>
@@ -250,15 +252,19 @@ const FilterTargetField = ({
                                             {id}
                                             <span>
                                                 {preview &&
-                                                    <button disabled={loading || !xml} type="button" className="btn btn-link text-right" onClick={() => preview(id)}>
+                                                    <Button disabled={loading || !xml} type="button" 
+                                                    variant="link"
+                                                    className="text-right" onClick={() => preview(id)}>
                                                         <FontAwesomeIcon icon={loading ? faSpinner : xml ? faEye : faEyeSlash} pulse={loading} size="lg" className="text-success sr-hidden" />
                                                         <span className="sr-only"><Translate value="action.preview">Preview</Translate></span>
-                                                    </button>
+                                                    </Button>
                                                 }
-                                                <button type="button" className="btn btn-link text-right" onClick={() => removeId(id)}>
+                                                <Button type="button" 
+                                                variant="link"
+                                                className="text-right" onClick={() => removeId(id)}>
                                                     <FontAwesomeIcon icon={faTrash} size="lg" className="text-danger sr-hidden" />
                                                     <span className="sr-only"><Translate value="action.remove">Remove</Translate></span>
-                                                </button>
+                                                </Button>
                                             </span>
                                         </React.Fragment>
                                     )}

diff --git a/ui/src/app/form/component/widgets/AttributeReleaseWidget.js b/ui/src/app/form/component/widgets/AttributeReleaseWidget.js
@@ -3,6 +3,7 @@ import Form from "react-bootstrap/Form";
 import Translate from "../../../i18n/components/translate";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
+import Button from 'react-bootstrap/Button';
 
 const selectValue = (value, selected, all) => {
     const at = all.indexOf(value);
@@ -105,19 +106,19 @@ const AttributeReleaseWidget = ({
                     <tr>
                         <td><Translate value="label.check-all-attributes">Check All Attributes</Translate></td>
                         <td className="text-right">
-                            <button type="button" className="btn btn-text text-success btn-sm px-2" onClick={() => onCheckAll()} id="attributeRelease.checkAll">
+                            <Button type="button" variant="text" size="sm" className="text-success px-2" onClick={() => onCheckAll()} id="attributeRelease.checkAll">
                                 <FontAwesomeIcon icon={faCheck} size="lg" />
                                 <span className="sr-only"><Translate value="label.check-all-attributes">Check All Attributes</Translate></span>
-                            </button>
+                            </Button>
                         </td>
                     </tr>
                     <tr>
                         <td><Translate value="label.clear-all-attributes">Clear All Attributes</Translate></td>
                         <td className="text-right">
-                            <button type="button" className="btn btn-text text-danger btn-sm px-2" onClick={() => onClearAll()} id="attributeRelease.clearAll">
+                            <Button type="button" variant="text" size="sm" className="text-danger px-2" onClick={() => onClearAll()} id="attributeRelease.clearAll">
                                 <FontAwesomeIcon icon={faTimes} size="lg" />
                                 <span className="sr-only"><Translate value="label.clear-all-attributes">Clear All Attributes</Translate></span>
-                            </button>
+                            </Button>
                         </td>
                     </tr>
                 </tbody>

diff --git a/ui/src/app/form/component/widgets/OptionWidget.js b/ui/src/app/form/component/widgets/OptionWidget.js
@@ -2,6 +2,7 @@ import React, { useRef } from "react";
 
 import ListGroup from "react-bootstrap/ListGroup";
 import Form from "react-bootstrap/Form";
+import Button from 'react-bootstrap/Button';
 
 import Translate from "../../../i18n/components/translate";
 import { InfoIcon } from "../InfoIcon";
@@ -12,17 +13,18 @@ import { faAsterisk, faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-
 import { useTranslator } from "../../../i18n/hooks";
 
 const ToggleButton = ({ isOpen, onClick, disabled }) => (
-    <button
+    <Button
         type="button"
-        className="btn btn-outline-secondary toggle-button"
+        variant="outline-secondary"
+        className="toggle-button"
         onClick={onClick}
         disabled={disabled}
         onMouseDown={e => {
             // Prevent input from losing focus.
             e.preventDefault();
         }}>
         <FontAwesomeIcon icon={isOpen ? faCaretUp : faCaretDown} />
-    </button>
+    </Button>
 );
 
 const OptionWidget = ({

diff --git a/ui/src/app/metadata/component/DeleteConfirmation.js b/ui/src/app/metadata/component/DeleteConfirmation.js
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
@@ -46,12 +47,12 @@ export function DeleteConfirmation({ children, onConfirm, onCancel, body, title
                     </p>
                 </Modal.Body>
                 <Modal.Footer>
-                    <button className="btn btn-danger" onClick={() => onConfirmClick()}>
+                    <Button variant="danger" onClick={() => onConfirmClick()}>
                         <Translate value="action.delete">Delete</Translate>
-                    </button>{' '}
-                    <button className="btn btn-secondary" onClick={() => onCancelClick()}>
+                    </Button>{' '}
+                    <Button variant="secondary" onClick={() => onCancelClick()}>
                         <Translate value="action.cancel">Cancel</Translate>
-                    </button>
+                    </Button>
                 </Modal.Footer>
             </Modal>
         </>

diff --git a/ui/src/app/metadata/component/MetadataSection.js b/ui/src/app/metadata/component/MetadataSection.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { faEdit } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
+import Button from 'react-bootstrap/Button';
 import Translate from '../../i18n/components/translate';
 
 export function MetadataSection ({ section, index = -1, onEdit, children }) {
@@ -27,10 +27,10 @@ export function MetadataSection ({ section, index = -1, onEdit, children }) {
                         </h2>
                         {onEdit &&
                         <div className="actions px-2">
-                            <button className="btn btn-link edit-link change-view" onClick={()=>onEdit(section.id)}>
+                            <Button variant="link" className="edit-link change-view" onClick={()=>onEdit(section.id)}>
                                 <FontAwesomeIcon icon={faEdit} />&nbsp;
                                 <Translate value="action.edit">Edit</Translate>
-                            </button>
+                            </Button>
                         </div>
                         }
                     </div>

diff --git a/ui/src/app/metadata/component/properties/ArrayProperty.js b/ui/src/app/metadata/component/properties/ArrayProperty.js
@@ -1,6 +1,8 @@
+import React from 'react';
 import { faEye } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+import Button from 'react-bootstrap/Button';
+
 import Translate from '../../../i18n/components/translate';
 import { usePropertyWidth } from './hooks';
 import { PropertyValue } from './PropertyValue';
@@ -89,10 +91,10 @@ export function ArrayProperty ({ property, columns, preview }) {
                                                     {preview && item &&
                                                         <React.Fragment>
                                                             <FilterTargetPreview entityId={item}>
-                                                                {(onPreview, loading, data) => (
-                                                                    <button className="btn btn-link" onClick={() => onPreview(item)}>
+                                                                {(onPreview) => (
+                                                                    <Button variant="link" onClick={() => onPreview(item)}>
                                                                         <FontAwesomeIcon icon={faEye} size="lg" className="text-success" />
-                                                                    </button>
+                                                                    </Button>
                                                                 )}
                                                             </FilterTargetPreview>
                                                             &nbsp;

diff --git a/ui/src/app/metadata/contention/component/ContentionModal.js b/ui/src/app/metadata/contention/component/ContentionModal.js
@@ -3,6 +3,7 @@ import React from 'react';
 import Modal from 'react-bootstrap/Modal';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import Button from 'react-bootstrap/Button';
 
 import Translate from '../../../i18n/components/translate';
 import { useTranslator } from '../../../i18n/hooks';
@@ -83,23 +84,23 @@ export function ContentionModal ({ theirs = [], ours = [], onUseTheirs, onUseOur
             </Modal.Body>
             {theirs && theirs.length < 1 ?
             <Modal.Footer>
-                <button className="btn btn-secondary"
-                    onClick={() => onUseTheirs()}><Translate value="action.cancel">Cancel</Translate></button>
+                <Button variant="secondary"
+                    onClick={() => onUseTheirs()}><Translate value="action.cancel">Cancel</Translate></Button>
             </Modal.Footer>
             :
             ours && ours.length < 1 ?
                 <Modal.Footer>
-                    <button className="btn btn-secondary"
-                        onClick={() => onUseTheirs()}><Translate value="action.get-latest">Get latest</Translate></button>
+                    <Button variant="secondary"
+                        onClick={() => onUseTheirs()}><Translate value="action.get-latest">Get latest</Translate></Button>
                 </Modal.Footer>
             :
             <Modal.Footer>
-                <button className="btn btn-info" onClick={() => onUseOurs()} disabled={!resolutionObj}>
+                <Button variant="info" onClick={() => onUseOurs()} disabled={!resolutionObj}>
                     <Translate value="action.use-mine">Use My Changes</Translate>
-                </button>
-                <button className="btn btn-danger" onClick={() => onUseTheirs()} disabled={!rejectionObj}>
+                </Button>
+                <Button variant="danger" onClick={() => onUseTheirs()} disabled={!rejectionObj}>
                     <Translate value="action.use-theirs">Use Their Changes</Translate>
-                </button>
+                </Button>
             </Modal.Footer>
             }
         </Modal>