Styling loading indicator, removing unused routes, adding "getting started" explanation

Also, only update relative time every minute instead of 6 seconds. My bad

app/assets/javascripts/components/components/loading_indicator.jsx

@@ -0,0 +1,13 @@
+const LoadingIndicator = () => {
+  const style = {
+    textAlign: 'center',
+    fontSize: '16px',
+    fontWeight: '500',
+    color: '#616b86',
+    paddingTop: '120px'
+  };
+
+  return <div style={style}>Loading...</div>;
+};
+
+export default LoadingIndicator;

app/assets/javascripts/components/components/relative_timestamp.jsx

@@ -35,7 +35,7 @@ const RelativeTimestamp = React.createClass({
 
   componentWillMount () {
     this._updateMomentText();
-    this.interval = setInterval(this._updateMomentText, 6000);
+    this.interval = setInterval(this._updateMomentText, 60000);
   },
 
   componentWillUnmount () {

app/assets/javascripts/components/containers/mastodon.jsx

@@ -9,11 +9,15 @@ import {
 import { setAccessToken } from '../actions/meta';
 import { setAccountSelf } from '../actions/accounts';
 import PureRenderMixin    from 'react-addons-pure-render-mixin';
-import { Router, Route, hashHistory } from 'react-router';
+import {
+  Router,
+  Route,
+  hashHistory,
+  IndexRoute
+}                         from 'react-router';
 import Account            from '../features/account';
-import Settings                       from '../features/settings';
 import Status             from '../features/status';
-import Subscriptions                  from '../features/subscriptions';
+import GettingStarted     from '../features/getting_started';
 import UI                 from '../features/ui';
 
 const store = configureStore();
@@ -70,8 +74,7 @@ const Mastodon = React.createClass({
       <Provider store={store}>
         <Router history={hashHistory}>
           <Route path='/' component={UI}>
-            <Route path='/settings' component={Settings} />
-            <Route path='/subscriptions' component={Subscriptions} />
+            <IndexRoute component={GettingStarted} />
             <Route path='/statuses/:statusId' component={Status} />
             <Route path='/accounts/:accountId' component={Account} />
           </Route>

app/assets/javascripts/components/features/account/index.jsx

@@ -24,6 +24,7 @@ import {
   selectAccount
 }                            from '../../reducers/timelines';
 import StatusList            from '../../components/status_list';
+import LoadingIndicator      from '../../components/loading_indicator';
 import Immutable             from 'immutable';
 import ActionBar             from './components/action_bar';
 
@@ -108,7 +109,7 @@ const Account = React.createClass({
     const { account, statuses, me } = this.props;
 
     if (account === null) {
-      return <div>Loading {this.props.params.accountId}...</div>;
+      return <LoadingIndicator />;
     }
 
     return (

app/assets/javascripts/components/features/getting_started/index.jsx

@@ -0,0 +1,13 @@
+const GettingStarted = () => {
+  return (
+    <div className='static-content'>
+      <h1>Getting started</h1>
+      <p>Mastodon is still in development and one of the lacking areas at the moment is user discovery.</p>
+      <p>You can follow people if you know their username and the domain they are on by entering an e-mail-esque address into the form in the bottom of the sidebar.</p>
+      <p>If the target user is on the same domain as you, just the username will work. The same rule applies to mentioning people in statuses.</p>
+      <p>The developer of this project can be followed as Gargron@mastodon.social</p>
+    </div>
+  );
+};
+
+export default GettingStarted;

app/assets/javascripts/components/features/settings/index.jsx

@@ -1,28 +0,0 @@
-import { connect }        from 'react-redux';
-import PureRenderMixin    from 'react-addons-pure-render-mixin';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-const mapStateToProps = (state, props) => ({
-
-});
-
-const Settings = React.createClass({
-
-  propTypes: {
-    params: React.PropTypes.object.isRequired,
-    dispatch: React.PropTypes.func.isRequired
-  },
-
-  mixins: [PureRenderMixin],
-
-  componentWillMount () {
-    //
-  },
-
-  render () {
-    return <div>Settings</div>;
-  }
-
-});
-
-export default connect(mapStateToProps)(Settings);

app/assets/javascripts/components/features/status/index.jsx

@@ -4,6 +4,7 @@ import ImmutablePropTypes    from 'react-immutable-proptypes';
 import { fetchStatus }       from '../../actions/statuses';
 import Immutable             from 'immutable';
 import EmbeddedStatus        from '../../components/status';
+import LoadingIndicator      from '../../components/loading_indicator';
 import DetailedStatus        from './components/detailed_status';
 import ActionBar             from './components/action_bar';
 import { favourite, reblog } from '../../actions/interactions';
@@ -63,7 +64,7 @@ const Status = React.createClass({
     const { status, ancestors, descendants, me } = this.props;
 
     if (status === null) {
-      return <div>Loading {this.props.params.statusId}...</div>;
+      return <LoadingIndicator />;
     }
 
     const account = status.get('account');

app/assets/javascripts/components/features/subscriptions/index.jsx

@@ -1,28 +0,0 @@
-import { connect }        from 'react-redux';
-import PureRenderMixin    from 'react-addons-pure-render-mixin';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-const mapStateToProps = (state, props) => ({
-
-});
-
-const Subscriptions = React.createClass({
-
-  propTypes: {
-    params: React.PropTypes.object.isRequired,
-    dispatch: React.PropTypes.func.isRequired
-  },
-
-  mixins: [PureRenderMixin],
-
-  componentWillMount () {
-    //
-  },
-
-  render () {
-    return <div>Subscriptions</div>;
-  }
-
-});
-
-export default connect(mapStateToProps)(Subscriptions);

app/assets/stylesheets/components.scss

@@ -209,3 +209,21 @@
     }
   }
 }
+
+.static-content {
+  padding: 10px;
+  padding-top: 20px;
+  color: #616b86;
+
+  h1 {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 40px;
+    text-align: center;
+  }
+
+  p {
+    font-size: 13px;
+    margin-bottom: 20px;
+  }
+}