From ad570aa798fae952b9f996c8681270693fe4da38 Mon Sep 17 00:00:00 2001
From: Martin Ashby <martin@martin-laptop.lan>
Date: Fri, 18 May 2018 11:15:19 +0100
Subject: Styled everything a bit nicer

---
 src/App.js | 62 ++++++++++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 42 insertions(+), 20 deletions(-)

(limited to 'src/App.js')

diff --git a/src/App.js b/src/App.js
index 1895e23..16a5a7d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -144,7 +144,9 @@ class App extends Component {
 
   _connectWebsocket() {
     let webSocketProto = window.location.protocol === "https" ? "wss" : "ws"
-    this._websocket = new WebSocket(`${webSocketProto}://${window.location.host}/ws`)
+    let host = window.location.host
+    // let host = "shinypi:3001"
+    this._websocket = new WebSocket(`${webSocketProto}://${host}/ws`)
     this._websocket.onmessage = this._onMessage
     this._websocket.onopen = this._onOpen
     this._websocket.onclose = this._onClose
@@ -196,24 +198,44 @@ class App extends Component {
 
   render() {
     return (
-      <div className="App">
-        <ConnectedIndicator connected={this.state.connected} />
-        <Toolkit
-          tools={tools}
-          selectedTool={this.state.selectedTool}
-          onSelectTool={this._selectTool} />
-        <PaintArea
-          data={this.state.pixels}
-          onTool={this._applyTool} />
-        <Palette
-          selectedColor={this.state.selectedColor}
-          onSelectColor={(color) => this.setState({ selectedColor: color })} />
-        <ColorIndicator color={this.state.selectedColor} />
-        {/* Embedded tweet showing live stream */}
-        <Timeline dataSource={{
-          sourceType: 'profile',
-          screenName: 'UnicornPaint'
-        }}/>
+      <div className="container">
+        <div className="header">
+          <h1>Unicorn Paint!</h1>
+          <ConnectedIndicator connected={this.state.connected} />
+        </div>
+        <div className="paintContainer">
+          <div className="paint">
+            <PaintArea
+              data={this.state.pixels}
+              onTool={this._applyTool} />
+          </div>
+          <div className="tools">
+            <Toolkit
+              tools={tools}
+              selectedTool={this.state.selectedTool}
+              onSelectTool={this._selectTool} />
+          </div>
+          <div className="palette">
+            <Palette
+              selectedColor={this.state.selectedColor}
+              onSelectColor={(color) => this.setState({ selectedColor: color })} />
+          </div>  
+          <div className="paintCol">
+            <ColorIndicator color={this.state.selectedColor} />
+          </div>
+        </div>
+        <div className="liveFeed">
+          <Timeline 
+            dataSource={{
+              sourceType: 'profile',
+              screenName: 'UnicornPaint',
+            }}
+            options={{
+              tweetLimit: 1,
+              chrome: "noheader nofooter noborders noscrollbar",
+              width: "300px"
+            }}/>
+        </div>
         <div>
           {
             this.state.showingLoad
@@ -238,4 +260,4 @@ class App extends Component {
   }
 }
 
-export default App;
+export default App;
\ No newline at end of file
-- 
cgit v1.2.3-ZIG