add more padding to room avatars, change border colors

public/scss/style.scss

@@ -184,7 +184,7 @@ body {
 
   .filter {
     border: none;
-    border-bottom: $borderwidth solid $bg;
+    border-bottom: $borderwidth solid transparent;
     width: 100%;
     box-sizing: border-box;
     padding: $spacing;
@@ -202,17 +202,17 @@ body {
 }
 
 .roomListItem {
-  height: 2rem + 2* $spacing;
+  height: 2rem + 3 * $spacing;
   display: grid;
-  grid-template-columns: 2rem + 2*$spacing - 0.2rem auto;
+  grid-template-columns: 2rem + 2.5*$spacing - 0.2rem auto;
   align-items: center;
   width: 100%;
   box-sizing: border-box;
   //border-bottom: 1px solid lighten($bg1, 3);
+  padding: 1/4 * $spacing;
   transition: 0.2s;
 
   &.active {
-
     #avatar, #name {
       transition: 0.2s;
     }
@@ -252,7 +252,7 @@ body {
   color: $accent;
   font-size: 1rem;
   font-weight: bold;
-  border-bottom: $borderwidth solid $bg;
+  border-bottom: $borderwidth solid transparent;
   box-sizing: border-box;
 }
 
@@ -304,8 +304,6 @@ body {
         }
 
         .body {
-          /* debug */
-          //border: 1px solid $red;
           padding: $spacing/4;
           padding-left: $spacing/2;
 
@@ -328,7 +326,7 @@ body {
 
 .input {
   display: flex;
-  border-top: $borderwidth solid $bg;
+  border-top: $borderwidth solid transparent;
 
   textarea {
     background: transparent;
@@ -346,6 +344,10 @@ body {
   }
 }
 
+.sidebar .filter, .info, .input {
+  border-color: $bg1;
+}
+
 .noselect {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;