chat styling, jdenticon

app.js

@@ -3,6 +3,7 @@ const React = require('react')
 const ReactDOM = require('react-dom')
 const create = require('create-react-class')
 const Promise = require('bluebird')
+const jdenticon = require('jdenticon')
 
 const Matrix = require('./backends/matrix.js')
 
@@ -12,6 +13,18 @@ const Info = require('./components/info.js')
 const Chat = require('./components/chat.js')
 const Input = require('./components/input.js')
 
+jdenticon.config = {
+    lightness: {
+        color: [0.58, 0.73],
+        grayscale: [0.30, 0.90]
+    },
+    saturation: {
+        color: 0.67,
+        grayscale: 0.00
+    },
+    backColor: "#00000000"
+};
+
 let backend = new Matrix("user", "pass", "http://localhost")
 
 let App = create({

components/chat.js

@@ -9,7 +9,11 @@ let chat = create({
   render: function() {
     let tmpEvents = [
       {sender: "Foks", content: "Hello"},
-      {sender: "Foks", content: "This is Neo v4"}
+      {sender: "Foks", content: "This is Neo v4"},
+      {sender: "Foks", content: "Here are a bunch of test messages\nWithout Multiple\nLines\n:("},
+      {sender: "Foks", content: "Look at these nice colors"},
+      {sender: "Foks", content: "And the font"},
+      {sender: "Foks", content: "And the avatars"}
     ]
     let events = tmpEvents.map((event, id) => {
       return <Event event={event} key={id}/>
@@ -17,7 +21,7 @@ let chat = create({
     //TODO: replace with something that only renders events in view
     return <div className="chat">
       <div className="events">
-        Chat content
+        {events}
       </div>
     </div>
   }
@@ -25,11 +29,25 @@ let chat = create({
 
 let Event = create({
   displayName: "Event",
+
+  getInitialState: function() {
+    let color = ["red", "green", "yellow", "blue", "purple", "cyan"][Math.floor(Math.random()*6)]
+    //TODO: HTML Sanitize
+    // needs an unsafe html content set
+    let parsedBody = this.props.event.content.replace(/\n/g, "<br>")
+    return {
+      color: color,
+      parsedBody: parsedBody
+    }
+  },
+
   render: function() {
     return <div className="event">
-      <img id="avatar" src="https://placekitten.com/200/200"/>
-      <span id="content">{this.props.event.sender}</span>
-      <div id="content">{this.props.event.content}</div>
+      <svg id="avatar" data-jdenticon-value={this.props.event.sender}></svg>
+      <div className="body">
+        <div id="name" className={`fg-palet-${this.state.color}`}>{this.props.event.sender}</div>
+        <div id="content">{this.state.parsedBody}</div>
+      </div>
     </div>
   }
 })

components/sidebar.js

@@ -91,7 +91,7 @@ let RoomListItem = create({
     }
     console.log(className)
     return <div className={className} ref={this.setRef}>
-      <img id="avatar" src="https://placekitten.com/100/100"/>
+      <svg id="avatar" data-jdenticon-value={this.props.name}></svg>
       <span id="name">{this.props.name}</span>
     </div>
   }

public/scss/style.scss

@@ -6,7 +6,29 @@ $bg3: #888888;
 $bg4: #ebebeb;
 $bg5: #ffffff;
 
-$amber: #ff9000;
+$amber: #de935f;
+
+/*Old scheme
+$red:    #bd2929;
+$green:  #2dbd29;
+$yellow: #f0c674;
+$blue:   #81a2be;
+$purple: #b294bb;
+$cyan:   #8abeb7;*/
+/* dark
+$red: #a54242;
+$green: #8c9440;
+$yellow: #de935f;
+$blue: #5f819d;
+$purple: #85678f;
+$cyan: #5e8d87;
+*/
+$red: #cc6666;
+$green: #b5bd68;
+$yellow: #f0c674;
+$blue: #81a2be;
+$purple: #b294bb;
+$cyan: #8abeb7;
 
 $spacing: 0.7rem;
 
@@ -53,7 +75,7 @@ body {
   display: flex;
   flex-direction: column;
 
-  div:nth-child(2) { // Room list & Chat
+  & > div:nth-child(2) { // Room list & Chat
     flex: 1 1 auto;
     overflow-y: auto;
   }
@@ -89,7 +111,8 @@ body {
 
 .roomListItem {
   height: 2rem + 2* $spacing;
-  display: flex;
+  display: grid;
+  grid-template-columns: 2rem + 2*$spacing - 0.2rem auto;
   align-items: center;
   width: 100%;
   box-sizing: border-box;
@@ -150,17 +173,35 @@ body {
 
   .events {
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: column;
+    justify-content: flex-end;
+    min-height: 100%;
   }
 
   .event {
     flex: 0 0 auto;
     display: flex;
 
+    .body {
+      padding: $spacing;
+      padding-top: 0;
+    }
+
+    #name {
+      font-weight: bold;
+      font-family: "Roboto Bold";
+      margin-bottom: $spacing/2;
+    }
+
     #avatar {
       height: 3rem;
       width: 3rem;
       object-fit: cover;
+
+      box-sizing: border-box;
+      object-fit: cover;
+      border: 3px solid lighten($bg0, 10);
+      margin-bottom: $spacing;
     }
   }
 }
@@ -177,3 +218,27 @@ body {
     font-size: 1.2rem;
   }
 }
+
+.fg-palet-red {
+  color: $red;
+}
+
+.fg-palet-green {
+  color: $green;
+}
+
+.fg-palet-yellow {
+  color: $yellow;
+}
+
+.fg-palet-blue {
+  color: $blue;
+}
+
+.fg-palet-purple {
+  color: $purple;
+}
+
+.fg-palet-cyan {
+  color: $cyan;
+}