sidebar active + unread styling

components/sidebar.js

@@ -65,7 +65,8 @@ let RoomListItem = create({
 
   getInitialState: function() {
     return {
-      filterName: this.props.name.toUpperCase()
+      filterName: this.props.name.toUpperCase(),
+      unread: Math.random() > 0.7
     }
   },
 
@@ -83,8 +84,12 @@ let RoomListItem = create({
     }
     let className = "roomListItem"
     if (this.props.active) {
-      className += " active";
+      className += " active"
     }
+    if (this.state.unread) {
+      className += " unread"
+    }
+    console.log(className)
     return <div className={className} ref={this.setRef}>
       <img id="avatar" src="https://placekitten.com/100/100"/>
       <span id="name">{this.props.name}</span>

public/scss/style.scss

@@ -6,6 +6,8 @@ $bg3: #888888;
 $bg4: #ebebeb;
 $bg5: #ffffff;
 
+$amber: #ff9000;
+
 $spacing: 0.7rem;
 
 @font-face {
@@ -83,31 +85,49 @@ body {
   div {
     cursor: pointer;
   }
-
-  div.active {
-    background: lighten($bg1, 5);
-  }
 }
 
 .roomListItem {
-  height: 1.5rem + 2* $spacing;
+  height: 2rem + 2* $spacing;
   display: flex;
   align-items: center;
   width: 100%;
   box-sizing: border-box;
   border-bottom: 1px solid lighten($bg1, 3);
 
+  &:hover {
+    background: $bg1;
+  }
+
+  &.active {
+    background: $bg1;
+
+    #avatar, #name {
+      transition: 0.2s;
+    }
+
+    #avatar {
+      border: 3px solid $amber;
+    }
+
+    #name {
+      color: $amber;
+      font-weight: bold;
+      font-family: "Roboto Mono Bold", monospace;
+    }
+  }
+
   #avatar {
     box-sizing: border-box;
-    height: 100%;
+    height: calc(100% - 6px);
     object-fit: cover;
-    padding: 0.2rem;
+    border: 3px solid lighten($bg0, 10);
+    border-radius: 0.4rem;
+    margin: 3px;
   }
 
   #name {
     font-size: 1rem;
-    font-weight: bold;
-    font-family: "Roboto Mono Bold", monospace;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -119,6 +139,9 @@ body {
 .info {
   background: $bg1;
   padding: $spacing;
+  color: $amber;
+  font-weight: bold;
+  font-family: "Roboto Mono Bold", monospace;
 }
 
 .chat {