From d0e905e5ef56d5ead4cbdfdb3fe8281964a8ba03 Mon Sep 17 00:00:00 2001
From: Enrico Fasoli <enrico.fasoli1996@gmail.com>
Date: Mon, 20 Jun 2016 18:07:11 +0200
Subject: [PATCH] style changes

---
 lib/boards-api.js                       | 44 ++++++++++----------
 webapp/app.jsx                          | 54 ++++++++++++-------------
 webapp/components/clock.jsx             |  4 +-
 webapp/components/comment.jsx           | 32 +++++++--------
 webapp/components/navbar.jsx            | 26 ++++++------
 webapp/components/post.jsx              | 24 +++++------
 webapp/components/postlist.jsx          | 10 ++---
 webapp/components/status-components.jsx | 26 ++++++------
 webapp/components/userID.jsx            | 10 ++---
 webapp/pages/backup.jsx                 | 22 +++++-----
 webapp/pages/board-editor.jsx           | 36 ++++++++---------
 webapp/pages/board.jsx                  | 16 ++++----
 webapp/pages/commentpage.jsx            | 10 ++---
 webapp/pages/getipfs.jsx                | 26 ++++++------
 webapp/pages/post-editor.jsx            | 36 ++++++++---------
 webapp/pages/postpage.jsx               |  6 +--
 webapp/pages/profile-editor.jsx         | 32 +++++++--------
 webapp/pages/profile.jsx                | 16 ++++----
 webapp/pages/settings.jsx               | 36 ++++++++---------
 webapp/pages/update.jsx                 | 12 +++---
 webapp/pages/users.jsx                  |  2 +-
 21 files changed, 240 insertions(+), 240 deletions(-)

