use fancier className notation everywhere

renderer/views/header.js

@@ -6,13 +6,13 @@ var hx = hyperx(h)
 
 function Header (state, dispatch) {
   return hx`
-    <div className="header">
+    <div.header>
       ${getTitle()}
-      <div className="nav left">
-        <i className="icon back" onclick=${onBack}>chevron_left</i>
-        <i className="icon forward" onclick=${onForward}>chevron_right</i>
+      <div.nav.left>
+        <i.icon.back onclick=${onBack}>chevron_left</i>
+        <i.icon.forward onclick=${onForward}>chevron_right</i>
       </div>
-      <div className="nav right">
+      <div.nav.right>
         ${plusButton()}
       </div>
     </div>
@@ -20,13 +20,13 @@ function Header (state, dispatch) {
 
   function getTitle () {
     if (process.platform === 'darwin') {
-      return hx`<div className="title">${state.view.title}</div>`
+      return hx`<div.title>${state.view.title}</div>`
     }
   }
 
   function plusButton () {
     if (state.view.url !== '/player') {
-      return hx`<i className="icon add" onclick=${onAddTorrent}>add</i>`
+      return hx`<i.icon.add onclick=${onAddTorrent}>add</i>`
     }
   }