Finish up hikes

client/less/lib/bootstrap/variables.less

@@ -144,9 +144,9 @@
 
 @btn-font-weight:                normal;
 
-@btn-default-color:              @gray-lighter;
-@btn-default-bg:                 @gray-lighter;
-@btn-default-border:             #ccc;
+@btn-default-color:              #000000;
+@btn-default-bg:                 @body-bg;
+@btn-default-border:             #000000;
 
 @btn-primary-color:              @brand-primary;
 @btn-primary-bg:                 @brand-primary;

common/app/routes/Hikes/components/Hike.jsx

@@ -1,10 +1,6 @@
 import React, { PropTypes } from 'react';
 import { contain } from 'thundercats-react';
-import {
-  Col,
-  Panel,
-  Row
-} from 'react-bootstrap';
+import { Col, Row } from 'react-bootstrap';
 
 import Lecture from './Lecture.jsx';
 import Questions from './Questions.jsx';
@@ -46,17 +42,19 @@ export default contain(
         showQuestions
       } = this.props;
 
-      const videoTitle = <h4>{ title }</h4>;
-
       return (
         <Col xs={ 12 }>
           <Row>
-            <Panel
+            <header className='text-center'>
+              <h4>{ title }</h4>
+            </header>
+            <hr />
+            <div className='spacer' />
+            <section
               className={ 'text-center' }
-              header={ videoTitle }
               title={ title }>
               { this.renderBody(showQuestions) }
-            </Panel>
+            </section>
           </Row>
         </Col>
       );

common/app/routes/Hikes/components/Lecture.jsx

@@ -77,10 +77,13 @@ export default contain(
               videoId={ id } />
           </Row>
           <Row>
-            { this.renderTranscript(description, dashedName) }
+            <article>
+              { this.renderTranscript(description, dashedName) }
+            </article>
             <Button
               block={ true }
               bsSize='large'
+              bsStyle='primary'
               onClick={ () => this.handleFinish(hikesActions) }>
               Take me to the Questions
             </Button>

common/app/routes/Hikes/components/Map.jsx

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import { Link } from 'react-router';
-import { ListGroup, ListGroupItem, Panel } from 'react-bootstrap';
+import { ListGroup, ListGroupItem } from 'react-bootstrap';
 
 export default React.createClass({
   displayName: 'HikesMap',
@@ -26,9 +26,10 @@ export default React.createClass({
 
     return (
       <div>
-        <Panel>
+        <div className='text-center'>
           <h2>Welcome To Hikes!</h2>
-        </Panel>
+        </div>
+        <hr />
         <ListGroup>
           { vidElements }
         </ListGroup>

common/app/routes/Hikes/components/Questions.jsx

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import { spring, Motion } from 'react-motion';
 import { contain } from 'thundercats-react';
-import { Button, Col, Panel, Row } from 'react-bootstrap';
+import { Button, Col, Row } from 'react-bootstrap';
 
 const answerThreshold = 100;
 
@@ -107,11 +107,9 @@ export default contain(
           WebkitTransform: `translate3d(${ x }px, 0, 0)`,
           transform: `translate3d(${ x }px, 0, 0)`
         };
-        const title = <h4>Question { number }</h4>;
         return (
-          <Panel
+          <article
             className={ shake ? 'animated swing shake' : '' }
-            header={ title }
             onMouseDown={ hikesActions.grabQuestion }
             onMouseLeave={ mouseUp }
             onMouseMove={ this.handleMouseMove }
@@ -120,8 +118,9 @@ export default contain(
             onTouchMove={ this.handleMouseMove }
             onTouchStart={ hikesActions.grabQuestion }
             style={ style }>
+            <h4>Question { number }</h4>
             <p>{ question }</p>
-          </Panel>
+          </article>
         );
       };
     },
@@ -152,20 +151,24 @@ export default contain(
             <Motion style={{ x: spring(x, [120, 10]) }}>
               { questionElement }
             </Motion>
-            <Panel>
+            <div className='spacer' />
+            <hr />
+            <div>
               <Button
                 bsSize='large'
+                bsStyle='primary'
                 className='pull-left'
                 onClick={ this.onAnswer(answer, false, info) }>
                 false
               </Button>
               <Button
                 bsSize='large'
+                bsStyle='primary'
                 className='pull-right'
                 onClick={ this.onAnswer(answer, true, info) }>
                 true
               </Button>
-            </Panel>
+            </div>
           </Row>
         </Col>
       );