2 files changed, 8 insertions, 6 deletions
diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx
index 12e9a06623..3f8dbba53a 100644
--- a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx
+++ b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
+import Button from 'sdc-ui/lib/react/Button.js';
 import uuid from 'uuid-js';
 
 export default class SelectActionTable extends React.Component {
@@ -10,13 +11,14 @@ export default class SelectActionTable extends React.Component {
 		return (
 			<div className={`select-action-table-view ${isReadOnlyMode ? 'disabled' : ''}`}>
 				<div className='select-action-table-controllers'>
-					{onAdd && onAddItem && <div data-test-id='select-action-table-add' onClick={onAdd}>{onAddItem}</div>}
+					{onAdd && onAddItem &&
+					<Button btnType='link' disabled={isReadOnlyMode === true} color='primary' iconName='plus' data-test-id='select-action-table-add' onClick={onAdd}>{onAddItem}</Button>}
 					<SVGIcon name='trashO' className='dummy-icon' />
 				</div>
 				<div className='select-action-table'>
 					<div className='select-action-table-headers'>
 						{columns.map(column => <div key={uuid.create()} className='select-action-table-header'>{i18n(column)}</div>)}
-						{Array(numOfIcons).fill().map((e, i) => <SVGIcon name='trashO' key={i} className='dummy-icon' />)}
+						{Array(numOfIcons).fill().map((e, i) => <SVGIcon name='trash-o' key={i} className='dummy-icon' />)}
 					</div>
 					<div className='select-action-table-body'>
 						{children}
diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx
index 7df7d532e8..a03f8441a4 100644
--- a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx
+++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx
@@ -11,7 +11,7 @@ function tooltip (msg)  {
 
 const IconWithOverlay = ({overlayMsg}) => (
 	<OverlayTrigger placement='bottom' overlay={tooltip(overlayMsg)}>
-		<SVGIcon name='errorCircle'/>
+		<SVGIcon name='errorCircle' color='negative'/>
 	</OverlayTrigger>
 );
 
@@ -21,10 +21,10 @@ function renderErrorOrCheck({hasError, overlayMsg}) {
 	}
 
 	if (hasError) {
-		return overlayMsg ? <IconWithOverlay overlayMsg={overlayMsg}/> :  <SVGIcon name='errorCircle'/>;
+		return overlayMsg ? <IconWithOverlay overlayMsg={overlayMsg}/> :  <SVGIcon color='negative' name='errorCircle'/>;
 	}
 
-	return <SVGIcon name='checkCircle'/>;
+	return <SVGIcon name='checkCircle' color='positive'/>;
 }
 
 const SelectActionTableRow = ({children, onDelete, hasError, hasErrorIndication, overlayMsg, showDelete}) => (
@@ -32,7 +32,7 @@ const SelectActionTableRow = ({children, onDelete, hasError, hasErrorIndication,
 		<div className={`select-action-table-row ${hasError ? 'has-error' : ''}`}>
 			{children}
 		</div>
-		{onDelete && <SVGIcon name='trashO' iconClassName={(showDelete) ? '' : 'hideDelete'} data-test-id='select-action-table-delete' onClick={(showDelete) ? onDelete : null} />}
+		{onDelete && <SVGIcon color='secondary' name='trashO' data-test-id='select-action-table-delete' onClick={onDelete} iconClassName={(showDelete) ? '' : 'hideDelete'}/>}
 		{hasErrorIndication && renderErrorOrCheck({hasError, overlayMsg})}
 	</div>
 );