changed styling of button-bar

metabrainz · Feb 21, 2020 · 5f4317c · 5f4317c
1 parent 527a7b6
commit 5f4317c
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 12 deletions.
diff --git a/src/client/entity-editor/button-bar/alias-button.js b/src/client/entity-editor/button-bar/alias-button.js
@@ -50,9 +50,10 @@ function AliasButton({
 		<FontAwesomeIcon className="margin-right-0-5 text-danger" icon="times"/>;
 
 	return (
-		<Button bsStyle="link" {...props}>
+		<Button bsStyle="success" {...props}>
 			{iconElement}
-			{text}
+			<FontAwesomeIcon icon="plus"/>
+			<span>&nbsp; {text} </span>
 		</Button>
 	);
 }

diff --git a/src/client/entity-editor/button-bar/button-bar.js b/src/client/entity-editor/button-bar/button-bar.js
@@ -25,6 +25,7 @@ import {
 import {validateAliases, validateIdentifiers} from '../validators/common';
 
 import AliasButton from './alias-button';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import IdentifierButton from './identifier-button';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -67,15 +68,15 @@ function ButtonBar({
 	return (
 		<div>
 			<form>
-				<Row className="margin-top-1">
-					<Col className="text-center" md={4}>
+				<Row >
+					<Col className="text-center margin-top-1" md={4} >
 						<AliasButton
 							aliasesInvalid={aliasesInvalid}
 							numAliases={numAliases}
 							onClick={onAliasButtonClick}
 						/>
 					</Col>
-					<Col className="text-center" md={4}>
+					<Col className="text-center margin-top-1" md={4}>
 						<IdentifierButton
 							identifiersInvalid={identifiersInvalid}
 							numIdentifiers={numIdentifiers}
@@ -84,12 +85,13 @@ function ButtonBar({
 					</Col>
 					{
 						!disambiguationVisible &&
-						<Col className="text-center" md={4}>
+						<Col className="text-center margin-top-1" md={4}>
 							<Button
-								bsStyle="link"
+								bsStyle="success"
 								onClick={onDisambiguationButtonClick}
 							>
-								Add disambiguation…
+								<FontAwesomeIcon icon="plus"/>
+								<span>&nbsp; Add disambiguation… </span>
 							</Button>
 						</Col>
 					}

diff --git a/src/client/entity-editor/button-bar/identifier-button.js b/src/client/entity-editor/button-bar/identifier-button.js
@@ -50,9 +50,10 @@ function IdentifierButton({
 		<FontAwesomeIcon className="margin-right-0-5 text-danger" icon="times"/>;
 
 	return (
-		<Button bsStyle="link" {...props}>
+		<Button bsStyle="success" {...props}>
 			{iconElement}
-			{text}
+			<FontAwesomeIcon icon="plus"/>
+			<span>&nbsp;{text}</span>
 		</Button>
 	);
 }

diff --git a/src/client/entity-editor/relationship-editor/relationship-editor.js b/src/client/entity-editor/relationship-editor/relationship-editor.js
@@ -35,7 +35,6 @@ import type {
 	RelationshipWithLabel,
 	Relationship as _Relationship
 } from './types';
-
 import EntitySearchFieldOption from '../common/entity-search-field-option';
 import React from 'react';
 import ReactSelect from 'react-select';

diff --git a/src/client/entity-editor/relationship-editor/relationship-section.js b/src/client/entity-editor/relationship-editor/relationship-section.js
@@ -38,6 +38,7 @@ import type {
 	Relationship as _Relationship
 } from './types';
 import type {Dispatch} from 'redux'; // eslint-disable-line import/named
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Relationship from './relationship';
@@ -182,7 +183,8 @@ function RelationshipSection({
 						bsStyle="success"
 						onClick={onAddRelationship}
 					>
-						Add relationship
+						<FontAwesomeIcon icon="plus"/>
+						<span>&nbsp; Add relationship</span>
 					</Button>
 				</Col>
 			</Row>