From 75df75caec934cfa50000e75a9282a1884c34f91 Mon Sep 17 00:00:00 2001
From: Morten Olsen <morten+pgp@olsen.pro>
Date: Wed, 9 Jun 2021 22:15:39 +0200
Subject: [PATCH] update

---
 index.html                    |  2 +-
 src/components/ComposeBar.tsx |  2 +-
 src/containers/Connected.tsx  | 10 +++++-----
 src/containers/Welcome.tsx    |  4 ----
 4 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 0f5013d..6fea24f 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
     <style>
-      body, html {
+      body, html, #root {
         height: 100%;
       }
 
diff --git a/src/components/ComposeBar.tsx b/src/components/ComposeBar.tsx
index 16cad17..33fcbff 100644
--- a/src/components/ComposeBar.tsx
+++ b/src/components/ComposeBar.tsx
@@ -24,7 +24,7 @@ const ComposeArea = styled.div`
 const Input = styled.input`
   flex: 1;
   border: none;
-  font-size: 16px;
+  font-size: 18px;
   height: 30px;
   background: #eee;
   padding: 0 10px;
diff --git a/src/containers/Connected.tsx b/src/containers/Connected.tsx
index a65b5f4..e4db71a 100644
--- a/src/containers/Connected.tsx
+++ b/src/containers/Connected.tsx
@@ -6,10 +6,6 @@ import ComposeMessage from '../types/ComposeMessage';
 import ComposeBar from '../components/ComposeBar';
 
 const Wrapper = styled.div`
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -20,6 +16,10 @@ const MessageList = styled.div`
   transform: scale(1, -1);
 `;
 
+const Loading = styled.div`
+  transform: scale(1, -1);
+`;
+
 
 const Connected: React.FC<{}> = () => {
   const { send, messages } = useConnection();
@@ -45,7 +45,7 @@ const Connected: React.FC<{}> = () => {
         {reverseMessages.map((message) => (message.content ? (
           <Message self={message.self} message={message.content} />
         ):(
-          <div>Loading</div>
+          <Loading>Loading {Math.round(message.current / message.length * 100)}%</Loading>
         )))}
       </MessageList>
       <ComposeBar onSend={onSend} message={currentMessage} setMessage={setCurrentMessage} />
diff --git a/src/containers/Welcome.tsx b/src/containers/Welcome.tsx
index f797c07..83d4fc5 100644
--- a/src/containers/Welcome.tsx
+++ b/src/containers/Welcome.tsx
@@ -6,10 +6,6 @@ import useConnection from '../hooks/useConnection';
 
 const Wrapper = styled.div`
   display: flex;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
   height: 100%;
   flex-direction: column;
 `;