use fancier className notation everywhere

renderer/views/app.js

@@ -18,9 +18,9 @@ function App (state, dispatch) {
   }
 
   return hx`
-    <div className="app">
+    <div.app>
       ${Header(state, dispatch)}
-      <div className="content">${getView()}</div>
+      <div.content>${getView()}</div>
     </div>
   `
 }

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">
+      <div.nav.left>
-        <i className="icon back" onclick=${onBack}>chevron_left</i>
+        <i.icon.back onclick=${onBack}>chevron_left</i>
-        <i className="icon forward" onclick=${onForward}>chevron_right</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>`
     }
   }
 

renderer/views/player.js

@@ -26,7 +26,7 @@ function Player (state, dispatch) {
 
   // Show the video as large as will fit in the window, play immediately
   return hx`
-    <div className="player">
+    <div.player>
       <video
         src="${state.server.localURL}"
         onloadedmetadata="${onLoadedMetadata}"
@@ -55,15 +55,15 @@ function renderPlayerControls (state, dispatch) {
   var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 4px)' }
 
   return hx`
-    <div className="player-controls">
+    <div.player-controls>
-      <div className="scrub-bar"
+      <div.scrub-bar
         draggable="true"
         onclick=${handleScrub},
         ondrag=${handleScrub}>
         ${renderLoadingBar(state)}
-        <div className="playback-cursor" style=${playbackCursorStyle}></div>
+        <div.playback-cursor style=${playbackCursorStyle}></div>
       </div>
-      <i className="icon play-pause" onclick=${() => dispatch('playPause')}>
+      <i.icon.play-pause onclick=${() => dispatch('playPause')}>
         ${state.video.isPaused ? 'play_arrow' : 'pause'}
       </i>
     </div>
@@ -104,14 +104,14 @@ function renderLoadingBar (state) {
 
   // Output an list of rectangles to show loading progress
   return hx`
-    <div className="loading-bar">
+    <div.loading-bar>
       ${parts.map(function (part) {
         var style = {
           left: (100 * part.start / numParts) + '%',
           width: (100 * part.count / numParts) + '%'
         }
 
-        return hx`<div className="loading-bar-part" style=${style}></div>`
+        return hx`<div.loading-bar-part style=${style}></div>`
       })}
     </div>
   `

renderer/views/torrent-list.js

@@ -11,7 +11,7 @@ function TorrentList (state, dispatch) {
     : []
 
   var list = torrents.map((torrent) => renderTorrent(state, dispatch, torrent))
-  return hx`<div className="torrent-list">${list}</div>`
+  return hx`<div.torrent-list>${list}</div>`
 }
 
 // Renders a torrent in the torrent list
@@ -63,16 +63,16 @@ function renderTorrent (state, dispatch, torrent) {
     `)
   }
 
-  return hx`<div className='torrent' style=${style}>${elements}</div>`
+  return hx`<div.torrent style=${style}>${elements}</div>`
 }
 
 // Renders the torrent name and download progress
 function renderTorrentMetadata (torrent) {
   return hx`
-    <div className="metadata">
+    <div.metadata>
-      <div className="name ellipsis">${torrent.name || 'Loading torrent...'}</div>
+      <div.name.ellipsis>${torrent.name || 'Loading torrent...'}</div>
-      <div className="status">
+      <div.status>
-        <span className="progress">${Math.floor(100 * torrent.progress)}%</span>
+        <span.progress>${Math.floor(100 * torrent.progress)}%</span>
       </div>
       ${getFilesLength()}
       <span>${getPeers()}</span>
@@ -88,7 +88,7 @@ function renderTorrentMetadata (torrent) {
 
   function getFilesLength () {
     if (torrent.ready && torrent.files.length > 1) {
-      return hx`<span className="files">${torrent.files.length} files</span>`
+      return hx`<span.files>${torrent.files.length} files</span>`
     }
   }
 }