Slider styling. Speaker.

frontend/src/buffer-client.js

@@ -1,29 +1,35 @@
 import React from 'react';
 
+import './buffer-client.css';
+
 class BufferClient extends React.Component {
     constructor(props) {
         super(props);
     }
     render() {
+        let enabledSources = this.props.sources.filter(source => source.enabled);
         return (
             <div>
-                {"Client " + (this.props.clientName || this.props.clientId)}
+                <strong>{"Client " + (this.props.clientName || this.props.clientId)}</strong>
                 <br />
                 <div>
-                    Enter client name: <input value={this.props.clientName} onChange={ (evt) => this.props.onChangeName(evt.target.value) } />
-                    <input type="button" className="playit" />
+                    Enter client name: <input type="text" value={this.props.clientName} onChange={ (evt) => this.props.onChangeName(evt.target.value) } />
+                    <button className="playit">Play!</button>
                     <br />
                 </div>
-                Current play position: {this.props.realPosition / 1000} seconds
+                Current play position: <strong>{this.props.realPosition / 1000} seconds</strong><br />
                 <br />
-                Enabled sources:
-                <ul>
-                    {this.props.sources.filter(source => source.enabled).map(source => 
-                        <li key={source.url}>
-                            {source.url}
-                        </li>
-                    )}
-                </ul>
+                {enabledSources.length
+                    ? <div className="enabled-sources">
+                        <strong>Enabled sources:</strong>
+                        <ul>
+                            {enabledSources.map(source => 
+                                <li key={source.url}>
+                                    {source.url}
+                                </li>
+                            )}
+                        </ul>
+                    </div> : null}
             </div>
         );
     }

frontend/src/index.css

@@ -15,6 +15,13 @@ body, button {
     color: #00173D;
 }
 
+input[type="text"], input[type="number"], input[type="email"] {
+    background-color: #A2F9FC;
+    border: 2px ridge #F17A6B;
+    border-radius: .4em;
+    padding: 0.25em;
+}
+
 input[type="range"] {
     width: 90vw;
     display: block;

frontend/src/index.js

@@ -6,6 +6,8 @@ import StartAudioContext from 'startaudiocontext';
 import { HashRouter, Route, Switch } from 'react-router-dom';
 
 import './index.css';
+import './range.css';
+
 import App from './app';
 import Client from './client';
 import Admin from './admin';

frontend/src/simulator.css

@@ -13,7 +13,7 @@
     mask-image: url('../node_modules/material-design-icons/hardware/svg/design/ic_speaker_24px.svg');
     mask-repeat: none;
     mask-size: contain;
-    background-color: green;
+    background-color: #109030;
     width: 100%;
     z-index: -1;
     height: 100%;
@@ -27,6 +27,7 @@
     padding-top: 1em;
     width: 3em;
     height: 3em;
+    background-color: #c01030;;
     color: #000;
     border-radius: 3em;
     vertical-align: bottom;