Add styling to GoToPaypal page

common/app/routes/Jobs/components/GoToPayPal.jsx

@@ -1,20 +1,21 @@
 import React, { PropTypes } from 'react';
-import { Col, Panel, Row } from 'react-bootstrap';
+import { Button, Col, Panel, Row } from 'react-bootstrap';
 import { contain } from 'thundercats-react';
 
 export default contain(
   {
     store: 'JobsStore',
     actions: 'JobActions',
-    map({ job: { id } = {} }) {
-      return { id };
+    map({ job: { id, isHighlighted } = {} }) {
+      return { id, isHighlighted };
     }
   },
   React.createClass({
     displayName: 'GoToPayPal',
 
     propTypes: {
-      id: PropTypes.string
+      id: PropTypes.string,
+      isHighlighted: PropTypes.bool
     },
 
     render() {
@@ -23,44 +24,65 @@ export default contain(
         <div>
           <Row>
             <Col
-              md={ 6 }
-              mdOffset={ 3 }
+              md={ 10 }
+              mdOffset={ 1 }
               sm={ 8 }
               smOffset={ 2 }
               xs={ 12 }>
               <Panel>
-                <form
-                  action='https://www.sandbox.paypal.com/cgi-bin/webscr'
-                  method='post'
-                  target='_top'>
-                  <input
-                    name='cmd'
-                    type='hidden'
-                    value='_s-xclick' />
-                  <input
-                      name='hosted_button_id'
-                      type='hidden'
-                      value='ZVU498PLMPHKU' />
-                  <input
-                    alt='PayPal - The safer, easier way to pay online!'
-                    border='0'
-                    name='submit'
-                    src={
-                      'https://www.sandbox.paypal.com/' +
-                      'en_US/i/btn/btn_buynowCC_LG.gif'
-                    }
-                    type='image' />
-                  <input
-                    name='custom'
-                    type='hidden'
-                    value={ '' + id } />
-                  <img
-                    alt=''
-                    border='0'
-                    height='1'
-                    src='https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif'
-                    width='1' />
-                </form>
+                <Row>
+                  <Col
+                    md={ 6 }
+                    mdOffset={ 3 }>
+                    <h2 className='text-center'>
+                      One more step
+                    </h2>
+                    <div className='spacer' />
+                    You're Awesome! just one more step to go.
+                    Clicking on the link below will redirect to paypal.
+                  </Col>
+                </Row>
+                <div className='spacer' />
+                <Row>
+                  <Col
+                    md={ 6 }
+                    mdOffset={ 3 }>
+                    <form
+                      action='https://www.sandbox.paypal.com/cgi-bin/webscr'
+                      method='post'
+                      target='_top'>
+                      <input
+                        name='cmd'
+                        type='hidden'
+                        value='_s-xclick' />
+                      <input
+                          name='hosted_button_id'
+                          type='hidden'
+                          value='ZVU498PLMPHKU' />
+                      <input
+                        name='custom'
+                        type='hidden'
+                        value={ '' + id } />
+                      <Button
+                        block={ true }
+                        bsSize='size'
+                        className='signup-btn'
+                        type='submit'>
+                        <i className='fa fa-paypal' />
+                        Continue to PayPal
+                      </Button>
+                      <div className='spacer' />
+                      <img
+                        alt='An array of credit cards'
+                        border='0'
+                        src='http://i.imgur.com/Q2SdSZG.png'
+                        style={{
+                          width: '100%'
+                        }} />
+                    </form>
+                  </Col>
+                </Row>
+                <div className='spacer' />
               </Panel>
             </Col>
           </Row>