Styling tweaks.

frontend/src/admin.css

@@ -11,19 +11,30 @@
 }
 
 .clients > li {
+    margin: .5em;
     min-width: 350px;
     width: 15vw;
     display: block;
     float: left;
 }
 
+.sources {
+    margin-top: .5em;
+    border-radius: .3em;
+    overflow: hidden;
+    font-weight: 900;
+}
+
 .sources > li {
-    background-color: red;
+    background-color: #c01030;
     list-style-type: none;
+    border-bottom: 1px solid #c55;
+    padding: .5em .3em;
 }
 
 .sources > li.enabled {
-    background-color: green;
+    border-bottom: 1px solid #5c5;
+    background-color: #109030;
 }
 
 .name-input {
@@ -40,6 +51,20 @@
     padding: 1em;
 }
 
+.knobs .pan {
+    background-image: url('../node_modules/material-design-icons/action/svg/design/ic_pan_tool_24px.svg');
+    background-size: 50%;
+    background-repeat: no-repeat;
+    background-position: 40% 35%;
+}
+
+.knobs .gain {
+    background-image: url('../node_modules/material-design-icons/av/svg/design/ic_volume_up_24px.svg');
+    background-size: 70%;
+    background-repeat: no-repeat;
+    background-position: 70% 46%;
+}
+
 .track-controls {
     display: flex;
 }

frontend/src/admin.js

@@ -180,7 +180,7 @@ class Admin extends React.Component {
                     </div> 
                     ) : (
                     <div>
-                        Current play position: {this.state.syncPacket.timecode / 1000}<br />
+                        Current play position: {this.state.syncPacket.timecode / 1000} seconds<br />
                         <input type="range" min={0} max={370000} step={1} value={this.state.syncPacket.timecode} onChange={ evt => this.adjustTimecode(evt.target.value) } />
                         <div className="track-controls">
                             <button onClick={ () => this.restart() }>
@@ -198,6 +198,7 @@ class Admin extends React.Component {
                             ? state.clients.map((client) => 
                                 <li key={client.id}>
                                     Client {client.name || client.id} <br />
+                                    <br />
                                     Sources: <br />
                                     <ul className="sources">
                                         {client.sources.map((source) => 
@@ -206,11 +207,11 @@ class Admin extends React.Component {
                                                 <ul class="knobs">
                                                     <li>
                                                         Pan<br />
-                                                        <Knob bgColor="#000" width={75} height={75} min={-1} value={source.pan} max={1} step={0.01} onChange={ (val) => this.adjustPan(client, source, val) } />
+                                                        <Knob className="pan" bgColor="#000" width={75} height={75} min={-1} value={source.pan} max={1} step={0.01} onChange={ (val) => this.adjustPan(client, source, val) } />
                                                     </li>
                                                     <li>
                                                         Gain<br />
-                                                        <Knob bgColor="#000" width={75} height={75} min={0} value={source.gain} max={5} step={0.01} onChange={ (val) => this.adjustGain(client, source, val) } />
+                                                        <Knob className="gain" bgColor="#000" width={75} height={75} min={0} value={source.gain} max={5} step={0.01} onChange={ (val) => this.adjustGain(client, source, val) } />
                                                     </li>
                                                     <li>
                                                         <button onClick={ () => this.clickSource(client, source) }>

frontend/src/buffer-client.js

@@ -14,7 +14,7 @@ class BufferClient extends React.Component {
                     <input type="button" className="playit" />
                     <br />
                 </div>
-                Current play position: {this.props.realPosition / 1000}
+                Current play position: {this.props.realPosition / 1000} seconds
                 <br />
                 Enabled sources:
                 <ul>