Styled everything a bit nicer

7 files changed, 175 insertions, 61 deletions

diff --git a/src/App.css b/src/App.css
index c436008..c9a3616 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,81 @@
-.toolkit {
-  float: right;
-  background: lightblue;
+body {
+    background: black;
+    color: aliceblue;
+    padding-left: 50px;
+    padding-right: 50px;
 }
 
-.toolkititem {
-  padding: 5px;
+.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    grid-template-areas: 
+        "header header"
+        "paint liveFeed";
+    grid-gap: 5px;
+        
+}
+
+@media (max-width: 760px) {
+    .container {
+        display: grid;
+        grid-template-columns: 1fr;
+    
+        grid-template-areas: 
+            "header"
+            "paint"
+            "liveFeed";
+    }   
+}
+
+.header {
+    grid-area: header;
 }
 
-.toolkititem.selected {
-  background: lightcoral;
+.paint {
+    grid-area: paint;
 }
 
-/* .paintarea {
+.liveFeed {
+    grid-area: liveFeed;
+}
+
+.paintContainer {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1frpx;
 
-} */
+    grid-template-areas: 
+        "paint paint tools"
+        "paintCol palette tools";
+}
+
+.paint {
+    grid-area: paint;
+}
 
-.paintareacell {
-  width: 20px;
-  height: 20px;
-  border: 1px solid grey;
+.tools {
+    grid-area: tools;
+    display: flex;
+    flex-direction: column;
+    width: 45px;
 }
 
-.paletteitem {
-  width: 30px;
-  height: 30px;
-  border: 3px solid black;
-  display: inline-block;
+.palette {
+    grid-area: palette;
+    display: flex;
+    flex-direction: row;
 }
 
-.paletteitem.selected {
-  border: 3px solid red;
+.paintCol {
+    grid-area: paintCol;
 }
 
-.colorIndicator {
-  width: 100px;
-  height: 100px;
+.paintAreaCell {
+    width: "20px";
+    height: "20px";
+    min-width: "20px";
+    min-height: "20px";
+    max-width: "20px";
+    max-height: "20px";
+    border: "1px solid grey";
 }
\ No newline at end of file
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
diff --git a/src/ColorIndicator.js b/src/ColorIndicator.js
index e84a661..2ae15d1 100644
--- a/src/ColorIndicator.js
+++ b/src/ColorIndicator.js
@@ -19,12 +19,19 @@ export default class ColorIndicator extends Component {
         }
 
         return <div 
-            className="colorIndicator"
             style={{
                 background: `rgb(${r},${g},${b})`, 
-                color: foreground
+                color: foreground,
+                ...styles.colorIndicator
             }}>
             <span>{colorDesc}</span>
         </div>
     }
+}
+
+const styles = {
+    colorIndicator: {
+        width: "100px",
+        height: "100px"
+    }
 }
\ No newline at end of file
diff --git a/src/ConnectedIndicator.js b/src/ConnectedIndicator.js
index d4e1686..3296ef9 100644
--- a/src/ConnectedIndicator.js
+++ b/src/ConnectedIndicator.js
@@ -5,7 +5,8 @@ export default class ConnectedIndicator extends Component {
     let connectedText = this.props.connected ? "Connected" : "Not connected"
     let color = this.props.connected ? "green" : "red"
     return <div><span style={{
-      background:color
+      background:color,
+      display: "inline-block"
     }}>{connectedText}</span></div>
   }
 }
\ No newline at end of file
diff --git a/src/PaintArea.js b/src/PaintArea.js
index 3b64beb..ac7ce96 100644
--- a/src/PaintArea.js
+++ b/src/PaintArea.js
@@ -57,9 +57,9 @@ export default class PaintArea extends Component {
         cells.push(<td
           onMouseMove={() => this.handleMouseMove(ix, iy)}
           onClick={() => this.props.onTool(ix, iy)}
-          className="paintareacell"
           style={{
-            background: `rgb(${r},${g},${b})`
+            background: `rgb(${r},${g},${b})`,
+            ...styles.paintAreaCell
           }}
           key={(ix * 100000) + iy}/>)
       }
@@ -68,7 +68,6 @@ export default class PaintArea extends Component {
     
     return (
       <table 
-        className="paintarea"
         draggable={false}>
         <tbody>
           {rows}
@@ -76,4 +75,16 @@ export default class PaintArea extends Component {
       </table>
     )
   }
+}
+
+const styles = {
+  paintAreaCell: {
+    width: "20px",
+    height: "20px",
+    minWidth: "20px",
+    minHeight: "20px",
+    maxWidth: "20px",
+    maxHeight: "20px",
+    border: "1px solid grey",
+  }
 }
\ No newline at end of file
diff --git a/src/Palette.js b/src/Palette.js
index ad0ad46..fd4776f 100644
--- a/src/Palette.js
+++ b/src/Palette.js
@@ -24,21 +24,39 @@ const colorPalette = [
   export default class Palette extends Component {
     render() {
       let paletteListItems = colorPalette.map((item) => {
-        var className = "paletteitem"
         let { r, g, b } = rgb(item)
         let selected = rgb(this.props.selectedColor)
-        if (r === selected.r && g === selected.g && b === selected.b) {
-          className += " selected"
-        }
+        let isSelected = r === selected.r && g === selected.g && b === selected.b
+
+        let style = Object.assign({},
+          {background: `rgb(${r},${g},${b})`},
+          styles.paletteItem,
+          isSelected && styles.selected
+        )
+
         return <div
           onClick={() => this.props.onSelectColor([r, g, b])}
-          style={{background: `rgb(${r},${g},${b})`}} 
-          className={className}
+          style={style} 
           key={r*10000+g*1000+b}/>
       })
+      let list1 = paletteListItems.slice(0, paletteListItems.length / 2)
+      let list2 = paletteListItems.slice(paletteListItems.length / 2)
       return (
-        <div className="palette">
-          {paletteListItems}
+        <div>
+          {list1}<br/>
+          {list2}
         </div>)
     }
+  }
+
+  const styles = {
+    paletteItem: {
+      width: "30px",
+      height: "30px",
+      border: "3px solid black",
+      display: "inline-block",
+    },
+    selected: {
+      border: "3px solid red"
+    }
   }
\ No newline at end of file
diff --git a/src/Toolkit.js b/src/Toolkit.js
index 35d8759..b12f418 100644
--- a/src/Toolkit.js
+++ b/src/Toolkit.js
@@ -4,11 +4,11 @@ import './fontawesome-all.min.js'
 class ToolKitItem extends Component {
   render() {
     let iconClass = this.props.tool.icon + " fa-2x" 
-    var divClass = "toolkititem"
+    let style = styles.toolkititem
     if (this.props.selected) {
-      divClass += " selected"
+      style = Object.assign({}, style, styles.selected)
     }
-    return <div className={divClass}
+    return <div style={style}
         onClick={() => this.props.onSelectTool(this.props.tool)}>
         <i className={iconClass}></i>
       </div>
@@ -24,8 +24,20 @@ export default class Toolkit extends Component {
         selected={tool === this.props.selectedTool}
         onSelectTool={this.props.onSelectTool}/>
     })
-    return <div className="toolkit">
+    return <div style={styles.toolkit}>
       {toolComponents}
     </div>
   }
 }
+
+const styles = {
+  toolkit: {
+    background: "grey"
+  },
+  toolkititem: {
+    padding: "5px",
+  },
+  selected: {
+    background: "lightcoral"
+  }
+}
\ No newline at end of file