#33 styling chat

KrisTheCanadian · Mar 29, 2022 · e2ede01 · e2ede01
1 parent 9b20a24
commit e2ede01
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 14 deletions.
diff --git a/src/components/chat/chatroom.css b/src/components/chat/chatroom.css
@@ -21,4 +21,30 @@
     display: flex;
     align-items: center;
     flex-direction: row-reverse;
-}
+}
+.message-input{
+    padding: 20px;
+    width: 100%;
+    border-radius: 20px;
+    border-top-right-radius: 0px;
+    border-top-left-radius: 0;
+    border: 1px solid transparent;
+    background: #ffffff;
+    border-top: 1px solid #e7e7e7;
+    outline: none;
+}
+.messages-container{
+    background: white;
+    border-radius: 20px;
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0;
+}
+.send-message-button{
+    position:absolute;
+    background: none;
+    right:3px;
+    top:15px;
+    color: #434ce6;
+    border:none;
+}
+
diff --git a/src/components/chat/chatroom.tsx b/src/components/chat/chatroom.tsx
@@ -100,7 +100,7 @@ function ChatRoom(props: PatientData) {
 
   return (
     <>
-      <Box sx={{ flex: 1, overflow: 'scroll' }}>
+      <Box className="messages-container" sx={{ flex: 1, overflow: 'scroll' }}>
         {messages && messages.map((msg, index) => {
           let showAvatar = true;
           if (messages[index - 1] && messages[index - 1].ownerID === msg.ownerID) {
@@ -113,25 +113,15 @@ function ChatRoom(props: PatientData) {
 
       <form onSubmit={sendMessage} style={{ position: 'relative' }}>
         <input
-          style={{ padding: '10px',
-            width: '100%',
-            borderRadius: '5px',
-            border: '1px solid gainsboro' }}
+          className="message-input"
           value={formValue}
           onChange={(e) => setFormValue(e.target.value)}
           placeholder="Type a message"
         />
         <button
           type="submit"
           disabled={!formValue}
-          style={{ position: 'absolute',
-            background: 'none',
-            border: 'none',
-            right: '3px',
-            top: '5px',
-            color: '#434ce6',
-
-          }}
+          className="send-message-button"
         >
           <SendIcon />