#33 styling chat

KrisTheCanadian · Mar 30, 2022 · 43b5680 · 43b5680
1 parent e2ede01
commit 43b5680
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git 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
@@ -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
@@ -39,7 +39,6 @@ const listHeaderStyle = {
   backgroundColor: '#E6E6E6',
   color: 'black',
   fontWeight: 'bold',
-  marginTop: '16px',
 };
 
 const listStyle = {