From 8338eef381b224a6fa1abead2940e8732b63ba02 Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Mon, 10 Dec 2018 23:24:17 -0800
Subject: [PATCH] Implement improvements suggested by Ryan.

---
 static/scss/style.scss | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/static/scss/style.scss b/static/scss/style.scss
index 4a61728..bf26ce8 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -3,6 +3,8 @@ $primary-color: #53C0FA;
 $primary-color-highlight: #4298C7;
 $primary-color-light: #9FDBFB;
 $active-input-color: white;
+$background-color: #fafafa;
+$background-color-dark: darken($background-color, 4%);
 $transition-duration: .125s;
 
 $inactive-input-color: darken($active-input-color, 3%);
@@ -16,7 +18,7 @@ html, body {
 body {
     font-family: 'Open Sans', sans-serif;
     margin: 0px;
-    background-color: #fbfbfb;
+    background-color: $background-color;
 }
 
 @mixin input-common {
@@ -88,15 +90,9 @@ div.base-wrapper {
     height: 100%;
 
     div {
-        padding: 3px;
+        padding: 5px;
         box-sizing: border-box;
     }
-
-    h2 {
-        padding-bottom: 5px;
-        margin-bottom: 5px;
-        border-bottom: 1px solid $inactive-input-border-color;
-    }
 }
 
 /*
@@ -117,7 +113,7 @@ div.room-wrapper {
     flex-grow: 1;
     display: flex;
     height: 100%;
-    flex-direction: column;
+    flex-direction: column;  
 }
 
 /*
@@ -143,17 +139,32 @@ div.events-wrapper {
 }
 
 table.events-table {
+    border-collapse: collapse;
+    width: 100%;
+
     td {
-        padding-left: 5px;
+        padding: 5px;
         vertical-align: top;
     }
+
+    td:nth-child(1) {
+        width: 0px;
+        white-space: nowrap;
+    }
+
+    tr:nth-child(2n) {
+        background-color: $background-color-dark;
+    }
 }
 
 span.sender-wrapper {
     border-radius: 2px;
     padding-left: 5px;
     padding-right: 5px;
-    float: right;
+    display: inline-block;
+    box-sizing: border-box;
+    text-align: center;
+    width: 100%;
 }
 
 /**