Some styling

elements/mpd.js

@@ -67,6 +67,24 @@ class MPD extends Component {
       root.removeChild(root.firstChild);
     }
     root.appendChild(render());
+    const styles = document.createElement('style');
+    styles.appendChild(document.createTextNode(`
+      .artist, .song {
+        color: #fff;
+      }
+      progress {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 40%;
+      }
+      progress::-webkit-progress-bar {
+        background-color: #2e3436;
+      }
+      progress[value]::-webkit-progress-value {
+        background-color: hsl(35, 98%, 46%);
+      }
+    `));
+    root.appendChild(styles);
   }
 
   render({ data }) {
@@ -91,10 +109,10 @@ class MPD extends Component {
       volume = 0;
     }
     el.innerHTML = `
-      <div>${artist}</div>
-      <div>${data.current_song.title}</div>
+      <div class="artist">${artist}</div>
+      <div class="song">${data.current_song.title}</div>
       <div>${status}</div>
-      <div><progress min="0" max="100" value="${volume}"></progress> &#128264; ${volume}</div>
+      <div><progress min="0" max="100" value="${volume}"></progress> volume ${volume}</div>
     `;
     return el;
   }

elements/userlist.js

@@ -53,6 +53,12 @@ class UserList extends Component {
         -webkit-animation-timing-function:ease-in-out;
         -webkit-animation-direction: alternate;
       }
+      span.output {
+        color: #fff;
+      }
+      span.prompt {
+        color: #a0a0a0;
+      }
     `));
     root.appendChild(styles);
   }
@@ -61,10 +67,10 @@ class UserList extends Component {
     const el = document.createElement('div');
     el.className = 'terminal';
     el.innerHTML = `
-      <div>user@c-beam&gt; #who</div>
-      <div>${data.join(', ')}</div>
-      <div>total: ${data.length}</div>
-      <div>user@c-beam&gt; <blink>_</blink></div>
+      <div><span class="prompt">user@c-beam&gt;</span> #who</div>
+      <div><span class="output">${data.join(', ')}</span></div>
+      <div>total: <span class="output">${data.length}</span></div>
+      <div><span class="prompt">user@c-beam&gt;</span> <blink>_</blink></div>
     `;
     return el;
   }