add last minute tweaks found while writing docs

imports/ui/components/Icon/Icon.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Icon = ({ icon }) => (<i className={`fa fa-${icon}`} />);
+
+Icon.propTypes = {
+  icon: PropTypes.string.isRequired,
+};
+
+export default Icon;

imports/ui/components/InputHint/InputHint.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import './InputHint.css';
+import './InputHint.scss';
 
 const InputHint = ({ children }) => (
   <div className="InputHint">

imports/ui/components/OAuthLoginButton/OAuthLoginButton.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
+import Icon from '../Icon/Icon';
 
 import './OAuthLoginButton.scss';
 
@@ -30,9 +31,9 @@ const handleLogin = (service, callback) => {
 };
 
 const serviceLabel = {
-  facebook: <span><i className="fa fa-facebook" /> Log In with Facebook</span>,
-  github: <span><i className="fa fa-github" /> Log In with GitHub</span>,
-  google: <span><i className="fa fa-google" /> Log In with Google</span>,
+  facebook: <span><Icon icon="facebook-official" /> Log In with Facebook</span>,
+  github: <span><Icon icon="github" /> Log In with GitHub</span>,
+  google: <span><Icon icon="google" /> Log In with Google</span>,
 };
 
 const OAuthLoginButton = ({ service, callback }) => (

imports/ui/layouts/App/App.js

@@ -23,6 +23,7 @@ import NotFound from '../../pages/NotFound/NotFound';
 import Footer from '../../components/Footer/Footer';
 import Terms from '../../pages/Terms/Terms';
 import Privacy from '../../pages/Privacy/Privacy';
+import ExamplePage from '../../pages/ExamplePage/ExamplePage';
 
 import './App.scss';
 
@@ -45,6 +46,7 @@ const App = props => (
           <Route name="reset-password" path="/reset-password/:token" component={ResetPassword} />
           <Route name="terms" path="/terms" component={Terms} />
           <Route name="privacy" path="/privacy" component={Privacy} />
+          <Route name="examplePage" path="/example-page" component={ExamplePage} />
           <Route component={NotFound} />
         </Switch>
       </Grid>

imports/ui/pages/ExamplePage/ExamplePage.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Page from '../Page/Page';
+
+const ExamplePage = () => (
+  <div className="ExamplePage">
+    <Page
+      title="My Example Page"
+      subtitle="A subtitle for my example page."
+      page="example-page"
+    />
+  </div>
+);
+
+export default ExamplePage;

imports/ui/pages/Logout/Logout.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Icon from '../../components/Icon/Icon';
 
 import './Logout.scss';
 
@@ -11,9 +12,9 @@ const Logout = () => (
     <h1>Stay safe out there.</h1>
     <p>{'Don\'t forget to like and follow Clever Beagle elsewhere on the web:'}</p>
     <ul className="FollowUsElsewhere">
-      <li><a href="https://facebook.com/cleverbeagle"><i className="fa fa-facebook-official" /></a></li>
-      <li><a href="https://twitter.com/clvrbgl"><i className="fa fa-twitter" /></a></li>
-      <li><a href="https://github.com/cleverbeagle"><i className="fa fa-github" /></a></li>
+      <li><a href="https://facebook.com/cleverbeagle"><Icon icon="facebook-official" /></a></li>
+      <li><a href="https://twitter.com/clvrbgl"><Icon icon="twitter" /></a></li>
+      <li><a href="https://github.com/cleverbeagle"><Icon icon="github" /></a></li>
     </ul>
   </div>
 );