remove font-awesome, fix build, animated sync

.gitignore

@@ -1,2 +1,2 @@
-node_modules/
-bundle.js
+/node_modules/
+/dist/

package.json

@@ -28,7 +28,6 @@
   },
   "dependencies": {
     "bootstrap": "^3.3.4",
-    "font-awesome": "^4.3.0",
     "gfm-linkify": "^0.1.0",
     "moment": "2.10.3",
     "octicons": "git://github.com/github/octicons#v3.1.0",

src/components/dashboard.jsx

@@ -202,7 +202,12 @@ const DashboardShell = React.createClass({
       fetchAll(Client.getOcto().user.repos.fetch)
       .then((allRepos) => this.setState({repos: allRepos}))
       .then(null, () => this.setState({repos: []}));
-      myRepos = 'Loading...';
+      myRepos = (
+        <span className='custom-loading'>
+          <i className='octicon octicon-sync spin'/>
+          {' Loading List of Repositories...'}
+        </span>
+      );
     }
 
     const examplesHeader = (

src/components/issue.jsx

@@ -204,7 +204,7 @@ let Issue = React.createClass({
           placement='bottom'
           overlay={taskListPopover}>
           <span className='task-list-overview'>
-            <i className='fa fa-check-square-o'/>
+            <i className='octicon octicon-checklist'/>
             {taskFinishedCount}/{taskTotalCount}
           </span>
         </BS.OverlayTrigger>

src/components/loadable.jsx

@@ -13,7 +13,6 @@ export default React.createClass({
   },
   getDefaultProps() {
     return {
-      renderLoading: () => <span className='loadable is-loading'>Loading...</span>,
       renderError: () => <div className='loadable is-error'>Error Loading. Is the repo URL correct? are you connected to the internet? Are you logged in?</div>
     };
   },
@@ -37,9 +36,17 @@ export default React.createClass({
       this.setState({status: STATUS.ERROR, value});
     }
   },
+  renderLoading() {
+    const {loadingText} = this.props;
+    return (
+      <span className='loadable is-loading'><i className='octicon octicon-sync spin'/>{' ' + (loadingText || 'Loading...')}</span>
+    )
+  },
   render() {
     const {status, value} = this.state;
-    const {renderLoading, renderLoaded, renderError} = this.props;
+    let {renderLoading, renderLoaded, renderError} = this.props;
+
+    renderLoading = renderLoading || this.renderLoading;
 
     if (status === STATUS.INITIAL) {
       return renderLoading();

src/components/repo-kanban.jsx

@@ -235,6 +235,7 @@ const Repos = React.createClass({
     return (
       <Loadable key="${repoOwner}/${repoNames}"
         promise={Promise.all([labelsPromise, cardsPromise])}
+        loadingText='Loading GitHub Issues and Pull Requests...'
         renderLoaded={this.renderKanbanRepos(primaryRepoName)}
         renderError={() => (<span>Problem loading. Is it a valid repo? And have you exceeded your number of requests? Usually happens when not logged in because GitHub limits anonymous use of their API.</span>)}
       />

style/app.less

@@ -1,4 +1,3 @@
-@import '../node_modules/font-awesome/css/font-awesome.css';
 @import '../node_modules/octicons/octicons/octicons.css';
 
 .user-select(@type) {
@@ -189,7 +188,7 @@ body { background-color: #f3f3f3; }
             // The little `[4/5]` section
             .task-list-overview {
               cursor: pointer;
-              font-size: 1.2rem;
+              font-size: 1.5rem;
               color: #ccc;
               vertical-align: middle;
               padding: 0 2rem;
@@ -209,10 +208,6 @@ body { background-color: #f3f3f3; }
             }
 
             .avatar-image { cursor: pointer; }
-            // TODO: Remove dependence on octicon class name
-            /* Override the font size in .octicon */
-            .octicon { font-size: 100%; }
-
           }
 
 
@@ -393,6 +388,32 @@ body { background-color: #f3f3f3; }
   cursor: default;
 }
 
+
+@-webkit-keyframes icon-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes icon-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+i.spin {
+  -webkit-animation: icon-spin 2s infinite linear;
+  animation: icon-spin 2s infinite linear;
+}
+
 @media (min-width: 992px) {
   .kanban-board[data-column-count="1"] .kanban-board-column {
     width: 70%;

webpack.config.js

@@ -17,7 +17,7 @@ var config = {
       './src/index.js'
     ],
     output: {
-        path: './dist',
+        path: __dirname + '/dist',
         publicPath: '/dist/',
         filename: 'bundle.js'
     },