From 43b5680e25f4c4e60bb4c71e5858287c5f2d7071 Mon Sep 17 00:00:00 2001
From: Graeme <gkillick@gmail.com>
Date: Wed, 30 Mar 2022 11:35:11 -0400
Subject: [PATCH] #33 styling chat

---
 src/components/chat/chatroom.css                       |  6 ++++--
 src/components/chat/chatroom.tsx                       | 10 ++++++----
 .../dashboard/MedicalView/PatientInfo/PatientInfo.tsx  |  1 -
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/chat/chatroom.css b/src/components/chat/chatroom.css
index d540e333..05f1b574 100644
--- a/src/components/chat/chatroom.css
+++ b/src/components/chat/chatroom.css
@@ -34,10 +34,12 @@
     outline: none;
 }
 .messages-container{
-    background: white;
-    border-radius: 20px;
     border-bottom-right-radius: 0px;
     border-bottom-left-radius: 0;
+    padding-left: 5px;
+    margin-right: -20px;
+    padding-right: 25px;
+    padding-top: 5px;
 }
 .send-message-button{
     position:absolute;
diff --git a/src/components/chat/chatroom.tsx b/src/components/chat/chatroom.tsx
index ceb4d321..81b71e6d 100644
--- a/src/components/chat/chatroom.tsx
+++ b/src/components/chat/chatroom.tsx
@@ -22,6 +22,7 @@ function ChatRoom(props: PatientData) {
   const [formValue, setFormValue] = useState('');
   const [messages, setMessages] = useState<Message[]>([]);
   const messageRef = useRef<HTMLInputElement>(null);
+  // ensure scrolls fast to bottom on load and smooth for new message
   const [messagesLoaded, setMessagesLoaded] = useState(0);
 
   // scroll messsages on send
@@ -138,11 +139,12 @@ function Chat(props: PatientData) {
       sx={{ maxHeight: 'calc(100vh - 136px)',
         overflowY: 'auto',
         display: 'flex',
-        flexDirection: 'column' }}
+        flexDirection: 'column',
+        background: 'white',
+        borderRadius: '20px',
+
+      }}
     >
-      <header>
-        <h3>Messages</h3>
-      </header>
 
       <ChatRoom {...props} />
 
diff --git a/src/components/dashboard/MedicalView/PatientInfo/PatientInfo.tsx b/src/components/dashboard/MedicalView/PatientInfo/PatientInfo.tsx
index f936543d..3812f99e 100644
--- a/src/components/dashboard/MedicalView/PatientInfo/PatientInfo.tsx
+++ b/src/components/dashboard/MedicalView/PatientInfo/PatientInfo.tsx
@@ -39,7 +39,6 @@ const listHeaderStyle = {
   backgroundColor: '#E6E6E6',
   color: 'black',
   fontWeight: 'bold',
-  marginTop: '16px',
 };
 
 const listStyle = {