|#973| Thais + Sriram | Adds name attribute to logout button and make it transparent on hover

3 files changed, 10 insertions, 3 deletions

diff --git a/web-ui/src/common/flat_button/flat_button.js b/web-ui/src/common/flat_button/flat_button.js
index 8b65ca30..d9930ff5 100644
--- a/web-ui/src/common/flat_button/flat_button.js
+++ b/web-ui/src/common/flat_button/flat_button.js
@@ -34,10 +34,12 @@ const flatButtonStyle = {
   verticalAlign: 'top'
 };
 
-const SubmitFlatButton = ({ buttonText, fontIconClass }) => (
+const SubmitFlatButton = ({ name, buttonText, fontIconClass }) => (
   <FlatButton
+    name={name}
     type='submit'
     target='_blank'
+    hoverColor='transparent'
     containerElement='label'
     style={flatButtonStyle}
     labelPosition='before'
@@ -48,6 +50,7 @@ const SubmitFlatButton = ({ buttonText, fontIconClass }) => (
 );
 
 SubmitFlatButton.propTypes = {
+  name: React.PropTypes.string.isRequired,
   buttonText: React.PropTypes.string.isRequired,
   fontIconClass: React.PropTypes.string.isRequired
 };
diff --git a/web-ui/src/common/flat_button/flat_button.spec.js b/web-ui/src/common/flat_button/flat_button.spec.js
index 500eb8fb..8939e3d9 100644
--- a/web-ui/src/common/flat_button/flat_button.spec.js
+++ b/web-ui/src/common/flat_button/flat_button.spec.js
@@ -7,7 +7,11 @@ describe('FlatButton', () => {
   let flatButton;
 
   beforeEach(() => {
-    flatButton = shallow(<FlatButton buttonText='Logout' fontIconClass='fa fa-sign-out' />);
+    flatButton = shallow(<FlatButton name='logout' buttonText='Logout' fontIconClass='fa fa-sign-out' />);
+  });
+
+  it('renders a FlatButton of type submit with name logout', () => {
+    expect(flatButton.find('FlatButton').props().name).toEqual('logout');
   });
 
   it('renders a FlatButton of type submit with text logout', () => {
diff --git a/web-ui/src/common/logout/logout.js b/web-ui/src/common/logout/logout.js
index 12db1067..c4c98b0c 100644
--- a/web-ui/src/common/logout/logout.js
+++ b/web-ui/src/common/logout/logout.js
@@ -34,7 +34,7 @@ export class Logout extends React.Component {
       <div className='logout-container'>
         <form id='logout-form' method='POST' action='logout'>
           <input type='hidden' name='csrftoken' value={this.state.csrf_token} />
-          <SubmitFlatButton buttonText={t('logout')} fontIconClass='fa fa-sign-out' />
+          <SubmitFlatButton name="logout" buttonText={t('logout')} fontIconClass='fa fa-sign-out' />
         </form>
       </div>
     );