diff --git a/lib/boards-api.js b/lib/boards-api.js
index a7f13e0..e019871 100644
--- a/lib/boards-api.js
+++ b/lib/boards-api.js
@@ -103,7 +103,7 @@ BoardsAPI.prototype.restoreProfileFromIPFS = function (hash, done) {
 BoardsAPI.prototype.createProfile = function (profile, done) {
   console.log('Generating profile:', profile)
   try {
-    var profile_str = JSON.stringify(profile)
+    var profileStr = JSON.stringify(profile)
   } catch (e) {
     console.log('Error, invalid profile:', e)
     return done(e)
@@ -124,12 +124,12 @@ BoardsAPI.prototype.createProfile = function (profile, done) {
     cb => {
       // Add profile version file
       var path = '/ipfs-boards-profile/ipfs-boards-version.txt'
-      var version_hash = '/ipfs/' + this.version_hash
-      this.ipfs.files.cp([version_hash, path], cb)
+      var versionHash = '/ipfs/' + this.versionHash
+      this.ipfs.files.cp([versionHash, path], cb)
     },
     (e, cb) => {
       // Serialize profile and add to IPFS
-      this.ipfs.add(new Buffer(profile_str), cb)
+      this.ipfs.add(new Buffer(profileStr), cb)
     },
     (res, cb) => {
       // Move profile into mfs
@@ -139,9 +139,9 @@ BoardsAPI.prototype.createProfile = function (profile, done) {
     },
     (e, cb) => this.ipfs.files.stat('/', cb),
     (res, cb) => {
-      var profile_hash = res.Hash
+      var profileHash = res.Hash
       console.log('Publishing profile...')
-      this.ipfs.name.publish(profile_hash, cb)
+      this.ipfs.name.publish(profileHash, cb)
     }
   ], done)
 }
@@ -149,7 +149,7 @@ BoardsAPI.prototype.createProfile = function (profile, done) {
 BoardsAPI.prototype.createBoard = function (board, done) {
   console.log('Generating board:', board)
   try {
-    var settings_str = JSON.stringify(board)
+    var settingsStr = JSON.stringify(board)
   } catch (e) {
     console.log('Error, invalid Board Settings:', e)
     return done(e)
@@ -164,7 +164,7 @@ BoardsAPI.prototype.createBoard = function (board, done) {
     },
     (cb) => {
       // Serialize Board Settings and add to IPFS
-      this.ipfs.add(new Buffer(settings_str), cb)
+      this.ipfs.add(new Buffer(settingsStr), cb)
     },
     (res, cb) => {
       // Move Board into mfs
@@ -174,9 +174,9 @@ BoardsAPI.prototype.createBoard = function (board, done) {
     },
     (e, cb) => this.ipfs.files.stat('/', cb),
     (res, cb) => {
-      var profile_hash = res.Hash
+      var profileHash = res.Hash
       console.log('Publishing profile...')
-      this.ipfs.name.publish(profile_hash, cb)
+      this.ipfs.name.publish(profileHash, cb)
     }
   ], done)
 }
@@ -185,7 +185,7 @@ BoardsAPI.prototype.createPost = function (post, board, done) {
   try {
     post.date = parseInt((new Date()).getTime() / 1000, 10)
     post.op = this.id
-    var post_str = JSON.stringify(post)
+    var postStr = JSON.stringify(post)
   } catch (e) {
     console.log('Error, invalid Post:', e)
     return done(e)
@@ -203,7 +203,7 @@ BoardsAPI.prototype.createPost = function (post, board, done) {
     },
     (cb) => {
       // Serialize post and add to IPFS
-      this.ipfs.add(new Buffer(post_str), cb)
+      this.ipfs.add(new Buffer(postStr), cb)
     },
     (res, cb) => {
       // Move post into mfs
@@ -214,9 +214,9 @@ BoardsAPI.prototype.createPost = function (post, board, done) {
     },
     (e, cb) => this.ipfs.files.stat('/', cb),
     (res, cb) => {
-      var profile_hash = res.Hash
+      var profileHash = res.Hash
       console.log('Publishing profile...')
-      this.ipfs.name.publish(profile_hash, err => {
+      this.ipfs.name.publish(profileHash, err => {
         done(err, posthash)
       })
     }
@@ -227,7 +227,7 @@ BoardsAPI.prototype.createComment = function (comment, parent, done) {
     comment.date = parseInt((new Date()).getTime() / 1000, 10)
     comment.op = this.id
     comment.parent = parent
-    var comment_str = JSON.stringify(comment)
+    var commentStr = JSON.stringify(comment)
   } catch (e) {
     console.log('Error, invalid Post:', e)
     return done(e)
@@ -245,7 +245,7 @@ BoardsAPI.prototype.createComment = function (comment, parent, done) {
     },
     (cb) => {
       // Serialize comment and add to IPFS
-      this.ipfs.add(new Buffer(comment_str), cb)
+      this.ipfs.add(new Buffer(commentStr), cb)
     },
     (res, cb) => {
       // Move post into mfs
@@ -256,9 +256,9 @@ BoardsAPI.prototype.createComment = function (comment, parent, done) {
     },
     (e, cb) => this.ipfs.files.stat('/', cb),
     (res, cb) => {
-      var profile_hash = res.Hash
+      var profileHash = res.Hash
       console.log('Publishing profile...')
-      this.ipfs.name.publish(profile_hash, err => {
+      this.ipfs.name.publish(profileHash, err => {
         done(err, commenthash)
       })
     }
@@ -461,7 +461,7 @@ BoardsAPI.prototype.searchUsers = function () {
   })
   // Look for who has the correct version file, they probably have a profile
   /*
-  this.ipfs.dht.findprovs(this.version_hash, (err,res) => {
+  this.ipfs.dht.findprovs(this.versionHash, (err,res) => {
     if(err){
       console.log('DHT FINDPROVS err',err)
     } else if(res.readable){
@@ -860,9 +860,9 @@ BoardsAPI.prototype.init = function (done) {
                 this.ee.emit('init', err2, this.limited)
                 if (done && done.apply) done(err2)
               } else {
-                if (r && r.Hash) this.version_hash = r.Hash
-                if (r && r[0] && r[0].Hash) this.version_hash = r[0].Hash
-                console.log('Version hash is', this.version_hash)
+                if (r && r.Hash) this.versionHash = r.Hash
+                if (r && r[0] && r[0].Hash) this.versionHash = r[0].Hash
+                console.log('Version hash is', this.versionHash)
                 // DONE!
                 this.ee.emit('init', undefined)
                 this.isInit = true
diff --git a/webapp/app.jsx b/webapp/app.jsx
index 5debf6e..ac62d41 100644
--- a/webapp/app.jsx
+++ b/webapp/app.jsx
@@ -41,7 +41,7 @@ require.ensure('react', _ => {
 
   var Container = React.createClass({
     render () {
-      return (<div className="container app">{this.props.children}</div>)
+      return (<div className='container app'>{this.props.children}</div>)
     }
   })
 
@@ -68,14 +68,14 @@ require.ensure('react', _ => {
 
   var Homepage = React.createClass({
     render () {
-      return <Static className="homepage" content={require('landing.md')} />
+      return <Static className='homepage' content={require('landing.md')} />
     }
   })
 
   var NotFound = React.createClass({
     render () {
-      return (<div className="text-center">
-        <h1><Icon name="ban" className="light"/></h1>
+      return (<div className='text-center'>
+        <h1><Icon name='ban' className='light'/></h1>
         <h3>Sorry, there's nothing here!</h3>
       </div>)
     }
@@ -96,44 +96,44 @@ require.ensure('react', _ => {
         var IndexRoute = this.state.IndexRoute
         var Route = this.state.Route
         return <Router>
-          <Route path="/" component={App}>
+          <Route path='/' component={App}>
             <IndexRoute component={Homepage} />
-            <Route path="/@:userid">
+            <Route path='/@:userid'>
               <IndexRoute component={Profile} />
-              <Route path="post/:posthash" >
+              <Route path='post/:posthash' >
                 <IndexRoute component={PostPage} />
               </Route>
-              <Route path=":boardname">
+              <Route path=':boardname'>
                 <IndexRoute component={Board} />
-                <Route path=":posthash">
+                <Route path=':posthash'>
                   <IndexRoute component={PostPage} />
-                  <Route path=":commenthash" component={CommentPage} />
+                  <Route path=':commenthash' component={CommentPage} />
                 </Route>
               </Route>
             </Route>
-            <Route path="edit">
-              <Route path="profile" component={ProfileEditor} />
-              <Route path="board(/:boardname)">
+            <Route path='edit'>
+              <Route path='profile' component={ProfileEditor} />
+              <Route path='board(/:boardname)'>
                 <IndexRoute component={BoardEditor} />
-                <Route path="post(/:posthash)" component={PostEditor} />
+                <Route path='post(/:posthash)' component={PostEditor} />
               </Route>
             </Route>
-            <Route path="post/:posthash" component={PostPage} />
-            <Route path="board/:boardname" component={Board} />
-            <Route path="users" component={Users} />
-            <Route path="settings" component={Settings} />
-            <Route path="status" component={Status} />
-            <Route path="version" component={Update} />
-            <Route path="backup" component={Backup} />
-            <Route path="restore" component={Backup} />
-            <Route path="*" component={NotFound} />
+            <Route path='post/:posthash' component={PostPage} />
+            <Route path='board/:boardname' component={Board} />
+            <Route path='users' component={Users} />
+            <Route path='settings' component={Settings} />
+            <Route path='status' component={Status} />
+            <Route path='version' component={Update} />
+            <Route path='backup' component={Backup} />
+            <Route path='restore' component={Backup} />
+            <Route path='*' component={NotFound} />
           </Route>
         </Router>
       } else {
-        return <div className="loading" style={{ marginTop: '2rem' }} >
-          <div className="text-center">
-            <Icon className="center-block fa-spin fa-3x light" name="refresh" />
-            <h4 className="top-half-em">Downloading Components</h4>
+        return <div className='loading' style={{ marginTop: '2rem' }} >
+          <div className='text-center'>
+            <Icon className='center-block fa-spin fa-3x light' name='refresh' />
+            <h4 className='top-half-em'>Downloading Components</h4>
           </div>
         </div>
       }
diff --git a/webapp/components/clock.jsx b/webapp/components/clock.jsx
index 6dfa93c..1f902e7 100644
--- a/webapp/components/clock.jsx
+++ b/webapp/components/clock.jsx
@@ -28,10 +28,10 @@ module.exports = React.createClass({
     if (this.state.moment) {
       return this.state.text
     } else {
-      return <Icon name="refresh" className="fa-spin" />
+      return <Icon name='refresh' className='fa-spin' />
     }
   },
   render: function () {
-    return <div className="inline"><Icon name="clock-o" className={this.props.className} /> {this.getDate()}</div>
+    return <div className='inline'><Icon name='clock-o' className={this.props.className} /> {this.getDate()}</div>
   }
 })
diff --git a/webapp/components/comment.jsx b/webapp/components/comment.jsx
index 675337c..ce55ed8 100644
--- a/webapp/components/comment.jsx
+++ b/webapp/components/comment.jsx
@@ -40,21 +40,21 @@ var CommentEditor = React.createClass({
     if (this.state.error) {
       return <Error error={this.state.error} />
     } else if (this.state.loading) {
-      return <div className="center-block text-center find-content">
-        <Icon name="refresh" className="fa-3x center-block light fa-spin" />
+      return <div className='center-block text-center find-content'>
+        <Icon name='refresh' className='fa-3x center-block light fa-spin' />
         <h4>Publishing Comment</h4>
       </div>
     } else if (this.state.success) {
       var url = '/@' + this.props.adminID + '/' + this.props.board + '/' + (this.props.post || this.props.parent) + '/' + this.state.hash
-      return <Success title="Comment Published">
-        <Link className="button button-primary" to={url}>View</Link>
+      return <Success title='Comment Published'>
+        <Link className='button button-primary' to={url}>View</Link>
       </Success>
     } else {
       return <div>
-        <textarea className="u-full-width" id="text" value={this.state.text} onChange={this.handleChange} placeholder="Speak your mind! Markdown is supported." />
+        <textarea className='u-full-width' id='text' value={this.state.text} onChange={this.handleChange} placeholder='Speak your mind! Markdown is supported.' />
         <p><b>Note</b>: this version of the app doesn't check wether you are allowed to post on this board, so there are no guarantees that your post will be visible.</p>
-        <div className="buttons">
-          <button className="button button-primary" onClick={this.save}>Send</button>
+        <div className='buttons'>
+          <button className='button button-primary' onClick={this.save}>Send</button>
         </div>
       </div>
     }
@@ -72,33 +72,33 @@ var Comment = React.createClass({
   },
   getPermalink () {
     if (this.props.adminID && this.props.board && this.props.post && this.props.comment.hash) {
-      return <div className="inline not-first">
-        <Icon name="code" /> <Link to={'/@' + this.props.adminID + '/' + this.props.board + '/' + this.props.post + '/' + this.props.comment.hash}>Permalink</Link>
+      return <div className='inline not-first'>
+        <Icon name='code' /> <Link to={'/@' + this.props.adminID + '/' + this.props.board + '/' + this.props.post + '/' + this.props.comment.hash}>Permalink</Link>
       </div>
     }
   },
   getParentlink () {
     if (this.props.showParent && this.props.comment.parent) {
-      return <div className="inline not-first">
-        <Icon name="level-up" /> <Link to={'/@' + this.props.adminID + '/' + this.props.board + '/' + this.props.post + '/' + this.props.comment.parent}>Parent</Link>
+      return <div className='inline not-first'>
+        <Icon name='level-up' /> <Link to={'/@' + this.props.adminID + '/' + this.props.board + '/' + this.props.post + '/' + this.props.comment.parent}>Parent</Link>
       </div>
     }
   },
   getComments () {
-    return <Comments className="shifted" allowReply={this.props.allowReply} parent={this.props.comment.hash} post={this.props.post} adminID={this.props.adminID} board={this.props.board} api={this.props.api} />
+    return <Comments className='shifted' allowReply={this.props.allowReply} parent={this.props.comment.hash} post={this.props.post} adminID={this.props.adminID} board={this.props.board} api={this.props.api} />
   },
   toggleReply () {
     this.setState({ reply: !this.state.reply })
   },
   render () {
     if (this.props.comment) {
-      return <div className="comment"><hr/>
-        <div className="icons">
+      return <div className='comment'><hr/>
+        <div className='icons'>
           <UserID id={this.props.comment.op} api={this.props.api} />
           <Clock date={this.props.comment.date} />
           {this.getPermalink()}
           { this.props.allowReply
-          ? <a className="nounderline" onClick={this.toggleReply}><Icon className="not-first" name="reply" /> Reply</a>
+          ? <a className='nounderline' onClick={this.toggleReply}><Icon className='not-first' name='reply' /> Reply</a>
           : <a/> }
           {this.getParentlink()}
         </div>
@@ -146,7 +146,7 @@ var Comments = React.createClass({
   },
   render () {
     if (this.state.limited) {
-      return <div className="text-center">
+      return <div className='text-center'>
         <p>Comments can't be displayed in limited mode</p>
       </div>
     } else {
diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx
index b0e1e2a..7669f5e 100644
--- a/webapp/components/navbar.jsx
+++ b/webapp/components/navbar.jsx
@@ -18,8 +18,8 @@ var Updater = React.createClass({
   },
   render () {
     if (this.state.update) {
-      return <Link className="nounderline" to='/version' >
-        <Icon name="history" className="fa-2x light" />
+      return <Link className='nounderline' to='/version' >
+        <Icon name='history' className='fa-2x light' />
       </Link>
     } else return <div></div>
   }
@@ -46,27 +46,27 @@ module.exports = function (boardsAPI) {
     extraButtons: function () {
       if (this.state.api) {
         return <span>
-            <Link className="nounderline" to={'/@' + this.state.userid}><Icon name="user" className="fa-2x light"/></Link>
-            <Link className="nounderline" to="/users"><Icon name="globe" className="fa-2x light"/></Link>
+            <Link className='nounderline' to={'/@' + this.state.userid}><Icon name='user' className='fa-2x light'/></Link>
+            <Link className='nounderline' to='/users'><Icon name='globe' className='fa-2x light'/></Link>
           </span>
       } else if (this.state.loading) {
-        return <Link className="nounderline" to="/status"><Icon name="refresh" className="fa-2x fa-spin light"/></Link>
+        return <Link className='nounderline' to='/status'><Icon name='refresh' className='fa-2x fa-spin light'/></Link>
       } else if (this.state.limited) {
-        return <Link className="nounderline" to="/status"><Icon name="exclamation-triangle" className="fa-2x light"/></Link>
+        return <Link className='nounderline' to='/status'><Icon name='exclamation-triangle' className='fa-2x light'/></Link>
       } else {
-        return <Link className="nounderline" to="/status"><Icon name="ban" className="fa-2x light"/></Link>
+        return <Link className='nounderline' to='/status'><Icon name='ban' className='fa-2x light'/></Link>
       }
     },
     render: function () {
       return (
-        <div className="navbar">
-          <div className="container">
-            <h4><Link to="/"><Icon name="comments" className="light"/> Boards</Link></h4>
-            <div className="u-pull-right iconbar">
+        <div className='navbar'>
+          <div className='container'>
+            <h4><Link to='/'><Icon name='comments' className='light'/> Boards</Link></h4>
+            <div className='u-pull-right iconbar'>
               <Updater/>
               {this.extraButtons()}
-              <Link className="nounderline" to="/settings"><Icon name="cog" className="fa-2x light"/></Link>
-              <a className="nounderline" href="https://github.com/fazo96/ipfs-boards"><Icon name="github" className="fa-2x light"/></a>
+              <Link className='nounderline' to='/settings'><Icon name='cog' className='fa-2x light'/></Link>
+              <a className='nounderline' href='https://github.com/fazo96/ipfs-boards'><Icon name='github' className='fa-2x light'/></a>
             </div>
           </div>
         </div>)
diff --git a/webapp/components/post.jsx b/webapp/components/post.jsx
index b73ba9a..afcbcaf 100644
--- a/webapp/components/post.jsx
+++ b/webapp/components/post.jsx
@@ -46,8 +46,8 @@ module.exports = React.createClass({
       var board = this.props.board || this.state.post.board
       if (board) {
         var url = '/edit/board/' + board + '/post/' + this.props.hash
-        return <Link to={url} className="nounderline">
-          <Icon name="edit" className="not-first"/> Edit
+        return <Link to={url} className='nounderline'>
+          <Icon name='edit' className='not-first'/> Edit
         </Link>
       } else {
         return <span/>
@@ -59,27 +59,27 @@ module.exports = React.createClass({
   },
   getContent () {
     if (this.state.error) {
-      return <Error className="content" error={this.state.error} />
+      return <Error className='content' error={this.state.error} />
     } else if (this.state.loading) {
-      return <div className="text-center">
-        <div className="center-block" style={{marginTop: '1em'}}>
-          <Icon className="center-block fa-spin fa-2x light" name="refresh" />
+      return <div className='text-center'>
+        <div className='center-block' style={{marginTop: '1em'}}>
+          <Icon className='center-block fa-spin fa-2x light' name='refresh' />
         </div>
         <h5>Downloading Post</h5>
       </div>
     } else {
-      return <div className="content">
+      return <div className='content'>
         { this.state.post.title
           ? <div><h5>{this.state.post.title}</h5><hr/></div>
           : <div />
         }
         <Markdown source={this.state.post.text} /><hr/>
-        <div className="icons">
+        <div className='icons'>
           <UserID id={this.state.post.op} api={this.props.api} ></UserID>
-          <Clock className="not-first" date={this.state.post.date} />
-          <Icon name="comments" className="not-first" /> <Link className="nounderline" to={this.postLink()}>View</Link>
+          <Clock className='not-first' date={this.state.post.date} />
+          <Icon name='comments' className='not-first' /> <Link className='nounderline' to={this.postLink()}>View</Link>
           { this.props.allowReply
-          ? <a className="nounderline" onClick={this.toggleReply}><Icon className="not-first" name="reply" /> Reply</a>
+          ? <a className='nounderline' onClick={this.toggleReply}><Icon className='not-first' name='reply' /> Reply</a>
           : <span/>}
           {this.editorLink()}
         </div>
@@ -88,7 +88,7 @@ module.exports = React.createClass({
   },
   render () {
     return <div>
-      <div className="post">{this.getContent()}</div>
+      <div className='post'>{this.getContent()}</div>
       { this.state.reply
       ? <CommentEditor parent={this.props.hash} api={this.props.api} adminID={this.props.adminID} board={this.props.board} />
       : <div/>}
diff --git a/webapp/components/postlist.jsx b/webapp/components/postlist.jsx
index 06c1441..cdd82d6 100644
--- a/webapp/components/postlist.jsx
+++ b/webapp/components/postlist.jsx
@@ -64,19 +64,19 @@ module.exports = React.createClass({
         return <Post key={hash} board={this.props.board} admin={this.props.admin} hash={hash} api={this.props.api} />
       })
     } else {
-      return <div className="center-block text-center">
-        <Icon name="refresh" className="fa-3x center-block light fa-spin" />
+      return <div className='center-block text-center'>
+        <Icon name='refresh' className='fa-3x center-block light fa-spin' />
       </div>
     }
   },
   render () {
     if (this.state.limited) {
-      return <div className="text-center">
-        <h5 className="light"><Icon name="ban" /></h5>
+      return <div className='text-center'>
+        <h5 className='light'><Icon name='ban' /></h5>
         <p>Posts in a board can't be shown in limited mode. Sorry!</p>
       </div>
     } else {
-      return <div className="postList">
+      return <div className='postList'>
         {this.getPosts()}
       </div>
     }
diff --git a/webapp/components/status-components.jsx b/webapp/components/status-components.jsx
index 1c71c7a..c464ebb 100644
--- a/webapp/components/status-components.jsx
+++ b/webapp/components/status-components.jsx
@@ -4,9 +4,9 @@ var Icon = require('icon.jsx')
 var Error = React.createClass({
   render () {
     return <div>
-      <div className="text-center">
-        <Icon className="center-block fa-3x light" name="ban" />
-        <h4 className="top-half-em">Ooops</h4>
+      <div className='text-center'>
+        <Icon className='center-block fa-3x light' name='ban' />
+        <h4 className='top-half-em'>Ooops</h4>
         <p>{'' + this.props.error || 'Something went wrong'}</p>
         { this.props.children }
       </div>
@@ -16,10 +16,10 @@ var Error = React.createClass({
 
 var Loading = React.createClass({
   render () {
-    return <div className="loading" >
-      <div className="text-center">
-        <Icon className="center-block fa-spin fa-3x light" name="refresh" />
-        <h4 className="top-half-em">{this.props.title}</h4>
+    return <div className='loading' >
+      <div className='text-center'>
+        <Icon className='center-block fa-spin fa-3x light' name='refresh' />
+        <h4 className='top-half-em'>{this.props.title}</h4>
         { this.props.children }
       </div>
     </div>
@@ -29,9 +29,9 @@ var Loading = React.createClass({
 var Saving = React.createClass({
   render () {
     return <div>
-      <div className="text-center">
-        <Icon className="center-block fa-spin fa-3x light" name="refresh" />
-        <h4 className="top-half-em">{ this.props.title || 'Publishing' }</h4>
+      <div className='text-center'>
+        <Icon className='center-block fa-spin fa-3x light' name='refresh' />
+        <h4 className='top-half-em'>{ this.props.title || 'Publishing' }</h4>
         { this.props.children }
       </div>
     </div>
@@ -41,9 +41,9 @@ var Saving = React.createClass({
 var Success = React.createClass({
   render () {
     return <div>
-      <div className="text-center">
-        <Icon className="center-block fa-3x light" name="check" />
-        <h4 className="top-half-em">{ this.props.title || 'Done' }</h4>
+      <div className='text-center'>
+        <Icon className='center-block fa-3x light' name='check' />
+        <h4 className='top-half-em'>{ this.props.title || 'Done' }</h4>
         { this.props.children }
       </div>
     </div>
diff --git a/webapp/components/userID.jsx b/webapp/components/userID.jsx
index 1c678ed..80637eb 100644
--- a/webapp/components/userID.jsx
+++ b/webapp/components/userID.jsx
@@ -39,19 +39,19 @@ module.exports = React.createClass({
   },
   getContent () {
     if (this.state.name) {
-      return (<Icon name="user" />)
+      return (<Icon name='user' />)
     } else {
       return '@'
     }
   },
   render () {
     if (this.props.id === undefined || this.props.id === 'undefined') {
-      return <div className="user-id">
-          <Icon name="ban" /> Unknown User
+      return <div className='user-id'>
+          <Icon name='ban' /> Unknown User
         </div>
     } else {
-      return (<div className="user-id">
-        <Link className="light nounderline" to={'/@' + this.props.id}>
+      return (<div className='user-id'>
+        <Link className='light nounderline' to={'/@' + this.props.id}>
           {this.getContent()}{this.state.name || this.props.id}
         </Link>
       </div>)
diff --git a/webapp/pages/backup.jsx b/webapp/pages/backup.jsx
index 7323472..1580a34 100644
--- a/webapp/pages/backup.jsx
+++ b/webapp/pages/backup.jsx
@@ -3,10 +3,10 @@ var Icon = require('icon.jsx')
 
 module.exports = React.createClass({
   render () {
-    return <div className="thin center-block">
-      <div className="text-center">
-        <h1><Icon name="database" className="light" /></h1>
-        <h3 className="">Backup and Restore</h3>
+    return <div className='thin center-block'>
+      <div className='text-center'>
+        <h1><Icon name='database' className='light' /></h1>
+        <h3 className=''>Backup and Restore</h3>
       </div>
       <p>A user's profile is just a folder with a bunch of other files and
       folders. This makes it very easy to create backups of anyone's profile,
@@ -15,18 +15,18 @@ module.exports = React.createClass({
       add it to IPFS and then use the resulting hash to restore your profile.
       Only restoring manually is possible, because <b>I haven't implemented
       assisted restore yet</b> but that's coming soon.</p>
-      <div className="text-center">
-        <h1><Icon name="download" className="light" /></h1>
-        <h3 className="">Backing Up</h3>
+      <div className='text-center'>
+        <h1><Icon name='download' className='light' /></h1>
+        <h3 className=''>Backing Up</h3>
       </div>
       <p>Get the IPNS address of the user you want to back up. For example, while visiting
       <code>/@userid</code>, <code>userid</code> would be what you're looking for.</p>
-      <p>If you have a profile, click on the <Icon name="user"/> icon in the top bar to view your address.</p>
+      <p>If you have a profile, click on the <Icon name='user'/> icon in the top bar to view your address.</p>
       <p>Make sure you are running a full <code>go-ipfs</code> node on your machine. Then, run this command: <code>ipfs get /ipns/userid/ipfs-boards-profile/</code> where <code>userid</code> is the target user's IPNS address.</p>
       <p>A folder named <code>ipfs-boards-profile</code> will be created in the current working directory, containing the <b>full profile</b> with everything that is being published by the user. <b>It's that simple</b>.</p>
-      <div className="text-center">
-        <h1><Icon name="upload" className="light" /></h1>
-        <h3 className="">Restoring</h3>
+      <div className='text-center'>
+        <h1><Icon name='upload' className='light' /></h1>
+        <h3 className=''>Restoring</h3>
       </div>
       <p>Start the IPFS node you want to use to publish your profile.</p>
       <p>Get the IPFS hash of the <code>ipfs-boards-profile</code> folder that you want to use.</p>
diff --git a/webapp/pages/board-editor.jsx b/webapp/pages/board-editor.jsx
index efcbccc..e944f4f 100644
--- a/webapp/pages/board-editor.jsx
+++ b/webapp/pages/board-editor.jsx
@@ -72,8 +72,8 @@ module.exports = function (boardsAPI) {
       if (this.state.api && this.props.params.boardname) {
         var url = '/@' + this.state.api.getMyID() + '/' + this.props.params.boardname
         return <span>
-          <button onClick={this.refresh} className="button not-first">Refresh</button>
-          <Link to={url} className="button not-first">View</Link>
+          <button onClick={this.refresh} className='button not-first'>Refresh</button>
+          <Link to={url} className='button not-first'>View</Link>
         </span>
       } else {
         return <span></span>
@@ -83,21 +83,21 @@ module.exports = function (boardsAPI) {
       if (this.state.api) {
         if (this.state.error) {
           return <Error error={this.state.error} >
-            <button className="button button-primary center-block" onClick={this.skip}>Continue</button>
+            <button className='button button-primary center-block' onClick={this.skip}>Continue</button>
           </Error>
         } else if (this.state.loading) {
-          return <Loading title="Fetching your current Board Settings...">
-            <button className="button button-primary center-block" onClick={this.skip}>Skip</button>
+          return <Loading title='Fetching your current Board Settings...'>
+            <button className='button button-primary center-block' onClick={this.skip}>Skip</button>
           </Loading>
         } else if (this.state.updating) {
           return <Saving>
             <p>Pressing the Skip button will not abort the publish operation.</p>
-            <button className="button button-primary center-block" onClick={this.skip}>Skip</button>
+            <button className='button button-primary center-block' onClick={this.skip}>Skip</button>
           </Saving>
         } else {
           return (
-            <div className="editor">
-              <h2><Icon name="inbox" className="light" />
+            <div className='editor'>
+              <h2><Icon name='inbox' className='light' />
                 {this.props.params.boardname ? ' Board Settings' : ' New Board'}
               </h2>
               <p>This App uses IPFS to store your Boards. When you are offline,
@@ -106,24 +106,24 @@ module.exports = function (boardsAPI) {
               <p><b>Warning:</b> due to a bug in go-ipfs, it may take up to a minute
               for your changes to be visibile. Your Boards will appear unchanged during
               this time.</p>
-              <div className="row">
+              <div className='row'>
                 {this.props.params.boardname
                   ? <div></div>
-                  : <div className="six columns">
-                    <label htmlFor="shortname">ID</label>
-                    <input className="u-full-width" type="text" id="shortname" value={this.state.id} onChange={this.handleChange} placeholder="Choose a short ID." />
+                  : <div className='six columns'>
+                    <label htmlFor='shortname'>ID</label>
+                    <input className='u-full-width' type='text' id='shortname' value={this.state.id} onChange={this.handleChange} placeholder='Choose a short ID.' />
                   </div>}
                 <div className={(this.props.params.boardname ? 'twelve' : 'six') + ' columns'}>
-                  <label htmlFor="name">Title</label>
-                  <input className="u-full-width" type="text" id="name" value={this.state.name} onChange={this.handleChange} placeholder="Name your board" />
+                  <label htmlFor='name'>Title</label>
+                  <input className='u-full-width' type='text' id='name' value={this.state.name} onChange={this.handleChange} placeholder='Name your board' />
                 </div>
               </div>
               <div>
-                <label htmlFor="desc">Description</label>
-                <textarea className="u-full-width" id="desc" value={this.state.desc} onChange={this.handleChange} placeholder="What's this Board about? Markdown is supported :)" />
+                <label htmlFor='desc'>Description</label>
+                <textarea className='u-full-width' id='desc' value={this.state.desc} onChange={this.handleChange} placeholder="What's this Board about? Markdown is supported :)" />
               </div>
-              <div className="buttons">
-                <button className="button button-primary" onClick={this.save}>Publish</button>
+              <div className='buttons'>
+                <button className='button button-primary' onClick={this.save}>Publish</button>
                 {this.additionalButtons()}
               </div>
             </div>
diff --git a/webapp/pages/board.jsx b/webapp/pages/board.jsx
index 4761ae4..12e1416 100644
--- a/webapp/pages/board.jsx
+++ b/webapp/pages/board.jsx
@@ -50,28 +50,28 @@ module.exports = function (boardsAPI) {
     },
     toolbox () {
       if (this.state.limited) {
-        return <div className="text-center">Toolbox not available in limited mode<hr/></div>
+        return <div className='text-center'>Toolbox not available in limited mode<hr/></div>
       } else {
-        return <div className="iconbar text-center">
-          <Link to={'/edit/board/' + this.props.params.boardname} ><Icon name="edit" className="fa-2x light" /></Link>
-          <Link to={'/edit/board/' + this.props.params.boardname + '/post'} ><Icon name="plus" className="fa-2x light" /></Link>
+        return <div className='iconbar text-center'>
+          <Link to={'/edit/board/' + this.props.params.boardname} ><Icon name='edit' className='fa-2x light' /></Link>
+          <Link to={'/edit/board/' + this.props.params.boardname + '/post'} ><Icon name='plus' className='fa-2x light' /></Link>
         </div>
       }
     },
     render () {
       if (this.state.api) {
         if (this.state.loading) {
-          return <Loading title="Downloading Board data">
+          return <Loading title='Downloading Board data'>
             { this.props.params.userid === 'me' || this.props.params.userid === this.state.userid
-              ? <Link to={'/edit/board/' + this.props.params.boardname} className="button button-primary">Edit Board</Link>
+              ? <Link to={'/edit/board/' + this.props.params.boardname} className='button button-primary'>Edit Board</Link>
               : <span></span> }
           </Loading>
         } else {
-          return (<div className="board">
+          return (<div className='board'>
             <h2>{this.state.name}</h2>
             <Markdown source={this.state.description} skipHtml={true} />
             {this.props.params.userid ? <h5><UserID id={this.props.params.userid} api={this.state.api} /></h5> : <p></p>}
-            <div className="whitelist">
+            <div className='whitelist'>
               {this.state.whitelist.map(i => <UserID id={i} key={i} api={this.state.api} />)}
             </div>
             <hr />
diff --git a/webapp/pages/commentpage.jsx b/webapp/pages/commentpage.jsx
index 8fc3d7e..0f1adf3 100644
--- a/webapp/pages/commentpage.jsx
+++ b/webapp/pages/commentpage.jsx
@@ -54,23 +54,23 @@ module.exports = function (boardsAPI) {
         } else {
           return <div>Comment by <UserID id={this.props.params.userid} api={this.state.boards} /></div>
         }
-      } else return <div><h6 className="light">You are viewing a single comment</h6></div>
+      } else return <div><h6 className='light'>You are viewing a single comment</h6></div>
     },
     showComment: function () {
       if (this.state.comment) {
         console.log('allowReply', this.state.allowReply)
         return <Comment allowReply={this.state.allowReply} comment={this.state.comment} post={this.props.params.posthash} adminID={this.props.params.userid} board={this.props.params.boardname} showParent={true} api={this.state.boards} />
       } else {
-        return <div className="center-block text-center find-content">
-          <Icon name="refresh" className="fa-3x center-block light fa-spin" />
+        return <div className='center-block text-center find-content'>
+          <Icon name='refresh' className='fa-3x center-block light fa-spin' />
           <h4>Finding content...</h4>
         </div>
       }
     },
     render: function () {
       if (this.state.api) {
-        return <div className="comment-page">
-          <div className="text-center">
+        return <div className='comment-page'>
+          <div className='text-center'>
             {this.getContext()}
           </div>
           {this.showComment()}
diff --git a/webapp/pages/getipfs.jsx b/webapp/pages/getipfs.jsx
index cf2c260..775a64f 100644
--- a/webapp/pages/getipfs.jsx
+++ b/webapp/pages/getipfs.jsx
@@ -46,15 +46,15 @@ module.exports = React.createClass({
   getContent () {
     if (this.state.limited) {
       return <div>
-        <h1><Icon name="exclamation-triangle" className="light" /> You're running in limited mode</h1>
-        <h4 className="light">Sorry, but at the moment an external application is needed to fully take advantage of the app</h4>
+        <h1><Icon name='exclamation-triangle' className='light' /> You're running in limited mode</h1>
+        <h4 className='light'>Sorry, but at the moment an external application is needed to fully take advantage of the app</h4>
         <p>Only a few features are available in limited mode.</p>
         <h5>Why am I running in limited mode?</h5>
       </div>
     } else {
       return <div>
-        <h1><Icon name="ban" className="light" /> Connection to IPFS not available</h1>
-        <h4 className="light">Sorry, but at the moment an external application is needed to try the Prototype</h4>
+        <h1><Icon name='ban' className='light' /> Connection to IPFS not available</h1>
+        <h4 className='light'>Sorry, but at the moment an external application is needed to try the Prototype</h4>
         <p><b>Tip:</b> you can also run in limited mode by loading the app from an IPFS Gateway.</p>
       </div>
     }
@@ -67,26 +67,26 @@ module.exports = React.createClass({
         {this.getContent()}
         <p>You don't have an IPFS node running at <code>{opt.addr}:{opt.port}</code> or it is not reachable.
         The IPFS Boards prototype requires a full IPFS node. Please start one by following the
-        <a href="https://github.com/ipfs/go-ipfs"><code>go-ipfs</code> documentation.</a></p>
+        <a href='https://github.com/ipfs/go-ipfs'><code>go-ipfs</code> documentation.</a></p>
         <h5>Do you have a running node but the app won't work?</h5>
         <p>It's probably one of these issues:</p>
         <ul>
-          <li>Your node is not located at <code>{opt.addr}:{opt.port}</code>. Go to the <Link to="/settings">Settings Page</Link> to configure the connection.</li>
+          <li>Your node is not located at <code>{opt.addr}:{opt.port}</code>. Go to the <Link to='/settings'>Settings Page</Link> to configure the connection.</li>
           <li>You edited your settings and saved them but didn't reload the page</li>
-          <li>Your IPFS node doesn't allow requests from the domain you're running the app from (CORS issue). See <a href="https://github.com/fazo96/ipfs-board/blob/master/ipfs_daemon_set_cors.sh">here</a> for the fix.</li>
+          <li>Your IPFS node doesn't allow requests from the domain you're running the app from (CORS issue). See <a href='https://github.com/fazo96/ipfs-board/blob/master/ipfs_daemon_set_cors.sh'>here</a> for the fix.</li>
           <li>You're downloading the app via `https`: at the moment, connecting to IPFS only works if you donwload the app via plain HTTP. If you're using `ipfs.io` please consider accessing the app via a local gateway like `localhost:8080`</li>
           <li>Some other networking or browser security issue is preventing the App from talking to your node.</li>
         </ul>
-        <p>Still can't fix it? <a href="https://github.com/fazo96/ipfs-board/issues">File a issue on GitHub</a>, we'll be happy to help!</p>
+        <p>Still can't fix it? <a href='https://github.com/fazo96/ipfs-board/issues'>File a issue on GitHub</a>, we'll be happy to help!</p>
       </div>
     ) } else if (this.state.connected) {
-      return <div class="text-center">
-        <h1><Icon name="check" /></h1>
-        <h5 class="light">You're connected!</h5>
+      return <div class='text-center'>
+        <h1><Icon name='check' /></h1>
+        <h5 class='light'>You're connected!</h5>
       </div>
     } else {
-      return <div className="center-block text-center">
-        <Icon name="refresh" className="fa-3x center-block light fa-spin" />
+      return <div className='center-block text-center'>
+        <Icon name='refresh' className='fa-3x center-block light fa-spin' />
         <h4>Connecting to IPFS</h4>
       </div>
     }
diff --git a/webapp/pages/post-editor.jsx b/webapp/pages/post-editor.jsx
index 53285d8..ec9062e 100644
--- a/webapp/pages/post-editor.jsx
+++ b/webapp/pages/post-editor.jsx
@@ -88,9 +88,9 @@ module.exports = function (boardsAPI) {
       if (this.state.api && this.props.params.posthash) {
         var url = '/@' + this.state.api.getMyID() + '/' + this.props.params.boardname + '/' + this.props.params.posthash
         return <span>
-          <button onClick={this.refresh} className="button not-first">Refresh</button>
-          <Link to={url} className="button not-first">View</Link>
-          <button onClick={this.delete} className="button not-first">Delete</button>
+          <button onClick={this.refresh} className='button not-first'>Refresh</button>
+          <Link to={url} className='button not-first'>View</Link>
+          <button onClick={this.delete} className='button not-first'>Delete</button>
         </span>
       } else {
         return <span></span>
@@ -100,30 +100,30 @@ module.exports = function (boardsAPI) {
       if (this.state.api) {
         if (this.state.error) {
           return <Error error={this.state.error} >
-            <button className="button button-primary center-block" onClick={this.skip}>Continue</button>
+            <button className='button button-primary center-block' onClick={this.skip}>Continue</button>
           </Error>
         } else if (this.state.deleting) {
-          return <Loading title="Deleting Post">
+          return <Loading title='Deleting Post'>
             <p>Pressing the Skip button will not abort the Delete operation.</p>
-            <button className="button button-primary center-block" onClick={this.skip}>Skip</button>
+            <button className='button button-primary center-block' onClick={this.skip}>Skip</button>
           </Loading>
         } else if (this.state.loading) {
-          return <Loading title="Downloading Post">
-            <button className="button button-primary center-block" onClick={this.skip}>Skip</button>
+          return <Loading title='Downloading Post'>
+            <button className='button button-primary center-block' onClick={this.skip}>Skip</button>
           </Loading>
         } else if (this.state.updating) {
           return <Saving>
             <p>Pressing the Skip button will not abort the publish operation.</p>
-            <button className="button button-primary center-block" onClick={this.skip}>Skip</button>
+            <button className='button button-primary center-block' onClick={this.skip}>Skip</button>
           </Saving>
         } else if (this.state.success) {
-          return <Success title="Post Deleted">
+          return <Success title='Post Deleted'>
             <p><b>Note:</b> due to a bug in go-ipfs, you may need to wait up to a minute for changes to appear.</p>
           </Success>
         } else {
           return (
-            <div className="editor">
-              <h2><Icon name="pencil" className="light" />
+            <div className='editor'>
+              <h2><Icon name='pencil' className='light' />
                 {this.props.params.posthash ? ' Edit Post' : ' New Post'}
               </h2>
               <p>This App uses IPFS to store your Posts. When you are offline,
@@ -133,15 +133,15 @@ module.exports = function (boardsAPI) {
               for your changes to be visibile. Your Post will not appear or appear
               unchanged during this time.</p>
               <div>
-                <label htmlFor="title">Title</label>
-                <input className="u-full-width" type="text" id="title" value={this.state.title} onChange={this.handleChange} placeholder="Choose a title" />
+                <label htmlFor='title'>Title</label>
+                <input className='u-full-width' type='text' id='title' value={this.state.title} onChange={this.handleChange} placeholder='Choose a title' />
               </div>
               <div>
-                <label htmlFor="text">Content</label>
-                <textarea className="u-full-width" id="text" value={this.state.text} onChange={this.handleChange} placeholder="Write your post. Markdown is supported :)" />
+                <label htmlFor='text'>Content</label>
+                <textarea className='u-full-width' id='text' value={this.state.text} onChange={this.handleChange} placeholder='Write your post. Markdown is supported :)' />
               </div>
-              <div className="buttons">
-                <button className="button button-primary" onClick={this.save}>Publish</button>
+              <div className='buttons'>
+                <button className='button button-primary' onClick={this.save}>Publish</button>
                 {this.additionalButtons()}
               </div>
             </div>
diff --git a/webapp/pages/postpage.jsx b/webapp/pages/postpage.jsx
index bf57a85..4ecccf1 100644
--- a/webapp/pages/postpage.jsx
+++ b/webapp/pages/postpage.jsx
@@ -24,12 +24,12 @@ module.exports = function (boardsAPI) {
         } else {
           return <div>Posted by <UserID id={this.props.params.userid} api={this.state.api} /></div>
         }
-      } else return <div><h6 className="light">You are viewing a single post</h6></div>
+      } else return <div><h6 className='light'>You are viewing a single post</h6></div>
     },
     render: function () {
       if (this.state.api) {
-        return <div className="post-page">
-          <div className="text-center">
+        return <div className='post-page'>
+          <div className='text-center'>
             {this.getContext()}
           </div>
           <Post allowReply={true} hash={this.props.params.posthash} board={this.props.params.boardname} api={this.state.api} adminID={this.props.params.userid} />
diff --git a/webapp/pages/profile-editor.jsx b/webapp/pages/profile-editor.jsx
index 40d2af0..48162f4 100644
--- a/webapp/pages/profile-editor.jsx
+++ b/webapp/pages/profile-editor.jsx
@@ -69,40 +69,40 @@ module.exports = function (boardsAPI) {
       if (this.state.api) {
         if (this.state.error) {
           return <Error error={this.state.error} >
-            <button className="button button-primary center-block" onClick={this.skip}>Continue</button>
+            <button className='button button-primary center-block' onClick={this.skip}>Continue</button>
           </Error>
         } else if (this.state.loading) {
-          return <Loading title="Fetching your current Profile...">
-            <button className="button button-primary center-block" onClick={this.skip}>Skip</button>
+          return <Loading title='Fetching your current Profile...'>
+            <button className='button button-primary center-block' onClick={this.skip}>Skip</button>
           </Loading>
         } else if (this.state.updating) {
           return <Saving>
             <p>Pressing the Skip button will not abort the publish operation.</p>
-            <button className="button button-primary center-block" onClick={this.skip}>Skip</button>
+            <button className='button button-primary center-block' onClick={this.skip}>Skip</button>
           </Saving>
         } else {
           return (
-            <div className="editor">
-              <h2><Icon name="user" className="light" /> Edit Profile</h2>
+            <div className='editor'>
+              <h2><Icon name='user' className='light' /> Edit Profile</h2>
               <p>This App uses IPFS to store your profile. When you are offline,
               other users or servers that viewed your profile will serve it to
               others.</p>
             <p><b>Warning:</b> due to a bug in go-ipfs, it may take up to a minute
             for your changes to be visibile. Your profile will appear unchanged during
             this time.</p>
-              <div className="center-block">
-                <label htmlFor="name">Name</label>
-                <input className="u-full-width" type="text" id="name" value={this.state.name} onChange={this.handleChange} placeholder="Who are you on the interwebs?" />
+              <div className='center-block'>
+                <label htmlFor='name'>Name</label>
+                <input className='u-full-width' type='text' id='name' value={this.state.name} onChange={this.handleChange} placeholder='Who are you on the interwebs?' />
               </div>
               <div>
-                <label htmlFor="desc">Caption</label>
-                <textarea className="u-full-width" id="desc" value={this.state.description} onChange={this.handleChange} placeholder="Say something about yourself." />
+                <label htmlFor='desc'>Caption</label>
+                <textarea className='u-full-width' id='desc' value={this.state.description} onChange={this.handleChange} placeholder='Say something about yourself.' />
               </div>
-              <div className="buttons">
-                <button className="button button-primary" onClick={this.save}>Publish</button>
-                <button onClick={this.refresh} className="button not-first">Refresh</button>
-                <Link to={'/@' + this.state.userid} className="button not-first">View</Link>
-                <Link to="/backup" className="button not-first">Backup and Restore</Link>
+              <div className='buttons'>
+                <button className='button button-primary' onClick={this.save}>Publish</button>
+                <button onClick={this.refresh} className='button not-first'>Refresh</button>
+                <Link to={'/@' + this.state.userid} className='button not-first'>View</Link>
+                <Link to='/backup' className='button not-first'>Backup and Restore</Link>
               </div>
             </div>
           )
diff --git a/webapp/pages/profile.jsx b/webapp/pages/profile.jsx
index fe14124..e37a9bf 100644
--- a/webapp/pages/profile.jsx
+++ b/webapp/pages/profile.jsx
@@ -52,10 +52,10 @@ module.exports = function (boardsAPI) {
     linkToEditor () {
       var uid = this.props.params.userid
       if (uid === this.state.id) {
-        return <div className="your-profile">
+        return <div className='your-profile'>
           <h6>This is your profile</h6>
-          <div className="iconbar">
-            <Link className="nounderline" to="/edit/profile"><Icon name="edit" className="fa-2x light"/></Link>
+          <div className='iconbar'>
+            <Link className='nounderline' to='/edit/profile'><Icon name='edit' className='fa-2x light'/></Link>
           </div>
           <hr/>
         </div>
@@ -63,24 +63,24 @@ module.exports = function (boardsAPI) {
       return ''
     },
     getEditButton () {
-      return <Link className="button button-primary" to="/edit/profile">Edit Profile</Link>
+      return <Link className='button button-primary' to='/edit/profile'>Edit Profile</Link>
     },
     render () {
       if (this.state.api) {
         if (this.state.error) {
           return <Error error={this.state.error}>{this.getEditButton()}</Error>
         } else if (this.state.loading) {
-          return <Loading title="Downloading Profile">{this.getEditButton()}</Loading>
+          return <Loading title='Downloading Profile'>{this.getEditButton()}</Loading>
         } else {
           var uid = this.props.params.userid
-          return (<div className="profile">
+          return (<div className='profile'>
             {this.linkToEditor()}
             <h1>{this.state.name}</h1>
             <Markdown source={this.state.description} skipHtml={true} />
             <hr/>
-            <div className="light breaker">@{uid}</div>
+            <div className='light breaker'>@{uid}</div>
             {this.state.boards.map(n => {
-              return <h6 className="light" key={uid + '/' + n.name}>
+              return <h6 className='light' key={uid + '/' + n.name}>
                 <Link to={'/@' + uid + '/' + n.name}># {n.name}</Link>
               </h6>
             })}
diff --git a/webapp/pages/settings.jsx b/webapp/pages/settings.jsx
index 13d164a..c1f5d13 100644
--- a/webapp/pages/settings.jsx
+++ b/webapp/pages/settings.jsx
@@ -54,43 +54,43 @@ module.exports = function (boardsAPI) {
     isOK: function () {
       if (this.state.error) {
         console.log('Error', this.state.error)
-        return <div className="itsok light">
-          <h5><Icon name="ban" /> Error</h5>
+        return <div className='itsok light'>
+          <h5><Icon name='ban' /> Error</h5>
           <p>{this.state.error}</p>
         </div>
       } else if (this.state.limited) {
-        return <div className="itsok light">
-          <h5><Icon name="exclamation-triangle" /> Limited Mode</h5>
+        return <div className='itsok light'>
+          <h5><Icon name='exclamation-triangle' /> Limited Mode</h5>
           <p>Some features may not be available.</p>
         </div>
       } else if (this.state.api) {
-        return <div className="itsok light">
-          <h5><Icon name="check" /> It's OK</h5>
+        return <div className='itsok light'>
+          <h5><Icon name='check' /> It's OK</h5>
           <p>You're connected to IPFS</p>
         </div>
       } else return <div></div>
     },
     render: function () {
       return (
-        <div className="settings">
-          <h2><Icon name="cog"/> Settings</h2>
+        <div className='settings'>
+          <h2><Icon name='cog'/> Settings</h2>
           <h5>Choose how the prototype connects to IPFS</h5>
           <p>In the future, this won't be necessary because IPFS will run in your browser.</p>
           <p>All settings are saved in your browser's localStorage.</p>
-          <div className="row">
-            <div className="six columns">
-              <label htmlFor="nodeAddress">IPFS Node</label>
-              <input className="u-full-width" type="text" id="nodeAddress" value={this.state.addr} onChange={this.onChange} placeholder="localhost" />
+          <div className='row'>
+            <div className='six columns'>
+              <label htmlFor='nodeAddress'>IPFS Node</label>
+              <input className='u-full-width' type='text' id='nodeAddress' value={this.state.addr} onChange={this.onChange} placeholder='localhost' />
             </div>
-            <div className="six columns">
-              <label htmlFor="nodePort">API Port</label>
-              <input className="u-full-width" type="text" id="nodePort" value={this.state.port} onChange={this.onChange} placeholder="5001" />
+            <div className='six columns'>
+              <label htmlFor='nodePort'>API Port</label>
+              <input className='u-full-width' type='text' id='nodePort' value={this.state.port} onChange={this.onChange} placeholder='5001' />
             </div>
           </div>
           {this.isOK()}
-          <div className="buttons">
-            <button className="button button-primary" onClick={this.save}>Save</button>
-            <button className="button not-first" onClick={this.setDefaults}>Defaults</button>
+          <div className='buttons'>
+            <button className='button button-primary' onClick={this.save}>Save</button>
+            <button className='button not-first' onClick={this.setDefaults}>Defaults</button>
           </div>
         </div>
       )
diff --git a/webapp/pages/update.jsx b/webapp/pages/update.jsx
index cbe0d57..6e9101a 100644
--- a/webapp/pages/update.jsx
+++ b/webapp/pages/update.jsx
@@ -4,10 +4,10 @@ var Icon = require('icon.jsx')
 module.exports = React.createClass({
   render () {
     var gateway = window.location.pathname.indexOf('/ipfs/') === 0 || window.location.pathname.indexOf('/ipns/') === 0
-    return <div className="thin center-block">
-      <div className="text-center">
-        <h1><Icon name="history" className="light" /></h1>
-        <h3 className="light">Version Center</h3>
+    return <div className='thin center-block'>
+      <div className='text-center'>
+        <h1><Icon name='history' className='light' /></h1>
+        <h3 className='light'>Version Center</h3>
       </div>
       <p>This page lets you reach the latest version
       of the app from any older versions. In the future, you will be able to manage
@@ -16,8 +16,8 @@ module.exports = React.createClass({
       <p><b>You're free to keep going</b>, but if you want the latest updates as
       soon as they are published, you can click the following button, that will
       bring you to an IPFS URL that always points to the latest version.</p>
-      <div className="buttons">
-        <a className="button button-primary" href={gateway ? '/ipns/boards.ydns.eu' : 'http://ipfs.ydns.eu/ipns/boards.ydns.eu'}>Update</a>
+      <div className='buttons'>
+        <a className='button button-primary' href={gateway ? '/ipns/boards.ydns.eu' : 'http://ipfs.ydns.eu/ipns/boards.ydns.eu'}>Update</a>
       </div>
     </div>
   }
diff --git a/webapp/pages/users.jsx b/webapp/pages/users.jsx
index 804659e..d30860b 100644
--- a/webapp/pages/users.jsx
+++ b/webapp/pages/users.jsx
@@ -26,7 +26,7 @@ module.exports = function (boardsAPI) {
     render () {
       if (this.state.api) {
         return <div>
-          <h1><Icon name="users" className="light" /> Users</h1>
+          <h1><Icon name='users' className='light' /> Users</h1>
           <p>Found <b>{this.state.users.length}</b> users</p>
           <ul>
             {this.state.users.map(user => {