From deb1d7863f22db7de870e39439900e73a7857315 Mon Sep 17 00:00:00 2001
From: f0x <f@0x52.eu>
Date: Fri, 18 Jan 2019 16:10:56 +0100
Subject: [PATCH] input component, style sizing

---
 app.js                 |  2 ++
 public/scss/style.scss | 25 ++++++++++++++++++-------
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/app.js b/app.js
index 2eb467a..b66fdac 100644
--- a/app.js
+++ b/app.js
@@ -10,6 +10,7 @@ const Sidebar = require('./components/sidebar.js')
 
 const Info = require('./components/info.js')
 const Chat = require('./components/chat.js')
+const Input = require('./components/input.js')
 
 let backend = new Matrix("user", "pass", "http://localhost")
 
@@ -23,6 +24,7 @@ let App = create({
         <div className="main">
           <Info />
           <Chat />
+          <Input />
         </div>
       </>
     )
diff --git a/public/scss/style.scss b/public/scss/style.scss
index fc14840..d13490b 100644
--- a/public/scss/style.scss
+++ b/public/scss/style.scss
@@ -13,6 +13,7 @@ html, body {
   padding: 0;
   background: $bg;
   color: white;
+  font-family: monospace;
 }
 
 body {
@@ -79,20 +80,21 @@ body {
 }
 
 .roomListItem {
+  $height: 1.5rem;
   #avatar {
-    line-height: 2rem;
-    height: 2rem;
-    width: 2rem;
+    line-height: $height;
+    height: $height;
+    width: $height;
     vertical-align: middle;
     object-fit: cover;
   }
 
   #name {
-    height: 2rem;
-    line-height: 2rem;
-    font-size: 1.2rem;
-    vertical-align: top;
+    height: $height;
+    line-height: $height;
+    vertical-align: middle;
     padding-left: $spacing;
+    font-size: 1rem;
   }
 }
 
@@ -108,4 +110,13 @@ body {
 
 .input {
   background: $bg1;
+  display: flex;
+
+  input {
+    background: transparent;
+    box-sizing: border-box;
+    flex: 1 1 auto;
+    padding: $spacing;
+    font-size: 1.2rem;
+  }
 }