diff --git a/components/sidebar.js b/components/sidebar.js
index 09ffe82..f910ad7 100644
--- a/components/sidebar.js
+++ b/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
{this.props.name}
diff --git a/public/scss/style.scss b/public/scss/style.scss
index 76b1325..86b4d92 100644
--- a/public/scss/style.scss
+++ b/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 {